This abstract has been accepted at the 2024 DHIS2 Annual Conference
Harmonizing Diversity in Development: UDSM DHIS2 Lab’s Integration of Angular and React for Enhanced DHIS2 Applications
The UDSM DHIS2 Lab has been a pivotal player in the DHIS2 community, continually adapting its software development strategies to align with evolving standards. A significant challenge emerged with introducing the DHIS2 core team’s design system, which necessitated the adoption of React-based tools, diverging from the Lab’s established Angular-based ecosystem. This tension between maintaining an existing infrastructure and integrating new, endorsed technologies presented a unique dilemma. The Lab needed to address this by reconciling its robust Angular framework with the core team’s React-oriented design system, ensuring compatibility and adherence to contemporary DHIS2 development norms. Facing the challenge of integrating a new React-based design system into its Angular-based ecosystem, the UDSM DHIS2 Lab adopted a phased approach. Initially, the Lab updated its existing Angular components to align with the design principles of the new system without abandoning its framework. As the DHIS2 core developers released more React components, resource limitations hindered the Lab’s capacity for timely updates. This led to a strategy to wrap the React components for use within the Lab’s Angular applications. The Lab created libraries to bridge the gap through this method, ensuring gradual alignment with evolving DHIS2 standards. The UDSM DHIS2 Lab has innovatively integrated React-based components into an Angular framework, creating the “ng-dhis2-shell” npm package. This library offers a DHIS2 shell for Angular apps, with key features like a header bar and login modal, ensuring alignment with DHIS2 design standards. Additionally, the Lab provides a Git repository with boilerplate code to streamline Angular-based DHIS2 app development, reducing setup time and promoting best practices. This approach exemplifies the Lab’s commitment to efficient and quality development within the DHIS2 community, establishing itself as a pioneer in cost-effective and standard-compliant DHIS2 application development. The UDSM DHIS2 Lab’s creation of libraries that integrate DHIS2 core components into Angular marks a significant advancement in the DHIS2 environment. This maintains the value of previous Angular work and adapts to the newer React norms. This innovative strategy promotes a collaborative and versatile development landscape, allowing for contributions from developers with different tech backgrounds. As we look to the future, this interoperability model sets a precedent for further cross-pollination between different frameworks, ensuring that the DHIS2 community remains united and resilient in technological advancement and change.
Primary Author: Rajabu Mkomwa
Keywords:
Angular and React framework Integration, Standard-compliant DHIS2 application development, “ng-dhis2-shell” npm package, UDSM DHIS2 Dev team, Tanzania
5 Likes