8 Reasons to Learn HTML-SPA
Although the concept of a Single Page Application has been around for almost a decade now, many are still unaware of what it can truly deliver. Far too many people underestimate the power of modern HTML! As a matter of fact, HTML has influenced other modern native technologies like XAML and QML. XAML is a powerful and modern .Net desktop and mobile development platform that replaces Win Forms it can be written in C#, VB, and C++. QML is a QT framework that is cross-platform and is another flavor of C++.
With frameworks like AngularJS and Angular, we see the emergence of an HTML that can evaluate logic. That’s right: if-statements, switch-statements, and for-loops can now be articulated though HTML. This makes sense because html is a declarative programming language is fully capable of doing so; this makes the language all the more powerful and easy to work with!
Single Page Applications are HTML-based pages that can seamlessly and dynamically load elements, components, and other resources of itself as the user interacts with with the page. This gives the user a really fluid illusion of multi-page website. In reality, the entire Single Page Application is downloaded on the initial page request. Subsequent SPA interactions only query for AJAX data — not additional pages from the server. It doesn’t stop there, developing this type of application is also fluid and dynamic for the developer as well.
Hello, my name is Robert, and today we’re going to go over 8 awesome reasons why you should learn Single Page Applications.
1. Promotes RESTful Architecture
REST stands for Representational State Transfer. It was defined by Roy Fielding in 2000 at my alma mater, UC Irvine. It is a popular convention for writing web API’s.
The RESTful architecture allows for data to be requested and updated on-demand and asynchronously. This stateless form of communication with the server creates a simpler, more robust middleware. Not only that, the stateless nature of RESTful calls also reduces the overhead resources from the server to honor the middleware operation.
By convention, there are 5 RESTful HTTP verbs: GET, POST, PUT, DELETE, and PATCH. See the section below if you like to learn more.
Get — Typically retrieves data
Post — Typically used to create or insert data
Put — Typically used to replaces or inserts data if it doesn’t exist
Patch — Typically updates a piece of data or create it if doesn’t exist
Delete — Typically deletes a piece of data
Please keep in mind that these are standard guidelines. It is possible to implement your API’s differently from the suggested standard or even create verbs that are not listed here.
The advantage of using a RESTful approach is the request can happen asynchronously while the application runs. It is possible, though, to run request in a blocking manner, freezing up the application until the request finishes before going to the next thing. Thankfully, this is frowned against. Running asynchronous requests allows the application to gracefully display a loading animation and handle up to 6 (for Chrome) requests in parallel. Upon completion, the application can present the data if successful, or gracefully handle different types of erroneous outcomes.
Furthermore, the RESTful API’s can be consumed by native apps such as Android apps, Windows apps, and iOS apps. This allows for your front-end SPA web application to be seamlessly compatible with other native applications on different devices and platforms.
2. Re-usability
Single Page Applications can separate the responsibility of making these requests into service calls. Contrast this with the pre-rendered applications-approach where the server logic is inherently mixed with the front-end code.
This allows the front-end SPA web app to be developed more independently from the middleware requests allowing for better re-usability and interchange-ability of both front-end and middleware codes. You can, for instance, run different versions of your front-end application and consume the same middleware API.
This allows both the front-end and the middleware applications to evolve independently from one another. A new middleware version can be released on a route that looks like /api/v3 while it’s older /api/v2 is still available for the front-end to slowly migrate to. In addition, a front-end application can be upgrading from AngularJS to Angular 8 or ReactJS while leaving the back-end untouched.
3. It is a true standalone web app and behaves much like a desktop application (all powerful design principles apply)
Similar to desktop and mobile applications, Single Page Applications can load it’s component upon the initial launch. This makes building html web-apps similar to developing a native desktop or mobile application where things have an single entry point and data can be passed from component-to-component. The need for re-usability of components is especially important for native applications on Windows, iOS, or Android platforms. Traditionally, this kind of re-usability was done through painful object-oriented-heavy inheritance involving hundreds, if not, thousands of lines of code. However, HTML has shown that creating components is simple and easy. Re-using and customize the components can be quite painless.
As a matter of fact creating components in HTML is great fun — thanks to frameworks like Angular and React. Not only is it simple to create, HTML makes it intuitive to reuse, override, and customize when needed. Furthermore, there is a standard called web components that is native to HTML. Frameworks like Google Polymer take advantage of this technology.
HTML5 is fantastic.
Need to change the look? Use CSS classes or overrides.
Need to pass data as parameter? Use as many attributes as you like.
Need to embed complex content into your control? Use the inner HTML of an element. Thanks to the simple and hierarchical nature of HTML, you can embed complex controls inside one another.
HTML Templates is a standard supported by Chrome, Edge, and Firefox. Web Components is a standard that utilizes HTML templates to allow for HTML elements to be created and reused. This can be used alongside Single Page Applications.
Building components in HTML is so cool that platforms like Windows, Android, and QT have been influenced by this front-end approach. And guess what? HTML is still simpler and it’s getting even better!
4. Works Beautifully with Caching and Web Storage
Native desktop and mobile applications have many components that tend to communicate with one another. This communication may take place in terms of data being passed statically, or as parameters when initialized, it may also happen in the form of data storage. In a similar way, Single Page Applications can store data in the way of Web Storage and use it to communicate with other components of the application, other running instances of the application, or even other SPA’s running on the same domain.
Web Storage is a technology that allows a front-end persistence of data. Using this technology, Single Page Applications can now store application states or cache data that can take a long time for the back-end to calculate. Additionally, it is possible for this data to remain available across different components and different instances of the application.
For instance, say that a page needs to download a catalog of items that involve some calculations every time the page loads. Although, it is not super slow, frequent requests to this page will waste resource and irritate the user’s experience. Even if only 1 of 35,000 entries was changed, the entire page would have to be reloaded and the calculations redone to pick up the change. With SPA and Caching, information can be stored via Web Storage and the server can utilize Web Sockets to notify the user of individual updates of data to broadcast. That way, it would only need to update the critical pieces that do change. Furthermore, since this form of persistence can be shared, the updates can propagate and shared among other components and instances of the applications immediately. This can effectively reduce the redundant calculations by sharing the already-available piece of data across different applications while improving the user’s experience by providing them a live feed of changes happening directly from the server.
5. Responsive, Fast, and Fluid. It allows for multiple layouts and web sockets allow for it to run one instance while many web pages are open.
Single Page Applications can leverage the power of CSS to easily style components. The web has a wealth of technologies and best practices to design for different devices. Large-scale SPA projects have inherent support for responsive design; they look great on phones, tablets, and desktops alike. That means you can build web pages that run and display beautifully across these different platforms. This may seem obvious from the perspective of an HTML developer, but building responsive applications that support so many displays and platforms in other frameworks like Win Forms, XAML, QT, Java, or Android is much harder.
The concept of asynchronous programming is a critical part of HTML and JavaScript. The preferred method to honor a HTTP request is to do asynchronously as a opposed to blocking. In a blocking request, the program will wait until the line of code that makes the request is completed before moving on to the next line. Doing this will freeze up the front-end application, this is will frustrate users especially if the request takes a long time to finish. In a non-blocking, asynchronous request, it is honored while allowing the program to continue executing to the next line. This gives the user an experience that the application is always flowing and fast.
Responses from the server can be stored and shared across the entire web application. Because of the structure of SPA, it is not difficult to transfer data across different components or even running instances of the SPA. This could save unnecessary and redundant calls to the servers. Doing gives the user a more fluid, uninterrupted experience.
Furthermore, with the use of Web Sockets, a live feed of data coming in can be stored and utilized immediately by different pats of the SPA web application. An update from the server can trigger a propagation of data to inter-related components. This is can make your application incredibly intriguing and interactive.
Because of the structure of an SPA web application, developers can define different layouts independently from their components. Developers could create a specific component and not have to worry about the over-all of the page until a later stage, or vice versa. Layouts are easy to create and allow for a multitude of possible looks. They can define as many layouts as they wish and even switch in-between the layout styles instantly. Complex layouts can even be specific to the component. Components can be configured to switch to a specific layout when used, and switch back to the default layout otherwise. Layouts can also be reused across different applications.
6. Interesting Frameworks that Manipulate the DOM. It unleashes the true power of HTML by DOM manipulation (embeds logic in html and allows for rapid development)
The DOM or the Document Object Model is a API structure for a well-formed HTML document. Single Page Applications make extensive use of the DOM by manipulating it to provide the dynamic experience for the end-user.
One of the advantages of HTML is the hierarchy of objects, the language allows for users to clearly see where an object lives in the hiearachy. Unlike frameworks from the previous generations like Win Forms, Java Spring, and older QT frameworks, UI components were added to containers which were not easy to visualize (much less manipulate). Experienced developers working with HTML already have an understanding of this structure at an intuitive level.
The magic behind SPA’s is the clever manipulation of this DOM. By manipulating the child nodes, a single page can remove or introduce any kind of elements it wants into the page. This allows for a single HTML page to reshape itself in all kinds of ways, and hence the birth of Single Page Applications.
It can be expensive to constantly change the DOM structure. This is one of the reasons why Google introduced Angular, the successor of AngularJS.
Google’s Angular and AngularJS is unique in that it makes use of the MVC, MVVM, or MV* (model-view-whatever) design pattern. It separates the view from the logic by allowing users to have templates where the HTML code lives and the controller where the JavaScript code lives. What’s fascinating is this framework also adds powerful elements and attributes that allow the user to embed logic into the HTML elements. You can, for instance, utilize if-statements, switch-statements, and conditional for-loops in HTML. These constructs in HTML give this framework an interesting flavor. This makes the HTML code more expressive and reduces the amount of code needed.
React’s flavor is more JavaScript-focused. Unlike Angular though, React is lighter, more modular and meant to be used with other libraries. Don’t worry, React has a giant ecosystem of libraries to draw from. It does not emphasize MVC as much and encourages a more JavaScript-heavy approach to building web applications.
7. It can be ported more easily to a full-blown native application. (as a matter of fact, there are frameworks exists to leverage this technology like reactive native)
At it’s core, Single Page Applications are very similar to native desktop or mobile applications. Both types of applications make use of a single entry point which are a set of instructions that are always executed at the beginning of the application. Additionally, native applications are composed of other components that are added to the more larger views. Since SPA are component-oriented and registers all of it’s components to the main application, both it’s structure and behaviors can be mapped to more traditional applications. Even the UI and design principles can be mapped to native applications. Everything from the application’s design, to the flow of data from component-to-component, or web requests via API can be done mapped from a web application to a native application.
Lastly, there are even frameworks out there that take advantage of frameworks like AngularJS, Angular, and React to build cross platform applications for mobile and desktop devices. These frameworks will allow the developers to build applications that are written in HTML, but run like a full-blown application on different platforms. Here are some examples of such frameworks…
Ionic — a crossplatform solution that leverages HTML, JavaScript, and CSS to write apps for the device. This framework even allows HTML and JavaScript to exclusively control phone or desktop hardware resources like cameras and microphones. Ionic calls these applications hybrid progressive web apps.
Native React — this framework came from FaceBook and leverages the same API’s from ReactJS library to build rich mobile applications. You build your application using JavaScript and HTML, but your end-product will be a real mobile application that is native to the device.
8. Development is seamless (well-integrated and predictable, easy to package and bundle into a working distribution)
There is a particular exprience that you get when you develop SPA’s — most notably using the NodeJS ecosystem — that feels like a streamlined and fluid development process. Express.js can run as a server to serve your files (if you need one). Hot Reload detect changes and apply these changes to your Single Page Application almost immediately without having to rebuild everything. Packages like minify and bundle can create a destributable version of your SPA web-app in a small and compact set of files with a single index.html. Utilities like Grunt, Gulp, or the built-in NPM run commands can perform tasks moving files around and perform any intermediate steps along the process. All of these features combine to create a powerful, flexible, and seamless development environment that’s never been seen anywhere. If you haven’t experienced it, you are missing out!
Bonus
9. Lazy-loading modules and pages. Although the default way to construct an SPA is to download the entire content at once, it is not difficult to configure it to download specific contents first. Certain components or modules of a page can be designated to downloaded on-demand rather than on the initial load. This allows for even specific pages to be downloaded and to disregard the entire application. This is specifically useful if you have a specific page that you want to serve, but don’t want the entire application to load.
10. Hybrid SPA. This is unconventional, but it is actually possible to build SPA’s that can have portions of the page pre-rendered or templated. Say for instance that you have page with gets it’s contents loaded by PHP, ASPX, Golang, or Ruby on Rails (it doesn’t matter which specific technology); it is actually possible to configure the SPA to run alongside the templated page! Many people complain about SPA not being SEO-compatible, but SPA is actually capable of running perfectly find alongside statically created pages and pre-rendered server-side pages, there is actually no issue at all.
Why would you want this? The power of SPA’s are that they are truly dynamic and can give the user a very interactive experience. With HTML5, you can immerse the user in a rich experience beyond the reach of pre-rendered pages while taking advantage of cross-component features and caching that was mentioned earlier in this article.
11. There has a proposal for HTML6 to have native support for Single-Page-Application without JavaScript. Having developed in other ui-based frameworks like XAML and QML, I can see how this is possible by allowing for native support in databinding and routing support. If these features were made natively available in HTML, frameworks like Angular, React, Ember, and Vue may become unnecessary. Furthermore, it would greatly simplify writing web apps and reduce the amount of JavaScript required.
What more?
Join us: https://intully.com
FB Course: https://www.fb.com/groups/start.html.coding
