A reflection on ReactEurope 2017
Andy Davies, team leader at Epro, shares his reflections from the recent must-attend European conference for all things ‘React’
Tucked-away behind a bustling Parisian street, a collection of thousands of smart, young, ambitious innovators (nerds and geeks, if you will) gather for one of the most hotly anticipated web-development conferences of the year this side of the Atlantic, ReactEurope 2017.
For those unfamiliar with the technology, React is a JavaScript framework developed by Facebook that aids the creation of complex websites and applications that are expected to automatically update (or “react”) to newly received data without needing to reload the page. A relatively young framework, it has been somewhat revolutionary for developing large, intricate web applications ever since it was introduced back in 2013 and has turned-out to be remarkably scalable for us at Epro.
How would this conference benefit us at Epro, and our customers? We believe that usability is paramount for our software. The NHS is populated with systems that are often unfit for purpose due to their poor usability, resulting in inefficient workflows, additional costs and increased strain on an already overworked health service.
When developing our software, I want to ensure user experience (UX) friction-points are addressed so that the software is as user-friendly as possible. From the outset of ReactEurope, I was very keen to learn more about new technologies such as React Fiber, React Native, Redux and Draft.js. Proper utilisation of these technologies will enable us to maximise our application’s utility, minimise user frustration and optimise for workflow efficiency going forward.
How performance affects the NHS
To kick-off proceedings, Andrew Clarke – co-author of Redux – took to the stage for his keynote. Unsurprisingly, the primary topic was React Fiber: a complete rewrite of the core React algorithms which can bring huge performance boosts, particularly in the realm of page layout and animation.
Why is performance such a concern in healthcare? Many of us are accustomed to high-spec workstations for creating our software, but not everyone has the luxury of CPU cycles to spare. Investment in hardware within the NHS will often be limited meaning many hospitals only have access to entry-level PCs and low-power mobile devices.
As such, performance has a huge impact on the end user experience. You can imagine their frustration if a clinician was waiting around for the user interface (UI) to unfreeze, not knowing whether progress was happening behind the scenes or not. Our development team is actively using the React developer tools to identify places where we’re unnecessarily rerendering UI, cutting render times by stripping-out the superfluous operations.
Aside from Fiber, there were many other technologies discussed in various talks that could all help chip-away at response and load times, such as React Native, application streaming, benchmarking tools and WebAssembly. We’re currently planning an in-house workshop to consider how benchmarking tools could help us identify problematic areas of our codebase and subsequently optimise them.
How relevant is animation?
Another interesting topic, of which there were several talks, is animation. Now, while its use in clinical software might not be obvious, animation can be used to improve usability for users in a clinical context. Animation generally serves three purposes:
- To draw the user’s attention to a specific piece of information or UI.
- To meaningfully transition the interface from one state to another.
- To instil confidence in a user that applications are indeed progressing.
The humble loading spinner is probably the most obvious example of animation in UI. Humans can perceive lack of motion in interfaces as lack of progression; displaying a simple animated spinner reassures the user that it’s “working on it” and the expected outcome will be completed soon, reducing the risk of frustration.
Using motion to preserve context during UI transitions is another surprisingly effective tool for keeping users engaged and helping them accomplish their tasks. Google’s Material Design is a good example of this principle: the card-like UI elements move and morph into the next view in the series after an action, keeping the context of the task in tact so the user doesn’t get lost.
Not everything should be animated with flamboyant flair all over the place – animation has its place; it should remain appropriate to the context and be used sparingly. Animation is a tool that’s very easy to do badly and conversely difficult to get right. When an animation serves a purpose then it can be very effective.
Sarah Drasner’s provided an interesting perspective in her talk. She discussed the idea of establishing a set of predefined eases, timings and common animations that can be reused throughout an app for both consistency and practicality of implementation; this could even be taken a step-further by establishing an animation style guide to complement an existing static UI style guide – a notion shared by our team, and blogged about by my colleague Břetislav Mazoch.
Keeping up-to-date
As a team, we often visit conferences such as ReactEurope and digital health events such as EHI Live to remain informed about both the technology and healthcare industries. As a direct result of us attending ReactEurope in 2015, we started using Redux and have been seeing huge benefits in developer productivity and performance in doing so.
It’s easy for a company, and by extension its products, to become insular and suffer from tunnel-vision if only ever looking inward for solutions with the same stale set of thought processes being applied. Those that embrace the enormous open source and web development communities give themselves the best chance of being successful and staying relevant in a hugely competitive market.
While there will undoubtedly be a degree of thrash at these conferences (the infamous ‘JavaScript fatigue’), it’s possible to take the massive influx of new libraries with a pinch of salt and hand-pick just the solutions that are applicable to our problems. Once every few years, a new technology comes along that completely changes the game for the better (e.g. Redux, TypeScript and React itself).
Smaller, more unexpected gems can also be found at these conferences, such as React Sketch.app which we discovered would allow our UI designer to directly reuse React components that we’ve already written in his UI design software, thus preventing him from having to reinvent the wheel and saving huge amounts of time that can now be better spent doing what he does best: designing quality user experiences.
Final thoughts
Our mission statement at Epro is to support clinicians in delivering the best care possible for patients. To do that, we must focus on developing modern software with emphasis on good usability. Applications with a desire for quality UX, such as Epro, should be:
- Intuitive – easy to learn to use without aid, reducing the need for training.
- Efficient – take a short, efficient path for helping users achieve their goal.
- Delightful – highly-enjoyable experience to use so that users are engaged instead of frustrated.
- Fast – the application should be responsive and smooth.
In a mobile world, performance is a feature and should be considered a first-class citizen. Animation can be used incredibly effectively to improve UX or it can be horribly abused to destroy it – there’s a fine balance to be struck but it’s worth investing time into. Neither of these are necessarily the first to spring to mind when thinking about what the important elements of this kind of application are, but both can have profound impacts. Performant applications along with properly-implemented applications can go a long way towards providing smooth, enjoyable workflows to help clinicians get the job done.
As a developer, the vibrant community surrounding React and associated technologies is very refreshing. Gone are the days of old where software was only ever developed by big corporations with rigid development practices and closed-source mentalities.
The conference demonstrated true innovation that genuinely enhances the development process, leaving developers like myself energised and inspired to write great software with the right tools to code it efficiently and with less bugs.