Getting Started

Getting started with the alt-seven framework.

1: Simple Example

This page covers your first steps with the alt-seven framework.

Prerequisites

Alt-seven is a client-side JavaScript framework. It runs in the context of a web browser, and typically- though not necessarily- runs on the Internet in the context of a web application served by a web server such as NGINX, IIS, or Apache Web Server.

Installation

The simplest method to install alt-seven is via npm.

$ npm install alt-seven

You can also download alt-seven from GitHub:

https://github.com/shoestringlab/altseven

Setup

Depending on how you installed alt-seven, you will need to reference it from your root HTML file in your project.

If you installed via npm, the framework will be located at: node_modules/altseven from the project root.
If you downloaded via git clone, the framework will be located in the /dist folder of the cloned alt-seven project.
If you downloaded an archive from GitHub, the framework will be located in the /dist folder inside the archive.

In the case of downloading via npm, you may want to create an alias that you use to reference the location of altseven.

For example, in a Node.js application using Express, you may set up a client-side reference like so:

`app.use( "/lib/altseven", express.static( 'node_modules/altseven' ) );`

Try it out!

1 - Simple Example

Example code for a very simple alt-seven application.

This page shows code for a very simple alt-seven application.

index.html

<!doctype html>
<html>
<head>
	<title>alt-7 example</title>
	<script type="module">
		import {application} from './app.js';
		var app = application();
	</script>
</head>
<body>
	<div name="main">
	
	</div>
</body>
</html>

app.js

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

var app = {
  main: (function() {
    return {
      init: function(state) {

        // render the hello page
        app.components.Hello( { id: 'hello', selector: "div[name='main']" } );

      }
    };
  })(),
  components: (function() {

    function Hello(props) {
      var hello = a7.components.Constructor(a7.components.View, [props], true);

      hello.state = {
        text: " World!"
      };

      hello.template = function(){
        return `<h3>Hello ${hello.state.text}</h3>`;
      };

      return hello;
    }

    return {
      Hello: Hello
    };

  })()
};

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();
    a7.log.info("App init.");
  });
  p['catch'](function(message) {
    console.log(message);
  });

  return app;
};