Thoughts

BlueSky is upgrading to React v16.8 12th July 2019

At BlueSky, we use React as one of our main frontend rendering framework. React allows us to easily create user interfaces that handles the view layer of our web apps. The latest version of React is 16.8, and our development team is currently in the process of switching over to this latest version.

View image

The first change to our codebase would be to start using the hooks functionality that was introduced in React v16.8, allowing us to write more functional components that are easier to read and understand. It also enforces better programming style of breaking out unrelated logic into their own systems. The ReactJS documentation explains how hooks work in great details. It can be found here: https://reactjs.org/docs/hooks-intro.html

One advantage using hooks is that we can remove some of the big frameworks that we are also using - such as Redux - since hooks can also be customised to handle sending signals throughout the system. This will be great for BlueSky since it means one less framework we have to keep up to date with, and make sure it is not exposing any security holes in our apps.

After experimenting with React and some of its add-on features, we found that setting up Server-Side Rendering (SSR) is not as easy as we first thought. A brief explanation of SSR is - if you load in a page directly from the browser URL that is 10 pages deep in the React code, React will send 10 separate requests to finally get to the page it is trying to get to. This hinders site's SEO since the crawler will only see a blank page (React's initial load). Which is why, with our next upgrade, we will be moving to a dedicated SSR React framework called Next.js. That allows us to show the 10 page deep URL in the initial load - making the site load faster, and improves the SEO through the crawler.

Our next big change is to then make the move to a reactive programming paradigm. With React, this means using the RxJS library. If you've done any programming before, you will know that you can use functions to transfer data from one place to another, by "calling functions". But this reactive programming means that you have an information source and an information sink. You can think of it as a publisher/subscriber model. All subscribers will receive the information that is published. Therefore, you can be sure that once you published the information, any part of the system that needs access to that information will receive it if they are subscribed.

Parham Bakhtiari

4 years ago

Systems programming UI/UX Apps

Recent thoughts