Faster Page Load Times Using Brotli Compression

By Subodh Kumar, Principal Engineer, WaveMaker

At WaveMaker, we want our users to have the best user & developer experience aided by a great performance. Also, we want the apps built by our customers in WaveMaker to load really quickly. In every release, we work on making the load experience better.

WaveMaker is a Rapid Application Development (RAD) platform that lets customers create responsive web applications or mobile applications using a simple drag and drop approach. WaveMaker simplifies building modern responsive apps using Angular. WaveMaker provides 100+ out-of-the-box responsive UI components. Using these components functionality can be built by binding them to data sources such as REST, SOAP APIs, or Databases.

As customers build the application in WaveMaker, Angular code is automatically generated. This allows us to use build tools like web packs and other tools in the Angular ecosystem. Using these tools WaveMaker application build process already derives benefits such as minification, tree shaking, lazy loading, and compression of static assets

In the 10.2 release, WaveMaker is introducing support for a better compression algorithm ‘Brotli’ as a part of its optimization that will help the apps load even faster. Customers will realize these benefits without any code changes by simply rebuilding their apps.

Why static assets should be compressed?
The performance of every app is proportional to the size of the resources it serves over the network to the user. The resources can be in the form of HTML, JavaScript, images, styles, and others. The bandwidth & time a resource can consume is a function of its size.

Thus, having resources of a smaller size can help in an app’s response time & performance. Compressing the application assets can help us achieve that. With the right compression algorithm deployed, the resources served will be optimal.

Brotli will help the pages of an app load faster & be more responsive. It also provides a better user experience, which every app or business is striving for.

What is Brotli? How is it better than gzip?
Brotli like broccoli is better for your health. 🙂

Humor aside, Brotli (defined in RFC 7932) is a generic-purpose lossless compression algorithm that compresses data using a combination of a modern variant of the LZ77 algorithm, Huffman coding, and 2nd order context modeling, with a compression ratio comparable to the best currently available general-purpose compression methods. It is similar in speed to deflate but offers more dense compression.

Brotli, when compared to Gzip, provides better compression & decompression performance. Following is the summary for comparison of common assets of an app

It’s not just about compression ratio, but also about how long Brotli takes to compress & decompress data. Data suggests that Brotli is better at compressing static data because of its superior compression ratio.

Browser support
Brotli compressed files are served only over HTTPS & encoding is supported in most of the modern web browsers as shared below,

How to check if your static assets are Brotli compressed
The browsers which support Brotli will send ‘br’ with ‘gzip’ in ’accept-encoding’ of request header.

 

And, If Brotli is enabled on the server, the response will be in Brotli compressed format

Performance gains in load times
In WaveMaker, as soon as the user makes a deployment request for the Angular profile, the Brotli compressed files are generated. Since the generation of compression is part of the build process, when a request for resources is made by the app, the files are readily available and shared. This results in no additional runtime cost at the server.

Below is the comparison of resources for a sample app developed in WaveMaker, which will show the difference in the resource size.

Asset Type Without Compression Gzip Brotli
JS 2.7MB 698KB 573KB (~17% over gzip)
CSS 548KB 82.9KB 67.5KB (~18% over gzip)


What do WaveMaker customers need to do to benefit from this?
For existing projects, just modify deployment.properties (This will be not be needed after the migration is in) to enable the compression in the ‘deployment. properties’ as shown below & have the app served over HTTPS.

 

References:
Google blog -Introducing new brotli compression 2015/09
Github - Brotli
Mozilla - GZip Compression with brotli

Beware of Afterthought Low-Code Platforms from BPM Vendors

There is a new sense of urgency in modern enterprises, to drive mobility and agility, and to deliver more, faster. The expectation from modern-day application development revolves around delivering quick and agile releases, multi-channel applications, availability, and scalability.

The formula for quick release is quick development along with continuous integration and delivery. Quick releases = Quick development + CI/CD

Quick Development is where Low-Code Development vendors are providing superpowers to accelerate development and delivery. CI/CD challenges are already addressed to a great extent. Docker, Kubernetes on the cloud, and other CI tools can be configured with Jenkins to achieve integration and delivery. Considered to be a standard in the industry, most companies are already using CI tools and low-code to drive quick releases of applications with agility.

