London React meetup: March

react-meetup-march-2015

Our March meetup was once again kindly hosted by Facebook at their cozy Euston office. 250 available spots were gone in just few hours after registration start, and so this blog will provide you with all the necessary materials to catch up on some important topics when developing React apps.

@pocketjoso delivered a talk on isomorphic React apps. Isomorphism in web development can be defined as the ability to run applications with or without JavaScript. Here are just a few reasons to have your app isomorphic:

  • Your app will be fully functional even if the browser doesn't support JavaScript, or a user deliberately disables it (like, say, if you're using Tor browser with JS disabled for security reasons).
  • It is good for SEO. Googlebot and other crawlers are still most effective with static HTML pages. Google indeed announced last year that Googlebot will gradually start supporting JavaScript, but it is still very limited in doing so.
  • If for any reason your app's JavaScript breaks, it will still remain fully functional.

Implementing isomorphic app with React is not that hard - it provides an extremely useful method for serverside rendering of static HTML pages. There are however a few more issues you'll need to solve in order to get fully functional isomorphic app, like passing props from server to client. In his talk Jonas covers all the important aspects, from rendering initial state of the app on server to making snapshots of stores and implementing isomorphic Flux pattern.

Slides available.

@robknight_ explains the important topic of testing React apps. As Facebook mentioned during the recent F8 event, unit testing of your app is very important.

There are few ways of doing so when implementing React app, most of them revolve around the idea of testing React components in isolation. React itself provides some batteries out of the box, and Facebook gently suggests more tools to achieve painless testing.

Robert tells his story of exploring different testing paths and covers a great deal of issues related to component based testing, caveats of using Jest, testing Flux flow, and even goes to mention new testing features of React 0.13.

Slides available.

@StuartHarris presented Tesco International Grocery mobile app made with React. It is fully isomorphic, works on most mobile browsers with or without JavaScript support, and is currently live in 7 countries around the world. Stuart offers a unique insight into how this massive app was implemented, as well as in-depth look at the tech stack evolution.

Implementing an international app brings some  interesting challenges like branding variations depending on country, localisation, support for multiple languages, different currencies and legal requirements. Stuart also performs a live demo of the app, showcasing how the app is rendered on both server and client, usage of data attributes to transfer localisation strings to the browser and how parts of the app were implemented as mini single page apps.

You too can try brand new Tesco mobile web app live - here is one for Thailand.

Big thanks for everyone who made it to the meetup, and who followed us online. Stay tuned for the React London April meetup announcement!

Alex Savin

Software engineer

More from Alex