React Amsterdam took place last week in Amsterdam Noord at De Kromhouthal organized by GitNation an amazing group of folks who do an amazing job at running developer conferences like JS Nation another Netherlands based JS community project and now conference, React Day Berlin a first of its kind, a full day conference in Berlin Germany, and others. This year's React Amsterdam conference was attended by more than 1500 React developers. I attended the conference, volunteered for both days of workshops and ran a booth for my company Progress to show off our suite of KendoReact UI components.

An Amazing Conference Location

The Kromhouthal used to be a major marine engine manufacturing plant. I showed up the day before 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. The venue was easily accessible using the ferry from Central Station to the IJplein terminal but I also could have come from the Noordpark Metro station and in either situation just had a short 5 minute walk to the venue through a bustling creative area having a mix of local resident housing and soon to be a 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). Check out these well-produced videos from the organizers to get an idea of the venue, atmosphere and moods from React Amsterdam past events.

Amazing Workshops Teaching Valuable Principles and Patterns

Although not at the infamous Kromhouthal, part of React Amsterdam (the workshops) took place nearby, in the shadow of A'DAM Lookout at the Tolhuistuin a restaurant also fronting the IJ with amazing views for the workshop attendees. This is where I volunteered for two days and had a great opportunity to work with the workshop instructors and attendees. I love helping out wherever I can, I figure that if I'm in Amsterdam for the conference, I can only do so much sightseeing, I like to work in the city to a certain capacity, feel what it's like to be there with deadlines, requirements and work to get done. There are many others like this and I met a lot of them, I worked with a few amazing volunteers and organizers like Olena, Daria, Sara, Ravi, Nicholas, Maksym, and Aleksandra directly and others 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 affected 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 were exactly the kind I would have gotten so much value attending, I was able to be a fly on the wall, but I hear that you can visit his sites and get some of this same training. There were also speakers like Andrey Okonetchnikov & Artem Sapegin who gave an amazing 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 was amazing, which in my horrible pictures you can't see.

Maybe I got one of the river, ... Here we go!

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 that I'm sure provides as unique of a location as the one I was volunteering at. It was at the Royal Industrieele Groote Club which I walked past several times admiring and not knowing it was actually where the other workshops had taken place. Such a beautiful building like so many others in Amsterdam the City. At that location there were talks from Kitze on two different days (GraphQL Workshop & 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' and Kent's workshops. Would love if these workshops were recorded adn given access later on 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!

Conference Kickoff

Helping at the registration was so much fun 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 hectic with 1500 people coming through the doors over a few hour period. It felt like a success and the conference got underway. I headed to my booth to check in with my tam where I switched hats one last time at React Amsterdam. Working our booth and meeting people that were interested in installing our components and playing with KendoReact. I love talking about the library and getting others excited about it.

Conference Talk Highlights

There were so many great presentations and Lightening 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:

Requisite React (Kent C Dodds)

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 learn how to fix a droopy faucet head (with pics), and learn how understanding abstractions help us to be more effective when using them, not only in real life ?? but also in our code. 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 and 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. I felt a lot of the talk was mostly about how to level up as a React developer and if you were a boss or manager who sent several of your developers out to React Amsterdam, this is exactly the type of information you want out of the gate!

Refactoring React (Siddarth Kshetrapal)

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 who 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 like most the parts where he talks about understanding about 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. useSmartness() FTW!

So those talks were very code heavy and I was already in the mood for some straight up slide talk! My favorite kind fo talks! I don't have to strain my eyes and I still learn some new stuff I didn't know before.

A Common Design Language (Andrey Okonetchnikov)

Andrey who also did an amazing workshop on the same topic of Design Systems in React, 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 he points out as the design of the German government logos vs Austrian government logos. One has a clear design system and language the other although 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 its 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.

Designing with React (Mark Dalgleish)

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. I have seen first hand at companies I have worked at like Tesla 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 helping 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.

Server Side Rendering Talks

