It's been just over a year since I covered developments in the altseven framework. Since then, the framework has gone through a number of revisions and upgrades in functionality. Rather than cover all the updates individually, I've decided to write a multi-part series on the framework to cover how it works as of version 6.0.0, which is currently in beta.

When I set out to write altseven, I was really just experimenting with a way to build Web apps using React-style views, but without the need to use JSX or to run the code through a compilation process. As I added features onto the framework, I decided to use it to build a fully-fledged web app that I could use as a means to test and adjust new features for the framework to meet the concrete needs of a real-world application. And so I built the livesandbox Web based JavaScript IDE, which is now is v 0.12.0 and working towards a 1.0.0 release as a production-ready mutli-user application.

 

Structure of an altseven Application

Like other client-side JavaScript frameworks, an altseven application starts with an HTML page that is used to import the JavaScript application code. Unlike React, altseven does not enforce a single root HTML node per application, so the served HTML page may contain any number of HTML elements that can be used as root nodes for different parts of the application. In practice, this design means that you can deliver the base HTML structure of an application as static HTML that renders immediately when the HTML page is received by the browser. This initial render helps alleviate some of the issues with React-based applications that has led to server-side rendering of initial applications using React.

In addition to the base HTML markup, the initial HTML page should contain the import for the altseven application code. Here is the import of the sample test Template Literals application in the altseven repository:

<script type="module">

    import {application} from './app.tl.js';

    var app = application();

</script>

 

As you can see, altseven uses ES6 modules for its application structure. This initial import pulls in the application and executes it. Let's look at the basic structure of the application inside app.tl.js. For the sake of simplicity, I have removed the bulk of the code to highlight the overall structure of the application:

import {a7} from '/dist/a7.js';

var app = {

};

export var application = function init() {

  var options = {};

  var p = new Promise(function(resolve, reject) {
    a7.init(options, resolve, reject);
  });
  p.then(function(state) {
    app.main.init(state);
    a7.log.info("App init.");
  });
  p['catch'](function(message) {
    console.log(message);
  });

  return app;
};

 

The import of the altseven framework sets up the application initialization. Next, the app variable will contain the bulk of you application code. In the sample app, All of the client-side application code is contained inline within this variable. As you will see if you look at the livesandbox source code, in a larger application, you can extract the application code into individual files, import those files in this page, then reference the imports in this app variable to define the application.

Next, the init function sets up the options and initialization of the altseven framework. Lastly, in order to execute the application, you call the a7.init() method inside a Promise, and once the promise is resolved, you call the entry point method for your application, in this case app.main.init().

Starting with the next part in this series, I will discuss the modules of the altseven framework- how they work and how you use them in your application.