ember-routing-statechart-example icon indicating copy to clipboard operation
ember-routing-statechart-example copied to clipboard

Example for fat-client ember application with routing and statechart

Quick Notes - Ember.js Example Application

Quick Notes is a small example to showcase some of the capabilities of sproutcore-statechart and sproutcore-routing in Ember.js

View online: Quick Notes Application

Concepts Covered

  • Ember.js application structure and clean separation of layers (MVC)
  • Statechart with hierarchical and concurrent states
  • Paging with public and restricted areas
  • Authentication with async login overlay

Statechart Specification

This image shows the rough specification of the application as UML state-diagram:

Statechart Specification of Quick Notes

For Non-Rails Developers

You find the JavaScript application written in CoffeeScript in the app/assets/javascripts folder. If you wonder about the '#= require x/y/z' statements -> these are precompile 'include' statements for Sprockets in Rails and are not included in the resulting JavaScript code base.

If you don't use rails, you should.

Credits

  • Thanks to Michael Cohen (aka. FrozenCanuck) for creating the super awesome sproutcore-statechart framework!
  • Quick Notes was designed and built by Dominik Guzei
  • Logo designed by Double-J Design