React Amsterdam took place last week in Amsterdam Noord at De Kromhouthal and was organized by GitNation, an amazing group of folks who run developer conferences like JS Nation (Netherlands-based JS community) and React Day Berlin, a first-of-its-kind full-day conference in Berlin, Germany. This year's React Amsterdam conference was attended by more than 1,500 React devs. I attended, volunteered for workshops and ran a booth for Progress that showcased our suite of KendoReact UI components.
The Kromhouthal used to be a major marine engine manufacturing plant. I showed up the day before the conference and got to see the hall before most of the conference setup was complete. Alone, it's a cold, dark hall—a scene that in the past would have been a labor-intense atmosphere with massive machines. Today, it's used for major events and can hold thousands of people with its long hall and massively tall ceilings. Once the venue is setup, the hall is transformed into a very warm and inviting conference hall. Check out these well-produced videos from the organizers to get an idea of the venue, atmosphere and mood from React Amsterdam past events.
The venue is easily accessible using the ferry from Central Station through the IJplein terminal but I also could have come from the Noordpark Metro station. Either route is a short 5-minute walk through a bustling creative area with a mix of local resident housing and a soon-to-be hotel and packing district. This area will continue to be a great location, especially with plans to extend a bridge from the city center over the IJ (river).
One location for the workshops was nearby in the shadow of A'DAM Lookout at the Tolhuistuin, a restaurant fronting the IJ River with amazing views for the workshop attendees. I volunteered for two days and had a great opportunity to work with the workshop instructors and attendees. I figured that if I'm in Amsterdam for the conference, I can only do so much sightseeing, so I like to work with the conference and meet as many people as possible and provide some type of value hopefully. There are many other volunteers and organizers like Olena, Daria, Sara, Ravi, Nicholas, Maksym, and Aleksandra that had given up their time in this amazing city to serve the community and I want to thank them for being so awesome. You may not know these people but I want you to know that the success of this conference is greatly improved by their hard work.
Speakers like Kent C. Dodds did two workshops (Advanced React & Testing React), one each day, and he also spoke at the conference. His workshops add so much value and allows attendees to bring back some real fundamental skills from the conference, I wish I could have attended, and maybe it's something I will do online because I really love the volunteering aspect, I hear that you can visit his site and get similar training to the workshops. Other amazing workshop instructors were Andrey Okonetchnikov & Artem Sapegin who hosted a workshop on Design Systems for React Developers showing how to design systems offer a systematic approach to the process of product creation. Their view of the IJ River form their room was amazing, which you unfortunately can't see in my horrible pictures of that workshop.
I'm hoping that the photographer hired by the organizers caught this amazing view from the cafe. I saw at least two different professional photographers throughout the event, so I cannot wait to see those images!
In this same venue, we had Michel Weststrate's TypeScript for React Devs and React Native Workshop by Alex Lobera & Horacio Herrera, all of these workshops in three different rooms at the Tolhuistuin.
Across the river closer to the Amsterdam City Center, there was another set of workshops at the Royal Industrieele Groote Club, which I walked past several times while admiring it without realizing we had workshops going on there. Such a beautiful building like so many others in Amsterdam. At that location, there were talks from Kitze on two different days (GraphQL Workshop and Advanced React). They also had another interesting fundamentals workshop on Max Stoiber Modern React.
I could not be in two places at once, but I am very interested in the differences between Kitze's workshop and Kent's workshop. Would love if these workshops were recorded and released after like the talks are done. I know that it would have gaps where the class is working, but the instructors could get clever during this time and maybe live code the exercise on the broadcast. I don't know many ways to make this conference experience more immersive, but this sounds like something they should explore—maybe they already are!
Helping at the registration was so much fun. I loved getting to meet everyone, even if it was just for a minute to get them a badge and some swag! As an attendee, I got to walk away with a bag and I love my new coffee mug!
There were a lot of people to process and I felt we did a good job of getting those people who showed up at the beginning into the event on time for the kickoff (although it was hectic, with 1,500+ people pouring through the doors over a period of a couple of hours). It felt like a success and the conference got underway.
I headed to my booth to check in with my team, where I switched hats one last time at React Amsterdam. Working our booth, I got to meet people who were interested in installing our components and playing with KendoReact. I love talking about the library and getting others excited about it.
There were so many great presentations and lightning talks, I want to take some time to highlight what I think were the most valuable ones that I attended. Being someone who works with a lot of UI, layout and presentation in React, I am a big proponent of the fundamentals and general knowledge. I start to get lost when it comes to the advanced and deep dive topics outside of UI and basic React, and what's great about this conference is that they have something for everybody. Let's look at some of those talks and review them here:
The conference started off strong with Kent C. Dodds on the main stage with a talk called "Requisite React." In his own words, this talk is about: "Taking a few steps back and thinking about the usefulness of the fundamentals." We learned how to fix a droopy faucet (with pics), and more importantly, how to understand abstractions and how they can help us to be more effective when using them, not only in real life but in our code as well. This means being mindful of our abstractions and understanding that each one ultimately has some type of cost. My favorite abstraction that he dives into is that of JSX. I won't ruin the talk, but getting a look at how we can easily convert our Babel into raw JS, we are able to see under the hood and understand this abstraction better. His talks are excellent for helping to level us up as React developers and if you were a boss or manager who sent several of your devs to React Amsterdam, this is exactly the type of talk you want right out of the gate!
No time is wasted getting into another very valuable fundamentals-based talk around refactoring in React. Again, we are definitely getting our value right out of the gate with many helpful tips, this time from Siddarth Kshetrapel—an independent developer from India. He does an amazing job refactoring a login and authentication form.
Starting with class components and constructors with a fair amount of prop drilling involved, we refactor this code quickly into something more manageable and future proof. Some of the techniques that he talks about are spreading props, using methods passed down in props the proper way and how to ensure that we are not overriding prop values for methods or applying them due to not managing our props correctly. He touches on principles like "Single Responsibility" and "Separation of Concerns." I really liked the parts where he talks about understanding about the mixing of controlled vs. uncontrolled state and how to avoid this. Pick one—he likes uncontrolled components, and this gives us the chance to get into higher order components or better yet, React Hooks.
So those talks were very code heavy and I was already in the mood for some straight up slide talk! My favorite kind of talks! I don't have to strain my eyes and I still learn some new stuff I didn't know before.
Andrey, who also did an amazing workshop on the same topic of Design Systems for React Developers, puts all the pertinent info into a very clean and easy to understand talk on building a common design language and reducing the choices of options between typography, spacing and color to create a design language system. Using a common design language systems allows for reusability of design choices across multiple products and logos. This can be something as simple as the design of the German government logos vs. Austrian government logos. One has a clear design system and language, the other (although still very creative) lacks distinguishable characteristics that would show a clear alignment of all of its properties through a common design language.
Andrey's presentation had many strong visuals like above that helped to show us how a design system language can help not only your developers and designers talk, but also help your organization speak to clients and customers clearly and with great meaning and commonality. The presentation leads into design languages for digital products and this is where we tie in the component-oriented capabilities of React that make it easy to define a common language with your UI, achieving similar results as discussed before but now within digital products. Truly amazing talk and I really suggest taking the time to watch. I also want to note that React Amsterdam has an amazing design language and have continued year over year to capitalize on this using a similar set of logos, typography and design.
Following the previous design language presentation, we nicely transition into a talk from Mark Dalgleish on designing in React. Using design systems paired with React, Mark is able to design in the final medium. Because React is so component oriented, it allows us to build our own domain-specific language. At companies I've worked at before, I have seen them firsthand capitalize on the ability to do this in React and other web technologies.
Mark has some other examples of this idea spreading throughout our industry as many companies build their own design systems. Mark's major points back up the ability to capture the design intent from our design systems and applying them to the web and native apps. Seek style-guide is something that Mark's company has created and is a great resource and example of a design system for React executed remarkably.
Another amazing resource that Mark shows off is the React Sketch.app, which renders React components to Sketch and helps to design with real data in React with real component code and manage your design system implemented in React. Watch the video for information on an amazing npm package they created called
html-sketchapp. I will let you discover that amazing gem on your own.
At this point in the conference, I'm four talks in, I have watched the majority of the talks running back to our booth each break to interact with the attendees and talking shop and then getting to each talk a few seconds after it started, trying to find a good seat. For someone like me who likes to be totally immersed in technology and geeking out, this event allows for that experience. Most of the talks at the conference was around fundamentals, bleeding edge features and hot topic categories like GraphQL and Server Side Rendering bringing us to our next set of talks. The conference did an amzing job structuring the content and making sure there was a flow and that similar talks were right next to each other.
The next four talks are all on Server Side Rendering (SSR) using frameworks like Next JS for pre-rendering, Crystalize for the backend to create lightning-fast scalable SSR React apps, the upsides and downsides of creating apps that use SSR, topics like rehydration, time to interactive and other things related to how our larger e-commerce sites render. In the e-commerce world, shaving milliseconds or maybe even full seconds off of load time can be very valuable. These 4 talks take you on a journey through the benefits and gotchas of SSR.
OK, really fast, let me tell you about the amazing lightning round talks, read this section really fast to get an idea of what lightning rounds are like. There were four amazing lightning talks, I caught two of them in person and watched the other two from home today and I have to say that I walked away from all of them with golden nuggets from each topic that I could use to explore that topic more on my own. below are the talks and a link to them on YouTube.
I'm a huge fan of the library showcased in that last talk called Git-history and after being reminded of its awesomeness as React Amsterdam, I will be playing with this package and using it in some of my upcoming talks and demos to show the change when refactoring class based components to functional components with Hooks, I think this will provide a great visual aid in teaching on this subject. It's easy to use, I can show you right here.
Take any file in any repo of your on GitHub. Like for instance, the article I am writing that you are reading now, it's in Git so we could use that:
Before pasting that link in the browser, replace:
resulting in the following URL you can copy and paste into the browser:
If you are not instantly in love with this, you don't exist. I showed my son and he was mesmerized, we noted that if I were to have saved more often, I would have a much more granular step through. This is my nomination for the next years GitNation Open Source Awards (which means nothing, because I'm in no way affiliated with GitNation lol). I just think it is people like Rodrigo who will be highlighted for their contributions to open source. Truly amazing, have I said that enough?
I admit that the SSR talks were a little bit over my head, but next up was Max Stoiber to talk about his Tech Regrets at Spectrum which was acquired by GitHub. Another great talk and I don't want to spoil the regrets that Max goes over and I suggest taking a listen to this talk on your own to get the value of lessons learned from hindsight and his experience building a real-world product and shipping it to users.
Every once in a while there are talks at a conference where I think the guys on stage are on another level than me. To be honest I have never built any micro frontends and if I did, I would have no idea how to scale them. When he asked for us to raise our hands if we had even heard of them, I was under strict contract to keep my hand down as I had never even heard of this concept. Once he started explaining the idea, I understood from a very high level. I like how his talk sets up three main tracks for understanding this "micro frontends" thing. Why do we need them? What is it? and how do they work under the hood? I was going to need all the hand holding I could get for this talk.
Micro frontends are like a mix between microservices and the actual frontend single page application. Micro frontends are a way of splitting up the codebase of the frontend over many teams, obviously using some type of design system to keep them all similar in style and branding, we have already heard how to do this with extra benefit from React.
There was no better way to end the General React Track and the conference than to have three amazing talks by pioneering women in the React space. My absolute favorite talk from React Amsterdam was from Elizabet Oliveira. As well, I was truly inspired by both Peggy and Ashi because I'm slowly getting into GraphQL and to see WebGL and Hooks used together painting pixels has to be one of my runners up for second most inspiring talks at React Amsterdam.
An SVG's Tale like I said before, this was my favorite talk. Elizabet is a senior UX designer at Optum in Ireland and you get a sense for her style through her slides, delivery and attention to detail. If I could give an award for the most inspiring talk at React Amsterdam, I would choose this talk specifically. I have always been a huge fan of SVG, but after her talk, I have so many ideas of how I can use SVG's properly and dynamically in my React applications using inline methods or with JSX and components. It's possible with React JS to create animations and styling that under the React hood may be complex but can allow developers not as well versed in SVG to easily use them through your components. Beyond SVG and React, Elizabet showcases a few of her side projects over the years. One of them is an app that you can record your own vocals over dank hip-hop beats which Elizabet demo's for us with her amazing lyrical skills another side project of hers is React Kawaii a library of cute SVG illustrations (react components) which I think is great from the point of looking at how the project is setup and getting ideas for my own SVG components. This speaker definitely blew my mind and I wish I could have spotted her after the talk to give her a big thank you. Truly amazing presentation, she had everyone out of their seat cheering including myself and at other times fighting back tears because her (fictional) story was so amazing and warm and her performance was pure dope!
Peggy Rayzis has to be the most compelling speaker on the topic of GraphQL especially for beginners like myself. It was one of the talks I was most amped up to hear and as happens in most conferences I got sidetracked and missed it. Listening back today I was not surprised at all when Peggy told us that she lived in Amsterdam for a month last year and that it was her favorite city in the world. I think most of us who came out for our first time to Amsterdam has the same feeling. I cannot think of a better backdrop for this event. It was my introduction to Europe proper! I enjoyed taking in all of the knowledge that Peggy brings to us on the subject of GraphQL and she has a great perspective as an employee for Apollo where she works as an Engineering Manager. This company builds the most amazing implementation of GraphQL. Apollo helps us bridge the gap between application and API and I don't want to spoil her talk so I simply suggest checking this one out if you are interested in learning about GraphQL.
Ashi Krishnan is a seasoned speaker on so many different topics beyond React. She has been on my radar because of amazing talks like Deep Learning in React and Learning from machines. She works with GitHub in the UK and at React Amsterdam she closes out the General React track at React Amsterdam taking us on a journey into WebGL and how to leverage this journey with Hooks. This talk reminds me of the many things we can do in React that challenge the way we think about what a React application is and what it can do. I first started realizing all the amazing things we could do with React and rendering from Ken Wheeler's talk on building a drum machine or rendering web pages with canvas. Ashi continues to challenge our thinking about React with an amazing live demo using WebGL to paint pixels in React. If I was able to select one talk that I believed mostly encompassed creativity and thinking outside of the box it would be this one. Without giving too much away, she runs through many demos truly artistic in nature that achieve different styles and approaches to painting the screen using WebGL in React.
Although I have "et, slept and breth'd" the General track at React Amsterdam I was not able to get over to the React Native track that often. But I did make a conscious effort to watch some of it. I have never used React Native but I have heard so many great things about it and did catch a few bits and pieces while I was at React Amsterdam. If I could point to one talk specifically that I think helped me understand React native better it would be the presentation given by the React Native core team member Parashuram which just so happens to also be the first talk of this React native track: Building React Native.
The React Native track can be viewed in its entirety on YouTube. Below is a complete list of all of the talks you might want to hear! If you're more of a web developer and less of a native developer, I would suggest also checking out Native Web Apps by Florian Rival.
On the React native track, we saw strong talks on Practical Perfomrance by Anna Doubková and Making React Applications Accessible by Ankita Kulkarni and Demystifying The Complex Animations Creation Process with Vladimir Novick. All were talks I was able to easily follow along not being a React Native developer.
Taken home by Michel Weststrate a Nederlander and main contributor of Immer the popular open source library used to create the next mutatable state by mutating the current state. I have just barely scraped the surface of what this library can help with, but I have used it to make returning state from my reducers in React used to mutate (while keeping immutable) my local component state. I'm sure there are many other great uses for this library and I think it was well deserving of the award. Nominees for this award were Linaria, Formik and React-navigation.
This award was given to the VX open source library that makes it easy to combine D3 charts into React to build amazing visual components. A demo can be seen on vx-demo.now.sh and shows how easy it is to make both your own reusable chart library or your own slick custom one-off charts. A representative was not available to take t his award home, but many props go out to the VX team for making such an amazing contribution to JS open source.
The title of the award says it all, this is just an open source contribution that GitNation believed to be fun, light-hearted and amazing in its own right. The nominees for this category were React95 (a play on Windows 95) is a React component library with Windows95 style UI. This would have also been my pick although I think both projects are absolutely fantastic. The next nominee was React-insta-stories A React component for Instagram like stories. The component responds to actions like a tap on the right side for the next story, on left for previous and tap and hold for pause. The custom time duration for each story can be provided. The winner for this award was React95. Gabriel Daltoso and Alysson Dos Santos (São Paulo - Brazil) both came up on stage to accept this very well deserved award!
The winner of this award was React-testing-library. Other nominees for this award were Detox and React-navigation, and Downshift and are all very impactful in our JS community. It should be and is noted by the announcers on stage that two of these libraries have the main contributor in common with Kent C Dodds. And if he wasn't given an award himself for most impactful and influential person to React Amsterdam, he should as well with a few other speakers who did both workshops and speaking at the conference, it just so happens that kent was able to pull off a trifecta in also winning an open source award, but there were many people wearing many hats speaking, volunteering, teaching workshops and overall just living and breathing this conference.
The final award category is all about being productive as a developer. The winner is near and dear to my heart as someone who loves to write in Markdown, I'm writing this article now in markdown using VS Code and I use Git to record my progress and iterations of each and every article I write for this blog. As well, I write many presentations and slide decks and love using markdown for those as well. As you can guess, the winner of this award went to MDX Deck and was accepted by Time Neutkens and delivered to Brent jackson. Other nominees for this category were Formik, React-cosmos, and React-table.
If you are planning on attending the React Amsterdam 2020 event, mark your calendars now, it will be April 16th and 17th. I know I'm missing other amazing things that happened, but hopefully, this can serve as a guide if you were not able to attend or maybe a tool you can use to convince your boss to go next year. If you do, stop by our booth and talk to me, I will definitely be going back in April of next year!
Eric Bishard is a Developer Advocate and former member of the KendoReact team at Progress. A software engineer with experience building web based applications with a focus on components for user interfaces in Angular and React, Eric works with @Couchbase, tweets @httpJunkie and blogs at ReactStateofMind.com.
Subscribe to be the first to get our expert-written articles and tutorials for developers!