Concepts

ES Modules

Alt-seven uses the ECMAScript standard for module imports. Familiarize yourself with how to structure individual modules for export and how to import them into another module.

Configuration Options

Alt-seven offers many application level configuration options that are specified when the application is initialized. As you can see in the simple example, no options are required, so you can pass options = {};, or you can specify any number of options on initialization that affects how the application functions.

Configuring Your Application

Template Literals

Template literals are a key concept in ES6 for building web applications. They are string literals delimited by backticks (`) that allow you to create multi-line templates. See the documentation on template literals at the Mozilla Developer Network.

Template literals allow a developer to build complex HTML displays without resorting to third-party extensions like JSX. One of the initial questions during the development of alt-seven was whether event attributes could be embedded in the template literals and become part of the active application. The answer was that event attributes would not generate event listeners, so something else needed to be done, and that something is to use the data- attribute notation to add event attributes that can be parsed and used to generate event listeners once the HTML is generated.

In the example below, alt-seven sees the data-onclick attributes, parses them, and adds event listeners for them. In this case, the view component is called gallery and it has a section called gallery.eventHandlers that contains the event handlers listed in the template literal. In this way, the developer can specify dynamic interactivity that happens as HTML is generated on the fly in the application.

Note that for the sake of legacy application porting, alt-seven also include support for Mustache and Handlebars as templating libraries.

`
<div>
  <img id="galleryImage" data-zoomable="true" src="/assets/img/` + state.images[state.currentIndex] + `">
</div>

<div id="galleryNavBar" class="slidecontainer,inline">
  <input type="range" min="0" max="` + (state.images.length - 1) + `" 
  value="` + state.currentIndex + `" class="slider" id="gallerySlider" data-onchange="changeImage">
</div>
<div class="galleryNav">
  <span data-onclick="decrementIndex"><i data-feather="arrow-left"></i></span>
  ` + (parseInt( state.currentIndex, 10 ) + 1 ) + ` of ` + state.images.length + `
  <span data-onclick="incrementIndex"><i data-feather="arrow-right"></i></span>
</div>		
`

  gallery.eventHandlers = {
		changeImage: function( event ){
			gallery.setState( Object.assign( gallery.getState(), { currentIndex: event.target.value }));
		},
		decrementIndex: function( event, x ){
			let value = (x === undefined ? 1 : x );
			let state = gallery.getState();
			gallery.setState( Object.assign( state, { currentIndex: Math.max( 0, state.currentIndex - value ) } ));
		},
		incrementIndex: function( event, x ){
			let value = (x === undefined ? 1 : x );
			let state = gallery.getState();
			gallery.setState( Object.assign( state, { currentIndex: Math.min( state.images.length-1, state.currentIndex + value ) } ));
		}
	};

Events

Alt-seven uses events to control program flow. Naming of events is left up to the programmer, but a standard convention is to organize events by area of the application. For example, all events related to users might be contained inside the “user.” space. In a given view, clicking links may call events that then call other components to carry out the intended actions.

  a7.events.subscribe( "user.confirm", function( obj ){
    // code to confirm the user account
  });

  a7.events.subscribe( "user.profile", function( obj ){
    // code to retrieve and display the user profile
  });

  // called in a view
  a7.events.publish( "user.profile", { userID: user.userID } );

URL Routes

Alt-seven includes a URL router to allow bookmarking and browser history inside your application. Routes are mapped to events and can be specified in a single file.

Here is an example of route mapping:

export var routes = [
	[ '/comment/showform', 'comment.showForm' ],
	[ '/', 'main.home' ]
];

Routes can then be called from anywhere in the application. Routes may also pass an arbitrary data structure as parameters to be passed to the event mapped to the route.

	// simple opening of a route
	a7.router.open( "/" );

	// pass a parameter to the event
	a7.router.open( "/comment/showForm", { message: "Say something..." });