Hybrid Single Page Web Application

• Hybrid Single Page Web Application Form
• What Is Single Page Application

Join the DZone community and get the full member experience.

Apr 5, 2019 - Web applications, referred to as web apps for short, play a crucial role. Multi-page application, single-page application, and other design choices. A hybrid mix of SPA and MPA can be made to work in tandem using web.

How can the answer be improved?

Single Page Web Applications have come a long way since they first appeared around 2003. They have become an integral part of the modern JavaScript landscape.

But during my discussions with quite a few developers, I feel that there is still a lack of clarity about how single-page applications actually work. Hence, I decided to roll up my sleeves (figuratively speaking) and provide my take on this very very interesting subject.

So, let's start from the beginning.

What Are Single Page Applications?

The best definition, in my humble opinion, is: a Single Page Application is a type of web application that requires only a single page to be loaded into the browser.

You might be thinking, what does this even mean? How could an application with just a single-page be of use to anyone in the world?

The answer is simple. Single page web applications are built around the concept of dynamically rewriting the contents of that single page. This is different from loading pre-rendered pages from the server.

And this is where the magic happens. By taking this approach, single page web applications avoid the interruption caused by rendering the pages on the server. This removes the biggest problem the web development world usually faces with regards to providing a seamless user experience.

Sounds great already, right? I know! But let's just see how all of this works and I'm sure you'll be even more amazed.

How Does the Magic Happen?

In single-page web applications, when the browser makes the first request to the server, the server sends back the index.html file. And that's basically it. That's the only time an HTML file is served. The HTML file has a script tag for the .js file which is going to take control of the index.html page. All subsequent calls return just the data, usually in JSON format. The application uses this JSON data to update the page dynamically. However, the page never reloads.

The client (and not the server) handles the job of transforming data to HTML once the application has started. Basically, most of the modern SPA frameworks have a templating-engine of sorts running in your browser to generate the HTML.

Contrast this to a traditional web application. In a traditional application, every time the application calls the server, the server will render the entire HTML page. The client receives the rendered page and triggers a page refresh. In this case, the browser is the client.

The below illustration explains the difference between the two approaches:

What Are the Advantages?

• Right off the bat, it's obvious that since we don't send any HTML over the network for every user interaction, it saves a lot of time and bandwidth. Due to various opening and closing tags, the HTML version is usually larger. Also, in the traditional approach, we also load a lot of duplicate HTML every time we made a request to the server. By following the SPA approach, the application becomes much more responsive.
• No marks for guessing that faster data refresh and less bandwidth consumption leads to a better user experience. This is pretty useful on mobile devices and slower internet connections.
• There are arguments leveled against single page web applications saying that the JavaScript bundle size can become bloated. However, most of the good SPA frameworks provide wonderful methods of code splitting. This keeps your bundle sizes in check and performs on-demand loading wherever applicable.
• A less obvious benefit is regarding the overall architecture of an SPA. Using JSON to send application data creates a sort of separation between the view layer (HTML) and the application layer. This decouples the presentation and application layer and allows developers to evolve each layer independently. You can potentially replace the HTML markup without changing the application logic. The client and server are also totally independent of one another.
• Another overlooked benefit is production deployment of Single Page Applications. SPAs are super easy to deploy. When you build an SPA for production, you typically end up with one HTML file, one CSS bundle, and a JavaScript bundle. Any static content server can host these files. Good examples are Nginx, Amazon S3 Bucket, Apache, or Firebase.

Aren't There Some Disadvantages?

Well, there are pros and cons to everything.

One of the biggest detractions leveled at single page web applications has been that they cannot be properly indexed by search engines like Google. Since there is no HTML markup except the initial index.html file, search engines cannot index the content because their crawlers cannot execute the JavaScript used to generate the HTML.

However, in an official announcement, Google has stated that their search engine is now able to crawl AJAX calls.

Some of the criticisms leveled at SPAs are largely based on preference and complexity. However, in my opinion, they are largely subjective. The main point is that one should definitely look at the use-case while deciding on which approach best suits the application needs.

I would love to hear your comments on this in the comments section below.

Published at DZone with permission of Saurabh Dashora . See the original article here.

Opinions expressed by DZone contributors are their own.

This course develops a single-page reporting application for a Automobile Retail Distribution company.

The application will be built in 7 steps. The entire application will be built from scratch during the course. Course sequencing with time-lines are detailed as below:

Lesson 1: Introduction(10 mins)

I will give the demo of the application along with the Business case and the architecture

Lesson 2: 15 mins

Hybrid Single Page Web Application Form

I will start building the front-end of the application using HTML5 / CSS
Lesson 3: 15 mins

I will complete the front-end of the application using JS & JQuery
Lesson 4: 5 mins

I will develop the data-model of the application in MySQL using sinple SQL statements
Lesson 5: 17 mins

I will build Java based web-services to expose the data to out-side world as json string
Lesson 6: 13 mins

I will use JQuery to consume the data from the web-services to feed the front-end
Lesson 7: 11 mins

I will use Google API to add a Pie Chart to the front end and feed it with data from web-services

This course will not teach you Java, JavaScript, HTML, CSS or SQL. A basic exposure to these languages are pre-requisite for following this course.

Eclipse is used as development environment, Tomcat has been used as Web Server and MySQL as DataBase. Installation procedure are not covered in the course. .

What Is Single Page Application

You will definitely be able to build an end-to-end Single Page application, without using any framework, after this course.

Please feel free to have a look into the Lesson 1. Where you can view the demo as well as other details.

I welcome you to the join the course.

• This course is for those who have basic exposure to JavaScript, Jquery, HTML, CSS, Java and SQL
• Candidates aspiring to design and develop end to end Java based Single Page Web Application are ideal candidates for this course