Rapid Application Development (RAD) tools for developer

Rapid Application Development (RAD) tools and platforms offer agility and enable development teams to jump start quickly onto a Project. Use of RAD methodology reduce the time and effort required to:
a) evaluate the technology stack and frameworks
b) design and implement boiler-plate CRUD code, SQL queries and UI-based forms
c) prototype and test with production data very quickly

In the past, the code generated by RAD tools in comparison with hand-written code was considered to be not readable, not maintainable and believed to offer very less customizations and abstractions. However, frameworks and technology stacks have matured over time, moving a lot of heavy lifting from developers and offering better tooling support. With the current generation RAD tools and platforms leveraging modern technology stacks, there is no noticeable difference between generated code and hand-written code.




WaveMaker Studio incorporates advanced code generation techniques with the right abstractions and design patterns, rather than generating code that just works. WaveMaker Studio provides niche application architecture by standardizing on open-source Application Stack, using some of the best-of-the-breed libraries like Spring, Angular, Hibernate and Bootstrap. Open standards application stack enables developers to freely distribute and modify the generated source code and doesn’t have any vendor lock-ins into the platform.

No platform lock-ins for built applications

While most of the Rapid Application Development platforms tend to lock-in applications within their own platform, like Force.com, BlueMix or Mendix, WaveMaker takes a radically different approach to use open-standards based generated code and 3rd party services integration through plug-n-play REST API based contracts. Developers have the liberty of moving the application built from the platform and deploying in their own custom infrastructure.

Studio app architecture
Fig 1. WaveMaker-built Application Architecture

Code generation with no trade-offs in design or performance

Angular JS library, built and maintained by Google, came into mainstream adoption only in the recent years. Angular is the key driver for WaveMaker front-end code generation, leveraging the abstractions provided by the framework to generate dynamic client-side application logic. Generated code extensively uses Angular concepts such as directives, re-usable components, data binding, routing and form validation.

Let us build a CRUD based application to take a closer look at WaveMaker Studio generated code for front-end and back-end artefacts. The following Fig 2. shows a simple application page design with separate sections for header, left navigation and content.

Page_Design
Fig 2. Application design canvas

Well designed and organized front-end artefacts

The content section has a 2-row grid layout, each row having different number of columns and widgets placed within. Following Fig 3. Shows the code generated by WaveMaker Studio for the above web page design.

Content_Markup
Fig 3. WaveMaker generated HTML markup

The generated markup has separate sections for header, topnav, leftnav & content area and for each widget its corresponding Angular directive gets generated. WaveMaker provides a comprehensive Angular based open source widget library, and the documentation is available here.

Frontend_Codegen
Fig 4. Generated artefacts for each page

For each designed web page, a well organized set of artefacts are generated for HTML, Javascript, Stylesheet & property files for variables defined within the scope of the page. Any event handling code or custom client-side logic should be written in the page-specific javascript file and the HTML markup can be edited directly by using the appropriate widget directive syntax.

Extending and customizing generated code

To control interaction between widgets and variables (service, live, java etc.), custom javascript code may need to be written in the javascript file generated for each page. For example, to enable navigation to a new page after submitting form data, custom javascript needs to be written for onSuccess event of a liveform.

The following example has a snippet of code, which uses custom javascript code to bind data provided through one widget as input to another widget or prefab. WaveMaker Studio’s javascript editor provides code completion and intellisense features to search and identify the available bindings within the scope.

Frontend_JS_binding
Fig 5. Javascript custom binding

Design thinking and Model-driven development (MDD) paradigm

WaveMaker Studio-built application’s back-end architecture leverages Spring framework and Hibernate for persistence.
Studio backend architecture       Backend_Codegen
Fig 6a. Spring framework based architecture, Fig 6b. Spring-based backend code generation

Spring framework is widely used by Java developers and offers a very flexible architecture, extensible and provides cleaner abstraction. WaveMaker Studio provides the right balance between generated code and any runtime libraries used, giving maximum control to the developer to customize and change the generated code.

Studio generates the following artefacts for application back-end:
1. Model Objects – Domain model objects are POJOs with standard JPA annotations
2. Services – CRUD operations and other business logic for model objects
3. Controllers – Spring REST web service controller

WaveMaker Studio adopts model-driven development (MDD) methodology, by importing from existing database schema or allowing developer to first design database schema using the database designer. After successfully importing the schema, for each database table, domain model objects and their corresponding services and controllers are generated. If there are any changes to the database schema, code is re-generated.

In the design mode, Studio supports hot deployment of changes and completely relieves developer from compilation and code-generation aspects. Internally, Studio uses Maven based application build process, which makes the necessary application runtime dependencies to be included in the POM file and provides an option to export entire Studio-built application as Maven project.

Designing the domain model

WaveMaker Studio provides a very comprehensive domain model or schema designer, which supports dialect mappings to the underneath database and provides modelling the relationships as well.

DB_Designer
Fig 7. Database schema designer

Domain model objects are auto generated from the database schema, with JPA annotations and respective database mappings. Getter and Setters are auto-generated with the corresponding column mappings, relationship and join column mappings. Domain model objects are plain POJOs without any dependency on WaveMaker runtime library.
Backend_ModelObjects
Fig 8. Generated code for Domain model objects

Separation of layers for extensibility and integration

Domain model, service and controller layers are separated out in the generated code for extensibility and readability. For every domain model object a Service class is generated, which provides CRUD operations and query execution with complete support for pagination, query filters etc. Service class depends on WaveMaker runtime library, which is open source and provides the persistence runtime logic based on Hibernate.

Backend_CRUD_Services
Fig 9. Generated code for database CRUD operations

API-centric approach as a first step to application design

For every domain model object web service controller is generated based on Spring REST, with appropriate path mappings. For database services, REST controller exposes CRUD operations and query execution methods automatically and the visibility of these APIs can be configured through API designer.

Backend_Controller
Fig 10. Spring RESTful Web Services controller

Summary

WaveMaker Studio generated code incorporates the best practices followed by professional Java or Javascript developers and guarantees best code quality, maintainability and extensibility for enterprise application use. With most of the application back-end code being auto-generated, developers can now focus more on User experience, custom business logic and any other 3rd party integrations.

In a follow up post, we’ll discuss the extensions provided from an application developer’s perspective for customization and tweaking the generated code. We will discuss details related to form validation, styles and themes, Spring bean customization and application security integration. Stay Tuned!

Share This:

Leave a Reply

Your email address will not be published. Required fields are marked *