Building Reactive Applications with Angular, RxJS and Socket.IO

This code-oriented talk will show how to use Socket.IO to stream data to an Angular application. It will cover websocket basics, RxJS and working observables, as well as how it all seamlessly fits into Angular’s data-binding.

We have been building client-server web applications using the same paradigms since bellbottoms, disco and IBM were popular. Everything since then has been a rehash of RPC and Request-Response, with JSON + REST being just the latest incarnation. We can do better. We now have the tools available to challenge those paradigms and build a new breed of application. Using reactive programming techniques and data streaming we can easily build rich, reactive web applications.

This code-oriented talk will show how to use Socket.IO to stream data to an Angular application. It will cover websocket basics, RxJS and working observables, as well as how it all seamlessly fits into Angular’s data-binding.

The demo for this talk will go through the building of a twitter wall as a part of the talk, streaming live tweets from the audience. It will use the twitter streaming api with Socket.IO to emit tweets to an angular front end using web sockets. It will then cover writing an explicit RxJS observer that will integrate with the Socket.IO client, and expose an observable service for the rest of the angular application. It will end off by working with the observable, and asynchronously binding it to the angular view – and show the tweets as they come in. I have given a variation of this talk at internal events, and it’s a really nice engaging demo. The only challenge is internet access, which I can provide – and whether there is data coming in which I can simulate by using different twitter data.