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…

Build a Hybrid Application with the Ionic Framework and Azure Mobile Services, Part 2: Creating the User Interface

In part one of this series I discussed how to get up and running with an Ionic project. We configured our basic shell project, reconfigured our code to a more modern style, and prepared our user interface for a real implementation. In part two we will complete our user interface in preparation for wiring up our Azure Mobile Service backend in part three. Without further ado, let’s get started!
Continue reading…

Build a Hybrid Application with the Ionic Framework and Azure Mobile Services, Part 1: Configuring the Project

As HTML5 and mobile technology has matured the line between native and hybrid apps has become increasingly blurred. Excluding games, the performance hit which historically plagued hybrid applications is now miniscule. At this time, the deciding factor for whether to build a native or hybrid application has become the technology stack and skill set of you or your team. As a front-end web developer, the time has never been better to transition your skills into mobile application development!
Continue reading…

Angular ‘Controller As’ Communication Utilizing Services

For the past few years the primary means of communication between Angular controllers was to $broadcast events while your controllers listened by using $on handlers. While this certainly works, more and more (and more) Angular experts are moving away from $scope and utilizing Angular’s ‘Controller As’ syntax. With this syntax, we generally do away with injecting scope into our controllers, forcing better design practices, including using services to take over communication between controllers. While this may come off as strange at first if you are used to pub-sub or parent-child techniques, in the end it results in much thinner, more maintainable controllers and reusable services. In this post I am going to describe one technique for establishing controller communication using an Angular service as a mediator.
Continue reading…