The underlying challenge is that majority of the vendors are BPM (Business Process Management) vendors who generate applications originally created for business users. As complete application development is not feasible without IT, BPM vendors are calling themselves low-code platforms. The applications they develop are an afterthought and are invariably reflected in the quality and maintainability of the application.

BPM modified solutions are not bendable

BPM tools primarily cater to BPM types of applications and other facilities are normally added as an afterthought. By using tools to quickly generate process-based applications, technical business users and citizen developers fall short of taking application development all the way. Typically standalone applications, core business applications, mobile applications, dashboards, API mashup applications, and chatbots are not optimized by the tools provided by BPM vendors.

The challenges professionals developers face when using BPM tools

Professional developers are a different breed compared to citizen developers. While business users can create intricate wireframe diagrams, not many are proficient in understanding the code that goes behind a single box in a diagram. The task of wiring code into wireframes can only be performed with the help of professional developers and their role typically involves (not limited to):

When using custom BPM tools, professional developers face several challenges. They are unable to follow the popular agile methodology in the same way. BPM tools typically use complicated and proprietary technology and are based on older UI technologies like JSP/JSF, making it difficult for professional developers to work with. Moreover, BPM applications are not normally based on modern, microservice architecture, making multi-channel delivery a challenge. Added to this, professional developers are unable to use their favorite IDE, which can be demotivating and constrictive to the value they would like to bring.

Supporting professional developers may seem to be an ordeal, although that’s a price worth paying for high-quality, enterprise application development. Fortunately, low-code tools have proven to take the load off professional developers by doing the heavy lifting and enabling them to deliver more with less.

Taking app development all the way. How low-code empowers professional developers 

Rapid application development platforms are designed to provide a frictionless environment for professional developers to learn and evolve. Low-code platforms compared to BPM tools, help professional developers meet their expectations from the development process. Expectations such as:

Rapid Application Development and low-code Platforms help produce ready-to-deploy applications. Combining code generation features with an integrated development environment (IDE), low-code includes the entire application technology stack, UI, middle-tier, and back-end. Here are examples of how low-code platforms development provides accelerators for development and delivery instead of imposing new practices:

There is a change in the pace of enterprise demands and delivery. With a critical need for rapid application development, more often than not BPM vendors are mistaken for low-code platform providers. Choosing the right Low code Platform could ensure you empower professional developers to deliver more, deliver fast, and deliver better. Because enterprise application development is more than an afterthought.

Top 5 aspects to take Micro services - Wavemaker

Agility, scalability and stability, this is the essence of microservices architecture (MSA). For enterprises seeking scalability, for developers seeking application agility, and for change agents seeking support for digital transformation initiatives, MSA is a key enabler.

In the inevitable journey of modernization, what microservices architecture has provided is the agility and scalability needed to make continuous changes rapidly. When transforming monolithic systems, using microservices for one service at a time has made it possible to showcase the business benefits to a broader audience. MSA has proven to be a key enabler to pursue innovation and digital transformation initiatives.

Given the positive business impact, why are microservices positioned in the "trough of disillusionment" in the recently released Gartner Research on Hype Cycle for Application Architecture and Development, 2019? For one thing, because driven by the enthusiasm to adopt what's trending many have misinterpreted the essence of microservices which has eventually led to unsuccessful implementation.

To take microservices out of the "trough of disillusionment" and to not make the same mistakes made by other application leaders, consider the following aspects before you begin your journey of modernization.

Understand the essence before adopting microservices

The meaning of microservices has been mistaken by many application leaders. The essence of microservices revolves around continuous delivery, stability, and scalability. Applying the principles of service-oriented architecture (SOA), microservices emerge from domain-driven design (DDD) and DevOps. Each microservice is a loosely coupled yet independently scalable and deployable application service that has a single responsibility and focus on delivering one business task.

Any service smaller than monolithic systems does not make a microservice. What many consider microservices is in disguise "headless API SaaS" or pseudo-microservices. Several vendors also resort to "microservice washing" the services they offer. When building solutions, application leaders need to understand and clarify whether genuine microservices are considered and not versions of reusable or shared application components or a version of SOA.

Partition only relevant services

