React Live conference, Amsterdam, 2019

Friday 13th 2019, I attended a JavaScript conference about React Web and React Native. The venue was located in Theater Amsterdam, which is a lovely place with a beautiful screen. There were about 800 people, mainly male and mainly quite young.

It’s funny to see that the average age on an average Java-conference is significantly higher. Maybe that is because many developers choose to stay in their original tool stack during their career, resulting in a relatively younger crowd of modern JavaScript developers at a conference like this?

The topics of the presentations were quite diverse.

Styling

Siddharth Kshetrapal (Sid) talked about design systems. He presented his concept of a design system, and his opinion about the way design systems should be developed. At a minimum, a design system consists of tokens, components and documentation. Sid stressed the importance of defining tokens.

Tokens are, in fact, design decisions. For instance: voila, these are our brand colours.

Tokens can be implemented in different technology stacks, for instance, in JSON:

	const colors = {
    		gray: {
        		100: '#f4f4f4',
        		200: '#e1e1e7',
        		300: '#dddddd',
    		}
	};

He also stretched the fact that it is vital to get the (API) component names and properties right. Even when at the time of implementation the component style may not be final yet.

Further, Sid talked about themes and theme providers. He pointed to interesting libraries, namely theme-ui.com and styled-system.com.

Next, Elizabet Oliveira of Elasticsearch showed how you can animate SVG’s in a React application. First an SVG element is wrapped in a React component as JSX. Then properties are added so that the image-component can be configured from the outside world.

Here is where the Framer Motion API comes in. You can easily add tags provided by this API to the JSX of the component. Quite nice stuff. Presented clearly by Elizabet.

hello

Please have a look at this cool library: framer.com/api/motion

Native

Jamon Holmgren of Infinite Red showed us how one can build a native React app in 15 minutes. This was without the installation of React Native environment, and much work was already prepared. However, Jamon’s talk was impressive.

He showed that a developer can be fast when he or she uses the right tools, like the mobx-state-tree library (github.com/mobxjs/mobx-state-tree) and the Ignite CLI and a browser that Infinite Red developed to enhance the development process of native apps (ignite.apache.org/addons.html#web-console).

Jamon presented a lot of useful and interesting information. He could have talked much longer. It inspired me to dive into creating mobile apps with React Native!

React

Alexey Kureev of Twilio presented an explanation of the connection between the JavaScript context and the native context inside a mobile phone.

What I understood from this quite technical talk is something like this: communication takes place through a bridge on the JS side and a bridge on the native side. The bridge has a queue on which messages are posted. Once the native code is ready with a request from the JS world, it puts a message back on the queue of the JS bridge. JS, in its turn, picks up this message whenever resources are available.

Something like this happens in our phones when we for example scroll a list in an app.

Alexey provided these background insights to explain the significance of a React project called codegen. This library generates JSI bindings from TypeScript types which will improve the performance of apps a lot. See also this blog: formidable.com/blog/2019/react-codegen-part-1/

Note: the slides of Alexey’s talk were awesome too.

Architecture

Kitze of reactacademy.io started his presentation like a tornado to show the pro’s and con’s of state management solutions: Redux versus MobX versus Overmind (overmindjs.org). It probably was the fasted presentation of complicated architectural stuff I have ever seen.

But I was left with doubt: was it so quick because the React community has already abandoned Redux and Redux is only used by those developers that “get paid by the number of lines of code”? Or was Kitze’s more profound message that he gets a bit bored about these kinds of technical discussions?

After this architectural flash presentation, he talked about the work of web developers and their attitude. This was interesting. For instance, he stated that the often seen focus on the latest hype is not helpful. It leads to over designing and decreases the focus on what counts, namely the user of the product.

UX

An instructive example was a team that was struggling for hours with Apollo client cache management. Someone found out that a simple call to a reset method would clear the whole cache and then Apollo client would reload all data from the server.

However, this idea of full cache refresh was hitting a mental blockade. Developers argued that to throw away the data on the client that was not changed on the server, is a waste of kilobytes. Even though the performance loss of loading some extra KB’s was just milliseconds.

Now, for the end-users of, say, a hospital, these extra milliseconds weren’t critical at all: they are not “losing the patient” because of these extra kilobytes.

The many extra hours of working on complex cache management solutions are a waste of time and money from the perspective of the customer.

Kitze, therefore, states “stop counting kilobytes”. He advises to “sleep on it”, whenever a team wants to use yet another innovation and rewrite the code. Kitze even advertises “more copy-paste”.

More copy-paste, More copy-paste, More copy-paste, More copy-paste, More copy-paste, More copy-paste, More copy-paste, More copy-paste, More copy-paste, More copy-paste, More copy-paste, More copy-paste, More copy-paste, More copy-paste, More copy-paste, More copy-paste, More copy-paste, More copy-paste, More copy-paste, More copy-paste, More copy-paste, More copy-paste, More copy-paste, More copy-paste,

The last section of Kitze’s talk was about the taboo on earning money among software developers. Nice story was that he proudly explained to his mom that he earned stars for his open source project, while she concluded that he was just doing work for free.

David den Toom of Ahold presented a compelling case about how the developers at Ahold managed to rebuild a colossal monolith front-end into a micro front-end architecture. First of all, it was essential to define the benefits of such an endeavor to management clearly:

1. When dividing into much smaller projects, features can go to market much easier and faster.
2. Teams can be organized around domains. Often a domain is complex. Teams acquire a deeper understanding of the domain and might propose smarter innovations.
3. Smaller memory footprint when teams do not have to import all libraries and are more free to choose their own (within limits because a choice was made to use React in all projects and basic libraries are supplied on generic level).

David showed a CLI that has been developed at Ahold to start a new React micro front-end. He demonstrated the CLI usage. The talk was quite nice. It was explained that the front-ends are deployed in a Kubernetes cluster.

One thing did not become clear to me though, namely how the micro front-ends are rendered and composed to a single web site. I have been working on a project where Zalando Tailor was used to handle this in a so-called shell micro front-end. This shell is not much more then a “coat rack”:

	module.exports = function(context) {
    		return `
		<title slot="head">Blah blah</title>
		<section class="SplitViewContent" slot="Content">
    		<section class="SplitViewMain" id="foo"></section>
    		<section class="SplitViewAside" id="bar"></section>
		<fragment src="${context.env}/foo" async></fragment>
		<fragment src="${context.env}/bar" async></fragment>
		`;
	};

Over to Max Gallo of DAZN. He explained how MobX works by creating a MobX implementation. Max live coded an implementation of observable and autorun. It was an interesting but quite challenging endeavor. Take away from this talk was Max’s slogan: take apart – rebuild – run – share. Then you really learn something!

Time to get more interactive. Lydia Hallie of The Avocoder did an advanced React Trivia game with 200 attendees through Kahoot. It was fun and informative as she explained the answers of each question.

Tools

Lastly, Emma Wedekind of Logmein did a brave live coding session of a portfolio web application with Gatsby.js and GraphQL. Gatsby is an open-source framework for creating web sites and apps. It is based on React. It looks exciting, and l like to try it out.

All in all

The React Live conference was an action-packed day with a lot of useful information. I went home with a long TODO list. Fully inspired!

Leave a Reply

Your email address will not be published. Required fields are marked *