Some Background First
The old issues of cross browser support and browser limitations are long behind us now paving the way for this meteoric rise. There is now an ever growing demand for more sophisticated and complex web applications to replace desktop applications or modernize legacy web applications. The building of these sophisticated applications introduced a new design approach, namely Single Page Applications (SPA).
Isn’t it great to be a web developer?
Well “Yes” and “No”, due to an explosion of frameworks/tools/libraries, it makes choosing the right tools for your project(s) really hard. Many frameworks have come and gone whilst others have undergone complete rewrites. The reason is that web development is hard, and the job of making it easier is still being figured out, so everything is constantly evolving. We all use frameworks/tools/libraries as we want to make our jobs as easy as possible whilst giving our users the best possible application we can, within the budget and time constraints enforced on us. Low code and rapid application development frameworks are (becoming) more favourable, we just want one that will have longevity and be flexible enough to meet our current and future requirements that we’re not currently aware of. When building data centric applications, we personally think Oracle APEX fits that bill and we will explain why….
Web Application Design Patterns
Before we talk about APEX, first, let’s talk about web application design patterns in more detail. What are the web design approaches available to us? Well, there three main application design patterns that you can follow:
- Multi-Page applications (MPA)
- Single Page Applications (SPA)
- Hybrid Approach that is a multi page variation of single page applications (MSPA)
MPA development is the traditional style of development that has existed since the birth of the internet, HTML pages are rendered via a browser GET request and the Saving form data is done via submitting the page using a POST request and then the browser re-rendering the page again. This type of application is noticeably different to how a desktop application behaves. Could you imagine reloading your desktop application every time you made a change? The reason for this distinct difference is that the web was not designed for application development, application development was adapted to the design of the web. Applications following the MPA design pattern, their HTML/Pages are traditionally generated on the server. Think ASP, PHP, JSP, or our personal favourite Oracle APEX.
The hybrid approach is basically an application made up of multiple single page applications which are more likened to business modules. All interaction is done via AJAX, you just might switch your main viewing page to another when visiting a different part of the application. This helps reduce complexity and the footprint in the Browser/DOM. Could you imagine how much HTML would be rendered if E-Business suite was in one HTML document?
Client Vs Server
Did you know? The overhead of the APEX engine generating an APEX page is less than .02 of a second. There have been many discussions on the scalability of APEX, none better than the usage of Oracle itself mentioned here by Joel Kallman.
So what type of framework is APEX?
APEX was first designed in 1999, and by design is a multi page application (MPA) framework, since this was the only design pattern at the time. APEX is now almost 20 years old and has constantly evolved. It is a great low code development tool that allows us to create many types of web applications or websites declaratively. APEX, over the years, has included more and more feature rich functionality and adopted more and more AJAX capability i.e. partial page refresh which is the cornerstone of an SPA design but this capability is only limited to refreshing/filtering/saving reports or charts, or executing PLSQL Code. DML Forms require a page submit.
To explain the concept behind APEX in a bit more detail, the applications we build with Oracle APEX are a set of HTML “Pages” which we navigate between to view data or submit to save the data. We design our applications with the concept of shared components that we define once to show up on each page so that it appears like a regular application. e.g. navigation menu, top toolbar etc. Pages have to reload every time a user performs a submit action to save a FORM, or when navigating to other another page. The following is a demo showing this multi-page concept and how disruptive it can be for the end user when switching between pages.
There are many types of applications or websites that APEX is suited for, but building a sophisticated Single Page Application is not possible “out of the box”, and thus limits you to building an MPA style application. The reason is that it was simply never designed for this purpose.
What are the main SPA frameworks?
Why would I want to build a Single Page Application in APEX?
APEX has many unique characteristics that you won’t find in any other framework. The following 6 characteristics sets it apart from every other development framework.
No.1: it runs within the Oracle Database, it’s at the same level of your data negating the need for a middle tier (Java need not apply). It’s perfect for data centric applications. You have full access to all database capability, and as of 18c the Oracle database packs a very long comprehensive set of features.
No.2: it’s meta data driven. Using SQL you can query everything that is designed on your page, or in your application, and you can do this at the point of page rendering or in every AJAX callback. You can even generate applications/pages/regions etc. using the same API’s the APEX builder uses to create your applications. The power and solution capability this gives you as a developer is not widely publicised and in our opinion is really underrated. There is no other development framework out there that has this design, APEX is truly unique!
No.4: we can build visual appealing applications really fast with APEX, and they are super easy to deploy and maintain.Thanks to the universal theme and Theme Roller you can achieve a modern look and feel whilst adhering to corporate colour conventions. APEX has an extensive and mature PLSQL API, and also built-in REST support thanks to ORDS (Oracle REST Data Services). As shown in the earlier infographic, APEX is continually evolving and adding more and more features.
No.5: the low code design makes it easy for beginners to become productive, whilst it provides full control for experts. Comparing this to a SPA framework, it caters for a much broader range of developer skillsets, even business power users can learn APEX! Think of the cost savings in training and development.
No.6: licensing cost, yes Oracle is expensive especially when compared to the many open source databases and development tools out there, but if you don’t have a data foot print above 12G you can use 18c XE, ORDS, and APEX for free. You can also deploy this on cloud providers that can charge as little as $5 a month for hosting. So for people not using Oracle yet there is no entry barrier for adopting APEX. You could even use REST to access data in remote databases if your data requirement exceeds 12G. There are solutions to keeping costs to a minimum for small businesses. For everyone else already using the Oracle database it makes sense to use APEX, it’s really crazy if you don’t.
Lastly there’s also productivity apps that come with it like Quick SQL which is a markdown editor that can quickly build your data model and also generate a dummy dataset. You can also quickly build prototypes using APEX, comparable in time to using a wireframe tool. The difference being you have a functional application to preview, making the choice to use APEX that much easier.
What is a SPA user experience like?
If you are still wrapping your head around a single page application design style, let’s consider the APEX Page Designer introduced in 5.0. Whilst the APEX builder is not a single page application the Page Designer is modelled on a single page design style. Prior to APEX 5.0 there used to be a set of pages that were used to edit pages, regions, items, buttons etc. and you would find yourself navigating from page to page to page. This requires many clicks and page reloads to make your changes.
With the new page designer you can do everything on one page without interruption including saving Form data without reloading the page and keeping your screen context. It makes you somewhere along the lines of 5x more productive and in some cases like the multi-selection/editing capability of items/regions you can be 20x more productive. This is the type of performance benefit end users get from a SPA application over an MPA application. It’s this type of user experience and productivity benefits we want our customers to have in the applications we build. How much more efficiency can be gained and time and money saved when both developers and the application users are more productive using an SPA design over an MPA design? It can be quite a lot!
Can I build a single page application in APEX?
Using out of the box components you can build a single page application in APEX but everything would need to be created on one page. It literally is a single page application (minus the login page). You could argue that you can use dialogs to edit report content defined on this one page but from a technical point of view they are separate pages opened within an iframe within the dialog so they still mimic a single page design but are still using the MPA model since a page with a form is still POSTed back to the server. It’s a very limited design choice and is only really applicable for very small and simple SPA applications. If you start expanding on this iframe approach you will still end up hand crafting a lot of code (just look at the APEX dialog code).
If you are wanting to use APEX to build a sophisticated application, you are going to have to make some design trade-offs following the MPA design. These tradeoffs have an impact on end user productivity. You can however reduce theses trade-offs by implementing your own customizations, but your low code app starts to become a high code app that will take longer to build and maintain, which results in much higher costs. This results in the SPA frameworks looking like the better choice.
So what if you wanted to build a real SPA application in the same way you would a regular MPA application in APEX without losing productivity? Is it possible? The answer is: Yes you can!
Ok, so how can I build a complex Single Page Application in APEX?
Real customer quote today:
“We also produce more quality app dev output than any other team I’ve met in less time, with lower budget and fewer people – I have to be diplomatic when I point this out, lest any feathers be ruffled. The opportunities for us with #orclapex are vast.”
— Joel R. Kallman (@joelkallman) December 13, 2018
In summary if we look at the features for the design patterns available to us, it makes sense that we choose tools that are flexible and supports both our needs now and for the future. APEX, combined with FOEX ticks this box!
Single Page Application Demo
Here is a short demo showing how Single Page Applications built with the FOEX plugin framework behave in APEX.
Coming Soon, Part 2
is there anyway you can post these demos so we can download/view for howto’s?