A new era of modern JavaScript frameworks has taken the web by storm - and the developers at SpatialDev are taking notice.

Just two years ago, our developers got together and decided that AngularJS would be our preferred JavaScript framework of choice. At the time, many in the open-source community saw AngularJS as the go to web framework of the future. At SpatialDev, we were big fans of AngularJS controllers, two-way data binding, and built-in support for remote HTTP server communication.

Fast forward two years and numerous applications later, we were able to have a similar post-mortem style meeting about AngularJS pitfalls, the latest Javascript frameworks, and progressive web applications.

Here are a few notes of AngularJS:
• Despite the huge backing from the open-source community, the official documentation, as well as runtime errors had a frustrating level of ambiguity
• No official pattern for router & state management
• Poor ng-repeat performance with large collections
• Lack of official project scaffolding tools

We decided it was time to move on. Two frameworks stuck out the most: the new Angular (v2+) and Vue.js.

Vue.js

Vue.js, created by Evan You, is an incredibly fast, easy to set-up progressive user interface framework with the versatility to build apps at any scale. Teamed with its core plugins Vuex, and Vue Router, Vue.js has many of the tools to power modern Single Page Applications. Check out vue-awesome for a curated list of Vue.js resource, dev tools, utilities, ui components and much more.

Angular (v2+)

Angular is a platform built to provide end-to-end tools to enhance the web developer experience. This new all-encompassing framework was built with Typescript, a Javascript superset created by Microsoft. Google, creator of Angular, has done a magnificent job creating a modern toolkit built to support all phases of the web development lifecycle.

Some additional development tools:
• Angular CLI - scaffolding tool to get your project started from scratch. Makes end to end and unit test execution easy
• Augury - chrome extension to assist component debugging & profiling
• Mobile Toolkit – set of tools and fundamentals to develop progressive web mobile applications with service workers for offline use
• Reactive Extensions for Javascript (RxJS) - Web applications are no longer static. Reactive Extensions for Javascript (RxJS) is a new, event-driven paradigm created to support complex, data-intense asynchronous applications. With RxJS’s Observable object, you’re able to subscribe to multiple asynchronous data streams – and get notifications whenever an event has occurred.

NgRx

NgRx is a RxJS powered suite of libraries built to handle state management in Angular applications. This system, inspired by Redux, has a few core principles:

• Application state is the single source of truth & is stored in an object tree
• The state object is immutable. Components and services never directly change the application state; instead, “the only way to change the state is to emit an action, an object describing what happened” (http://redux.js.org/docs/introduction/ThreePrinciples.html#state-is-read-only
• These said actions are passed to pure functions, called reducers, that take the previous state & the next action to compute the new state
• Application state is accessed via the Store, an Observable of the application state and its actions

As mentioned earlier, state management in large applications is key. NgRx makes state management fluent and direct. We believe that together, these frameworks and libraries make for the ideal collection of tools needed to build web applications of the future.

We’ve already stared to leverage Vue, Angular, RxJS, and NgRx in some very exciting projects. Stay tuned to learn more about these projects, as well as exciting new technologies and processes used every day here at SpatialDev.