One of the benefits of microservices is agility. By partitioning every service as a microservice, the complexity increases and negates the benefits. Application leaders need to carefully decide which components can be put into services to ensure implementation is done in phases.

To get the most out of microservices, the multiple granularities of applications need to be identified. It would then be easier to decide which components can be partitioned as services. In this way, microservices can provide the granularity of services and the opportunity for better application development and release planning.

Consider the organizational and cultural changes required

Microservices architecture is complex and has disruptive organizational, technical and cultural impact. When the ownership of the entire lifecycle of an application or product is in the hands of developers, application leaders need to ensure the roles and responsibilities are defined and governance practices are established. The organization structure and cultural mindset have to be realigned to enable the successful adoption of this new approach to application development, deployment, and delivery.

Ensure teams are adequately trained

Microservices architecture is fast evolving and new patterns, design principles, concepts, and tools are introduced. With changes in the technology stack used, sharing of knowledge across teams must be encouraged. Developers, architects, and DevOps professionals need to be trained to use new software programs and application lifecycle management techniques. To empower development teams to innovate and deliver more, application leaders are using modern technologies such as low-code platforms to make full-stack development easier.

Improve agile development practices

The prerequisites of a microservices architecture are agile DevOps and continuous delivery practices. Before adopting microservices, enterprises must ensure they improve their agile development practices and methodologies. In digital transformation implementations, enterprise agility is a prerequisite. Rapid application development platforms are increasingly being used to improve agile practices because they leverage low-code technologies and use open standards-based technology stack to ensure digital transformation implementations are successful.

Application leaders need to first understand the essence, objectives, and applicability of microservices. Once this is clear, they need to implement microservices iteratively, one service at a time. One of the main reasons why microservices implementations fail is because application leaders have in the past adopted microservices without making changes (organizational, cultural, and technical). To transform enterprises and align them to the main goals of agility and scalability, change is inevitable. Successful microservices implementation requires commitment, discipline, in-depth understanding, and openness to venture into a steep learning curve. Application leaders need to use this formula and embrace change if they wish to move microservices out of the "trough of disillusionment".

As an application leader or change agent, we understand that an IT modernization initiative is not an easy feat. Continue reading to know how you can add the catalyst to change and to know how and where to start your journey of modernization when migrating from monolith to microservices architecture.

Use Low-code platforms to empower java development teams

"By 2022, skills required to perform most jobs will have shifted significantly and no less than 54% of all employees will require significant upskilling", according to the World Economic Forum, Future of Jobs 2018 Report.

Not all Java development teams have upskilled to stay relevant. Java developers, once valued, are finding themselves challenged and in a way, dispensable. New programming languages, development tools, and delivery platforms are being introduced every week.

Modern enterprises need to innovate and deliver faster in order to remain competitive. With all the buzz around multi-channel delivery, ultra-rapid development cycles, fab front-ends, microservices, and cloud nativity, traditional Java development teams need to learn new skills, new vocabulary, and adopt new approaches to enterprise app development. The skills mismatch combined with rapid delivery demands has put immense pressure on Java development teams.

Here’s how existing Java development teams can become full-stack developers using low-code, rapid application development platforms.

Let Low-Code Platforms Do All the Heavy Lifting

What normally requires 10 developers can be done with 4

Traditional Java development teams require developers with specific skill sets at different stages in the application development lifecycle. To simplify the application development process and to address the shortage of skilled developers, here's how rapid application development platforms help:

Embracing new technology need not necessarily mean a radical transformation. It is about upgrading existing skills to keep up with changes in the industry. Find out how the ‘Survival, Revival and Arrival of Java Developers’ will depend on how they can upskill to full-stack developers using the right tools such as rapid application development platforms. Download this Whitepaper

Open low-code - The low-code platform that’s high on developer love

Being in the market of application development for almost a decade, my team at WaveMaker has been through some of the big shifts in the application market. In my opinion, one such shift is the magnitude by which IT budgets have been slashed over the years. Although this could be due to many reasons, what is important is that this budget cut has caused a demand growth for low-code platforms, whose promise is to churn out applications faster and in an economical manner. Besides WaveMaker, companies like Outsystems, Mendix, Appian started catering to this market, but I believe there is still more value to be created and open-low-code platforms will be driving it.

