fbpx

I Build Single Page Apps

Single Page App Components

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 perform a function/feature, automate a current 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 doing 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. 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 say no to a client for whatever complex request they might have, but put in a bit off effort and find a solution. It’s because of always taking the complex request, thrown in at 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 quick. 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 of your website’s server resources so all functionality it requires is handledby your own machines CPU & Ram. It has direct access to a computer’s hardware resources. In return, your website does not suffer the same faith as some websites that are buriedunder 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 as well. 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 built 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 takenfrom 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, it is 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 a 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 an optimal speed.

 

Single Page App Example

What value does a "single page app" bring 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 applications are 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 possible to them. It needs to be as 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 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 require attention.

Some examples of where Single Page Applications can be used

E-commerce site selling products:

Most of the time shopping carts get abandoned because your clients do not understand what product they need, especially if they are looking for something particular. If your 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 a web page to a 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

Every now and then it happens that an item sold on an e-commerce site 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 their serial number and if it matches the serial number on your database, it can present the customer with a form to fill out all the return details. If the customer is in another region, certain input fields (questions) can be added or removed.  This same app can then notify the courier company about the location of the collection and send an email to the customer letting them know their warranty claim being processed and it will be collected at a calculated time.

Information Purposes.

You are selling water purifying equipment and let’s say your customer wants to look up information regarding contaminants in their local drinking water.  Why not have an app on the page that connects to a service and displays all the information? They can be able 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 mailer.

Single Page Application Projects

Not all of my projects get published because of non-disclosure agreements with clients. If you would like more examples and are interested, please reach out so we can chat about your needs.

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, a solution with you.

×
25 Shares
Share25
Share
Tweet