WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • How-to
  • Enterprise
  • Releases
  • Blog
  • Sign-in

›All Blog Posts

All Blog Posts

  • Mitigating Spring Zero-day Vulnerability CVE-2022-22965
  • Archiving WaveMaker 9 Projects
  • URL Change in WaveMaker Android WebView
  • Announcement about Angular 11 Update
  • Mitigating Log4J 2 Vulnerability CVE 2021 44228
  • Ending Support of WaveMaker 9 Projects
  • Git Branching Strategy
  • Important Announcement about Angular 10 Update
  • Accessibility Support in WaveMaker
  • Generating .aab files using wm-cordova-cli or AppChef
  • WaveMaker Studio enables faster database imports
  • Integrate SAP HANA Database with WaveMaker
  • Redshift Database Integration
  • Important Announcement about Changes to Documentation Domain
  • WaveMaker Releases 10.7 Version
  • Theme Builder with some coding (Build + Edit)
  • Understanding Scaling of WaveMaker Applications
  • Automatically Import your Website Branding Styles into a Theme
  • Certificate Pinning Case Study
  • Cordova 10.0.0 Upgrade
  • WaveMaker Releases 10.6 Version
  • Retain UI State in WaveMaker Apps
  • Theme builder is ready with a new update
  • PostgREST OpenAPI support in WaveMaker
  • Fully automated and scalable test execution using k8s
  • New file picker for mobile apps - Improvements in UI to select files in mobile
  • WaveMaker releases 10.5 version
  • Deliver faster applications with WaveMaker!
  • GraphQL in a Micro Services Architecture
  • Build Themes for WaveMaker Apps Without Any Coding
  • COVID-19 Visualization using WaveMaker - Part 2
  • COVID-19 Visualization using WaveMaker - Part 1
  • WaveMaker Integrates with DigitalOcean Kubernetes for App Deployments
  • Deployment Experience made better!
  • OpenAPI support in WaveMaker
  • WaveMaker platform is updated to use WKWebView.
  • Deliver WaveMaker Apps as Micro Frontend Modules
  • All-new WaveMaker docs with a powerful Search
  • Welcome to the WaveMaker Developers Blog

Deliver faster applications with WaveMaker!

June 23, 2020

Subodh Kumar

Performance is key to the success of any application. Even though an app is feature-rich if it's not responsive to user actions it might lose its userbase. WaveMaker is a platform enables our users to develop web, mobile applications. We strive to enable top notch performance of these apps. Towards this goal, with each release, WaveMaker introduces changes aiding in optimization of generated apps in terms of code, build outputs & serving of the apps. The optimizations are made available to the customers out of the box. It requires minimal or no changes to be done by low code developers while building an app in WaveMaker, thus easing the process of building faster apps.

This feature is part of WaveMaker 10.5 release. Checkout more details on what is included this release.

As per the Google stats link shared above, BBC lost 10% of its users with each additional second the site took to load & Pinterest gained 15% users signup when the perceived load times were reduced to 40%. So, performance is one of the important factors to consider in app development. An app with good performance can help businesses in better signups, enhanced user engagement & result in improved sales.

Performance in WaveMaker

WaveMaker is a low code platform that continuously works on performance optimizations so that it helps customers to not only build quickly but deliver application that load fast. WaveMaker adopts the best practices that are evolving in the world of web applications and brings those to its customers & applications.

When a user accesses an app, the speed with which it loads & becomes responsive is a testimony to its performance. Each page in the application infact needs multiple resources to be loaded. The loading speed is a function of below-listed factors,

  • Size of the resources loaded by the page
  • Network Speed
  • Number of HTTP Resource Requests required to build the page
  • Time spend on the server in crafting the response
  • User perception of app readiness

WaveMaker generates Angular code for the applications. Thus has the flexibility to leverage Angular build tools to optimize the application for better load times. Besides, if third party dependencies are required, modular libraries are preferred. WaveMaker component library of 100+ rich widgets. Still, the application build is only composed of components used. Below is the summary of optimizations that are delivered over past releases,

  • Treeshaking/Dead Code Elimination, with the help of Angular Production Build & modular component library
  • Lazy Loading of Routes & Components, so that user is served with just the required code as they navigate pages of the app
  • Enable modern compression algorithms such as gzip & brotli for all the requests reducing the network load & time.

With the current release i.e., version 10.5, WaveMaker team is pleased to announce support for deployment of frontend artifacts onto a Content Delivery Network, which can help in reducing the download time of static resources by ~30%.

Content Delivery Network

A Content Delivery Network(CDN) is a set of the geographically distributed servers which together enable fast, reliable & secure delivery of internet content including HTML, Javascript, Stylesheets, Images, etc.,

With CDN, the content is served from the CDN-edge server closest to the user location helping in faster load times. With caching & other optimizations CDN also reduces the amount of data origin servers must provide, thus reducing hosting costs. With its distributed nature CDN can ensure better availability and can handle failures better than any origin servers. With all these benefits CDN ensures consistent user experience for an app across the geographical locations.

To enable an application to make its artifacts served over CDN, the developer needs to handle additional operations such as,

  • Configure the Origin source & Content Delivery Network
  • Managing build artifacts with each release
  • Cache invalidations to ensure the user is served latest response
  • Additional operations based on CDN provider & more

But we wanted our low code developer to have access to all the CDN goodness very easily. So WaveMaker has made it available on click of a button, literally. With the current release, when the user deploys the WaveMaker app by clicking the "Deploy" button, it is deployed on AWS with CDN support without any additional configuration. This convenience is only available in the first phase of the deployment pipelines of the application. Note that, applications are deployed to this phase so that the app can be tested by the team & only last for limited period of time. See deploying to live phase.

CDN intergration with WaveMaker

Under the hood, WaveMaker handles all operations required for CDN deployment of apps as listed below,

  • Build process is updated with artifacts generation for front-end only static assets such as javascript, CSS, etc.,
  • Upload the static assets of the project to Amazon S3
  • CloudFront which is AWS-CDN service provider configured with all the required properties.
  • Updates the deployed project to serve static assets from Cloudfront CDN.

Thus ensuring the customers benefit from CDN advantages for every app developed with no additional effort.

However, for deploying onto production, the customers may prefer their cloud service provider with the help of CI, CD pipelines. Here is the documentation on how to configure your CI,CD pipeline to deploy to CDN. In the subsequent releases, we will also support one-click deployment to deploy on customer cloud providers.

Results

Below are the stats from WaveMaker testing with CDN integration comparing the download times of static assets for some of the standard sized applications,

ApplicationReduced Download Time
Starter App~39%
WaveKart~29%
SalesVision~30%

As stated, improving performance is a continuous endeavor for WaveMaker & more optimizations will be delivered to the customers with each release. So, stay tuned for more. Also please share your thoughts or feedback on the optimizations achieved or other approaches to improve the performance of WaveMaker apps to info@wavemaker.com

Tweet
Recent Posts
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2022 WaveMaker, Inc. All rights reserved.