I recently attended React Conf hosted in Henderson, Nevada. The conference was very well put up at The Westin Lake Las Vegas and had this veryyy amazing view.
The conference started keynote by people who were working on the React Core team at Facebook. The very first keynote was “React today and tomorrow” where they talked about popularity of React – how npm downloads are going up and installation of chrome react dev tools are increasing!
React.lazy was announced recently. React.lazy helps to lazy load the components (components let you split the UI into independent reusable pieces and think about each piece in isolation) without breaking the internet!
To build great UIs using React, a few common factors are generally considered:-
-Suspense – Simplifying hard things, Idea about data fetching, code splitting, async data dependencies.
-Performance – Time Slicing, making sure that important components are rendered first.
-Developer tooling – for developers to debug and understand their app for example, by providing developer friendly warnings
They also talked about the downside of React such as:-
-Reusing logic – the logic is split across different life cycles, classes, which are apparently difficult both for humans and machines.
These are not separate problems but symptoms of one problem and the problem is react does not provide simple light weight stateful primitive simpler than a class component.
The sessions also talked about Declarative Animation, a declarative API – Pose which seemed really cool to implement. To differentiate a Declarative and Imperative code could be somewhat understood as:-
Declarative code is quite descriptive, it’s often an abstraction. In Imperative code understanding what something is doing is same as understanding what something is doing, step by step logic. If you want to make any contribution towards an imperative codebase, you would need to understand how different components are wired up.
Sooo. What’s new in v2?
-Support for PostCSS, previously there was only autoprefixer, which wouldn’t compile new CSS features but now you could use modern CSS features without worrying about legacy browser support.
-Added Babel Macros – Can be used to import graphQL files which in turn could be transformed for Apollo to consume at runtime. Can use relay Modern, it will run the relay compiler against GraphQL files. Import MDX as a JSX component and can be run in the application.
-Sass support and CSS Modules and a lot more! – https://reactjs.org/blog/2018/10/01/create-react-app-v2.html
Day 2 of React Conf, started with talking about how performance is integral to UX. Code Splitting, a concept were instead of sending the whole code in the initial payload, we send what’s needed to render the first screen and later, lazily loading the rest based on subsequent navigation. A most common problem while implementing code splitting can be ‘what do you display to the user if the view hasn’t finished loading?’ Maybe a spinner, loader, placeholder…?? But lot of these degrades the UX. Then came Concurrent React into the picture, Concurrent React can work on multiple tasks at a time and switch between them according to priority. Concurrent React can partially render a tree without committing the result and does not block the main thread.
Two major components of Concurrent React.
Let’s consider a scenario in Synchronous React, if any user event triggers in between the execution of the existing thread, it will wait for the rendering to get completed in a single uninterrupted block. Whereas, in Concurrent React, React is going to pause the current render, switch to complete the user blocking task and resume. So basically, Concurrent React is non blocking, so you can render large amount of data without getting blocked.
Later, learnt about SVG in my favorite talk! –https://twitter.com/UrvikaGola/status/1055878157830504448.
i.e Scalable Vector Graphics Instruction on how to draw an image in a markup file.
but…why use SVG?
Scalable – Scales from small to big without loss of fidelity.
Vector based image – File size is smaller as compared to others.
Modifiable – Change with CSS and JS.
In React world, to use SVG inline can be done by:-
-Importing as a react component. (No HTTP requests cos you are not calling the image)
– Convert to JSX (No HTTP requests as well but difficult to update the SVG design)
Apart from all the technical learning there were outdoor activities like paddle boarding organized for conference attendees, board games, lawn games & karaoke etccc!
In the end, a big Thanks to React Conf Team and Facebook for the opportunity – learnt a lot about React, met some great developers and explored a new State! 🙂