Vincenzo Ferrari, ibuildings: Real-time web applications

Nowadays the need to have real-time web applications is growing up more and more, especially when users need to get updated immediately. ExtJS provides a top-notch user experience for the interface and Node.js has a powerful integration with backend systems: just one language to develop the entire stack, from the database management to the data presentation. We will present a case study of a web real-time application mainly composed by ExtJS 5 for the web interface, Node.js for the backend integration and Redis to scale the application with websockets.

Transcript

1. Real-time Web Applications improving the user experience with ExtJS and Node.js
2. Goal •Understand what is a real-time web application •List available technologies •See our proposed solution in detail
3. Introduction
4. your European technology advisor
5. About Ibuildings Since 1999 Ibuildings has been the European Technology Advisor for the Open Source solutions, with the offices in the Netherlands and Italy. Ibuildings designs and builds solid internet architectures, web and mobile applications. Thanks to a group of more than 80 passionate specialists and over 15 years of experience Ibuildings is expert in delivering complex, high performance, scalable and specific mission-critical applications and solutions. Ibuildings is partner of Sencha for Italy and The Nederlands More than 50 active projects with Sencha technologies
6. Who is using Sencha
7. Vincenzo (Wilk) Ferrari •Software Engineer •Fullstack Web Developer •Open Source Supporter •vincenzo@ibuildings.it •@__wilky__ •https://github.com/wilk
8. Overview Real-time Web Applications
9. What is it? A real-time web application let the user interacting and working with data updated immediately from other sources. The user sensation is to handle real data, coming from the server, continuously updated and real. Web means that the application is built to be served for browsers, both mobile and desktop.
10. Examples Real-time web applications can be useful in certain fields: •Chatting/IM •VoIP/Video calls •Gaming •Notifications •Transactions
11. Implementation There are two kinds of implementation: •Pull technology •Push technology Pull technology consists in polling the source of information with a given time-slice interval. Push technology let the source of information to update the target with new data.
12. Implementation – Web standards On the Web the situation is as following: •Pull technology → Ajax polling or SSE •Push technology → WebSocket The first one is actually a work-around while the second one is the right best to do it.
13. Our implementation We needed to create a notification system for a large used web application. One of the requirements was not to overload the server with HTTP requests, so we opted for WebSocket. We used a set of technologies, frameworks and libraries, like Node.js, ExtJS, Socket.io and Redis.
14. Infrastructure Real-time Web Applications
15. Toolkit
16. ExtJS We choose ExtJS 5 to handle client-side logics and rendering. ExtJS has great widgets, like grids and charts, rich and highly configurable. In version 5 was introduced the MVVM pattern that allows to tear down development costs and times by using the two- way data-binding feature.
17. Node.js For the backend logics we chose Node.js, the Javascript server-side platform. Node.js is an asynchronous platform, with an I/O non- blocking event-driven model, first time released in 2009, built on Google Chrome V8 engine. It has a powerful package manager called NPM that holds hundreds thousands of frameworks and libraries, like web servers, database drivers, task runners, networking tools, etc.
18. MongoDB MongoDB was used to store data. MongoDB is a non-relational no-SQL database, fully integrated with Node.js. It has several drivers and libraries for Node.js.
19. Socket.io The communication between client and server was built with socket.io. Socket.io is a library that implements HTML5 WebSocket both on client and server side. It's stable and it has great features, like rooms, healthy- connection check, cross-platform and cross-browser integration. It's event-driven and it is used by many companies around the world.
20. Redis Scaling was solved with Redis. Redis is an open source advanced key-value cache storage. Complex object can be stored with a key and it supports queue pattern (publisher/subscriber). It has a great integration with Socket.io.
21. Make it working! Real-time Web Applications
22. Backend The server-side is built on Node.js, using the following libraries and frameworks: •ExpressJS: web framework inspired by Sinatra (Ruby), that has a powerful HTTP handling with its middleware architecture •Set of custom middlewares: to extend Express •Mongoose: MongoDB library that simplify the I/O DB interaction via a handy ODM •Socket.io: the websocket backend library •Socket.io-redis: Redis adapter to scale socket.io
23. NPM Dependencies Following the Node.js dependencies handled by NPM (package.json manifest): •express@4.12.4 •socket.io@1.3.5 •socket.io-redis@0.1.4 •config@1.13.0 •body-parser@1.12.4 •jwt-simple@0.3.0 •mongoose@4.0.3 •bunyan@1.3.6
24. Configurations Backend configurations are handled with config package:
25. Express Configuration Express is used as primary web server that has attached the socket.io websocket server.
26. Socket.io Configuration Socket.io has an instance attached to the Express application server:
27. Frontend The client-side is built using the following libraries and frameworks: •ExtJS: powerful web framework •Socket.io: the websocket frontend library
28. ExtJS Setup The notifications list is wrapped into a data view (Ext.data.View), built using MVVM, as an isolated component. The list has an entry point where the websocket is initializiated:
29. Conclusion Real-time Web Applications
30. Conclusion Building real-time web applications increases the user experience, especially when the data needs to get updated instantaneously. Making beautiful applications can be done by following these suggestions: •Push technology (websocket) over pull technology (ajax polling) •Node.js + Socket.io on the backend •ExtJS + Socket.io on the frontend •MongoDB for data storage •Redis for scaling