ReactFoo Delhi

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

• Github: https://github.com/s-yadav
• Twitter: https://twitter.com/_syadav
• LinkedIn: https://www.linkedin.com/in/yadavsudhanshu/
• Recent talks
• Breaking the Monolithic Front-end (A HackerRank’s case study): https://www.youtube.com/watch?v=fV1Y19VFwGE&t=22s
• Hacking JavasScript: https://docs.google.com/presentation/d/1RSfrjEQJRJqVR5JQETERxQMYPcJ1no3XY2cCfsyYi5s/edit?usp=sharing
• Mapping a Class Component to a Functional Component with hooks: https://slides.com/sudhanshuyadav/deck
• Evolution of async patterns: https://docs.google.com/presentation/d/1IDTIjy9BeDL6yb_whg9Z99NfrPTt7ZGefWwiRppyaJg/edit?usp=sharing

Slides

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