React.Amsterdam 2017

Written by Bastiaan Snelder, Stoyan Delev, Ricardo Ambrogi and Jeffrey de Looff

The second edition of React.Amsterdam on Friday the 21st of April was the biggest React-related conference ever. That only shows how big and popular React and its community became in just one year: From a small meetup-like a conference in 2016 to a huge two tracks-event 1,100 people attended in 2017. Elements supported the event as a sponsor and a group of no less than seven of our developers went to Amsterdam to visit the conference and learn more about React.

We took a short trip with the coolest ferry from the Amsterdam Central station where we arrived at the Kromhouthal location in Amsterdam Noord. After being received by a really long queue, but a good cup of Brazilian coffee (Ricardo says Brazilian coffee is the best!), we knew that we would have an awesome day. There were two tracks: One packed with talks focused mainly on React and the other one on React Native.

React track

Styling React/ReactNative Applications

Bastiaan: The first talk of the day was already a very interesting talk. Max Stoiber talked about styled-components and convinced us well enough that we should use it, instead of CSS. This is very relevant for one of the projects we are currently working on. We are setting up a component based architecture with reusable components using React. We have been thinking about different solutions to combine styling with reusable components. One of the options is “styled-components” which the talk was about.

The talk started with an introduction on how components should be structured. He mentioned the difference between “containers” and “components”. Containers is how things work and components is how things look. Then the talk continued with some best practices for styling a component based application. One of the best practices is to use a css class name just once for every component.

To enforce the best practices mentioned in the talk Glen Maddern and Max Stoiber came up with the library called “styled-components”. The important thing about styled-components is that they removed the mapping between styles and components. If you only have a class name being used once, why use class names at all. The talk continues with some examples on how to use the styled-components library. It’s looking very promising since we can write actual CSS (compared to using react inline styles). So media queries, selectors etc. can be used. It also supports react-native, which is a big plus since we are creating components that work both on react and react-native.

It was a very interesting talk and we will definitely be looking into styled-components and will build some proof of concepts to see if it will work for our situation.

Test Like It’s 2017

Stoyan: This talk about Jest was given by Michele Bertoli of Facebook. At Elements we started using this tool a couple of months ago, and we really benefited and enjoyed working with them. Jest is a testing framework like no other, it is extremely easy to setup (took me a few minutes), it has a built-in assertion library, includes code coverage and is backward compatible with other test tools like Mocha and Jasmine.

The best feature is Snapshot Testing. Jest captures a snapshot of a React component tree (or any serializable data) and saves it in file and every time when the component is changed, Jest compare the saved snapshot with current snapshot and gives you a feedback if there is difference between them and what is changed.It also asks you to update snapshot if you agree with the changes.

In watching mode, Jest runs only tests which are affected by file changes and also runs failed tests first.

Michele also showed us two great tools: react-styleguidist and react-fix-it. Awesome!

Flow Typing a React Codebase

Stoyan: Another talk from a Facebook employee, Forbes Lindesay, this time about static typing with Flow. Flow is static type checker, which means it adds type annotation to JavaScript, similar to languages like Java or C. Having types could help a lot, for example, if your code is 100% covered by types there are no run time exceptions. Also when your code is typed you have up-to-date documentation out of the box. My favorite one feature is making refactoring much safer and easier.

In conclusion, write less test only when is necessary, use static analytics tools like Flow and EsLint to catch bugs on early stage.

Other talks

Ricardo: Jessica Chan, from Pinterest, spoke about how they switched their template rendering engine to React and compared that operation to upgrading an airplane while flying (!). Stefano Masini, talked about GraphQL as an alternative to REST APIs. In the lightning talks, Andrey Okonetchnikov got my attention. He spoke about git-hooks and linting. Nik Graf talked about React and Virtual Reality (yeah, really!) and Michel Weststrate, the creator of MobX.

React Native track

Erik and Jeffrey headed off to the React Native track. Where we found the following talks the most interesting.

Coding Mobile with the Pros

Jeffrey: Gant Laborde gave a quick intro on how they do React Native at his company, Infinite Red and some of the handy tools they build to speed up development. Tools such as reactotron, expo and ignite help them add dependencies and debug applications in a clean and efficient way. Second’s talk was focused on a web like release framework for mobile apps by Microsoft. Microsoft provides a platform called mobile center to build, sign, test, distribute and analyze both native mobile applications and react Native applications. React Native support is built-in and provides a more in-depth handling for error reporting.

Asynchronous & Offline Magic Tricks on React Native

Next, Woody Rousseau gave an insightful talk on how to architecture your application in a way it becomes more UX friendly. Since users often use an application with possible weak to no network it is important to take into account how to handle such (edge) cases. After lunch we started off with a talk by Mike Grabowski and his experience of writing React Native apps. React Native is used to not have a specific platform first approach but be able to create cross platform solutions. His vision for the stack of tomorrow encapsulates redux for the business logic and a shareable core between web, native and maybe even more. Tal Kol talks about one of the most important topics of the day: performance. Pinpointing the performance bottleneck: the communication between the JavaScript part and the native part by means of (de)serialization. In conclusion, passes over the bridge should be kept to a minimum to have a performing application.

React Native Touch & Gesture

Next up was a talk about React Native touch and gesture handling. Krzysztof Magiera gives an explanation of how the gesture system has been designed and how you can use it to stay out of trouble. Again, you have to make sure passes over the bridge are kept to a minimum.

Navigating React Native Navigation

Kurtis Kemple gave a comparison of navigation libraries that can be used to ease development of in-application navigation. The libraries he mentioned were: Native Navigation, React Navigation, React Router, React Native Navigation and potentially 137 others. Depending on the application’s needs you should pick a suitable one.

Testing & React Native: Lessons from the Battlefield

Last but least was Aaron Greenwald’s presentation about how you would test React Native applications. Aaron’s advice was to keep business logic self contained with single responsibility and not be tied to React Native’s components. This in turn would ease unit testing with test frameworks such as jasmine or jest.

Conclusion

In general, it was a great conference with a lot of useful stuff and definitely was a unique experience. Overall the conference gave us more in-depth knowledge of the technologies used to make React and React Native applications. We are definitely looking forward to more excellent conferences like this!

PS: You can look back all the talks on YouTube.

— 
 Also follow Elements on Facebook, Twitter and LinkedIn!


Originally published at www.elements.nl on May 1, 2017.