Real Time Trader Desktop with React, Node.js, and Socket.io

The virtual DOM is one of the key characteristics of React. When you render a component, React creates a lightweight description of the UI, diffs it with the previous version, and generates a minimal set of changes to apply to the DOM. That diffing algorithm is very fast, making React particularly well suited for apps with a lot of UI changes.

That prompted me to revisit a type of application I’ve built in the past with different languages and frameworks: a trader desktop showing real time market data updates. This new version uses React for the client-side and Socket.io to push simulated market data updates to the client.

The App

Inspecting Browser Repaints

In the Chrome Dev Tools, check Show paint rectangles and Show FPS meter to inspect the DOM updates and the frame rate.

The video below shows that, when a stock update comes in, only the minimum number of elements are being repainted: the “Last value” cell, the “Change” cell, and (only if applicable) the “High” or “Low” cells.

Installing the Socket.io Version

The version running in this page uses a mock push service. To install the full Socket.io implementation:

  1. Download and unzip the project zip file or clone this repository
  2. Open a command prompt and navigate to the application directory
    cd react-trader
    
  3. Install the dependencies
    npm install
    
  4. Run the server
    node server
    
  5. Run the application. Open a browser and access the following URL:
    http://localhost:3000
  • santiliaudat

    This is really nice .. excellent app!

  • Amazing!

  • the information is play the blessing role for my recent project.

  • VINAY

    Its a nice example and it seems things can be achieved without plugins.
    However I am confused, how many JS frameworks one have to learn to build next generation apps.

    It will be helpful for newbies like me to have some article on selection of right JS frameworks. There are so many frameworks currently and its a headache to learn all of them.

  • This is very really nice apps how you make it ?..
    excellent app!

  • This is why we give thanks for Nye Bevan and the NHS, medical treatment free at the point of consumption.

  • is it possible to get longlat info in different coordinates system

  • I can see that the researcher is an expert in the field of speciality

  • lav

    How to use/ get udp data and display in web page.

  • Thanks for the tutorial..

  • very amazing

  • excellent bro!

  • steve

    Great job. Is there a video explaining the detailed development of the software?

  • hoanvo

    Great tutorial… Thank you a lot!

  • Pingback: Getting Started with React Javascript()

  • Rich Brown

    Yes, this was very helpful. It solved a problem for me (http://stackoverflow.com/questions/37358285/need-advice-on-redux-and-server-side-updates) and contributed to my new sense of how to start a React application (http://richb-hanover.com/getting-started-with-react-javascript/) Thank you!

  • Rajan Yadav

    Sir Many May Thanks! From Heart Its Works & I Have Do It After 3 Years Thanks Thanks Thanks!

  • Seunghun Sunmoon Yi

    wow thank you, such an interesting project!

css.php