Case Study
Centric Software
Javascript
TypeScript
React
Intern
Dojo Toolkit
MobXThe Situation
Centric Software provides powerful Product Lifecycle Management (PLM) software, offering a single source of truth for their customer’s product-related data.
When Centric 8 PLM was originally designed, its web application was using a popular, modern web framework at the time, the Dojo Toolkit. The application is a single-page application consisting of thousands of JavaScript modules that interface with a back-end server. Dojo Toolkit has powered the Centric 8 PLM web client since its beginning, but the web ecosystem has evolved, and much has changed over the past decade.
Centric Software recognized some of the pain points of using an older framework and wanted to begin modernizing their codebase. Centric researched development partners they could trust with this important project to transform one of their most critical applications. Centric selected SitePen due to SitePen’s proven strengths in both first-generation and modern JavaScript frameworks. SitePen has Dojo Toolkit founders and maintainers on their team who also have extensive experience with modern frameworks such as React, Angular, and modern Dojo in large enterprise applications. Centric determined that SitePen was the ideal partner to help modernize their Dojo Toolkit application.
Ultimately, Centric approached SitePen to help determine the most effective way to address their needs:
- Improve performance - Modern reactive frameworks and newer CSS features offer substantial performance gains over decades-old first-generation frameworks.
- Leverage reactive and responsive patterns - Using a combination of modern CSS and reactive components, building responsive, mobile-first components has never been easier.
- Bring new features to market faster - Once the proper application architecture is in place, developing new features using reactive components and an application state store is a very efficient pattern. With the additional benefit of using TypeScript, many bugs are caught early at build time, and not by the QA team, or worse, the customer.
- Improve developer experience - New developers are entering the workforce with reactive framework education, so finding developers familiar with the development stack is important. Creating new, tested, reactive components is often much less work than it was using Dojo Toolkit. Additionally, developers find that the additional IDE-help offered by using TypeScript is invaluable.
- Incremental migration - Due to the size and maturity of Centric 8 PLM, Centric could not feasibly rewrite the entire application in any modern framework in a single, standalone effort separate from their ongoing business needs.
The Solution
SitePen consulted with Centric Software to build a plan unique to their environment and then start incrementally transitioning their legacy Dojo Toolkit application into TypeScript and a modern framework without interrupting ongoing feature development.
While SitePen is an active contributor to Dojo, SitePen chooses frameworks based on the specific needs of their customers. In this situation, React and its ecosystem was determined by SitePen and Centric to be the best solution today.
SitePen began this re-architecture effort by integrating new technologies into the build optimization system. Centric 8 PLM uses a highly customized Webpack configuration that bundles their Dojo Toolkit modules into a single JavaScript file. SitePen tailored a custom TypeScript configuration specifically for Centric 8 PLM, designed to maximize interoperability with Dojo Toolkit and facilitating new development efforts. With this new build system in place, Centric can write new modules in TypeScript that seamlessly interact with existing Dojo Toolkit modules. Centric can also start converting existing JavaScript modules to TypeScript without impacting the rest of the application. SitePen was also able to introduce several optimizations to the Webpack configuration and outline a path forward for Centric to take advantage of more advanced Webpack features like bundle splitting and async modules.
Integrating a new framework into an existing application requires careful planning and forethought by architects highly experienced in both the old and new frameworks. Without this guidance, it is easy to fall into a situation where the two frameworks are inefficiently converting data and application logic back and forth. Every time one of these conversions take place, there is typically a performance cost. SitePen dove into Centric 8 PLM to understand and identify the optimal insertion point for React that would result in the smallest performance impact while still offering maximum productivity gains. This enabled Centric to begin feature development on several new features created with React and TypeScript.
Having a central place to store and share the application state is key to maintaining a large-scale reactive application. Before such techniques were commonplace, Dojo Toolkit relied heavily on the publish-subscribe pattern, in which parts of the application would subscribe for notifications from other parts of the application. While it solves the problem of communication between components, this pattern tends to be challenging to debug, as the code cannot simply be traced to its source, and can often lead to difficult to diagnose bugs. SitePen introduced an application store, MobX, into Centric 8 PLM and demonstrated how to integrate this store into the new React-based features as well as transition old publish-subscribe Dojo Toolkit components to use MobX as well. This provides a single place in which Centric can reliably store observable application state and have it available in both legacy and new features.
For some commonly used web UI components, creating them from scratch is often not worth the effort. For example, writing a data grid or styling components that fit Material UI specifications could easily require as much effort as developing the feature itself. The React ecosystem is vast, and with thousands of third-party options to choose from, finding the best fit for a specific use case can be difficult. SitePen helped evaluate and recommend optimal right third-party libraries for each situation, providing proof-of-concept examples and documentation weighing the pros and cons for each. This enabled Centric’s developers to concentrate on the features that differentiate their product, rather than wading through and evaluating potential libraries or reinventing the wheel.
The Result
With SitePen's help, Centric Software is shipping their first modern React features without having to do a complete rewrite of their application, enabling Centric to get modern features to market more efficiently and with confidence from SitePen’s extensive web application knowledge and experience. Additionally Centric has a solid plan with well-documented patterns for the continued incremental modernization from Dojo Toolkit into TypeScript and React!