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
   

   View Slide

2. Goal
   •Understand what is a real-time web application
   •List available technologies
   •See our proposed solution in detail
   

   View Slide

3. Introduction
   

   View Slide

4. your European technology advisor
   

   View Slide

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
   

   View Slide

6. Who is using Sencha
   

   View Slide

7. Vincenzo (Wilk) Ferrari
   •Software Engineer
   •Fullstack Web Developer
   •Open Source Supporter
   •vincenzo@ibuildings.it
   •@__wilky__
   •https://github.com/wilk
   

   View Slide

8. Overview
   Real-time Web Applications
   

   View Slide

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.
   

   View Slide

10. Examples
    Real-time web applications can be useful in certain fields:
    •Chatting/IM
    •VoIP/Video calls
    •Gaming
    •Notifications
    •Transactions
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

14. Infrastructure
    Real-time Web Applications
    

    View Slide

15. Toolkit
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

21. Make it working!
    Real-time Web Applications
    

    View Slide

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
    

    View Slide

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
    

    View Slide

24. Configurations
    Backend configurations are handled with config package:
    

    View Slide

25. Express Configuration
    Express is used as primary web server that has attached the
    socket.io websocket server.
    

    View Slide

26. Socket.io Configuration
    Socket.io has an instance attached to the Express
    application server:
    

    View Slide

27. Frontend
    The client-side is built using the following libraries and
    frameworks:
    •ExtJS: powerful web framework
    •Socket.io: the websocket frontend library
    

    View Slide

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:
    

    View Slide

29. Conclusion
    Real-time Web Applications
    

    View Slide

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
    

    View Slide

31. View Slide