Content
Table of Contents | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Summary
Excerpt |
---|
Current frontend solution is using ReactJS that is not maintained. We should upgrade the frontend framework to Vite. |
Page Properties | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Overview
|
Page Properties | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
Prioritisation
|
Source
Migrating a ReactJS project to Vite offers several compelling benefits. Here are some reasons why we should consider this migration:
1. Faster Build and Hot Reloading Times
Build Speed: Vite uses ESBuild for bundling, which is significantly faster compared to Webpack used in Create React App (CRA). This results in much shorter build times.
Hot Module Replacement (HMR): Vite provides instant hot module replacement, allowing developers to see their changes almost immediately, thereby improving efficiency and productivity.
2. Optimized Performance
Lighter Production Builds: Vite automatically optimizes code for production deployment, reducing bundle sizes and improving page load times.
Optimized Dependency Handling: Vite uses optimized dependency management, loading only the necessary dependencies at startup, which speeds up the development server start times.
3. Simplified Configuration
Ease of Use: Vite comes with a simple, out-of-the-box configuration that is less complex compared to CRA, making it easier to set up and manage.
Customizable: Despite its simplicity, Vite offers flexibility and customization options that can cater to more complex project requirements.
4. Modern Development Experience
Native ESM Support: Vite leverages native ES modules (ESM) in the browser, which enhances the development experience by allowing faster module resolution and smaller build sizes.
Better TypeScript Support: Vite provides better and more efficient TypeScript integration, which can streamline the development process for TypeScript-based projects.
5. Enhanced Ecosystem and Plugins
Rich Plugin Ecosystem: Vite has a growing ecosystem of plugins that enhance functionality, similar to but simpler and more performant than the plugin system in CRA.
Framework Agnostic: Vite is not limited to React; it supports multiple frameworks (e.g., Vue, Svelte), providing flexibility if you plan to work with different front-end technologies in the future.
6. Improved Debugging and Development Tools
Better Debugging: The faster build and hot module replacement capabilities make debugging quicker and more efficient.
Modern Tooling Integration: Vite integrates well with modern development tools and libraries, providing a seamless development experience.
7. Future-Proofing
Emerging Standard: Vite is gaining popularity and is seen as a future-proof solution that aligns with modern web development practices.
Community and Support: With a rapidly growing community and backing from developers, Vite ensures ongoing support and improvements.
Additional Reading
Migrating to Vite can significantly improve openIMIS development workflow, enhance performance, and provide a modern development experience.
This will be the first step for other updates (connected to #361).
https://openimis.atlassian.net/wiki/spaces/OP/pages/edit-v2/3581542401first tests done - most work has to be done in the backend proxy code
- fullfill evergreen idea ticketJira Legacy server System Jira serverId 97d38f4a-4cd9-3563-900d-60c9290b47f4 key OP-1372
- vite migration epicJira Legacy server System Jira serverId 97d38f4a-4cd9-3563-900d-60c9290b47f4 key OP-1501
Page Properties | ||
---|---|---|
| ||
Involved EntitiesProcess DescriptionAdditional Reading |
Child Pages
Child pages (Children Display) | ||
---|---|---|
|