Think Big

AngularJS SF Meetup

Bigcommerce's hosted the February Angular SF Meetup and our Front-End Engineer, Alex Taylor gave the talk: "Unidirectional data flow in Angular 1.x apps" (9.5/10 for that name)

Meetup Picture


So why is managing application state hard?

Alex mentions two pain points: Data flow and Code Organization

Data Flow

MVC architecture in large applications can become difficult to reason about. Tracking back problems or adding new features to the existing flow is often complicated. Alex suggests using Flux.

Flux has been popularized by React, but that doesn't mean we can't use it in Angular. It gives us an application architecture based around unidirectional data flow.

He also mentioned that what he really enjoys about writing React apps is the architecture, not just the templating. So why not bring the same architecture to our Angular apps.


Code Organization

Angular services need supporting architecture or guidelines around their use. Maybe we shouldn't throw everything into the services folder.

This is how the folder structure would look like in normal Angular (left) vs Flux architecture (right).
Folder Structure

Instead of just having one /services folder for our common Angular services, we have multiple folders with clearly defined meaning. If you want to add some new functionality to your application you know exactly where to put it.

Example:

Keep track of new state? => That's definitely going to be under stores/
Need a helper function? => Can you guess? Yes, is that obvious utils/


Existing options of Flux implementations for Angular 1.x

  • flux-angular
  • ng-flux
  • ng-redux

"Flux is simply a pattern that you can incorporate on your own." - Author of ng-flux.

tl'dr: You don't need them.


Demos and Q&A

Alex continued his talk with some demos showcasing two chat application written in Angular,
one using Redux and one using Alt. You should definitely check them out in the video.


Video


Slides