If you and your colleagues work 100% remotely from all over the world, no opportunity to meet with them in person should be missed.
We try to create these opportunities as often as possible, focusing them mainly around various events, such as conferences.
This time around, we picked React London!
Credit: Wojtek Zając
The conference took place in the QEII Centre, Westminster, close to many of London’s main attractions and notable areas.
It was just one day, but the event was packed with talks of incredibly high value. If you did not have the opportunity to attend the conference and would like to get an overview of the talks before watching them online, take a look at the reviews below:
Prettier — new JavaScript formatter
by Christopher Chedeau — Facebook
The first presentation at React London was all about… React? Not really! Chris showed us a new JavaScript formatter that goes way beyond ESLint. As he admitted, the project might be very controversial among the developers — everyone is always so passionate about their own code style that they are not willing to give up their own habits. Yet, authors of prettier are trying to find the best common practices for JS code formatting. They are fully aware that it will not be easy and the project is still in beta phase. Prettier automatically changes the styling of your project code, so that it conforms to a consistent style. While you might not find it useful in a simple project, where you are the only developer working on it, passionately taking care of all the commas and semicolons, it might become extremely helpful, when your team consists of many developers. Make sure to check out this project. I keep my fingers crossed, and I hope it will become as popular as ESLint is nowadays.
Logux — synchronise your Redux actions between client and server
by Andrey Sitnik — Evil Martians
Andrey is trying to solve the problem of problematic synchronization between client- and server-side. The fetch method available in ES6 makes it easy to request resources. However, when you add some error/edge-case handling — actions that need to be done at certain steps (basically real world examples) — the situation gets complicated very quickly:
Image copied from Andrey’s presentation
Andrey's project — Logux — was inspired by the idea implemented in Swarm.js (based on CRDT — conflict free replicated data types) and Redux. Logs are supposed to store lists of changes, which are then synced between client and server. Andrey also talked about the issues he needed to face while working on Logux. Which action was first, synchronizing time between the client and server side, or what should happen if the user opens a couple of browser tabs. While Logux is still under construction, the 0.1 version is ready and even used in production (Amplifr). Make sure to watch the video, as Andrey will not only show you Logux but also make you laugh through the entire presentation!
Reason — new syntax & toolchain layer for OCaml
by Cheng Lou — Facebook
Reason is a new syntax for OCaml, similar to modern JavaScript, Flow or Rust. Cheng delivered the 2nd part of his presentation about it (1st part was presented during React Conf, watch here). In London, he talked about modules, describing them as “mini files”, comparing to folder-file structure at the language level. Cheng also pointed out that, nowadays, we as developers still tend to repeat a lot of code, and we constantly need to deal with tools that are required to “make things work”.
Lightning Talks
Snapshot Testing — a new way of testing?
by Anna Doubkova — Red Badger
Snapshots are supposed to help you with testing your UI, to make sure it does not change unexpectedly. This should already give you the idea that its main purpose is not to replace any other type of testing. It could be a great addition, if you need to make sure that, e.g. a button must always be placed on the right of a specific label. A typical snapshot test case is based on screenshots, where they are compared and any small change will result test to fail. Snapshot Testing with Jest is supposed to test your React components. Instead of rendering UI, test renderer will generate a serializable React tree and compare it to the saved output. If the changes were made on purpose, you just rebuild certain snapshots.
Realtime Webpack — what happens if you run thousands of builds a day?
by Oliver Woodings — Qubit
Oliver started his presentation by explaining why Qubit had to come up with an idea to generate real time Webpack configuration. Their customers get a custom React frontend build based on the current configuration they set. It is an interesting talk, if you need to deal with building enormous amounts of Webpack configs and you care about the performance. Oliver also talked about using preact and buble to increase the compilation speed even more.
Redux Offline — emerging markets and need for offline support
by Jani Eväkallio — Formidable Labs
Jani prepared a talk explaining why offline support is important even or especially nowadays. React Native allows for easy building of amazing mobile apps, and Jani showed an example of a project that used that technology, but the bottom line was this app was useless when the user had no internet connection. First, I thought, "Everyone has an internet connection on their smartphone, right?" Jani immediately explained that we might not even be aware of situations where this is not true — e.g. with offline maps while travelling by metro, where reception is usually poor. Also, in growing markets across Asia and Africa, where cell networks are still under construction, offline support would mean a totally different user experience. Redux Offline makes it easy to persists the state of your app offline and out of the box.
Next.js in production
by Jasdeep Lalli — Deliveroo
Jasdeep walked us through the project made by the Deliveroo team that uses next.js in production. Next.js is a minimalistic framework that creates server-rendered React applications. He also presented how routing works in that library, which was a quite interesting thing to see, since their approach is quite different compared to the one used in other React libraries. An interesting talk for everybody interested in Next.js, wondering, if it is ready to use!
<💅> styled-components — next level of using CSS with React?
by Max Stoiber - Thinkmill
My personal favorite talk during this conference, probably because I have the exact same impression as Max — there are so many different ways of using CSS with React, but not one that sounds right and is an elegant solution. I believe it is the next step after CSS modules and I cannot wait to test styled components in my next project. Max said that the styled components library "removes the mapping from class-names to components", by defining CSS next to the definition of component itself. Yeah, you understood it correctly — again CSS in JS. I am a huge opponent of inline styling, but the idea Max presented is a bit different. You just need to make sure to have two different types of components:
- Containers — hold JS logic
- Components — define the look, styling
That way, we maintain separation of concerns, and styles can also be based on passed props — directly, without the need to define separate classes like --active, __open, etc.
React Fiber — and custom renderers in React
by Dustan Kasten — Webflow
During this talk, Dustan introduced us to the new "big thing", an internal API for the React Fiber renderer. What does this mean? Think about React Fiber as a project that is trying to reimplement React's core algorithm that provides a mechanism that translates a React element into changes to the environment you are using. It increases the suitability for animations, layouts, gestures. The key feature is that React Fiber will be able to split rendering work into smaller chunks and spread it out over multiple frames. Dustan showed us an example how to write a custom renderer that is capable of rendering e.g. to canvas or hardware that is controlled by React components.
Panel Discussion
by Lee Byron — Facebook, Ben Alpert — Facebook, Dan Abramov — Facebook, Christopher Chedeau — Facebook
The audience was allowed to suggest and vote on questions via slido.com. As expected, there were questions about comparing different libraries, the future of React, and some questions related to work at Facebook and Mark Zuckerberg himself. Questions about some choices, like "Redux or Mobx?" or "Which CSS in JS framework?" were answered pretty easily — the panel usually suggested that it is a personal preference and there is never just one right answer. An interesting question came up and received many upvotes from the audience pretty quickly: "What if you could do Facebook.com from scratch?". The answer was pretty obvious — "We wouldn’t do it".
To learn more about the underlying reasoning, about future releases, and new big things, make sure to watch the entire video on YouTube; it is certainly worth it!
Crossbro — React-powered crossbow
by Ken Wheeler — Formidable Labs
Yep, there is no mistake in the title. And no, crossbow is not a new framework! In his awesome presentation full of humorous notes, Ken showed us his personal robotics project. By using React and Arduino, he built an automated crossbow that is controlled by a React Native app. And there was a live demo! Make sure to check it out.
Organizing a meetup
If your team is also 100% remote and you would like to organize a similar endeavour, here are some tips from us:
Renting a place
We usually go for AirBnB and try to find a place that can accommodate all attendees.
Credit: Wojtek Zając
Sometimes, it gets tricky, especially when your group grows past ten people. In bigger cities, though, you still should be able to find a sufficient apartment. Alternatively, you can pick a few smaller ones, but that pretty much rules out some of the social aspects, which are, at the end of the day, one of the main reasons the meetup has happened.
One place to gather them all
Speaking of gathering a bunch of people flying in from all over the world, these tips should help you with organizational matters:
- create a dedicated communication channel (we use Slack) for the event,
- a few days prior to the event, ask the attendees about their time and airport of arrival (tools like Howdy come handy); it often turns out that many folks land at similar hours - knowing that allows your group to travel further together and split the costs,
- collect all old school phone numbers before any member of your group enters the foreign cellular zone and vanishes from the face of Earth due to not having the data roaming enabled.
Conclusions by Szymon
A single-day React conference might sound too short. Especially when one takes into consideration how much has been going on in the React community recently. However, this day was packed with amazing, incredibly interesting talks that should satisfy every JS-enthusiast. I'm keeping my fingers crossed, a little bit harder than for other projects, for Prettier, styled-components, and Logux. I cannot wait to test them out in my next React project! Thank you, X-Team, for giving me that possibility ❤️!
X-Teamers say
Was there anything in particular that you liked most about the conference itself?
Gianluca E: Great venue!
Szymon M: Despite being super tired on Monday, I enjoyed the meeting at the Facebook HQ and the talk about advanced uses of GraphQL. Tuesday was packed with great things, but the best presentation, in my opinion, was about styled-components. Best, because I learned a lot from it and will use it for my next React app! I tried them before, but was not sure what the best way to do it is. Learning from the author himself… priceless. The presentation about Logux from Andrey was quite a lot of fun, but Logux itself does not seem quite ready for use yet. The last lecture about building an automatically-controlled bow was very interesting (and funny), but it seemed like the author was trying too hard to find the connection to React :)
Michal N: A decent conference in a great location!
Wojtek Z: As always, really cool to hang out with the team, I loved the location, too. The talks were much better at React Europe, though. I still loved it.
I am sure you have learned something from the talks. Could you share the most valuable piece of knowledge you have gained?
Gianluca E: Conflict-Free Replicated Data Types (CRDT) was something that hit me; might be useful for some projects.
Michal N: Reason - the new programming language.
Wojtek Z: I loved talks about CSS in JS and Reason.
Would you recommend attending conferences to other developers? Why?
Gianluca E: Sure, you are not always supposed to properly learn something at conferences, but you are always going to be contaminated with new ideas and different approaches.
Szymon M: Not only do you have an opportunity to learn about new trends and technologies / libraries, you gain the opportunity to meet the authors themselves! Learn about the motivation, the problem they are trying to solve. It is always better than just a quick look at the lib and saying “nah, I am using something else, why they are reinventing the wheel again?“. Also, it is important to attend conferences to meet new people. Not only X-Teamers (though thanks to the conference I met so many!), but also people from all around the world. It is also a great opportunity to share how awesome X-Team is. I am always proud to say I am from X-Team - sometimes you see this admiration on their faces, sometimes I am happy to explain who we are and how to we work (fully remotely is always a great surprise!).
Michal N: Even if there is nothing new in the talks, it is always good to do networking... Socializing broadens your nerdy mind ;)
Wojtek Z: Definitely. I feel really inspired and energised after reconnecting with the team.