The previous version of Update Assistant had several usability issues. The interface was overloaded, the update process could take too long, and small errors often turned into real challenges. The new Update Assistant V7 has undergone a massive redesign, making it more user-friendly, stable, and efficient.
In this article, we will explore the key improvements and explain the technologies behind the redesign.
Why Was a Redesign Necessary?
Before starting the update, the development team conducted a full analysis of the old module and identified the following issues:
-
All frontend code (JavaScript and CSS) was bundled into a single large file, making it difficult to maintain and modify.
-
There were no proper code quality control tools such as linters, testing, or style validation.
-
The interface relied on outdated techniques like
display: none, causing instability. -
The entire functionality was placed on a single, overloaded page, leading to navigation difficulties.
-
Checking technical requirements before updating slowed down page loading.
To fix these issues, a complete overhaul was carried out.
Technical Enhancements: What’s New?
1. Optimized Code Structure
Previously, all code was stored in a single file, making it difficult to maintain. Now, it follows modern standards, with the frontend separated into a dedicated _dev directory.
2. Migration to Vite for Asset Optimization
One of the biggest changes was the introduction of Vite.
🔹 What is Vite?
Vite is a modern build tool for frontend applications. It is significantly faster than Webpack because it uses ES Modules (ESM), allowing browsers to load only the necessary code parts.
Vite Advantages:
✅ Instant reload on code changes (hot module replacement).
✅ Faster builds thanks to pre-compilation.
✅ Automatic dependency optimization (e.g., minification of CSS and JS).
✅ Reduced page load time, as the browser only loads required files.
How Did It Improve Update Assistant V7?
With Vite, the module now loads faster, the interface is smoother, and updates are performed more efficiently.
3. Integration of Code Quality Control Tools
The new version includes:
✅ ESLint — analyzes JavaScript code to prevent errors.
✅ Stylelint — checks CSS code for better readability and consistency.
✅ Prettier — formats code according to unified standards.
✅ Jest — a testing framework for JavaScript to catch issues early.
4. Improved UI: New Pages & AJAX Updates
One of the major UX problems in the old module was an overloaded interface. All functions (updates, backups, recovery) were placed on a single page, making navigation difficult.
What changed in V7:
🔹 Functions are now split into separate pages, making the process more intuitive and convenient.
🔹 AJAX is used for updates, eliminating the need for full page reloads and improving responsiveness.
More >
