The WVA Blog

Weave Todo
A simple, stateful todo app
by The Weave Team on August 22, 2016

Facebook is nothing if not intuitive. It was the first website my grandparents learned how to navigate. Every time you like a post, update your status, or get a notification Facebook lets you know without making you refresh the page. So what’s going on under the hood? React is a JavaScript library written by Facebook to address the issue of building user interfaces with frequently changing data. Simply put, React manages any UI updates, and knows to only update the changed part of a page or application.

The most popular architecture used when designing web applications has been the model-view-controller (MVC). You use the controller, and your view updates accordingly. On the back end, the controller manages the model, or state, and updates the view. React primarily represents the view of the system.

React was designed to keep its state management simple. Although convenient for small scale projects, this can quickly become unmanageable for large scale web applications. In order to gain more flexible control of the state/model, developers implement Flux or use Redux.

Flux is an architecture concept that was also designed by Facebook to eliminate the ambiguity of classic MVC web application architecture. Flux clearly states update paths for an application’s data. These explicit update paths make tracking changes and bug fixes easier, and keep the application working properly. With Flux, a dispatcher sends actions (driven by user interactions or API) to a state/store, and updates the view. The dispatcher prevents cascading effects by ensuring that one action is entered into the store at a time, and a new action cannot be entered until it is finished. Information cannot go two ways – all information within this model flows in one direction. Using the Flux model improves data consistency, and shortens the iteration cycle for quality control.

Redux is a simple, high performance implementation of Flux. With Redux, the store listens directly for actions, a new app state is returned with every dispatched action, the entire application’s state is in one place, and the app’s state is unchanging. For developers, Redux is a simple implementation of the flux architecture.

Redux is one implementation of how to manage changes in the state. WeaveJS is implemented one level above Redux: Weave is a state manager that the user can interface with. Weave is more flexible and expressive than Redux. Weave is a framework that handles how the dispatcher, store and reducer behave, reducing the lines of code that needs to be written, freeing up time for the developer.

We built a simple todo app to demonstrate this framework in action. This web application allows users to add tasks to their todo list, and toggle between complete and incomplete. Weave’s state management keeps everything organized properly when you have a team contributing to the todo list. Without Weave’s state management, if two individuals on different systems post a task at the same time you could have a situation where the both tasks are not added to the list when the page is refreshed. Although this is a relatively simple problem, it scales with the complexity of the application. We’ll have a new post next week on the benefits of a unidirectional data flow when building a chat app with Weave.

Developers can find a more detailed technical breakdown here.

In addition to cleaner code, WeaveJS also provides the benefits of a full data framework, and state history. Weave allows you to build linked, interactive data visualization tools. In our todo list example, one could link the todo list to a line chart and plot when tasks were generated and when they were completed. Building custom interactions, like data-driven drill down, is easy and intuitive. Weave provides coordinated, scoped views including tabbed, windowed, and paned layout options, and gives the client full authorial control, allowing the user to share, publish, edit, and view visualizations. Our simple todo app can be extended and customized in many ways.

The source for our Todo App is available here. If you’d like to try Weave, download for free here.

Weave Todo: Code Review
A Deeper Technical Dive with WeaveJS

Post Coming Soon!

Weave Chat
Complex state management, made easy with WeaveJS

Post Coming Soon!

Weave 2
A data-driven, enterprise visualization and analytics tool, powered by WeaveJS

Post Coming Soon!