React-Europe 2017

Once again it is time for Europes biggest React conference 🎉. I would like to give you my experience with the conference as well as a rough overview of the talks (will add the video links once they are uploaded). I hope it helps you to get a better understanding why you should come visit next year too and which talks to have a detailed look at.

The evening before

The organizers of React-Europe had an opening party the day before the conference at a bar near the venue. It was pretty cool; we got free drinks until about 22:00 and afterward a lot of pretty awesome people just bought pitchers and went around to help everyone out. Daniel Banck and I were there for about 4 hours, and it was hard to leave because we had so many great conversations with a lot of different people.

Video

• Coming soon

What I Learned Benchmarking React by Dominic Gannaway

TL;DR

• Rollups flat modules helped react to get a ~10% improvement in bundle size and load time
• Rollup is a good match for improving performance in libraries
• Google Lighthouse is a great tool for performance benchmarking

Video

• Coming soon

Building High-Quality JavaScript Tools by Christoph Pojer

TL;DR

• New features and improved performance made Jest a lot better and increased the adoption to over 100 companies
• Snapshot tests are great for getting a good coverage and are being compared with having no tests rather then with conventional tests.
• Jest moved to a modular structure, and the modules are already used in different open source projects

Video

• Coming soon

La nouvelle vague by Sunil Pai (“π”)

TL;DR

• The new wave is the movement from runtimes to compilers
• Good examples are Gatsby, next.js, relay & prepack which leverage on compilers to reduce their runtime
• “If you can’t introduce a library gradually, it’s dead on arrival”

Video

• Coming soon

Worse is Better: The Upside of JavaScript Fatigue by Kevin Lacker

TL;DR

• Simplicity is the most important attribute of a software system to determine its success (e.g. React only taking the View layer)
• Simplicity => Popularity => Contributors (= Fatigue, because new projects pop up very often)

Video

• Coming soon

What WebAssembly means for React by Lin Clark

TL;DR

• Current state of Web Assembly may not allow significant performance improvements if the React Reconciler gets ported to Web Assembly
• Down the line, there could be major improvements to the performance & ecosystem by improved APIs and tooling

Video

• Coming soon

Practical Confidence by Adam Perry

TL;DR

• “Types are tests for the structure of your data”
• Type annotations reduce the cognitive overhead of figuring out the type of variables in your code, also through editor integration
• Flow has a lot of inference features, so only the exports of a module need to be typed most of the time

Video

• Coming soon

Imperfection by Cheng Lou

TL;DR

• Software Engineering means making trade-offs; choosing the right ones is an art
• Doing 80% with 20% of the efforts is good enough most of the times. This only applies if your foundation (language, type system, etc.) is solid (100%)
• “Grow your slopiness budget by approaching certain parts as e.g. the foundation with a 100% mentality

Video

• Coming soon

Maximally Modular Apps with React Navigation by Eric Vicenti

TL;DR

• demonstrated the power of react-navigation with a small demo app
• react-navigation can be used in web and native

Video

• Coming soon

How Streaming Can Supercharge React by Sasha Aickin

TL;DR

• Time to first render and time to first interaction is important for a business
• Client Side loading gives a bad user experience, Server Side Rendering is better but has a long time of non-interactive sites
• Chunked Rendering allows different parts of the application to load individually, which also leads to better fault tolerance

Video

• Coming soon

⚡ Talks

• return null; by Joshua Comeau: Using components for other things than rendering UI can be valuable, too
• Fancy Footwork by Brendan Moore, Sarah Mogin and Serge Rose: They build a CMS frontend with React and Redux which embraces modular design principles
• ShoutemUI by the Shoutem team: They built a market place for React Native extensions (think authentication)
• Thousand ways to navigate in React Native by Charles Mangwa: He introduced react-router-navigation, a way to navigate in React Native just using components
• Detox by Tal Kol & Rotem Mizrachi-Meidan: They created an E2E testing framework for React Native that is very easy to use, stable and fast
• Devtools for GraphQL by Danielle Man: The Apollo team developed a Chrome Extension for developing with Apollo with features like Query watching and Store inspection

Second Day

And once again Brent Vatne guided us through the day. In the morning people came in a bit later than yesterday, a lot have gathered yesterday evening at the frog, where we already met the day before.

Next generation state management by Michel Weststrate

TL;DR

• He introduce mobx-state-tree, a new way to use the graph-based advantages of MobX and combine them with the tree based advantages of Redux
• He demoed the Redux TODO MVC App with an exchanged MobX reducer and displayed features like time traveling

Video

• Coming soon

Composition by Nik Graf

TL;DR

• State in composition is error prone. Therefore we should embrace function programming paradigms as higher-order functions & components
• He showed how the polished library and an app with Apollo that used HOC for loading screens

Video

• Coming soon

The making of Twitter Lite by Nicolas Gallagher

TL;DR

• Twitter Light has a better performance in load time as well as data consumption and time to interaction
• It doesn’t use Server Side Rendering; he explained why in detail
• Think about disposability of parts of your application while designing the system

Vide0

• Coming soon

⚡ Talks

• Snack by Brent Vatne: Use react-native in the browser on https://snack.expo.io/
• React Native Components in Android Apps by Petter Hesselberg: See the demo at https://github.com/petterh/react-europe-demo
• Quantifying Best Practices by Jackson Hamburger and Louis Antonelli: How pure components and key props improve your performance
• Leveraging code-splitting by Glenn Reyes: Intro to dynamic import statements with babel and webpack
• Smarter code-splitting and preloading by Brandon Dail: A brief and good introduction to react-loadable and react-perimeter
• Rise of low-configuration tools by Karl Horky: Configuration leads to many bad effects for open source; add them only when really needed

Exploring Relay Modern by Lee Byron

TL;DR

• Relay Modern shifts assumptions from dynamic queries to static ones, allowing compilers to do ahead of time optimizations
• These optimizations lead to better performance and less network traffic (900ms win on Facebook Marketplace app)
• You can introduce Relay Moderns API step by step and once you finished the conversion switch to it completely

Video

• Coming soon

Animating the Virtual DOM by Sarah Drasner

TL;DR

• Animation is very important to keep the users attention and reduce perceived waiting times
• For every job there is the right tool, CSS-in-JS for simple transitions, GreenSock for sequencial & complex movements, React-Motion for simple, physics based animations

Video

• Coming soon

Credits

Special thanks to Daniel Banck for being a partner in crime at this conference and providing all the images 💙

Want to hear more from me? Feel free to subscribe to my newsletter; I send out news roughly once a month.