WaveMaker 11.11.0 - Release date: 28 April 2025
WaveMaker's Release 11.11 introduces numerous notable features, including differentiation between user and migration changes in Studio, the Dynamic Wizard Widget, migration to standalone components, and significant enhancements such as improved canvas visuals, optimization of applications by cleaning up unused i18n files in Web, chart widget enhancements, migration to Expo image, and gradient text in React Native. This release will also address several crucial bugs in both web and React Native platforms.
New Features
Differentiating User Changes and Migration Changes in Studio
Studio's new feature for differentiating user changes from migration changes during project upgrades offers significant benefits, enhancing the development workflow while ensuring compatibility with the latest tech stack and Studio practices.
Benefits of Differentiating Changes
Enhanced Transparency: By clearly separating user modifications from migration updates, developers gain a better understanding of the migration changes, reducing confusion and the risk of unintentionally reverting essential updates.
Efficient Troubleshooting: When issues arise post-migration, being able to understand and locate whether a change was user-initiated or part of the migration process helps in quicker diagnosis and resolution.
Streamlined Maintenance: Maintaining applications becomes easier and clearer when developers can focus on user-specific changes without being distracted by migration modifications.
Reduced Errors: Clear differentiation minimizes the risk of accidental overwrites or deletions of critical migration updates, leading to more stable and reliable applications.
New UI Tabs for Change Differentiation
In the View Project Changes window, users now see three tabs:
- User Changes – Shows only files changed by the user.
- Migration Changes – Lists all changes made by Studio as part of the migration.
- Overall Changes – A combined view of both migration and user changes.
- Changes Since Last Push (only when PR flow is enabled) – Shows changes made after the last push.
Check out Distinguishing User vs. Migration Changes in WaveMaker Studio to learn more.
Migration
Migration to Standalone Components in Angular
With this release, users can observe the transition from a module-based architecture to standalone components in generated Angular applications. This transition allows users to build applications without the rigid structure of modules.
Why this transition?
The benefits of moving from a module-based architecture to standalone components include:
- Simplified development process for Angular applications.
- Improved performance with faster load times.
- Enhanced reusability using standalone components.
- Support for tree-shaking optimization.
Impact on Generated Applications
Starting with WaveMaker Release v11.11, generated Angular applications have transitioned to using standalone components, replacing traditional NgModules. This shift aligns with Angular's latest best practices, simplifying application structure and reducing boilerplate code.
Key changes include:
- The app.module file is no longer generated.
- The App config file is generated to manage application dependencies.
- Page-level modules are eliminated, reducing the number of files in the application.
- Each page component is now a standalone component, lazily loaded upon routing.
- Application startup utilizes the modern bootstrapApplication() API, leveraging main.ts and app.config.ts for configuration, thereby removing the need for a root AppModule.
To know more, see Standalone Components in Generated Angular apps.
Enhancements
Dynamic Wizard Widget
Introducing the Dynamic Wizard widget, which allows users to build flexible, multi-step forms that adapt based on data and user context. Key capabilities include:
Auto-Generated Steps: Wizard steps and content can be dynamically created from datasets or JSON objects, making the widget reusable across varying scenarios.
Partial Content Support: Each step can load different templates or HTML content available in a Partial.
Dynamic Forms: Each wizard step can contain dynamic form that adapts to user data, allowing flexible input fields and validation.
Custom Navigation: Developers can set a default starting step, jump to specific steps, and track the current step index.
Real-Time Step Management: Add and remove steps dynamically based on user actions or logic.
Context Awareness: Easily identify the first or last step to disable buttons or trigger special actions.
These features make the wizard highly customizable, enhancing user experience and improving multi-step forms handling in dynamic workflows. To know more, see Dynamic Wizards in WaveMaker Studio.
Improved Canvas Visual
This release introduces a significantly enhanced WYSIWYG (What You See Is What You Get) canvas, ensuring that the design environment closely mirrors the live application. This update addresses previous challenges such as text overflow, unintuitive component names, and misaligned layouts.
Key Improvements:
WYSIWYG Accuracy: The canvas now accurately reflects the live application's fonts, spacing, padding, and alignment, providing a seamless design-to-preview experience.
Enhanced Text Handling: Text elements are intelligently managed to prevent overflow, maintaining a clean and organized canvas.
Meaningful Component Naming: Components are now auto-named based on their binding expressions, offering clearer context and easier navigation within the layout.
Benefits:
- Reduces time spent on fixing layout inconsistencies.
- Streamlines the design-to-preview workflow.
- Enhances confidence in the design process, ensuring that what is seen during development matches the end-user experience.
To understand more, refer More Accurate Canvas Design: Bringing WYSIWYG Closer to Reality.
Optimizing Angular Applications by Cleaning Up Unused i18n Files
To optimize Angular application performance and reduce bundle size, it's crucial to eliminate unused localization files from libraries like Moment.js, @angular/global, and FullCalendar. This approach significantly enhances performance, leading to faster load times and a better user experience.
How to Remove Unused Locales
Moment.js: Use the moment-locales-webpack-plugin to specify which locales to include, effectively excluding the rest.
@angular/global: As part of a prebuild process, we are updating the angular.json assets to copy only the necessary locales during the build.
FullCalendar: Manually import only the necessary locale files instead of the entire set, ensuring that only the needed locales are bundled.
Performance Testing Results after Optimization
- A 25% reduction in finish time.
- A 35% decrease in load time on Fast 4G networks.
Disk usage of existing and updated apps are shown below.
Refer to Optimize Web Apps: Reduce Bundle Size by Cleaning Up Unused i18n Files to learn more.
Studio Preview Now Opens in a New Tab
In previous versions, users had to manually copy and paste the preview URL into a new tab. With this release, clicking 'Studio Preview' opens the app directly in a new browser tab, replacing the earlier pop-up window approach. If the preview tab is already open, clicking 'Studio Preview' again automatically refreshes it, ensuring you always see the latest changes without manual intervention.
This enhancement eliminates pop-ups, improves browser behavior, and offers a more modern, seamless experience.
Check out Studio Preview in New Tab to know more.
Removing Unnecessary Items in Angular War File
Previously, Angular build-generated .war files included many unnecessary files like dev assets, themes, and media, leading to larger deployment sizes, security risks, and manual cleanup efforts.
To resolve this, a default exclusion mechanism is introduced in the Angular build profile, automatically omitting non-runtime files. This reduces .war size, improves security, and simplifies the build process. Developers can further customize exclusions using Maven properties.
React Native
Chart Widget Enhancements
Hiding X-axis Label
Previously, users were unable to hide x-axis labels. Now, with this enhancement, users can hide the x-axis label by setting the showxaxislabels property in the markup section to false.
Before:
After:
Customizing Bar Width
With this enhancement, users can now adjust the bar width in Bar and Column chart widgets by setting the new property, barwidth, as required.
Before:
After:
Migrating Picture Widget to Use Expo Image
In previous versions, the Picture widget utilized the default Image component. With this release, it has been migrated to use Expo Image to leverage performance benefits such as improved caching, placeholder support, error handling, lazy loading, priority loading, and optimized delivery.
Implement Gradient Text Styling in Labels
Introducing a property to add gradient text styling in the Label widget. To implement this enhancement, use the below CSS property.
.app-label-text {
color: linear-gradient(90deg, #f00, #00f);
}
Bug Fixes
Application Redirection Failure in Embed Mode
When the application is in embed mode and loaded in an iframe, redirections were failing. To overcome this, the Content-Security-Policy header value has been made static, which was earlier dynamic.
Wizard Height Issue in Nested Wizards
In cases of nested Wizard widgets, users could see the height percentage changes in the markup section, but not in the UI. This issue is now fixed.
Data Field and Display Field of CheckboxSet are Auto Setting to Empty
When using the CheckboxSet widget, the Data Field, Display Field, and Display Expression were bound to variables. Upon refresh/reload, users could not view any values bound to those fields in the properties panel—they appeared empty.
Allowed File Upload Extensions Property Updates is Reverted upon Publishing Prefab
In prefab projects, users were unable to update the Allowed File Upload Extensions in the General Settings section, as any changes reverted upon refreshing the page.
Add Button Action is Not Working for Tabs, Accordion, Wizard, Button group and Carousel
Previously, after adding a widget (Tabs, Accordion, Wizard, Button Group, or Carousel) and saving the workspace, clicking the Add Button didn’t save the markup as expected. This issue was resolved by implementing dirty-checking on the Add Button click. Now, the corresponding markup is correctly added upon saving.
React Native
Page Size Property Issue
In the List widget, users were unable to view the Load More message or indicator even when the provided Page Size value was less than the total number of items. This issue occurred when the list widget was configured with horizontal direction and pagination type set to On demand.
OnRender event in List is Triggered When List is Hidden in Prefab.
In prefabs using the List widget, the onRender event was triggered even when the list was hidden. This issue has been fixed by adding a new property, triggeronrenderwhenhidden, set to false in the markup section.
<wm-list
on-render="staticVariable1List1Render(widget, $data)"
triggeronrenderwhenhidden="false"
show="false"/>
Scrolling Issue in Dialog Widget
On Android, when using the Dialog widget, users encountered issues with vertical scrolling within dialogs. Scrolling often became unresponsive and required multiple attempts. This issue was particularly observed after interacting with non-editable/disabled input fields within the dialog.
Label is Shown Undefined Text When Used With AppLocale
When the Label is added using appLocale property in the script, it is displayed undefined instead of showing the Label text. This issue is now fixed.
Expo-Preview Issue
Previously, .gitignore files were included, slowing things down—especially after Prefab changes. Now, only the files you need are scanned, making Expo-Preview faster. This issue was fixed by improving preview speed by filtering out unnecessary files during app scans.
Technology Stack
WaveMaker Studio
UI Frameworks (Web and Mobile)
| Description | JS Library | Version | |
|---|---|---|---|
| JS Binding | jquery | 3.7.1 | |
| jquery-ui* | 1.13.3 | ||
| MVC Framework | Angular | 18.2.13 | |
| ngx-bootstrap | 9.0.0 | ||
| Styles | bootstrap | 3.3.7 | |
| Charting | d3 | 7.8.5 | |
| nvd3 | 1.8.11 | ||
| Fullcalendar | 5.3.1 -> 6.1.15 | ||
| Built-in functions | lodash-es | 4.17.21 | |
| Device support, gestures | hammerjs | 2.0.8 |
Optimized jQuery-UI library excluding unwanted components like accordion, datepicker, dialog, progressbar, spinner, tabs, and all jQuery-UI Effects.
Backend Frameworks (Web and Mobile)
| Description | Java Library | Version | |
|---|---|---|---|
| Spring Framework | 6.2.5 | ||
| Security framework | Spring Security | 6.4.4 | |
| Spring Data | 2024.1.4 | ||
| Spring Boot | 3.4.4 | ||
| Spring Session | 3.4.2 | ||
| Java JSON utilities | Gson | 2.12.1 -> 2.13.0 | |
| DB Persistence library | Hibernate(Jakarta) | 5.6.15. Final | |
| Sample database | HSQL | 2.7.4 | |
| JSON library | Jackson | 2.18.3 | |
| Logging framework | SLF4j | 2.0.17 | |
| Logging Implementation | Log4j2 | 2.24.3 | |
| Http client library | HttpComponents - httpclient | 5.4.2 -> 5.4.3 | |
| Servlet Framework | 6.0.0 | ||
| Database Connection Pooling | HikariCP | 6.2.1 -> 6.3.0 | |
| Commons Lang3 | 3.17.0 | ||
| Guava | 33.4.5-jre -> 33.4.8-jre | ||
| Postgresql Driver | 42.7.4 | ||
| Hibernate Validator | 8.0.2.Final | ||
| Jgit | 7.1.0.202411261347-r -> 7.2.0.202503040940-r | ||
| Commons Codec | 1.18.0 | ||
| Commons IO | 2.18.0 -> 2.19.0 | ||
| Commons Text | 1.13.0 -> 1.13.1 | ||
| Antisamy | 1.7.7 | ||
| Freemarker | 2.3.34 | ||
| Apache Tika | 3.1.0 | ||
| Mariadb JDBC Driver | 3.5.2 | ||
| Mongodb Driver | 5.4.0 | ||
| Jakarta Validation Api | 3.1.1 |
Web
Runtime Environment
| Description | Version | |
|---|---|---|
| JDK | 21.0.3 -> 21.0.6 | |
| WebSphere Liberty | 23.0.0.9+ | |
| JBoss Wildfly | 27+ | |
| Tomcat | 10.1.31 -> 10.1.39 |
This is the default Tomcat runtime support. Apps can be deployed to any standard Java Web Server running on JDK 11. For more information, see here.
Angular Web
| Description | Version | |
|---|---|---|
| Java | 21.0.3 -> 21.0.6 | |
| Node | 22.11.0 | |
| Maven | 3.9.9 | |
| npm | 10.9.0 | |
| Ant | 1.10.11 |
For more information about building projects with Maven, see here.
Mobile (React Native)
Environment Setup
| Description | Version | |
|---|---|---|
| Java | 17 | |
| Node | 18.17.1 -> 22.11.0 | |
| Maven | 3.9.9 | |
| npm | 9.5.1 -> 10.9.0 | |
| Android Studio | Ladybug 2024.2.2 - Meerkat 2024.3.1 | |
| Xcode | 15.4 - 16.2 | |
| SDK Build Tools | 34.0.0 | |
| wm-reactnative-cli | 1.8.8 | |
| Android Gradle Plugin (AGP) | 8.7 -> 8.10.2 |
Users can now use a single Node.js v22.11.0 version across both Web and React Native platforms, as well as CLI tools.
SDK Update
| Description | Version |
|---|---|
| Expo | 52.0.17 |
| React Native | 0.76.3 |