ReactFoo Delhi

On React, performance and front-end engineering

Tickets

Brahmos.js - React without VDOM

Submitted by Sudhanshu Yadav (@sudhanshuyadav) on Tuesday, 16 July 2019


Preview video

Section: Full talk (40 mins) Technical level: Intermediate Duration: 20 mins crisp talk

View proposal in schedule

Abstract

React has a great declarative API and is quite fast for render and updates. But the performance can be improved further with a new rendering pattern inspired by lit-html and hyper-html. This talk will introduce a new JavaScript Library Brahmos which has a faster rendering pattern than VDOM but implement that with same well adopted React’s declarative API.

The talk will cover the idea behind the Brahmos, what Brahmos is trying to achieve, compare it with different libraries and compare the rendering pattern of Brahmos with React’s VDOM to explain how it can be a faster alternative to VDOM.
I will also present the current progress and future path for the Brahmos.

Outline

The Idea. Why Brahmos?

  • How did it start?
  • Improvement on React library itself?
  • Use lit-html as templating engine?
  • What it is trying to achieve?

How does it work?

  • How react rendering works?
  • How Brahmos optimizes it?
  • How does rendering work on Brahmos?

Working Example

  • Todo MVC built with Brahmos (Demo)
  • Writing Components in Brahmos

Current state

  • Available React API
  • Pending features

Future path

  • How progressively Brahmos will be developed.
  • Maintaining the developer experience.
  • 3rd Party React component support.

Speaker bio

Sudhanshu work as Front-end Architect at HackerRank. He has a love for frontend and anything in JS. In HackerRank he is involved in system design, building infra, mentoring peoples and improving the frontend platform and team as a whole.
He is also an active open source contributor who likes building UI, modules, and tools and have open sourced few of them with 5.7M+ downloads on npm and 3.7 K stars on github.
He likes talking about JavaScript, React, performance, frontend tools, architecture and patterns.

Links

Slides

https://docs.google.com/presentation/d/1a1Oi5dVP884gGOKtTiFJiz70KIEUmHvAvL8Xta8tVKc/edit?usp=sharing

Preview video

https://youtu.be/aDQpEBtuZqg

Comments

  • Zainab Bawa (@zainabbawa) Reviewer 12 days ago

    Hello Sudhanshu,

    Thank you for an excellent rehearsal last evening. Recapping the points of feedback here:

    1. On slide number 5 where you show how React Nodes work, add an animation or add legends to show the complexity of how the nodes work.
    2. On the statistics slide, add references for participants who want to refer to your slides after the conference.
    3. Check for typos on the slides.
    4. Can you show how a sample app works with Brahmos and compare this with how the Brahmos app works in comparison with a regular app?
    5. Can you move Brahmos into an independent Github repo which can get folks to contribute?
    6. Use gender neutral language throughout the presentation, for example, ‘folks’ instead of ‘guys’.

    Update the link to your revised slides by 6 November so that we can do a final review.

  • Raghavendra Satish Peri (@artofvision) 6 days ago

    Hello,
    At hasgeek events we are trying to make our events accessible for people with disabilities. To achieve our goal is to first get the content of presentations accessible. Here is some guidance to make the presentations accessible. Please use these fonts & size so that even able body people can see the content in the auditorium during presentation.

    Fonts and Font Size
    Because they are the easiest to read, only use Sans Serif fonts, such as Arial and Verdana. Since a PowerPoint presentation will most likely be projected onto a large screen consider how far the audience will be from the screen and choose a font size accordingly. The minimum font size for a PowerPoint presentation should be 24 points.

    For more accessibility info on making presentations accessible use the following link
    https://www.framingham.edu/Assets/uploads/about-fsu/accessibility/_documents/7-steps-accessible-ppt.pdf

Login with Twitter or Google to leave a comment