Saturday 29 March 2014

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.