React London Meetup July 2016

Summer is finally (somewhat) here. With it came our July React London meetup where several hundred React enthusiasts traded the heat for pizza, beer and three stellar talks (which you can watch here).

Draft.js in the Real World

reactlondon-july-kadi
reactlondon-july-kadi

Red Badger's very own Kadi Kraman kicked the night off with a run down of her experience using Draft.js – a fantastically flexible rich text editor – on a real-world project. She gave us an overview of how the plugin works and how she and her team integrated it into a custom built CMS. To link the plugin to the rest of the application, she built a Draft.js to Markdown converter which is now handily open-sourced. Since a custom CMS is a common project request, it's awesome that their team has made implementing this editor easier in the future.

To wrap up, Kadi ran us through the pros and cons of using Draft.js. It has a very active and supportive community and excellent documentation. It also works well with Redux-Form and is insanely customisable. However, she found that all that flexibility can make implementing an editor quite challenging and gives the plugin a steep learning curve. The verdict: "Would I use it again? Maybe."

BBC Sport and React

Screen Shot 2016-08-05 at 10.08.52
Screen Shot 2016-08-05 at 10.08.52

Next up was Ben Lambert from BBC Sport to talk about his experience using React and Node to handle the BBC's ridiculous traffic needs (1.2 million web socket connections on a single page!). To support server side rendering and non-JS experiences, BBC Sport have moved from Angular to React with a new internal architecture that includes an internal API-endpoint-to-React-component transformation engine called Morph.

BBC Sport pages are heavily data-driven which means components full of async data-fetching calls. Ben and his team used Relay and GraphQL's principles of containers (aka higher-order components) to abstract this data-fetching logic out of their components and make their code cleaner and more reliable. In one of the most impressive and bug-free live coding demos I've ever seen, Ben built a quick demo of a container that you can check out on Github. Can't wait to hear more from the BBC Sport team about web sockets and their transformation engine!

React, GraphQL and Relay in Practice

Last but not least, Fabio Santos from YLD gave us some insight into using GraphQL and Relay in production. Fabio outlined some unusual tips for optimising your React code, including inlining your CSS styles in your HTML to get a full render on one request, making your code isomorphic for more performant server-side renders and dealing with third-party libraries.

Fabio Santos presenting at React London July
Fabio Santos presenting at React London July

To illustrate his point better, Fabio showed us the most hilariously high-level infrastructure diagram of all time. What the green dots stand for, I still don't know! He followed up with an explanation of how they use GraphQL and deal with its various oddities. Despite some weirdnesses, Fabio gave GraphQL a thumbs up as a powerful but not over-the-top query tool. In contrast, Relay was judged to be doing too much and not well enough – perhaps released before it was really stable and ready. In contrast to Kadi's experience with Draft.js, Fabio saw Relay as a totally magic box that does all the work for you but loses so much in the way of flexibility and performance in the process.

We'd love to see you at the next React London meetup in August – you can track the event and get tickets when they're out at react.london. Hope to see you there!