React-Europe 2017 by@dschmidt1992

React-Europe 2017

May 18th 2017 2,223 reads
Read on Terminal Reader
react to story with heart
react to story with light
react to story with boat
react to story with money
image
Daniel Schmidt HackerNoon profile picture

Daniel Schmidt

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

image

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

image

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”

image

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)

image

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

image

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

image

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

image

Video

  • Coming soon

Maximally Modular Apps with React Navigation by Eric Vicenti

TL;DR

image

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

image

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

image

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

image

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

image

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

image

Vide0

  • Coming soon

⚡ Talks

image

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

image

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

image

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.

image

react to story with heart
react to story with light
react to story with boat
react to story with money

Related Stories

L O A D I N G
. . . comments & more!