Emergence of Open Low-code

A major portion of IT budgets goes into the development and maintenance of core enterprise applications. This includes LoB apps and apps with emerging cloud-native architecture which is built by mainstream developers and not business users. What I have seen is that for developers, code control and innovation are very important. We thought for low-code to be more valuable to developers, it should have an impact on how mainstream developers build and maintain applications. Open low-code platforms do just that.

Let’s understand how open low-code addresses both the productivity needs and key concerns of an enterprise as we have seen.

Need for Open Low-code

Open low-code platforms, to a large extent, aim to address the pain points of developers trying to build mainstream enterprise applications. It can fulfill both the productivity needs of the developers as well as their key concerns around modern best practices for application development, integration, and delivery. With such platforms, businesses can be sure of better adoption amongst developers and thereby ensure a faster release cycle of quality applications without straining the IT budget.

WaveMaker cited in Forrester’s Now Tech: Rapid App Delivery, Q1 2019

Forrester’s Now Tech: Rapid App Delivery, Q1 2019 is out and has recognized WaveMaker as a Rapid App Delivery provider, whose primary functionality segment is in low-code for application development and delivery pros. The report, prepared by Forrester analysts John R. Rymer and Rob Koplowitz, focuses on vendors who produce digital process automation solutions for wide deployments (DPA-wide) and low-code development platforms. It is a ready reckoner for CTOs and all application development and delivery professionals.

Rapid App Delivery landscape

Forrester has tried to strategically analyze and segment the rapid application delivery market, thereby giving much-needed clarity to an already crowded market. The analysts analyzed the RAD vendors based on market presence and functionality. The report also lists all the main vendors under each category to help enterprises align their needs to individual vendor solutions.

The market presence is a straightforward classification into large, midsize & small on the basis of estimated or reported revenue. More importantly, the Forrester research team divided the RAD market into the following three categories based on functionality:

Low-code AD&D Platforms vs other platforms – WaveMaker’s Takeaways

In WaveMaker’s view, Low-code Application Development & Delivery platforms are best suited for enterprise IT teams, which are trying to solve multiple use cases by developing complex applications. These platforms can be used to customize and modernize apps, including user experience-focused customer-facing applications, and also have basic process automation capabilities. Such platforms also provide a variety of integration options, advanced data management capabilities, and a broad partner ecosystem. Hence, low-code platforms for AD&D professionals are essentially seen as an alternative to traditional programming-led application development.

Low-code for Business Developers platforms empowers business people to deliver applications with a single/few use cases and without complex customization needs. Hence, these platforms exhibit features such as business reporting, data management, and advanced process automation capabilities.

DPA-wide platforms is a newly identified platform segment by Forrester which combines the ability to automate a wide range of processes with minimal low-code capabilities. Such platforms have advanced content management capabilities along with supporting integration and partner ecosystems.

WaveMaker as a Low-code AD&D Platform

WaveMaker’s product vision has always been to create the most advanced & open low-code platform for enterprise IT, enabling them to create modern complex applications. WaveMaker provides advanced tools for AD&D professionals with a variety of integration options, advanced data management capabilities, and a long list of business & technical partners. WaveMaker, with its presence in all major geographies including North America, Europe, Asia-Pacific also caters to all major industry verticals like financial services, manufacturing, and retail.

In WaveMaker’s view, we have rightly been cited by Forrester in the Low-code for Application Development & Delivery segment.

To access Forrester’s Rapid App Delivery Report 2019 full version, Click here:
(payment or subscription required for access).

Break free from platform lock-in: Extend your code seamlessly with IDE Sync

Low-code application development can be described as a visual orchestration of application components with the underlying code generated in the background. Sometimes the developers might want to extend and maintain this code. They might want to work on a local machine text editor, make changes and import these changes back into the application. Or they might also want to work on an Integrated Development Environment (IDE) of their choice and comfort and take advantage of its Java code editing, testing and debugging features. Professional developers will need to build apps fast, but that doesn’t mean they should compromise on the code control. WaveMaker has addressed this need with its new IDE synchronization feature.

