Angular and Javascript blog

Angular and Horizon for realtime application

Sharing is caring!

I’ve always been fascinated by realtime data but at the same time scared about the quantity of code that you need to write to achieve that result:

  • Front-end
  • Back-end
  • Socket
  • Database

One of the best solutions to have realtime applications is  Firebase, it does really a lot and for hobbyists it is free as well. However every time that I had a chat with other companies they were sceptical because you need to host data ( that generally are not of the company but of the client) on the cloud and it is really hard sometimes to convince the client to do that.

Few days ago I posted the question on twitter and Wassim (@manekinekko) replied with another magical name: Horizon.

Maybe you’re a bit confused on what I’m talking about so have a look at this gif to understand exactly on what I’m referring to:

live_demo

live_demo

On the left side the angular application and on the right one the dbadmin where 3 queries have been executed to delete the fields on the data. As you can see, the angular application reflects the changes without refreshing the browser! It’s magic right? It’s like a dream.

Now the most sceptical will say:”oh yes how much code did you write to achieve this result?”

And here the best reply: Almost nothing!

I installed Horizon, I created a service and I saw the application up and running! Although I’m a newbie with that tool  and I spent 10 mins to setup everything.

Let’s have a look now at the step that I performed:

Let’s  create the service to connect to our db. In our project folder you need to run:

ng g service horizon

Angular cli will generate  a new service called horizon.service.ts (and the test as well).

Open with your editor the service and replace the content with that:

Inport your service in the module ( app.module.ts):

And finally in your component (app.component.ts):

Now it’s time to run horizon and angular:

angular-app

angular-app

(I refreshed the browser to show that it’s not mock data 🙂 )

And opening the horizon interface we can see:

rethinkdb

rethinkdb

The complete source code is available on my personal github (https://github.com/daniele-zurico/angular-horizon):

If you enjoyed this post follow me on twitter @Dzurico

Resources:

  • https://cli.angular.io/
  • http://horizon.io/docs/getting-started/
  • https://rethinkdb.com
  • https://github.com/otodockal/angular-on-horizon

Post A Comment