March 05, 2017
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:
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:
[caption id="attachment_7210" align="aligncenter" width="640"] live_demo[/caption]
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:
[caption id="attachment_7199" align="aligncenter" width="480"] angular-app[/caption]
(I refreshed the browser to show that it's not mock data :) )
And opening the horizon interface we can see:
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