I Build Single Page Apps

Single Page App Components

What is a Single Page App?

The short description

A Single Page App, also called a SPA, is a software program that runs within a website's page or as a separate app in the cloud. If a website page gets loaded, where the app is situated, the complete application gets loaded with it.

Not completely accurate, but to get you to understand the concept. In reality, the full app gets loaded on the page in a specific area of your choosing via an event that gets triggered that wakes(start) the app. The physical app can be stored on your current host server or on an external server.

The goal of a single page application is to fulfill a function/feature, automate a currently manual process(you need to perform by hand) or enhance the user experience of your business and your website. A Single Page Web App is so powerful that you can migrate almost any existing desktop application to a SPA that lives in the cloud on a secure server.

antondevilliers profile image

Hi, I am Anton from Cape Town, South Africa. I have been practicing Software Development / Engineering since 2011 on a vast array of different platforms. I develop custom solutions for clients from all walks of life around the world which includes startups, small to medium businesses and assisting agencies and their customers who require specific skills sometimes. My goal is always to deliver honest & quality work and I try to make myself always available if a client needs my help. I will never so no to a client for whatever complex request they might have, but rather put in a bit off effort and find a solution. It's because of always taking the complex request, been thrown in the deep end, that has helped build my career and passion around software development.

Deeper dive into SPA's

What makes up a Single Page App

It is constructed out of a series of reusable custom build components. Each component has a function or feature and when connected together forms an application. Your use case can vary depending on how simple or complex your app needs to be.

 

An independent application that is super fast.

It functions exactly like an application installed on your mobile phone, tablet or even desktop computer. It is self-sufficient and self-contained and very, very fast. It lives in a virtual container, called the virtual DOM, inside the browser. Just like a Virtual Private Hosted Server lives with many other VPS's on a single server in a VM container. It does not make use your website's server resources so all functionality it requires is handled by your own machines CPU & Ram. It has direct access to a computers hardware resources. In return, your website does not suffer the same faith as some websites that are buried under hundreds of plugins/extensions that just makes your website slower, because your server needs to work harder to generate the pages. It also makes your website harder and more expensive to maintain.

Single Page App SPA Backend Examples Applications Showcase
Small visual explanation on how a Single Page App is loaded and functions.

Click image to enlarge.

Not Platform Depended, non-existing compatibility issues.

A Single Page Application is not restricted to the website platform you are currently using as its runs in the browser, called the client. So if you use Drupal CMS and changing over to a WordPress CMS (Content Management System) or even a new static site the app will still function as it was before. It is not platform depended. A SPA also doesn't suffer the same faith as a normal website where each layer of the app can be accessed without reloading the whole page.

 

It is extremely powerful and very versatile and it likes to talk to other services.

A SPA is a physical app platform that can communicate with other online services(example payment and shipping gateways), websites, mobile devices, servers, and databases via REST API calls or real-time, bi-directional communication between apps and servers. It can perform payment transactions, take orders, send emailers, fetch & store data.

 

Android, iOS & Windows

It can be converted into a mobile application also. Yes, the whole app can be migrated to Android or iOS in a native container environment. Native Container Environment: So it will run on a smartphone as if it was a normal application build for that platform. So now you can have a "web-version" plus a mobile-app to market to your clients.

PS. If you are interested in custom mobile applications that are natively build for Android or iOS, I do that to.

 

Little background of how a webpage is rendered, every, single, time VS Single Page App.

You might relate how many websites forms you might have had to fill out in your life only to be taken from page to page and wait for each page to load. Sometimes it does not even load, because of a network error and then your customers aboard the process or move on to another service.

You see with most websites, especially CMS sites, every-time you load a website, the browser needs to contact the server for a webpage. The server gets the request to dynamically generate the page(building the layout and fetching the content from a database) and then send it back to the browser. The browser then renders the page. Believe me, there are 100+ other things that also happen in the background, but to get to the point is that this happened every single time you request a webpage. With a Single Page App, this does not happen as all the functionality is already loaded into your browser(your computer's memory). So none of your current hosting’s resources is been used.

A website has its function, its to display content, but an APP for your website opens up so much more possibilities and automation processes that a website was not designed for. A website will eventually slow down over time the more functions you add to it because it was not designed to handle so much functionality that was meant for an App environment. To overload, a website with applications or functions is to put a web app in app web, in a web app. For example, every time a page gets loaded on your website almost ALL the software components is loaded up again. The advantage with a SPA is that you can offload functionality to other servers to free up resources on the server where the website is hosted so your website always operate at optimal speed.

Single Page App Example

What value does a "single page app" brings to your business?

To the point, allot! There are many use cases for a single application.

Some companies who make great use of single page application, applications that you might be acquainted with, is Facebook, Instagram, Pinterest, Uber, Netflix, Twitter, Airbnb and such. These are big-mentioned-platforms to give you an idea that the sky is not the limit. It is the future to online user engagement/interaction.

A website is to engage with your users to display content as fast as humanly possible to them. It needs to be a light as a feather because not all users have speedy internet connections. If you want functionality and need to automate some of your business processes, you require a web app.

Every single business still has a manual process somewhere that could be automated into an app. If done correctly. Imagine what you can do with that extra time you don't always have available, I know...

  • More time with Family or Friends.
  • Get to do that project you always wanted to or explore a new business venture.
  • Focus on areas in your business that requires attention.

Some use case examples

For an e-commerce site where you sell products.:

Most of the time shopping carts get abandoned because your clients have no idea what product they need, especially if they are looking for something particular. If you competitor communicates the sale/message better than your site,  they will end up with the sale.

What you need is an Automated Sales Person.

So for instance, say you are selling optic contact lenses and a new customer, but a new user also, comes to your site. How am I, as the customer, going to know which is the correct product for me? With a Single Page Application, you can guide the customer to the correct product(s). Instead of using the old normal forms where you go from web page to web page, you can all have those questions with answers and product recommendations ready in one block on the same page. It is even possible to let the app add the products to your e-commerce shopping cart automatically!

Warranty Claim

If you sell goods it happens so once in a while that something is defected and needs to be returned. With a Single Page App, you can have an entire warranty claim system on a single web page. Customers can fill in their serial number and if it matches the serial number on your record in a database it can present the customer with a form to fill out all the return details. Also if the customer is in another region certain input fields (questions) can be added or removed.  This same app can then contact the courier company to collect the item at the location where it needs to be collected and send out an email to the customer letting them know their warranty claim is been processed and their item will be collected at a calculated time.

Information Purposes.

Do you want your customers to look up information regarding their environment for example? Say for instance you sell water purifying equipment and want customers to see what is in their drinking water. Why not have an app on the page that connects to a service and displays all the contaminants in their local drinking water? Plus they can have the option to email the list to themselves. Taking it a step further, include a product or two that could assist the customer with their problem in the emailer.

Single Page Application Projects

Not all of my projects get published as it takes a good deal of time to write, edit and publish a project. If you like more examples and are interested, please do reach out so that I can share a couple with you. I will post some more in due time.

Interested in a Single Page Application?

If you have an existing app solution that you want to migrate to the cloud or your website or have a need to replace a tiresome manual operational task, for a while now, with an automated solution, please get in contact with me and I will be happy to assist and brainstorm, if needed, a solution with you.