Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vincenzo Ferrari, ibuildings: Real-time web applications

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.

Lee Boonstra

June 08, 2015

More Decks by Lee Boonstra

Other Decks in Technology


  1. Goal •Understand what is a real-time web application •List available

    technologies •See our proposed solution in detail
  2. 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
  3. 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.
  4. Examples Real-time web applications can be useful in certain fields:

    •Chatting/IM •VoIP/Video calls •Gaming •Notifications •Transactions
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. 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
  14. Express Configuration Express is used as primary web server that

    has attached the socket.io websocket server.
  15. Frontend The client-side is built using the following libraries and

    frameworks: •ExtJS: powerful web framework •Socket.io: the websocket frontend library
  16. 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:
  17. 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