React Native EU 2017

Today the first European React Native conference started in Wroclaw, Poland. I would like to give you my perception of this conference and a short TL;DR (Too Long; Didn’t Read) summary on each of the talks so you can pick the right ones for yourself to watch. You can find them online right here.

Getting the badges

First of all, I would like to thank the organizers from Callstack for all the love they put into this conference; it is highly appreciated ❤.
Also a big thank you to all the sponsors: NativeBase, Formidable, ChallengeRocket, Reindex and Infinite Red (Gant Laborde is also contributing a talk).

The venue

Sometimes it can be a bit challenging to find the venue of a conference, but not this time. It is pretty central in the city, easily reachable by Train, Bus and other public transports. And most conveniently for me I can not miss it, because it is in the hotel I am staying in. Everything was nicely prepared and we had a really warm welcome. Looking forward to the next two days ❤

First Day

Keynote by Mike Grabowski

Mike opened the conference by thanking the sponsors and reminding everyone to follow the code of conduct.

Rapid React Native by Gant Laborde

  • The need for faster iterations and a better developer experience was there before React Native
  • React Natives enables us to iterate faster, but the integration of bigger components like maps are still too hard
  • Ignite 2 is a code generating starter kit that allows to integrate bigger blocks in you application faster
  • Awesome live-coding ❤

React Native, the native bits by Emil Sjölander

  • A good introduction into yoga and how its used for rendering UIs in RN apps
  • He goes in detail over the messages send over the bridge by the reconciler to the layout engine and how the engine builds the UI with this information. It a gerat getting started talk for the layout engine.

When “Good Enough” Just Isn’t Good Enough by Jani Eväkallio

  • Jani made a great introduction by giving a history of art, making the bridge to how mobile and web are similar but also different
  • “You learn the React paradigm once, but you have a lot to learn on how native software should behave.”
  • It’s okay to have the same resources as Facebook to focus on user experience, but you should nevertheless care about it and study how others solve similar problems UX-wise

Home automation with React Native and Raspberry Pi by Ville Immonen

  • A journey into building home automation from scratch covering topics like circuit board design, building a python and node service for the Raspberry PI and writing an Exponent app with GraphQL & Apollo

Building of Snack — The React Native Playground by Satyajit Sahoo

  • He shows the history on why Snack was build in the first place and why it was necessary even as RNPlay was out already
  • Snack brings Hot Reloading into React Native Apps running in the Web platform
  • Snack faces some problems to have a good developer experience, like showing errors before they occur, loading npm dependencies or having fast updates. Satyajit talks about the solutions in detail and the trade-offs being made.
  • Snack is great for testing out stuff, building cool documentation and bug reports. Also multi-file support is coming making it easier to have bigger examples incorporated

Going Over The Speed Limit by Tal Kol

  • RN is not the tool for every job (e.g. because it has a performance overhead)
  • Page transitions and scrolling lists are examples for problems that seem easy to fix but are hard to get right and performant in RN
  • The asynchronicity of RN leads to these problems and was a conscious decision and a feature
  • He shows how you can still overcome these problems utilizing RN and provides an example on Github

Building native modules for React Native by Florian Rival

  • He started with a quick overview of how to create native modules
  • When building RN modules which have native parts, use native tools like NSLog or the XCode debugger too
  • React Native Snoopy is a great tool to see if you have a lot of overhead in bridge communication

Lightning Talks

  • React Native and Badoo: The story on how Badoo started to introduce RN in their company, overcoming resentments from other developers in the company.
  • Scaffolding plugins for React Native: Creating native libraries over and over again gets repetitive, react-native-create-library automates a good portion of this process.
  • React Native Builder: Designers should work with React Native through a UI (BuilderX) to prototype faster and communicate more effective in the team, especially between designer and developers.
  • How Skyscanner Tests RN Bridges on iOS: For integrating a RN app into an existing iOS / Android app the bridge needs to be tested thoroughly. This has some problems, so he described how to overcome these challenges.
  • Component-based styling for React Native: Kitze debates the advantages of different component-based styling solutions and which problems they solve.
  • What is RNRF? A historic overview on react-native-router-flux by the creator himself.

