Understand and Utilize the Async Pipe in Angular 2

UPDATE: Check out the video version of this article, Using the Async Pipe in Angular 2, at Egghead.io!

With the release of Angular 2 Beta last month, the team declared the next generation of AngularJS ready for large applications. As a developer, the time is now to start acquiring an understanding of the new API, patterns, and features. One such exciting new feature is the async pipe, which allows the auto update of component templates through emitted observable events and resolved promises. This can not only provide a reduction in code but also assist in facilitating exciting new data flow and state management patterns and architecture, coupled with performance optimization. Furthermore, an understanding of how this feature was implemented can demystify the process and help inspire new ideas. Let’s dive in and learn how to put the new async pipe to use in our Angular 2 applications!
Continue reading…

ES6 Modules By Example

As a frontend developer your world is now being expressed as ES6 modules. Whether you are using React, Angular 2, Ember, or another forward thinking library or framework an understanding of the ES6 module system is crucial. With a grasp on basic module syntax, tools like Webpack, Browserify, or SystemJS can take your development and build process workflow to the next level. Let’s dive in and explore the most common use cases for the import and export of ES6 modules.
Continue reading…

Redux Middleware: Behind the Scenes

Redux is an exciting new JavaScript library by Dan Abramov designed to simplify state management in JavaScript applications. Redux middleware is an important Redux feature providing a “third-party extension point between dispatching an action, and the moment it reaches the store”. Simply put, it let’s us jump in the middle of all dispatched Redux actions, providing anything from simple logging to exception handling to properly processing asynchronous actions. If a dispatched action is the starting line and the application store is the final destination, middleware is the traffic cop(s) along the path ensuring each action is properly vetted.
Continue reading…

Optimize your Ionic Testing with Wallaby.js, Bard.js, and WebStorm

Coming from a .NET background one tool I sorely missed when switching primarily to JavaScript was NCrunch, the continuous testing extension for Visual Studio. While Webstorm’s support for Karma is top notch, nothing beats being able to witness instantly, parallel to your code, when a test passes or fails. This increased visibility not only makes development and refactoring a breeze, it also offers the side benefit of not so subtly encouraging you when your test coverage is lacking.

With this in mind, I was extremely excited to hear about Wallaby.js, a continuous test runner plugin for Webstorm and the JetBrains line of code editors (more to come!). Similar to NCrunch, Wallaby gives you instantaneous test feedback within your development environment. For TDD, BDD, or anyone who tests their code in any capacity, this article will show you how to get up and running with Wallaby.js and Webstorm, using an Ionic framework application as an example. We will also discuss using Bard.js, an Angular testing helper library written by Ward Bell, to make your Angular tests much easier to write and maintain.
Continue reading…

Build a Hybrid Application with the Ionic Framework and Azure Mobile Services, Part 3: Wiring Up The Backend

In Part 2 of this series I discussed how to set up our mobile user interface with Ionic and we prepared our Angular controllers and views to accept data from our Azure Mobile Service backend. In this article, we are going to create our Azure Mobile Service, publish it to the cloud, and start sending and receiving real data from within our Ionic application. Without further ado, let’s get started!
Continue reading…