So far I'm 4 talks in, and I have watched the majority of the talks running back to our booth each break to interact with the attendees and talk components. For someone like me who just likes to be totally immersed in technology and talking about it, this event allows you to get into your element. It's great to have the support of a company like mine that gives us the opportunity to do these events in an organic way and let the people representing their product come here and just geek out on React. Aside from questions I had to field about our own component library, most of the talk at the conference was around fundamentals, bleeding edge features and the React roadmap, what's coming next. just an amazing conference to really get knee deep in JavaScript and React more specifically.

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.

• Next for Next.js (Tim Neutkens)
• Lightning fast SSR React (Håkon Gullord Krogh)
• Speeding up React SSR (David Mark Clements)
• Demystifying Server-Rendered React Apps (Fernando Porazzi)

Lightning Round... One .. Start! (Read Rapidly and Fast)

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.

• Fetch Like a Boss With React Async (Gert Hengeveld)
• Microjob Multithreading (Vincenzo Ferrari)
• URQL Powerful and Simple GraphQL (Andy Richardson)
• Showcase of Git History (Rodrigo Pombo)

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, this article I am writing now:

https://github.com/httpJunkie/telerik-blogs/blob/master/react-amsterdam-a-look-back.md

Replace http://github.com with http://github.githistory.xyz resulting in the following string:https://github.githistory.xyz/httpJunkie/telerik-blogs/blob/master/react-amsterdam-a-look-back.md

Here is a look at what Git History has done with my file from my repo:

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?

Tech Regrets at Spectrum (Max Stoiber)

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.

Scaling Applications with Microfrontends (Max Gallo)

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. 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.

Microfrontends are like a mix between microservices and the actual frontend single page application. Microfrontends 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.

Women of React Amsterdam

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 (Elizabet Oliveira)

An SVG's Tale like I said is my favorite talk. She is a senior UX designer at Optum in Ireland. If I could give an award for the most inspiring talk at React Amsterdam and the most likely to get me started playing with an old but amazingly robust technology that been given a new lease thanks to React, it's SVG. 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 some amazing lyrical skills. 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!

The GraphQL Developer Experience (Peggy Rayzis)

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 ??. But 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 is 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.

Painting Pixels With WebGL And Hooks (Ashi Krishnan)

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.

The React Native Track

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.

• Building React Native (Parashuram N)
• Practical Performance for React Native (Anna Doubková)
• Sharing Code Between React and React Native: What Not to Share (Ben Ellerby)
• Building for a Bigger World Than Mobile (Wouter Van Den Broek)
• Advice Lounge (Panel Discussion)
• Make Your React Native Apps Accessible (Ankita Kulkarni)
• Native Web Apps: React and WebAssembly to Rewrite Native Apps (Florian Rival)
• Full-Stack React Native in the Era of Serverless Computing (Nader Dabit)
• Demystifying The Complex Animations Creation Process in React Native (Vladimir Novick)
• React Native App Rollout - an Alternative Approach (Adam Terlson)

Open Source Awards

Since React Amsterdam at heart is a JavaScript conference, a love for open source is at the heart of every conference run by GitNation, they really do a great job of highlighting and recognizing great open source projects. This year they had several categories and you can watch the awards ceremony for more context.

Breakthrough of The Year

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.

Most Exciting Technology

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.

Fun Side Project of The Year

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!

Most Impactful Contribution to The Community

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.

Productivity Booster

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.

React is Amsterdam

Talk about how Amsterdam is a perfect city for JavaScript and more importantly React developers. Some of the sponsors at the vents were based in or had offices in Amsterdam or Netherlands. The city offers so much in historical, artistic, tech and shopping, so it's obviously a great place to bring the React community and is very relaxed yet highly invigorated at the same time. Given enough time and the ability to travel throughout the city and learn the Metro, Dutch national rail company NS (Nederlandse Spoorwegen) and the various other ferry and tram systems, you can easily move around to the areas that you want to visit and crank up the energy or turn it down by traveling just out of the city's center.

I stayed in the Wilbautstraat area just 4 stops off the metro from Central Station at a wonderful hotel that I talk about more in my Developers Guide to React Amsterdam.

React 2020

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!