One Day of ReactJS

ReactDay Berlin was an event bringing together 800 React developers from all over the globe, 24+ speakers with talks on 2 different tracks.
With a mix of in-depth-talks, hands-on workshops, the conference showed the high level of interest and activity in the ReactJS universe.

We attended the conference with our team and want to share some of our impressions here with you. The conference website provides an overview of the talks. All talks were also streamed live to the web and are available on the ReactDay youtube channel.

CSS in JS

The keynote, held by Max Stoiber, one of the co-creators of styled components, presenting not only the history of the different packages that have been created, but also giving a detailed view into the use of the styled-components package. Since v2, released in 2017, the developers delivered massive performance boosts, just recently released v5, which is fully hooks-powered. By using React hooks, there is less component nesting and much cleaner React DevTools.

The main idea behind styled-components (and other packages) is to write actual CSS in your Javascript. This allows you to use all features of CSS, but extends your possibilities. You can interpolate a function into your css template, which gets passed the props of the component, allowing you to create very dynamic CSS.

Also Max encouraged people to join the efforts in the opensource community, and shared his experience on how to create an open source project:

- make it work, make it right, then make it fast
- Share early, share often
- Document all the things

Performance Anxiety with React

Jessica Leach of FutureLearn presented a whole collection of great tools that make the everyday life of a react developer easier, more efficient and productive. With this great overview of tools and possibilities to analyse and solve performance issues in your react apps.
For sure something we are already using, and will investigate deeper in our daily work when building react applications:

- Why did you update (https://github.com/maicki/why-did-you-update) notifies you in the console if you have unnecessary re-renders in your application
- React Profiler (https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) which helps you to collect timing information about each component to identify performance bottlenecks in React applications
- use of `ShouldComponentUpdate` hook to avoid updating, when no re-render is needed
- use Pure components (https://medium.com/better-programming/working-with-react-pure-components-166ded26ae48)
- optimize using memoization, e.g. the `usememo` hook (https://reactjs.org/docs/hooks-reference.html#usememo) and `useCallback` (https://reactjs.org/docs/hooks-reference.html#usecallback) which returns a memoized callback
- if you need to render large datasets, react-window(https://github.com/bvaughn/react-window) helps you to improve performance by only rendering part of a large dataset, also react-virtualized(https://github.com/bvaughn/react-virtualized) might be worth a look
- in order to make sure that your webpack bundle only contains the stuff you need, take a look at webpack bundle analyzer (https://github.com/webpack-contrib/webpack-bundle-analyzer)
- although still in experimental stage, the suspense for data fetching (https://reactjs.org/docs/concurrent-mode-suspense.html) of react adds a Suspense component which lets you “wait” for some code to load and specify a loading state, e.g. a spinner while you’re waiting.

Strong RESTful contracts in a GraphQL world

Tejas Kumar of contiamo GmbH gave a very inspiring talk about the disadvantages of a RESTful world. From his point of view Graphql provides benefits over RESTful contracts, summarized by the following four points about RESTful:

- it is not a formal specification
- it often requires guessing (types, fields)
- can lead to long, meaningless discussions
- no contractual agreements are in place when using RESTful

However, establishing graphql in companies can be difficult, so they created the package restful-react which is a wrapper around the fetch API to provide a better developer experience when building react apps which interact with a RESTful API. Definitely worth checking out.

other takeaways

There have been many more interesting talks, so check out the videos, the above only presents a selection of interesting topics.
In general, the react community is very alive, with constant improvements to the ecosystem and for sure a frontend framework of choice when it comes to build modular and scalable frontend applications.

about kotaicode

We are a software company specializing in the development of scalable web applications, cloud and data science. We love to build fullstack web applications using go, ruby on rails, python and react, we build infrastructure using docker & kubernetes. If you are passionate about building software products, feel free to reach out to us: kotaico.de
If you’re planing to introduce docker or kubernetes, and are looking for training: checkout our workshops