WaveMaker 10’s IDE sync feature offers a unique development experience where programmers can mix and match custom code written in their favorite IDEs, like Eclipse or IntelliJ, with low-code platform components. The Studio WorkSpace Sync Plugin is basically a Maven plugin, which provides seamless syncing of project changes between WaveMaker and the developer’s IDE. Rather than having to export and re-import projects between platforms, the plugin provides a direct communication channel where changes can be instantly pushed between WaveMaker and an IDE. This also eliminates the need to copy and paste code, a time-intensive, tedious, and error-prone method that can slow down the whole development process and hamper productivity.

After a one-time setup configuration, developers can leverage the Studio WorkSpace Sync Plugin in the following ways:

  1. Pull the latest project changes from WaveMaker: This command can be used to ensure that the latest changes made to a project on the WaveMaker platform are applied to IDE code. This includes both committed and uncommitted changes to the project.
  2. Push IDE changes to WaveMaker: All IDE changes are instantly pushed to the WaveMaker platform.
  3. Synchronize a project: This command works in two steps: first, the latest changes made to the project on the WaveMaker platform are applied to IDE code. After both the IDE and WaveMaker versions of the project are in the same state, the Studio WorkSpace Sync Plugin pushes any IDE changes back to WaveMaker.

Enhanced IDE support ensures that what you build with WaveMaker is ‘debug-edit-extend’ ready with your choice of IDE. This way, WaveMaker 10 provides sophisticated, granular customization capabilities to enterprise application development teams without sacrificing the speed of low-code development. The new capability further streamlines the app coding process for developers, allowing them to easily synchronize WaveMaker’s open-standards platform with various integrated development environments (IDEs).

Introducing WaveMaker 10
Studio WorkSpace Sync Plugin is a new feature in WaveMaker 10. Learn more.

Innovate, Don’t re-invent: Stay agile with component sharing

Low-code platforms have made it possible to build applications by visually orchestrating the required building blocks without the need for reinventing the wheel for every project. Enterprises expect low-code platforms to standardize those building blocks so that it can be used across the enterprise by different teams and different projects. This is essentially a shot in the arm for the developers by significantly accelerating their productivity through the reusability of their code. WaveMaker has found a way to do exactly this, by creating an Enterprise Artifact Repository as part of its Enterprise Developer Network (EDN) setup. EDN is an online environment that allows collaboration over projects, version control, and sharing of resources.

WaveMaker’s artifact repository is essentially a resource repository that standardizes on a collection of prefabs, project shells, templates, and themes. It lets the enterprise developers create, test, and publish useful app components to the repository for enterprise-wide access by other development and business teams alike. It also allows for easy exploration and discovery of resources to be made available to the developers. The EAR provides a range of artifacts starting from simple templates, themes, feature- specific prefabs to even project shells.

Reusable Artifacts in WaveMaker

Artifact Features

All artifacts have a standard set of information either auto-generated or provided by the developer like tag, category, version no, and changelog.

Creating and Publishing Artifacts

Artifacts are created by developers using the project dashboard by invoking the create function of the respective artifact. The artifacts developed are published either:

Artifact developers create the artifacts which are pushed to the EDN- pending approval of the EDN Admin. Each of the artifacts will go through the four stages: In Development, Unpublished, Rejected, and Approved which are self-explanatory.

The standard process remaining the same, each of the artifacts has a slightly different publishing flow as described here: Prefab, Project Shell, Template Bundle, and Themes. Once published, the artifacts can be viewed from the Artifacts Dialog and are available for use for the entire enterprise. The admins can manage the artifacts through the EDN dashboard itself. WaveMaker also allows EDN admins to import and export the enterprise artifacts using zip files.

Introducing WaveMaker 10

Enterprise Developer Network/Artifact Repository is a new feature in WaveMaker 10. Learn more.

Share with Care: Collaborate securely with RBAC

Today, enterprises rely on a global team of developers with varied roles & skills to develop applications. When many developers collaborate on large projects, clear access control policies are required for effective collaboration. But traditional development tools have failed to address the need for developer roles and access control. As organizations feel the pressure to create applications faster and more frequently, the lack of governance can result in coding defects, deployment issues, and delayed projects.

WaveMaker provides comprehensive role-based access control (RBAC) features for enterprise application development teams. The RBAC features center on the principle of minimal privilege i.e. to provide the least level of access to perform tasks to the full extent.

