WaveMaker App Development FAQs

To build a WaveMaker app, the first time developer needs to inherit the following skills:

Technical Skills:

• Basic understanding of HTML, CSS and JavaScript
• Basic knowledge of Database, SQL syntax, relationships etc.
• REST API basics, AJAX
• Basic app design, understanding of various artifacts etc.
• Java syntax, class, methods and annotation for building backend services

Analytical Skills:

To develop an application it is essential to analytically think in terms of functionality, design, and implementation. In order to build an app, it is crucial to have answers to the following questions:

• What is the purpose of the application?
• Who is the end-user of the application?
• What level of security is required for the application?

Doc Reference

• Pre-Requisites

WaveMaker simplifies app development by combining the power of auto-generated code for backend services, with visual drag-n-drop based composition of UI.

Boiler plate code comprising more than 60% of application’s code, such as the Object Relational Mapping (ORM) layer, integration code for invoking APIs, data conversions to JSON, parameter validations, widgets markup etc. is totally removed from developer’s responsibilities. While the platform takes care of code generation for the parts mentioned above, app developers can now focus on the business logic, business rules that define data flows, interaction, look-n-feel etc.

Doc Reference

Integrating Backend Services

Databases

By importing database schema, WaveMaker automatically detects the entities, their associated relationships and generates the Entity-Relational model for building the business logic. CRUD APIs for entities and relationships are automatically generated, including relationship accessor APIs such as orders placed by customer, employees belonging to a department etc.

Integrating Web Services

Web Services

External Web Services such as REST, WSDL or WebSocket can be imported into the App by just providing the URL, parameters and any additional configuration. WaveMaker takes care of type conversions such as Java to JSON, XML to JSON and model object creation for the web service returned responses, making these services readily available for integration with widgets and other business logic components.

Integrating Web Services

Java Services

Custom backend services can be built in Java or Spring framework in the form of POJO objects. WaveMaker automatically generates REST APIs for every method exposed and takes care of JSON conversions when the data or the model objects are returned from these APIs and vice versa.

Integrating Java Services

Widgets

Most of the HTML and JavaScript code required to build widgets such as Form, List, button, date etc. is generated by the platform. Each widget exposes dataset for “binding”, and this dataset can be bound to any backend services such as database entities, queries, external web services, custom backend services etc. without having to write any code.

Widgets

Security

Apps can be configured to authenticate using standard identity providers like LDAP, Active Directory or a database. Role based access control can be configured for accessing backend services, APIs, UI widgets etc. Additionally, web apps are protected against top 10 OWASP vulnerabilities, such as CSRF, XSS, SQL injection attacks etc. It takes a lot of effort and time for app developers to build all of these security integrations into an app built using traditional development approach.

Security Services

Architecture

Apps built in WaveMaker follow modern application architectures, separating the UI and the backend layers with well-defined REST APIs. This model gives the needed scalability as the application grows and follows best practices in terms of design and performance. In a traditional development model, such best practices need to be acquired by the development teams and a certain level of expertise is needed to build apps to meet industry standards.

Integrating Web Services

A WaveMaker App is built in 3 layers, i.e. front-end UI layer, binding layer and the backend services layer. Apps can be built using model-first approach and generating the needed backend services and then composing the User Interface. Alternatively, UI widgets can be put together as a template and later be bound to the backend services to complete the business logic flows.

However, there are certain advantages with the model-first approach as the UI layer can be auto-generated from the model, cutting the development time further down. For example, a Data Table widget is auto-generated by integrating the UI actions like New, Update, Delete to automatically invoke the generated CRUD APIs of the Entity, say Employee.

A. Model-first Approach

In the Model-first approach, backend services such as Entities, and CRUD operations are auto-generated along with the source files, metadata, schema etc. The corresponding REST APIs are also generated, and the same can be used for binding.

After the backend services and the model are generated, UI layer is built by creating pages. Pages are composed with widgets and the Page Layout defines the structure of a page i.e. header, left panel, top navigation etc.

Now these widgets are integrated with the backend services using data components known as ‘Variables’. Variables can be configured to work with any backend service supported by WaveMaker. Variables are client-side components residing within the browser or client-runtime, and make use of the underlying REST APIs of the application to talk to the backend services.

B. UI-first Approach

