A better way to build Ember.js apps

ember-statecharts provides an easy way to use statecharts in Ember.js applications


                        ember install ember-statecharts

Architect Behavior

Complex user flows? No problem.

Modeling complex user flows with a visual language based on states and events has proven itself to be an efficient method to develop complex reactive applications. Modeling with statecharts allows you to visualize your application's behavior and simplifies communication with the rest of your team.

Architect robust applications

Model application behavior that cannot break

With ember-statecharts you model how your application and its components behave explicitly. These models can be interpreted and executed by ember-statecharts and make it impossible to trigger invalid application behavior.

Model behavior explicitly

Instead of relying on implicit states that you manage by setting properties on your objects, you will model your behavior as a set of explicit states that handle events.

Create Apps that don't break

Because behavior is only executed when a given state understands an event that is being received it is impossible to trigger invalid or unexpected application behavior.

Refactor and refine with confidence

Application flows modeled with statecharts are easy to change without the risk of breaking existing behavior.

Document behavior

Statecharts can be visualized - you are automatically documenting the existing behavior of all parts of your app that you model with them.

Identify missing requirements

Because you make use of a visual language that describes behavior it gets very easy to identify what is missing in requirement specifications.

Collaborate with other stakeholders

Statecharts make it possible to collaborate with non-technical stakeholders who have a much easier time thinking in states and events than they have understanding code.

The first page of David Harel's statechart paper

The behavior of a reactive system is really the set of allowed sequences of input and output events, conditions, and actions (...) Statecharts provide one possible fitting formalism for specifying reactive behavior.

David Harel

Statecharts: A Visual Formalism for Complex Systems, 1986

Learn

Helpful Resources

Statecharts have proven themselves to be a valuable tool to model complex reactive systems for other parts of the software engineering industry. Getting to know a new technique to model your Ember.js applications explicitly based on and statecharts can feel like a daunting task though - here are some resources to help you get started.

Tutorial

Read the Getting Started guide

ember-statecharts' tutorial will get you up to speed quickly. The tutorial walks you through how you can implement an async button component from scratch. You will learn how to model behavior explicitly based on the requirements you get and how to use that model to implement an AsyncButton component.

XState Documentation

A deep dive into XState

Everything that ember-statecharts is doing is powered by the wonderful library. The XState guides provide extensive documentation about how to write statechart configurations - please make use of this invaluable resource.

Blog

Constructing robust Ember.js UIs with Statecharts

This post on the effective ember blog shows you how to build a complex feature with ember-statecharts from scratch. The post starts out with explicitly modeling the behavior of a typeahead component and ends with the implementation of a Glimmer component that uses the modeled behavior via ember-statecharts' useMachine -usable.