React London Meetup - January 2018

We all gathered for this month’s React meetup in the new Facebook office at Rathbone Square. The amount of beer, pizza and interesting topics was tremendous.

Robbie McCorkell (@robbiemccorkell) was MC’ing, and he took the opportunity to call for volunteers for a new project with London Pride. They are developing a new platform in collaboration with Red Badger and are looking for anyone interested to help in the project. Please send an email to socialvalue@red-badger.com if you want to be involved.

React: The Bad Parts

Marcel Cutts (@marcelcutts) from Asgard gave the first presentation and wanted to share the difficulties he encountered when developing in React. Wearing funky leggings, he started to state the best parts of React, and how it rose to dominance. However, he expressed that it is not perfect and it may lead to frustration. He mentioned “churn” and how quickly things change in the web development sphere. For example, regarding the syntax in React, we transitioned from React.createClass to class declaration using constructors. Using https://github.com/facebook/jscodeshift, a JavaScript codemod toolkit he demonstrated how it can simplify syntax refactoring.

Marcel Cutts was dressed to impress

He mentioned a feature of the React API called Context, which allows passing data through the component tree without props. Unfortunately, it is seen as an experimental API and may be removed in the next versions of React. He presented an alternative with the use of publication/subscription pattern.

He finished by talking about Higher Order Components (HOCs), which are functions that take a component and return a new component, allowing you to share and reuse code.

Slides can be found here: https://marcelcutts.github.io/react-the-bad-parts

SSR with Next.js and React

Andrico Karoulla (credit: Sonya Moisset @sonyamoisset )

Andrico Karoulla (@andricokaroulla) from Trint was the second speaker but was his first time speaking at a meetup. He did an excellent job presenting Next.js and SSR (Server Side Rendering).

He first shared his enthusiasm for Next.js, with a live demo demonstrating how routing and bootstrapping a React project are simplified when using the Next.js library.

He then took the opportunity to talk about SSR and its advantages, in particular how it is perceived by users. The loading of the page appears to be more instantaneous. However it may involve more work on the server side.

Finally, he shared how SSR may be costly in terms of CPU power but this can be mitigated by caching already rendered pages.

You can find the slides here.

Analytics in a React / Redux SPA

Marton Hipszki (@mhipszki) from Equal Experts, was the last presenter, and he shared his views on analytics in the context of React Single Page Applications (SPAs).

He started by reminding us about analytics and how they can help you better understand your users’ behavior and allow you to make the right decisions regarding UX. He went into more technical detail with Google Tag Manager (GTM) and the different ways you can track events and navigation. For example, by default, SPAs do not track events properly as the data layer is not reset when pages are changed leading to some extra work being needed. He presented the different ways of adding analytics to an SPA, going from the simple custom data attribute to using Redux actions and a middleware to trigger the events tracking. He shared a demo of the latter, using an analytics middleware in charge of watching the action to be tracked and pushing data to the GTM data layer. He concluded by saying that even if analytics is not always the most popular subject, it is important to be conscious of at the beginning of a project in order to keep the coupling with the event tracker to a minimum.

You can get more information on his repo: https://github.com/mhipszki/react-redux-analytics

 

Thanks to all our speakers, Facebook for hosting us and everyone who came along on the night. If you’d like to find out about future React London meetups head over to meetup.react.london and if you're interested to be a speaker yourself, please submit your proposal here.

See you next month.

Xavier Delamotte

Software Engineer

More from Xavier