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!

  • Matt Speller

    This is perfect for what I was looking for. However the repo needed some work to compile with react 15.4 but in general it was well done. The sockets.io server to client piece doesn’t work out of the box but I got there in the end. Thank you for sharing this with us all.

  • CIIT Noida

    This article is very helpfull.

    Hadoop Training Institute in Noida

  • CIIT Noida

    Keep on posting these types of articles. I like your blog design as well.
    Best B.Tech College in Noida

  • tiara tech

    This article has covered so many topics that are helpful for mobile app development,
    visitmobile-app-development for more new ideas, we are thankful for this article.

  • james mmoore

    I am among the writers and also-also, the editor, related to Writers Help UK took into consideration that a year. My Land site is simply among the leading argumentation help options. suppliers in all UK cities, namely John Griffith Chaney, Aberdeen, Glasgow, Leeds, Birmingham and so forth. real estate builder

  • james mmoore

    Good to be visiting your blog website once again. it has really been months for me. Well, this short article that I have in fact been waited for as long. I require this short article to complete my work at the university. as well as also it has the exact same subject with your post. apartment real estate

  • james mmoore

    A successful blog will have content written with the audience in mind and provide beneficial and valuable information. If you can really connect and help with a problem or issue that your reader can relate to, he or she will continue to come back to read more. business taxpayers

  • Paul Ambler

    I as of late ran over your internet site and likewise have really read along. I believed I would certainly leave my initial remark. I don’t understand what to assert with the exception of that I have really delighted in reading. Great blog site. garage door installation

css.php