Speaker

Nikhil Sharma

Nikhil Sharma

Software Engineer at Postman

Actions

Nikhil is a Software Engineer at Postman, based out of Bangalore working on Postman on the web, Postman's desktop platform, and Postman's design system. He is super excited about React, and its internals. He loves to talk about design systems and performance in general. He is super passionate about sharing his experience and learnings mostly via LinkedIn and Twitter. He is a blogger at medium and an open-source enthusiast.

Let's talk performance (for the 18th time)!

Upgraded to React 18 but don’t know how to utilize its capabilities to the best to boost the performance of your React apps? Wanna master the techniques to optimize the performance of your apps using the latest React v18? Join Nikhil in this talk where he dives deep into some of the key techniques/best practices to supercharge your react apps with concepts like concurrent rendering, server components, enhanced server-side rendering, server components, and data fetching with the magic of Suspense and so much more, in a super simple and fun way!

This session is tailored to dive deep into some of the prime features and best practices of React 18 to supercharge the performance of the React apps

Key takeaways and talk structure

1. We kick things off with a jaw-dropping demonstration of a Twitter dashboard app created with React 17, setting the stage for what you already know.

2. A quick graphical representation of React’s rendering process with React 17 and how it bottlenecks with long tasks. But fear not, as we unveil the revolutionary solution - Concurrent Mode. Discover how React 18 can "interrupt" its rendering process, prioritizing essential tasks. It's like watching a magic show; we'll reveal how concurrent rendering conjures a background skeleton of your React components, making them "ready-to-render" faster than ever before.

3. The story doesn't end there. We'll delve into the issue of the infamous "waterfall model" in React 17, only to introduce the knight in shining armor - Suspense. Bid farewell to a multitude of loading states, as we demonstrate how Suspense streamlines your apps.

4. But there's more! We'll unveil how you can leverage Suspense to eliminate SSR bottlenecks, rendering parts of server code that once caused delays in React 17 - it's like watching a caterpillar transform into a butterfly.

5. Hold your breath, because we're taking it a step further. Have you ever dreamt of shipping "0 JavaScript" with Server Components? We'll make that dream a reality.

6. Ever wondered about giving non-urgent updates the right treatment? Get ready for the revelation of the useTransition hook. We'll also clear the air on the common question: "How is this different from debouncing or setTimeout?"

7. But the climax of our journey will be a dazzling final demo of the Twitter dashboard app, now equipped with all these superpowers, comparing the performance between the two apps.

Wait...React is multi-threaded?

We already know, "if some task takes time, promisify it!". But some tasks can be computation heavy and can take time to complete, so making them async is of no use since those have to be anyway get picked. Solution? Simple, multithreading! Yeah I know that React and in turn javascript is single-threaded but what if I told you that our life was a lie ever since? Enter web workers!

The web is single-threaded. This makes it increasingly hard to write smooth and responsive apps. Workers have a bad rep, but can be an important and useful tool in any web developer’s toolbelt for these kinds of problems. Let’s get up to speed on Workers on the Web!

This talk would dive into how we encounter some real-world scenarios with React like a search feature, and how web workers come to our rescue by helping us do intensive work in parallel, without blocking the main thread. We will also see how it relates to the brand new "Concurrent mode" feature, all of this with the fun of examples, Sounds interesting right? The talk reveals it all!

Key takeaways of the talk

1. An example of a simple product search showing why async js or concurrent mode cannot work

2. Demystifying web workers

3. How do they make this magic happen under the hood?

4. The Question of life - Aren't they the same as concurrent mode?

5. Comparing the same Product list app using web workers, diving deep into the performance

6. How one can easily misuse web workers and how to avoid it

Running react apps on steroids with signals

Yes, building performant apps is hard and time-consuming! Who has time to think about prop-drilling, and minimizing re-renders of state updates? But what if I told you that it's all possible with just one line of code? What if all your performance-related knowledge was a lie? Let's uncover this mystery by optimizing React apps using the magic of signals!

An epic tale of rendering UX

