It’s easy for technology to move quickly and make you feel lost. Your application is slowing down because it uses an old JavaScript library. Your time is spent patching outdated code. Although your UI appears to have been created many years ago, you need more time and resources to make it current.
All of these problems were faced by our team when our 10-year-old product used an outdated version of Dojo’s toolkit. We had to rewrite the code using an asynchronous model to migrate to the latest Dojo version. We needed to optimize performance and create a rich UI experience with the IBM Carbon theme.
After much research, we used Reacts over upgrading to a new Dojo version. This blog post introduces Reacts and highlights our research when comparing Reacts to other JavaScript languages. It also explains how Reacts was integrated with our existing Dojo library.
Solution: We wanted to create new pages using Reacts and integrate them into the legacy Dojo app. React also required us to create reusable components to quickly implement a single-page app and migrate the entire application page by page.
What is Reacts
React is a JavaScript library that allows you to create rich web- and mobile-based apps. This component-based, open-source library will enable you to view applications. It is based on MVC architecture (Model View Controller).
When choosing the next technology, we compared Dojo and Angular with Vue.js and React. Below is a table listing the features that we evaluated.
It is easy to create dynamic applications.
Performance improvements
Reusable components
It is easy to learn.
Unidirectional data flow
Debugging tools
Virtual DOM rendering
Flux architecture
Market value high
Integration highlights
The application has different pages that display the main header, navigation menu, and content. Our new solution was to add React pages on top of existing Dojo bases. Dojo renders the main page and navigation, but React is used for the content pages. This was due to our dependence on the main header, which took time and effort to migrate.
We made several critical decisions for our integration. We made the following decisions:
Start with a new, simple feature.
Identify standard components on all pages. For example, you can evaluate the pages with particular features such as navigation bars, data tables, forms, and search components to retrieve backend data.
You can create reusable components, such as search filters, that you can use on all pages.
Make a parent page, and then integrate the components as the pages require.
You can use inside-out portal development for standard components such as left and top navigations. These are Dojo-based but can be rendered using a React app.
Use the Carbon theme for the layout. Carbon is an open-source design platform for digital products and experiences. Carbon uses the IBM Design Language as its foundation. It consists of working code as well as design tools and resources. There is also a vibrant community of contributors.
Let’s take a closer look at specific integration components.
Integration Masthead/Banner
Our application’s masthead was used by other applications from the beginning. We designed it so that it could be used with other applications.
The masthead was exposed as a JavaScript that can be integrated with other web apps. This was very useful for us when developing with React. We didn’t have to rewrite the entire navigation code. Instead, we could immediately start with the main content. Dojo loaded the masthead, and React loaded the contents.
Integration with buildings
You can create React-ready production code by writing an execution when building with Maven.
This is an example of how to run an nap installation from Maven builds using your React components added under web content/src.
Challenges
The main challenge was getting the React and Dojo components to communicate with each other. Although the left navigation was still in Dojo, the main content was in React.
The publish/subscribe model was a quick way to communicate with React and send events.