Join us at the React Conference Live!

Curious about what it's like to work in the React department within Social Brothers? We believe it is important that our teams continue to develop and are aware of the latest trends and developments. That is why our team went to the React Conference Live in Amsterdam a few weeks ago. 17 professionals told them more about the newly developed React framework and techniques. Read on to read more about this day. 

Good morning 8:30 – 11:15

We started our day at 8.30 am in the Theater Amsterdam. A very nice location, centrally located in Amsterdam on the water. Upon arrival, the coffee, tasty sandwiches and free goodies were already ready. After a cup of coffee and a tasty breakfast, we were all set to start the day, because we have a long day ahead of us from 9.00 to 18.10.

After a short introduction to the organization, the first speaker, Maggie appleton, Lead Designer at Hash, kicked off the game. 

She talked about the role of psychology in programming and how visualizing logic in code can greatly help to understand it better. Code is made for computers to understand, not necessarily for humans. Humans think much more in context and examples, while computers think in letters and numbers. From this we have taken a number of tools that we can use to visualize complex logic from our applications in order to better document our projects. We have included a number of useful tools from this talk. In the future, we want to use these tools to visualize complex logic from our applications, so that we can better document our projects.

Next up was Debbie O'Brien, Head Developer Advocate at Bit. She told us how the development world has evolved from a large, comprehensive codebase, to beautiful, small repositories through microservices. However, front-end development still lags behind, so front-end still works with huge codebases with no option to break your project into small, standalone mini-projects. Solutions for this are, for example, monorepos or NPM libraries, but good tooling is still missing, which makes this solution not very scalable. The solution to this: bit.dev. A tool with which you can easily publish parts of your project to an NPM library, maintain it separately and have a clear overview of all individual elements/components in the library. We also want to apply this tool ourselves. The tools can support us in improving older projects, without taking too much maintenance time. 

Next up, Sid Kshetrapal, Developer at GitHub. The title of his talk? “Walking the line between flexibility and consistency in component libraries“. Which means nothing more than, how do you develop pieces of code for a project that on the one hand provide consistency and on the other hand gives the developer freedom to make their own adjustments. A problem that developers face every day. As an example, he used a case study of a refactor trajectory of an element at GitHub. The screenshots below are all based on the same component, with the same functions; show a list where each element in that list shows some text and/or icon with an action when you click on it. He was able to show how this is possible with the same component: very flexible, yet consistent.

After this substantive talk it was the turn of Yann Braga, Software developer at Chromatic. Chromatic is the company behind Storybook, the tool we use to document and visualize our components in a kind of manual. Yann told us how Storybook could be used not only for visual testing, but also for interactive testing. You can perform interaction tests in Storybook, where you indicate, for example, that the user clicks on a dropdown and you then expect a submenu to be visible. The great thing about Storybook is that in a browser environment you can see exactly what the test agent clicks on and where it might go wrong. This really fills the gap between unit testing and end-to-end testing and we will certainly include it in our projects. 

Then it was the turn of Luc van Kampen, Front-end consultant at Passionate People. Luc told us about what authentication could look like in the future of the internet. After Web 1.0 and Web 2.0, Web 3.0 is just around the corner, which revolves entirely around a decentralized network. Every participant of this network is also a hoster of this network, in contrast to the current web where you only have one hosting server. This opens up completely different possibilities to things like authentication, meaning you may never have to enter a password into websites again. An interesting vision, but for now still too vague to include in our projects.

Round two 11:50 – 13:30

After the coffee came Nader Dabit, Developer Relations at Edge & Node. He also told us about Web 3.0 as the future of the Internet, but went into more detail about the tools and stack used to develop applications on it. React can still be used for the front-end, but completely different tools are available to communicate with the blockchain. Also a nice and interesting talk that we will take with us in the future, but unfortunately still too vague for now. 

Then came Simeon Griggs, Senior Solutions Engineer at Sanity. He told us about real-world use cases of the CMS Sanity, and the lessons learned from onboarding big brands like Spotify. He mainly focused on translating and structuring content. Translation is possible, for example, at the level of a publication, but also at the field level. He also showed how models are configured within Sanity and that this is mainly done via code. This is a big advantage for developers, as customers cannot access the configuration options. Finally got a nice insight into this CMS, but at the bottom this talk was mainly a sales pitch. 