Permissions

Permissions manage access control for the various roles in the development process. WaveMaker provides a predefined list of permissions at three levels - platform, project, and resources. Refer to the developer RBAC documentation for more on permissions and access control.

Roles

Roles represent a set of permissions that can be assigned to a user. WaveMaker offers different roles for platform and project administration.

Platform administration through product roles
Product roles are for platform administration and are generally assigned to IT users. Product roles offer three predefined access control levels - Super Admin, Enterprise Admin, and Studio User.  You cannot create new product roles. In this way, the platform demarcates itself into compartments accessible only to authorized users.

Define custom roles for projects
Project roles are for developers and project leaders involved in application development. These roles combine flexibility and control by offering predefined and custom roles. Besides the predefined roles of Project Admin and Default, admins can create new project roles. Most enterprises have several projects with shared project resources. So, the same user can assume different roles in different projects.

Configure and assign roles

Admins can assign product roles to users in the onboarding section of Launchpad, the administrator portal. They can also create custom project roles such as UI Developer or DevOps by configuring appropriate permissions.

Project administrators can then invite users to projects and assign one of the configured project roles. Roles can also be updated via a project's User Management settings.

With WaveMaker's role-based access control, developers can collaborate better and create applications faster without the risk of project governance issues. Refer to the project user management documentation for more details.

Introducing WaveMaker 10
Role-based access control at the platform and project level is a new feature in WaveMaker 10. Learn more

Looking at Microservices Through a Macro Lens

Good things come in small packages, and that's true of microservices. Read on to get a solid overview of the benefits this architectural pattern brings with it.

Traditionally, enterprises relied on a unified model for designing a software application. Here, key capabilities for managing input/output processing, error-handling, and UI are packaged into one monolithic process. In such a structure, all the application components are interconnected and interdependent.

Such a structure, however, limited the scope for an application to expand and scale. This is when microservices came into the picture. Here, a single monolithic system is broken down into a set of smaller services, carrying out a functionality in a distributed manner. Its loosely coupled structure enabled enterprises to add or iterate any component of an application independently. This gave scope for scaling and expansion at a much faster rate.

The Many Benefits of Microservices

Aiding Digital Transformation

Apart from providing agility to enterprises and making the architecture scalable, microservices enable DevOps automation with continuous delivery and deployment. This makes deployment processes swift and improves time to market. With continuous delivery, iterations can be carried out throughout the product lifecycle, resulting in better working software. Such flexibility is difficult to achieve with a monolithic architecture. More precisely, the very problem of cost and time can be overcome with microservices.

Taking a cue from this, Amazon migrated to microservices. In 2001, the Amazon retail website was developed based on a monolithic architecture. This slowed down development cycles and restricted their ability to innovate. Once they adopted the modular design, it dramatically improved their front-end development lifecycle. Thanks to a microservices continuous delivery process, Amazon can now make 50 million deployments a year.

It’s the same story with Walmart, where they could not handle 6 million page views per minute with their aging monolithic architecture. After embracing microservices in 2012, Walmart experienced 20-50% cost savings and conversions went up by 20% overnight.

It Is Not a Silver Bullet

With that said, it is not that microservices are without any drawbacks. Although breaking down an application into smaller components have its advantages, it also distributes the complexity of maintaining them. Things can get more complicated with multiple databases and transactions. To make it uncomplicated, microservices architecture relies on APIs to deliver services. APIs bring in the standardization of interfaces in the development process. Structured APIs behave in a manner that is bound to remain unaffected by the technology used underneath. While developing applications, developers can work on coding the core functionality of the application. Other third-party services provided by the application can be called through APIs, thereby reducing the development time.

In a microservices-based architecture, multiple micro apps interact with each other using APIs. The benefit of such a structure is that, if need be, only a part of the application can be scaled by adding more hardware resources. Unlike in a monolithic app structure, where the entire app has to be scaled.

With the increasing popularity of cloud computing, containerization, and APIs, microservices are becoming more reliable. This trend in code management and deployment is enabling companies to respond to shifting customer demands in a swift and agile manner. But, as with any modern technology, a genuine requirement needs to be identified first to reap its benefits.

Update: This blog post was also published in DZone.com