Sunday, 5 March, 2017 UTC
Summary
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 (GDE) 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
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 1o mins to setup everything.
Let’s have a look now at the step that I performed:
npm install -g angular-cli //to setup an angular-application
npm install -g horizon
ng new AngularOnHorizon && cd AngularOnHorizon && hz init && npm install && npm install @horizon/client --save
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:
404: Not Found
Inport your service in the module ( app.module.ts):
404: Not Found
And finally in your component (app.component.ts):
404: Not Found
Now it’s time to run horizon and angular:
404: Not Found
angular-app
(I refreshed the browser to show that it’s not mock data )
And opening the horizon interface we can see:
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
The post Angular and Horizon for realtime application appeared first on Angular and Javascript blog.