At Paybase, we're fond users of React and React Native, so naturally we were excited for London's first React focused conference in March. Joel, Michael and Sam joined some 500 other people at the QEII centre in Westminster for a day of talks surrounding developments in the React community.

The day took the form of a large scale meet-up - and as such hosted many talks about new libraries that members in the community had built and how they were using them to improve user and developer experience in React applications.

Formatting

The day began with a talk from Christopher Chedau (@vjeux) on his recent work on his JavaScript pretty printer prettier, a project born out of the conclusion that none of the existing styling tools 'really work'. Few code styling tools put line length at the forefront of their thinking - you could set up a warning on ESLint - but prettier puts it as its primary focus.

“We spend most of our time as developers writing code to help automate repetitive tasks, why wouldn’t we extend that to our actual writing of code? Who wants to spend time sorting out indentation?”

• Simon, Paybase

By enforcing a maximum line length to code, and a set of rules about how to break the line when that limit is reached, the package produces clean, readable code without enforcing granular syntax rules pushed by other style guides (such as Airbnb's style guide). prettier works by converting the parsed JavaScript into an abstract syntax tree (AST), and converting that AST back into JavaScript with the styling rules applied - ensuring consistent formatting.

Christopher discussed the problems he faced when developing prettier. In order to create a functioning printer, he needed to decide upon a set of rules for line length, as well as where and how to break those lines. Settling on one choice proved difficult, as the majority of styling comes down to (strongly held) personal views. Perhaps even more difficult was deciding on options where there was little feeling about which was ‘wrong’ or ‘right’ - a problem he solved by running a grep for both styles on the Facebook codebase, and democratically picking the most popular.

At Paybase, we believe that if code is concise and readable, personal quirks shouldn’t come in the way of that. However, the introduction of a tool that could help standardise the code base, while imposing minimal restrictions on the developer would be a great addition to our toolchain.

As Simon at Paybase says “We spend most of our time as developers writing code to help automate repetitive tasks, why wouldn’t we extend that to our actual writing of code? Who wants to spend time sorting out indentation?”. Indeed, Christopher Chedau felt similarly when he was prompted to open vim and “press 5 different key bindings” to fix some indentation issues. He wanted something simple, a one-click solution - and so prettier was born.

Styling

Max Stoiber (@mxstbr) gave a talk about his library styled-components – a rethink on how we should approach style management in React web applications.

Colocating styles and components is a pattern that has emerged from the React ecosystem to solve CSS's inherent problems with global name-spacing and increasingly large codebases. He argues that following this development, the mapping between styles and class names becomes a redundant abstraction, and instead proposes a fundamental link between DOM elements and their styles – 'Visual primitives for the component age'.

This removal of the class / style mapping also eases another of CSS's scale issues – dead code elimination. The two existing problems are identifying which classes are unused, and fear of deletion because of its unknown consequences elsewhere in the codebase. Unused components are far more apparent, and with styled-components, any mistaken deletion would cause a fatal error during development – meaning no risk of un-styled markup making it to production.

The library's API uses ES6 Tagged Template Literals which allows the use of JavaScript functions to dynamically generate styles based on the props of a component. Furthermore, tagged literals also remove two common tradeoffs most CSS-in-JS solutions exhibit. Firstly, use of full traditional CSS syntax and units, as the rules are now just strings; and secondly, global themes and variables provided by a top-level wrapper are accessible in the aforementioned functions.

Offline-First

Two of the talks at the conference centred around the same topic: offline-first applications. Both Andrey Sitnik (@andreysitnik) and Jani Evakallio (@jevakallio) gave talks about packages they have been working on to easily add this functionality to applications.

Building applications with offline-first can have major benefits in user experience. As Jani Evakaliosays in his talk about his package redux-offline, your users really don’t care that your React Native app is really a JavaScript app and might not function properly without a solid connection - they “just want to see their photos”. Not only does storing data offline help with initial load times, but it enables you to update the UI optimistically.

Optimistic UI is a paradigm we're fond of at Paybase, and one that we've employed heavily in earlier products. It boils down to building your interfaces to assume that the requested operation has succeeded, whilst providing simple paths for error fallbacks - allowing you to eliminate unnecessary blocking of the UI.

redux-offline

redux-offline, as the name suggests, implements an offline first approach alongside the very commonly used redux state management package. It is designed as a middleware for redux, allowing full configuration through the common redux API.

When writing your action creators, you simply pass a metadata object to the action which describes both whether the action should be persisted (or is purely local), and how the client should react when the side effect succeeds or fail (i.e. which further actions should be dispatched in either case). Similar to redux, the power here really lies in the ease with which you can reason about your state and logic.

logux

Whereas redux-offline is designed to work with any backend (and as a consequence requires you to write more code to interface with your server), logux takes a more opinionated, holistic approach - providing a full client/server implementation of its own peer-to-peer protocol. It supports not only synchronisation of actions between a client and server, but also between two clients.

An interesting feature of logux is the notion of leader and follower tabs in your browser. When opening two or more tabs of a logux client in the same browser, in order to maintain consistent state between them - a single leader tab is elected which connects to the server, with the follower tabs synchronising with their leader. This also has the added benefit of minimizing client connections to the server.

Wrap up

All things considered, React London was a great day hearing from some top developers in the community that are not only writing packages that provide large developer experience wins, but also empowering developers to write robust applications in a simple way.

At Paybase, we’re excited to contribute to this effort and look forward to open-sourcing some of our own utilities in the future.

Follow us on LinkedIn.