In the UI-first approach, UI layer is composed with the widgets first and then the backend services are created to be bound with the front-end component. UI-first approach is closer to the traditional way of development, separating the UI from the backend services development. However, the low-code advantages are still applicable by using the binding approach, where UI widgets are bound to the backend services without writing any code.

WaveMaker built applications use the modern application architectures such as :

1. Micro Services enabled architecture allowing a large application to be built as smaller scalable services, which are integrated through REST APIs. WaveMaker applications use session-less architecture allowing them to be scaled up as the app needs or the number of users grow using docker containers (https://martinfowler.com/articles/microservices.html)
2. Single Page Applications (SPA) load a single HTML front-end with interaction built using JavaScript & AJAX (refer: https://msdn.microsoft.com/en-us/magazine/dn463786.aspx). Front-end is clearly separated from the back-end services using REST APIs. A typical application can be demarcated into three parts:
   • Client-side app component that works on the device used
   • Central/remote Server component that provides backend services
   • Both these components separated by well-defined REST API contract.
3. Hybrid Mobile App for building mobile Apps using Cordova which provides the native wrapper for interacting with the device capabilities and an installer for the device. WaveMaker developers build Mobile apps just the way they build web apps using drag-n-drop visual RAD approach and integrating the mobile front-end with the backend services using REST APIs.

To support micro-services architecture, WaveMaker uses an API-driven app development approach wherein REST APIs are auto-generated for the application. Every backend services such as Database Entity, Queries or Custom Java code, that is integrated into an application generates REST APIs. Some of these APIs are available for further customization based on the app integration needs.

Custom queries, procedures, and Java Services can be used to extend the app functionality. For all these services, REST API is auto-generated using Spring-REST/Swagger.

UI components via Variables interact with REST API layer to access these services.

Doc Reference

• API Designer

A major portion of the application’s code parts are auto-generated by the platform, leaving the business logic, rules and data flows to be coded by the WaveMaker App developers. (see here)
UI layer is built such that, decisions to fetch or update the data to the backend services are made when the end-user interacts with widgets or other UI elements. Additionally, business logic functions either on the server-side or on the client-side are invoked at that time. In WaveMaker, this functionality is achieved through the Binding layer, using components known as ‘Variables’.

Variables function by invoking the associated REST APIs on the server-side, invoking the client-side JavaScript events that are associated or bound through configuration, after the response is obtained. Variables play a significant role in binding the UI and the backend services layer together through configuration and events, eliminating the necessity to write a lot of code.

Variables can be represented using a block with 3 faces, as in the picture below, representing the APIs invoked, events processed and the Model or Entity objects returned by the APIs.

Essentially, the code is written on the server-side (primarily in Java) to process or compute data and on the client-side business logic functions are written (in JavaScript) to process data before it is sent to or after the response is returned from the backend services.

This model offers a true low-code approach eliminating the need to build an entire framework of UI, backend and binding layers, completely removing the burden from developers to maintain lot of code, frameworks, their upgrades and compatibility issues.

The Automated Build process for a mobile application within WaveMaker can be used to generate a .apk (Android application package) or .ipa file (iOS App Store package). Downloading Cordova/PhoneGap compatible .zip files can be used to build systems manually for Android/iOS platforms.

WaveMaker supports the build for mobile applications in the following three ways:

• Build for Android to generate APK files which can be signed and hosted on PlayStore.
• Send to PhoneGap for a complete package needed to build both apk/ipa files for Android and iOS platforms.
• Manual Build for a downloadable zip file which can be further developed to be hosted on any mobile platform.

Doc Reference

Building Mobile Apps

The Mobile Themes give native look-n-feel of the same page based on the Platform (IOS, Android etc.). Most importantly themes adhere to design guidelines of the Platform, for example, the Page Title in Android platform needs to be left aligned while for iOS it needs to be centered or the menu tab needs to be rendered differently.

Similarly, various widgets like date picker, drop down menu need to be rendered differently based on the platform. All these aspects are taken care of by the inbuilt Mobile Themes provided by WaveMaker.

Doc Reference

Native Device Support

WaveMaker App contains distributable components which are completely conforming to the open-standards based licenses such as Apache 2.0, MIT etc. WaveMaker platform’s runtime components are all open-sourced under Apache 2.0 license giving complete control to the app developer for distributing rights.

The responsive design facilitates the apps to automatically adjust to the device screen size with various UI components adjusting to the available real estate. In WaveMaker, this is achieved through Bootstrap styling using the 12-column layout.

Widgets are dragged and dropped into the 12-column grid containers, whose sizes cumulatively aggregate to 12 within a row. The bootstrap layouting system automatically renders the widgets in different devices based on the available real estate, usually stacking them on a mobile device, while they appear side by side when viewed on a desktop screen.

In WaveMaker, a Page has a flexible layout structure separated from the main content area where the widgets are dropped. Separation of the layout i.e. left panel, header, footer etc. helps not only in achieving UI consistency but also in simplifying the page rendering across devices.

Also, WaveMaker widgets embrace Android Material Design specification for visual design and building interaction across multiple devices. Android Material Design provides standard design guidelines for user interaction across mobile apps and modern web apps.

Doc Reference

• Design Overview

To build WaveMaker app, following libraries are used:

• AngularJS 1.x version is used for front-end of an app. It constitutes the user interface, data binding, and events. Bootstrap provides diverse responsive design layouts for various form factors.
• Hibernate and JPA provide standardized ORM layer and Entity model for database interaction.
• Spring Framework enables the back-end service layer in Java to facilitate dependency injection, REST controllers, security, etc.
• Cordova Framework provides easy access to mobile device features and native installer creation using the appropriate SDK’s.

Doc Reference

• Technology Stack

Following Databases can be used to build WaveMaker Apps:

• MySQL
• PostgreSQL
• Oracle
• SQL Server
• DB2
• HSQL

Doc Reference

• Supported Technologies

The WaveMaker security feature offers comprehensive security solutions to secure the apps developed. WaveMaker offers application level security and the two major areas are “Authentication, who has access and “Authorization”, who can access what. In practice, once WaveMaker security is enabled, both authentication and authorization are available to be taken advantage of and are intertwined.

By the process of “Onboarding,” end-users data is retrieved from various providers like DB, LDAP, AD or any custom provider. This data includes roles and role groups information. Then, Authentication is done based on user credentials, which are obtained from the security provider; and Authorization or role-based access control (RBAC) can be set up for various app resources such as widgets, pages, data, and APIs through configuration.

Apart from the above-mentioned security providers, WaveMaker supports Single Sign-On using Central Authentication Service (CAS), any Security Assertion Markup Language (SAML) 2.0 compliant provider and Token-based authentication for API requests. Cross-site Scripting (XSS) and Cross-Site Request Forgery (CSRF) attacks, listed on OWASP top 10 security, can also be prevented on WaveMaker Apps.

Doc Reference

• App Authentication
• App Authorization
• Single Sign-On using CAS
• OWASP Support
• SAML Integration
• Token Based Authentication

Yes. WaveMaker Themes are based upon Bootstrap CSS markup. App developer can choose from a wide range of inbuilt Themes provided with WaveMaker. With a working knowledge of HTML, CSS, LESS and Grunt, app developer can build their own themes and import them into WaveMaker platform. These imported Themes will be available for use across the apps.

Themes can be built either by

• modifying an existing WaveMaker Theme as per requirements (WaveMaker Themes are available on WaveMaker Git repository), or
• using the bootstrap themes provided by Bootswatch.

There are two ways Theme can be handled within WaveMaker apps:

• At the App level, apply a selected Theme either inbuilt or custom built. This will allow for a consistent look and feel to your apps.
• At the Widget level, app developer can apply style properties to change the color, margins, alignment and much more. This can be applied for a specific, one-instance styling.

Doc Reference

• Applying Themes
• Creating Themes
• Importing Themes

In WaveMaker, widget extensions or custom widgets are built using specialized components known as Prefabs. Prefabs are reusable and distributable components that can be used across applications.

Concept of Prefab

Prefabs are like the pieces of the jigsaw puzzle or equivalent of lego blocks, which when put together offer powerful extended features of existing widgets or build an altogether new UI element by integrating with 3rd party libraries.

Prefab may consist of all 3 layers of a WaveMaker App, combining the power of custom widgets with any integrated service, as shown below.

Prefabs can be used:

• As widget extensions by extending 3rd party JS libraries or UI widgets. For example, DataMaps built on top of d3 library can be used to build new widgets for doing geographic projections which will allow integration of data from any data source or backend service to the DataMaps. Or integrate Lightbox Image Viewer into WaveMaker App to preview images within the App.
• As API integrated components by combining with a WaveMaker UI component to customise built-in behavior. For example, WaveMaker List widget can be combined with Google Maps Prefab to form a composite UI component for marking the location of a selected item from the List.
• As backend service extensions by leveraging 3rd party Java libraries, for example, to work with JasperReports.

Doc Reference

Prefab – Custom Widgets

Once a Page within a

WaveMaker App is built by drag-n-drop of Widgets, a simple HTML markup is generated. Any changes to the look-n-feel can be done using the Style properties exposed for each Widget. Though not necessary or advisable, the page markup can be further tweaked to suite app requirements.

Similarly, when a Backend Service, like a database, is integrated into a WaveMaker App, ORM artifacts are auto-generated. The source code is generated following the design best practices, consisting of the DAO, Service Layer & REST APIs with each layer having a specific responsibility:

• Layer 1: REST Controller is responsible for transporting the data between client and server, authorization of APIs & marshaling and unmarshaling of the model to JSON etc.
• Layer 2: Service Layer is responsible for validating the inputs and transaction management
• Layer 3: DAO Layer is responsible for interacting with the underlying database

Following is the code snippet of the generated Entity DAO object, a JPA entity model using the standards based annotations, getter & setter methods.

Additional artifacts, such as API definitions in standard Swagger notation, configuration files as Spring XML files and properties files and Maven pom.xml that defines application dependencies are all auto-generated and available for maintenance outside the platform.

WaveMaker platform generates a standards based WAR file, which can be used to deploy App to any Java web server such as Tomcat, WebSphere, WebLogic, Pramati Server, JBoss etc.

By default, WaveMaker Apps can be deployed to WaveMaker Cloud platform. Optionally you can configure your app to be deployed to your AWS or Azure or Google Cloud accounts.

Doc Reference

• Deployment to Web Server

For WaveMaker apps a modular client-side code (AngularJS, CSS, and HTML) incorporating industry best practices is generated, thus making it Maven complaint. As such, for any WaveMaker app, a zip file can be generated which includes a pom.xml file. This zip file can be imported to any IDE like IntelliJ or Eclipse. The backend artifacts included in the zip file can be modified from the IDE.

The app updated outside of WaveMaker can be reimported into WaveMaker to update the existing project or as a new project.

Doc Reference

• Extending Apps using IDEs

Collaborated and continuous development is part of WaveMaker platform. WaveMaker Apps can be shared with multiple users. WaveMaker’s integrated Version Control System (Git) allows pulling changes, merging and resolving conflicts. Apps can also be pushed to External Repos like GitHub or Bitbucket.

Unlike the conventional method where every file or artifact goes through the review/merge process, all the generated code artifacts are auto-merged by the platform, eliminating this responsibility from the developer. As the major portion of the auto-generated code is auto-merged, the developer needs to only review/merge the files which are related to business logic or other files which are modified manually.

Doc Reference

• Developer Collaboration
• Code Sharing

WaveMaker platform is frequently updated to incorporate the latest developments in the underlying technology stack such as Spring, Hibernate, Angular etc. WaveMaker Apps are automatically upgraded by the platform to the latest version of the stacks that the platform ships. This is a major advantage for developers, as they do not have to make any changes in the applications manually.

Deployed apps will not be affected by platform upgrades, and in case the deployed app needs to be upgraded as well, then it can be re-deployed.

The benefits of Rapid Application Development have a direct bearing on the cost and schedule of enterprise application development. In fact, organizations that used WaveMaker RAD Platform have experienced:

• 67% faster application development than traditional software delivery
• 80% lesser coding required compared to traditional software development
• 75% lower maintenance costs than traditional software life cycle

The following chart depicts performance comparison of an app built following the RAD approach using WaveMaker and a traditionally built app using AngularJS framework. The functionality of the app is designed to load several database records from a backend service, exposed as REST API to the UI layer, where the UI layer renders these records using widgets such as list, image, label, panel etc.

Metrics such as page load time, memory consumed on the client side, page interaction response times and the number of backend service calls are plotted. As indicated in the figure above, the delta is very minimal and the application built with WaveMaker performs at par on all counts in comparison to the app built traditionally.

WaveMaker Apps are built to use stateless architectures making them ready for large scale container-based deployments. Large scale deployments needing high number concurrent requests and low response times can be achieved, by scaling apps to deploy on container based systems.

WaveMaker App acts as a micro service with the REST APIs exposed and load-balanced when deployed on multiple containers. Since, there is no state associated on the server-side, the architecture allows for a high-scalable deployment with client-managed state (on the Angular side).