npm.io
1.0.0-alpha.1 • Published 9 years ago

spa-engine

Licence
MIT
Version
1.0.0-alpha.1
Deps
0
Vulns
0
Weekly
0
SummaryDependencyVersions

Single Page Application Exercise

A simple Single Page Application engine.

Features and advantages of this project

  • Unit tests.
  • History management using the History API
  • ES6 syntax

Am I missing some essential feature?

  • Show a loading bar while the content is being loaded.
  • Avoid SPA for links that have the "data-no-spa" data attribute.

Getting Started

Prerequisites

A running server is required for this library to work properly, it's really simple to create following the steps bellow:

  1. Install http-server:
$ npm install -g http-server
  1. Run the server:
$ http-serve
Installing

NPM package:

$ npm install --save spa-engine@1.0.0-alpha.0

Yarn:

$ yarn add spa-engine@1.0.0-alpha.0

Otherwise with cdn:

Usage
  • The library can be imported as import spa-engine from 'spa-engine' or require('spa-engine').
  • Can be accessed through global variable Engine when included through script tag.

Example:

const engine = new Engine({
  routes: ['/', '*.html', '/site/*'],
  enabled: true,
});

Running tests

  • npm test: run your tests in a single-run mode.
  • npm run test:tdd: run and keep watching your test files.
  • npm run test:coverage: prints coverage.

Linting

  • npm run lint: lint all files searching for errors.

Roadmap

A rough roadmap can be found on Trello

Library Architecture

The diagram bellow provides a general understanding of how the library is designed: LIbrary Architecture

  • Engine - the core interface of the library - decides if the page should refresh through the parameters sent.
  • RouteComparator - a helper feature to compare the current URL of the web page with the routes attribute.
  • RequestHandler: cares about necessary behaviors when SPA is active like handling ajax calls and reloading.
  • HttpService: a wrapper class to XMLHttpRequest to make use of ajax requests more easily.
  • PartialView: responsible for the rendering of new contents after that a navigation was made.
  • HistoryManagement: uses History API to manage the state of the pages.

Stack

  • mocha
  • chai
  • sinon
  • jsdom
  • webpack

Authors

  • Erick Bogarin - Initial work

Keywords

spajstddlibrary