After Simoen, it was the turn of Aashima Ahiuja, Front-end developer at Miro. She told us about how server-side rendering of React Applications is becoming easier with Server Components, a tool that is available from React. Some background information: rendering your React application makes sure you pass HTML back to the user directly, rather than just a bunch of Javascript. This in turn ensures that search engines such as Google can properly index the website. By default React only supplies javascript code, but with tools such as NextJS this can easily be rendered on the server. React Server Components respond to this because the developer can now indicate exactly which code will be used for the server and which code for the client. For example, you can format a date only on the server, so that in turn saves a lot of Javascript for the client. This feature is still in Alpha, but the added value is already enormous. This is definitely something we will include in our projects.

Then it was up to Ives van Hoorne, creator of CodeSandbox. First some background information: CodeSandbox is a tool that allows you to easily share small parts of code, and the entire environment is set up for you. Your entire React/NextJS package is installed and hosted by CodeSandbox, you just need to write and share some code. CodeSandbox Projects is the superlative of this, where you can host entire projects on CodeSandbox. You can then easily share projects with colleagues and program them together – at the same time. All this via a web interface so that you can view and change your code on your iPad even during your train journey. The feature is still in closed alpha, but we managed to secure a spot on the list of testers! So we are going to try this tool soon.

After lunch 14:30 – 15:55

After lunch, Michael Jackson, Co-Founder & CEO at Remix, spoke. Remix is ​​a library/tool ​​with which you can easily render React on the server, just like NextJS does for example. He told us about the design principle behind this tool and why it makes developers' lives so much easier. A very substantive talk in which we gained great insights into the Remix framework. Our toolset is pretty solid so we won't be switching to it anytime soon, but it has given us good insights for the future. 

After this, it was up to Medha Dawoud, front-end consultant at Passionate People. He showed us some easy and fast performance wins in React. He also showed which tooling is available to make this transparent. The biggest performance gains came from selecting libraries that are smaller than the alternatives. Here it is important to always choose the smallest possible option, so that the download size of the javascript file remains as small as possible. Other ways to improve performance are techniques to render only elements that are currently visible on your screen. Normally, browsers render an entire page, but that is a waste of effort if you only see a small part in your window. Finally, Medhat showed how you can split your code into separate small files instead of one large one. This ensures that you only download the code you need, and not everything at once.

The final talk before the break was delivered by Anuradha Kumari, Passionate People front-end consultant. How can you make websites better by thinking about accessibility? The example she gave us ensures that screen readers can more easily detect the language of your website and therefore read aloud more easily. A good insight, but not very deep.

Final rounds after the afternoon break 16:30 – 18:10

Time for Roy Derks, Developer Experience at Hackteam, wwhere we learned more about “Back-end for front-end” principles. Here you make a small back-end that is specifically intended for one front-end (a back-end is normally very broadly set up). With this you can remove a piece of logic from the front-end and create an API that is tailor-made for this. You are solving a bad interface of the API for your specific website. The disadvantage is that you still have to write a piece of logic to make this possible, so that you actually move the problem a step. However, a back-end is a lot more suitable for this kind of logic than a front-end, so all in all a useful talk that we will certainly include in our projects.

Fukuzaki, Developer Relations Engineer at Storyblok gave new insights on how their CMS can be used for translating content. Again, it was a bit of a sales pitch, only with the difference that we have had Storyblok on our radar for a long time because of the great functionality that this CMS offers. Which resulted in a short workshop about the CMS of our interest. 

The next to last of the day was Dwane Hemming, who is a Javascript Developer Advocate at Vonage. He told us about Web Components. This has long been seen as the future of web development as it ensures that you can work component-based in the browser, which is normally only possible with frameworks like React. He focused on the current state of Web Components and how it can work together with React, but also especially how it can be improved. The conclusion, it is bad to use in combination with frameworks like React. Too bad, because that makes it unusable for us. It does, however, offer great insights into how we can possibly adopt this technology one day.

As the very last speaker, we listened to Nikhil Sharma, SDE design systems at Postman. How can you easily improve the UX of React applications by using loader indications in an efficient way. This sounds simple, but showing the state of the application to the user is one of the most important UX parts. In addition, you also want to keep the total loading time of your application as low as possible, which you also have techniques for. Nikhil mainly focused on the latest update of React and which features it contains that help to solve these problems.

With this talk, a great, instructive day full of information came to an end. A small afterparty was organized at the Theater, but our team went to enjoy Amsterdam for a while. All in all a great day, and we are already looking forward to next year!