AngularFire ignites rapid application development

Minimise the overhead of building a new software is a key factor for innovation. When you have an idea in your mind, you want to spend less time as possible setting up and configuring your selected tech stack, but rather focus on creating value and bringing your idea to life. This is one of the challenges we faced during the second Hack Day my company organised, where we all gather in the office and spend one day hacking on projects benefiting our community by creating shared value.

Serverless and backendless applications

One day to create a functional application, that's already a challenge. It doesn't even give us the time to think about which tech stack should we use, Java or Rails? Argue which data store would fit our need, SQL or NoSQL? And not even mentioning where and how should the application be deployed.
All these questions don't required to be answered when taking advantage of backend-as-a-service solutions, a new way of cloud hosting your data.

Most of the web applications have basic CRUD requirements and authentication. So why wasting time re-writing again and again all this boilerplate code setting up an application server and storing your users in a database when all this can come for free?

AngularFire wiring up Firebase to your AngularJS application

A few options already exist in the no-backend sphere: deployd, noBackend, Firebase to list some of them. Having previous experience with AngularJS, the Hack Day team chose to have a crack at AngularFire.

A few steps to enable AngularFire
Along with creating your AngularJS application, create a Firebase object hosting the reference to you backend endpoint. You first need to create a Firebase account and use your own endpoint.

Firebase supports authentication using various providers. The following implementation authenticates users using Google accounts and saves the user details in Firebase.
And finally the links to login/logout actions

The next step is to implement a simple CRUD operation. The Firebase plus AngularJS combination enables the powerful 3-way-data-binding feature where backend updates are synchronized with all the client views.

The following code snippet demonstrates how to create, list and remove a simple object with a text field.
Create topic view
List and delete topics view

Data stored on Firebase are by default visible and editable by everyone. Security rules have to be added to limit access of users only to relevant data. This is configured via the Firebase UI defining rules in JSON format.
The Firebase documentation gives a few examples about how to setup permissions and gives some real life complex scenarios.

As the application is made only of static assets (HTML, JavaScript and CSS), there is no need to have an application server. A freshly created website can be hosted on Firebase hosting service or Github pages.

Hack Day Project: Collaborative Retro App (aka CRApp)

Pretty much all the retros are just post-it notes on a white-board, with a photo taken at the end and a couple of actions loosely noted. Retrospectives aren't nerdy enough. We need to add some technology.

Despite the one-day time constraint, the team achieved to have a functional application where people can use their mobile to create retro notes which are displayed in real time on the retro dashboard. People can them vote on topics and log actions against them.

The code source of the Hack Day project can be found on Github.
And a demo is available on Github pages.

Server Sent Events with Rails 4 and AngularJS

It is a common requirement in modern web applications to have the client view responding to server events. By doing so, end users can be notified in real-time of any relevant state or data update. Supporting push notifications in your web applications is a way of making them more interactive, respond better to server events, and ultimately deliver an improved user experience.

Pushing notifications to the browser can easily be achieved by streaming JSON data to the client. An HTTP connection is kept open between the server and the browser and on reception of events, the web page is updated to reflect the change.

Streaming JSON data has become easier than ever using Rails 4 and its ActionController::Live. Coupling that with AngularJS ability to react to events, you get a very simple way of handling Server Sent Events in your web application.

Lets say we want to display a subset of the share market prices updated periodically where new values will be "pushed" by the server to the browser in a JSON format. Using a push mechanism is this scenario will keep the user informed as soon as market prices are updated.

In this example, we will simulate data update by generating new market values every 5 seconds, storing them in a database and streaming the new data to the client.
1. Generate a Rails controller including ActionController:Live and returning event-stream content type
2. Use the method response.stream.write to push data to the client
3. Generate new market prices and a price variation indicator (up or down) in JSON format

For reference, the model looks like
4. On the client side we now use AngularJS to open a stream with the server and process events.
HTML Markup: AngularJS Controller
On page load, the EventSource object opens a stream with the server and on each message received, AngularJS is notified to apply those changes to the model and view.

The next version of Rails (4.1) will provide a ActionController::Live::SSE which would reduce even more the amount of effort needed to stream events.

Example source code on Github