❤
npm
Sign UpSign In

websemble

7.0.3 • Public • Published

websemble

Desktop application MVC framework

it offers the following features:

  • Based on web technology. Built on top of Electron
  • File system storage service with a REST API
  • Web component support
  • i18n support with i18next
  • View template support with Handlebars

Installation

cd myproject
npm install websemble

Getting started

First let's create a view to display, the Index view.

mkdir -p frontend/component/view/Index

In the index folder create a Controller.js file and a View.html file. The content should be:

function IndexController( view, scope ){
 this.super( view, scope );
}
 
module.exports = IndexController;
<template class="main">
 <h1>Hello World!</h1>
</template>
 
<script>
   (function(window, document, undefined) {
     require( "websemble" ).frontend.createComponent( 'view-index' );
   })(window, document);
</script> 

Next we will create the App component.

mkdir -p frontend/component/core/App

As with the view component, we have to create a Controller and a View file for the App.

function AppController( view, scope ){
  this.super( view, scope );
  scope.resolveAppReady();
}
 
module.exports = AppController;

The resoleveAppReady funtion call lets the other components know that the app has finished initializing. You may want to call this method after assets are loaded, for example.

<template class="main">
  <view-index></view-index>
</template>
 
<script>
    (function(window, document, undefined) {
      require( "websemble" ).frontend.createComponent( 'core-app' );
    })(window, document);
</script> 

Next create the app.js file in the root with the following content:

var Websemble = require('websemble');
var app = new Websemble.backend.App();

Make sure that the value for the main attribute in the package.json configuration file is "app.js".

The last file we need to create is the index.html in the root.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>websemble</title>
    <link rel="import" href="frontend/component/core/App/View.html" />
    <link rel="import" href="frontend/component/view/Index/View.html" />
    <style>
      core-app {
        display:block;
      }
    </style> 
  </head>
  <body>
    <core-app></core-app>
  </body>
</html>

You will need electron to run your application:

npm install electron-prebuilt

To run your application, just type:

./node_modules/.bin/electron .

Dig deeper

We have developed a very handy tool to generate boiler plate code for your websemble application. Checkout the Yeoman websemble generator.

For information about the motivation and architecture behind websemble, have a look at the project's wiki.

To learn about making desktop applications with html5, head to the Electron website. This is the framework on top of which websemble is built.

/websemble/

    Package Sidebar

    Install

    npm i websemble

    Repository

    github.com/cybersettler/websemble

    Homepage

    github.com/cybersettler/websemble#readme

    Weekly Downloads

    53

    Version

    7.0.3

    License

    Apache-2.0

    Unpacked Size

    74.9 kB

    Total Files

    32

    Last publish

    Collaborators

    • cybersettler
    Try on RunKit
    Report malware