Server-side rendering has been one of the oldest techniques to render our code on the server and produce an HTML on the page, which helped in improving initial page loads, and overcoming a few shortcomings of client-side rendering. But it's just a "mirage" on performance since the users still have to wait for JS to load. Plus, SSR is only limited to the first-page load. I know, not much we can do, right? What if you could get plenty more like 0 js bundle size, automatic code splitting and no client-server waterfalls! 😱😱😱
Let's uncover this mystery with Server components!

This talk aims to cover the following points:-

1. A fun story of how we needed CSR and how SSR started to take its place

2. What are server components and what benefits do they bring

3. Brief overview of how they make this magic happen

4. Demo of a simple app using client-side rendering, SSR, and server components and analyzing the performance gains and understanding when to use what

5. My take on how rendering UI will change with this approach

The state of rendering in React in 2024: Journey from the stone age to the GenZ

Imagine your app as a race car! CSR gets you in the game, but SSR supercharges your acceleration. And now, the grand finale – Server Components, the rocket fuel that propels your app into the future! Join me in this talk as we explore the evolution from Client-Side Rendering (CSR) to Server-Side Rendering (SSR), with some advanced patterns like selective hydration and finally, the cutting-edge realm of Server Components. Discover when, why, and how to transition between these techniques for optimal performance and user experiences.

Key takeaways and talk structure

1. Trace the evolution of web rendering techniques, from the inception of Client Side Rendering to the challenges it posed. We will dive into the storyline of different rendering patterns like CSR, SSR, SSG, and ISR, with the help of a comic storyline, uncovering the needs and the challenges they put, and how the successive paradigms fixed them, also highlighting the learnings we made over these years and why the transitions have been important and why this history is relevant for the future apps we build.

2. Following our story, we will reach the finale, realizing why the need for rendering code in the server came up, how we enhanced the SSR techniques towards selective hydration and streaming data, and introduce you to the game-changing concept of Server Components and the revolutionary benefits they bring.

3. Dive deep into the mechanics, demystifying how Server Components work their magic.

4. Finally, we’ll share a thrilling demonstration—a journey from client-side rendering to SSR, culminating in the awe-inspiring Server Component experience. Witness the tangible performance gains and learn when to wield each technique for maximum impact.

5. "With great power comes great responsibility". We will also discuss how the core web vitals can be impacted by all of these strategies and when "not" to use one over the other. The talk aims to build a solid understanding of the different rendering patterns for the audience.

6. A quick recap of the talk towards the end with a bunch of scenarios for the audience to answer as a quiz.

Lets build a metaverse together!

It’s finally happening! Step into a world where React becomes your gateway to building the metaverse! In think talk Nikhil will create a metaverse live on stage with the magic of react-three-fibers, diving deep into the basic concepts of rendering 3D graphics, optimising performances and common fps bottlenecks, and debugging like a pro, all using live coding!

Crafting a custom state management library using hooks

We immediately turn to state management libraries like redux, Zustand, or Mobx every time we build an app but they come with their own set of tradeoffs like more code complexity, bundle size addition, and many more. So do we need them every time? “Hook” up to that thought and join Nikhil in this talk where he will create a state management library using hooks from scratch, helping us understand react hooks and state management in depth, tailor it to our needs, and understand the trade-offs.

Animating React with finesse!

Animations are the heartbeat of captivating web experiences but wield them carelessly, and the enchantment fades into frustration. Join Nikhil on an exhilarating journey as he reveals the secrets to crafting mesmerizing, high-performance animations in your React apps.

In this dynamic talk, Nikhil delves deep into the world of animation, dissecting the common bottlenecks that threaten your app's responsiveness. Learn how to identify, debug, and eliminate these performance roadblocks, ensuring your animations are as snappy as they are spellbinding.

Nikhil Sharma

Software Engineer at Postman

Actions

Please note that Sessionize is not responsible for the accuracy or validity of the data provided by speakers. If you suspect this profile to be fake or spam, please let us know.

Jump to top