Skip to content

REACT NEWS : Update in Redux-Observable, GraphQL, Mobile Centre, TC39, Webpack, React Fiber, and More

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

Developers such as Samer Buna, Parashuram N, Neehar Venugopal, Cameron Westland, and Jay Phelps recently discussed with our team new developments in JavaScript.

The videos featured will give you an idea of what’s been going on with GraphQL, Redux-Observable, React Fiber, the TC39 Import Proposal, and an introduction to the new term “Extensible React”.

GraphQL and ReactJS

Samer Buna on The Value of GraphQL, GraphQL Subscriptions, ReactJS

Samer Buna speaks about GraphQL and gives us an idea about how great it is to work with the query language and how perfectly matched it is for React. The language describes exact data requirements very clearly and optimizes the process of data communication between front-end applications and the server. Overall, it a better language and replacement for than the REST API.

Samer also introduces GraphQL subscriptions which offer real-time communication, Samer also talks about emerging applications which allow for the retrieval of immediate graphical API from the cloud. If an individual is looking to cloud host their data, there are now applications that can be used to define models and get the immediate graphical API required. This development removes entry barriers to beginner developers as they no longer have to write complete server applications to use GraphQL for their front-end applications, instead, they can simply generate an API in the cloud.

React proves itself to be a great framework to work with as it is both specialized and flexible. Unlike Angular or Ember, it doesn’t have ready-made design decisions or offer complete solutions that may limit developers from experimentation.

Samer recommends that once developers become confident with the ins and outs of React, that next steps should be to explore Node. He reasons that because React’s ecosystem and a lot of the new tools are node-based, React developers can gain a lot of power in knowledge by understanding the tools within the community.

{% youtube Oio0dfSvIYs %}

Mobile Centre, Browser Performance, and Tools for React Fiber from Microsoft

Parashuram N describes working on Mobile Centre, browser performance, and tools for React Fiber at Microsoft

At Microsoft, Parashuram N works on a number of projects as the program manager. One example includes the Visual Studio Code (VS Code) extension made for React, which allows authors to debug applications right from their VS Code. Experiments are being done to open up the possibility of testing reactive applications on the cloud.

Mobile Centre is another project that came from Microsoft. It is a system that runs alongside VS Code so individuals can choose whether they want to use one over the other or combine the two. Mobile Centre lets developers pick the Github repositories they want to work with, these are then signed, built, tested on the cloud, and distributed to end users.

Being a web developer comes with a many perks, one of which is having the ability to bring about change to users immediately. There is no lag in the process to present alterations or new features, and JavaScript fatigue is usually not an issue. Individuals who deploy code, are able to continuously do so without setbacks. Development practices and technologies such as LiveReload, Hot Module Replacement, and Browser Sync also make web creation easier to manage. All of these benefits are unique to the web development world, and are reasons why React fits so well with the web.

Although apps are really native and web-specific, moving into react native in the mobile development space is fairly easy to do. Reason being, ideas can be deployed instantly to customers using things like Code Push, and a number of tools such as the time travel debugging feature in ChakraCore are made available to help with the process.

Many performance-related projects have also emerged, such as browser-perf which enables automation of web performance or monitoring systems; and tv monster application which tracks the performance of React.js library. The app automatically collects performance data for all frameworks and all versions of react. It runs on Chrome and a number of mobile browsers. What makes these tests different from React’s existing performance tests, is that they are from a browser’s perspective, as opposed to JavaScript specific.

Parashuram also discusses the philosophy at Microsoft, RxJS, and building dev tools for Redux Observable on VS Code.

{% youtube pq38dSL7ZVk %}

The TC39 Import Proposal and Webpack 2

TC39 Import Proposal, Webpack 2, and the React Community in the East with Neehar Venugopal

In current times, Neehar’s primary focus as a software engineer is to provide a solution to developers that would help make building apps more efficient. He is one of the authors behind the import-proposal, which helps authors ship less code and emphasize the important ones to optimize performance (especially in mobile).

Import proposal is available in Webpack 2 and is in stage 3 proposal of TC39, meaning it hasn’t made an appearance in browsers. However, individuals do agree that it works so it will be implemented very shortly.

The commencement of import-proposal was inspired by talks about mobile for CSS and mobile for UI/UX. Seeing as mobile for javascript was yet to be discussed, but mobile app speed and performance needed to be improved, the topic finally began to surface. The question of “how can I send just the minimum amount of javascript required to show user what’s on the screen” emerged. Dynamic import was also introduced so lazy loading and code splitting could happen in webpack.

Neehar also talks about the React community in the East. Although far away, developers in this area still feel very much included in the community due to the great involvement of all developers, diversity, and communication between team members. Something that could be improved however in the West, however, is greater focus in performance. Unlike VueJS, React is not as widely adopted because of the performance issues.

{% youtube wEnIKjgmP2Y %}

Extensible React

Cameron Westland presents “Extensible React”

Cameron Westland is a software architect at Autodesk, currently working on a new web version that runs on React. The term “Extensible React” is introduced and can be defined as “a declarative approach to creating pluggable web apps”.

Extensibility is often used in applications. However, when it comes to building applications that are extensible there isn’t much conversation. Cameron and his team at Autodesk strive to spark greater discussion on this topic by giving answers to questions like “If an individual has a toolbar and wants to add an icon to the toolbar using an extension, how would he/she go about doing so if the application is built in React?”. One example of a solution includes the email client known as Annihilus. It is built in React, offers extensions, and allows individuals to add custom parts to their nightless email client.

One of the greatest things about React, is the effect it has on the ecosystem beyond its own community. For instance, before React, a lot of UI frameworks were holistic. They followed conventions and weren’t component-oriented. After React, a number of frameworks began adapting and rewriting their applications to be more similar to React. This ripple effect will surely be seen with the new changes in React Fiber. In addition to this, the React community is also one that is open-minded and encouraging. There is no one person who decides what React is going to be or should be. It has a strong team dynamic, and a lot of the ideas developed by framework authors are driven by the community.

{% youtube UdPx-OVEn28 %}

Redux-Observable and React Fiber

Jay Phelps on Redux-Observable, React Fiber, and ReactJS

The React community is described to be one of the most open communities out there when it comes to accepting new ideas. It brought about radical rethinking and was even assumed to be an antipattern at the time. React was able to rethink how things were done and create new best practices. These new norms have since been shared and adopted by other frameworks like Angular and Ember.

Jay discusses a few open source projects that are taking the lead in the React ecosystem. These include redux-observable, React Fiber, and Jest.

Jay shares the vision of redux-observable, or RxJs, is a middleware for composing or canceling async side effects using Epic as co-author of this library. Jay and Ben Lesh were inspired by other ideas in the community such as redux-thunk and redux-saga.

Jay shares his perspective on React Fiber and how developers can look forward to the ability to prioritize certain elements, such as inputs or animations, in their rendering.

Jest is a unit testing framework creates snapshots or code for a simple testing system. This is an example of a project, like React, that was originally not accepted but has scince been reinvented and is now successful. Today, Jest is emulated in other testing frameworks because it’s been so helpful.

{% youtube _BQL_TGvhqg %}

Don’t miss your chance to be more involved with the community by contributing! You can find the React library here.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Prefer email? hi@thisdot.co