Composable Native APIs by André Staltz

  • React is declarative, the (native) APIs mostly aren’t, also aren’t most wrappers for them
  • André explains how we might architect our libraries to be easily usable and composable by designing them in a declarative way. Cycle.js is a useful tool to achieve such an API
  • Cycle.js exposes components as functions that takes many streams (e.g. props, hardwareBackButton, …) and also returns many streams (e.g. rendered output, side-effects, …)

React developer? Great! How are your production skills? by Michael Haberman

  • The topic of this talk was how to get your React.js Web application production ready using tools like webpack and techniques like cache busting

Second Day

I am going to list you the talks and a TL;DR description of what was going on there. I’ll keep it up to date through the day.

Practical hacks for delightful interactions by Eric Vicenti

  • “Beautiful UI often relies on Hacks”
  • Eric explains how useNativeDriver works for animations and why you have to work with hacks to achieve effects like a shared element transition
  • He also explains the touch responder system, InteractionManager and other tools to improve animations and touch responsiveness

Cross Platform & Beyond by Nader Dabit

Reasonable React Native by Ken Wheeler

  • ReasonML is a toolchain for OCaml that feels like ES6/JS, “it’s Javascripts typed, simpler and faster cousin”
  • Amazing type system, incremental conversion, performance and nice language features are good reasons to give it a try
  • Ken explains the advantages of Reason and gives a introduction into the basics like the language, bucklescript and interoperatability

Integrating React Native into an existing native codebase by Eloy “Durán” Durán

  • React Native allowed Artsy to de-silo people, utilize Open Source and expand to Android
  • Integration was done by publishing the RN parts as a CocoaPods package, so that the base application has no idea RN is running
  • This lead to faster on-boarding, reduced noise in terms of developer tooling and CIs and some hurdles like navigation and nested scroll views

Building a Product with React Native by Martin Konicek

  • The history how the “boost your post” function of Facebook was rebuild from HTML to React Native
  • He touches technical topics like GraphQL, Relay, and Routing and product topics like feature flags and metrics

Network layer in React Native by Kureev Alexey

  • XMLHttpRequest, fetch and Websocket are the three networking APIs on React Native; all of them are not within the JS core but come from the underlying platform through RN
  • He goes into detail on how to debug HTTP Requests (use Reactotron), how to fetch and send binary data and cookies

Getting into Physical web with React of Things by Vladimir Novick

  • A neat introduction into how to work with Bluetooth Low Energy devices like iBeacons or Eddystone
  • For physical context aware apps you need to enable location services, start scanning for beacons, find the nearest one and take action according to the data sent; react-native-beacons-manager provides a nice interface for that
  • Beacons allow to detect the distance to your phone with a precision in tenth of centimeters

Scaling Mobile Development with React Native by Aaron Greenwald

  • Wix has 40 React Native developers working on one app, the topic of the talk is how you scale your processes in a company to still work effectively
  • Independent teams (companies), a small central administration (guild) and a shared UX helped to build a philosophy that allows to scale the process
  • Splitting up each business unit in separate modules and using event listeners for communications helps to keep the concerns separated
  • You need a UI library to give the user a seamless experience and also to reduce the cost of building new features and also a framework to stick every part together

Offline first applications in React Native done well by Adrien Thiery

  • Don’t disrupt your user when being offline, but show them the normal UI without blanks that explains the current situation. Bonus points for leaving access to critical data like tickets and acting as if nothing is wrong
  • redux-offline can be a good tool to help you build UIs that care about the offline experience
  • redux-persist is a neat helper that helps your app to deal with being closed at any point of time
  • OSEDEA launched a program where you can file missing parts in RN and they work on open source to make it happen, check it out here

React Native Payments by Naoufal Kadhom

  • Topics like Payment Request API (Web & Apple and Android Pay) and react-native-payments were shown in detail
  • Try to not use payments forms, but the Payment Request API instead

Automate your React Native world with fastlane by Pierre-Philippe Trépanier

  • Fastlane (by Felix Krause) is a toolchain to automate different iOS and Android workflows”
  • Fastlane is set up quickly and it can be used for managing code signing certificates, building you application, put it in the app stores and many other things

I won’t cover the Q&A panel, you will need to see it yourself ;)

I missed this awesome conference this year, how can I stay up-to-date for next year?

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

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.