Basic Single Page Application (SPA) Architecture

Data Access Layer

There’s no incredible insights here, no hot takes and nothing worthy of applause. It’s a simple rule that I follow on every SPA I build — regardless of size. To me, this is obvious and make sense. I cannot conceive of maintaining an application without having a dedicated Data Access Layer (DAL). I consistently see the same problems occur when people access API’s directly from their components. A DAL is a titanium bullet solution (silver bullets don’t exist) that squashes all of these issues at once.

_Data Access Layer _may not be technically the correct term, but the interpretation in English makes sense enough that it’s what I use, so sue me if I’m wrong.

TL;DR: Build a dedicated and shared data access layer for your components. Never access an API directly from a component.

Let’s take a look at these trivial Vue components so that I can illustrate my grievances.

// TODO's Index
<template>
  <ToDo v-for="todo in todos" :data="todo"/>
</template>

<script>
export default {
  data() {
    return {
      todos: []
    }
  },
  mounted() {
   this.fetchToDos()
  },
  methods: {
    async fetchToDos() {
      this.todos = this.$api.get('todos?status=pending')
    }
  }  
}
</script>

#vue #javascript #react #programming

What is GEEK

Buddha Community

What Is A Single-Page Application?

Single page web apps are an ideal choice when thinking about future web development. This architecture is a perfect choice for social networks stuff, SaaS platforms, or some close communities where SEO doesn’t matter.

#what is a single page application #single page application #single page application development

Giving Your Single Page Application (SPA) an API - The Quickest Way

I’ve been working with low-code tools for years, building automation integrations, and APIs. Recently, I’ve wondered whether we’ve advanced far enough to use a low-code platform as the back-end for a single page application (SPA).

It seems to be a nice combination — the SPA can be hosted anywhere, the API is quick and easy to develop, and they can evolve independently of each other e.g. if you need a native app just develop the UI and use the same API.

So, I decided to see whether we can by building a web application from scratch where

• The developer (me) is not a full-time developer.
• The application must interface with other systems.
• The application must persist in data.

#api #rest-api #api-development #single-page-web-applications #single-page #restful-apis #low-code #low-code-platform

Single Page Apps: Placebo Junk?

SPA’s are wildly popular right now, with the fans of such site and application building starting to sound more like cultists than rational adults. This figures as there’s significant overlap between the cheesy framework fanboys and those making wild unfounded claims about how much “better” SPA are for user experience.

Sadly much like artists under the delusion that they are designers, those making these UX claims know just as little about user experience or accessibility.

As I’ve said many the time, front-end framework fans are devoid of the most basic knowledge of what HTML and CSS are even for; thus it’s no shock they have the same cult-like attitude when it comes to throwing “JavaScript for nothing” at websites.

Though MOST of the problems are not the concept of SPA’s fault. No, the blame lies at the implementation’s doorstep.

Implementation Woes

How an SPA is created and coded is where most of it goes wrong. Let’s go through some of the most common problems.

#javascript #css #html #single-page-applications #web-development #single page apps

How To Develop And Deploy Micro-Frontends Using Single-Spa Framework

Micro-frontends are the future of frontend web development. Inspired by microservices, which allow you to break up your backend into smaller pieces, micro-frontends allow you to build, test, and deploy pieces of your frontend app independently of each other. Depending on the micro-frontend framework you choose, you can even have multiple micro-frontend apps — written in React, Angular, Vue, or anything else — coexisting peacefully together in the same larger app!

In this article, we’re going to develop an app composed of micro-frontends using single-spa and deploy it to Heroku. We’ll set up continuous integration using Travis CI. Each CI pipeline will bundle the JavaScript for a micro-frontend app and then upload the resulting build artifacts to AWS S3. Finally, we’ll make an update to one of the micro-frontend apps and see how it can be deployed to production independently of the other micro-frontend apps.

Overview of the Demo App

Demo app — end result

Before we discuss the step-by-step instructions, let’s get a quick overview of what makes up the demo app. This app is composed of four sub-apps:

1. A container app that serves as the main page container and coordinates the mounting and unmounting of the micro-frontend apps
2. A micro-frontend navbar app that’s always present on the page
3. A micro-frontend “page 1” app that only shows when active
4. A micro-frontend “page 2” app that also only shows when active

These four apps all live in separate repos, available on GitHub, which I’ve linked to above.

The end result is fairly simple in terms of the user interface, but, to be clear, the user interface isn’t the point here. If you’re following along on your own machine, by the end of this article you too will have all the underlying infrastructure necessary to get started with your own micro-frontend app!

Alright, grab your scuba gear, because it’s time to dive in!

Creating the Container App

To generate the apps for this demo, we’re going to use a command-line interface (CLI) tool called create-single-spa. The version of create-single-spa at the time of writing is 1.10.0, and the version of single-spa installed via the CLI is 4.4.2.

We’ll follow these steps to create the container app (also sometimes called the root config):

mkdir single-spa-demo

cd single-spa-demo

mkdir single-spa-demo-root-config

cd single-spa-demo-root-config

npx create-single-spa

We’ll then follow the CLI prompts:

1. Select “single spa root config”
2. Select “yarn” or “npm” (I chose “yarn”)

3. Enter an organization name (I used “thawkin3,” but it can be whatever you want)

Great! Now, if you check out the single-spa-demo-root-config directory, you should see a skeleton root config app. We’ll customize this in a bit, but first let’s also use the CLI tool to create our other three micro-frontend apps.

Creating the Micro-Frontend Apps

To generate our first micro-frontend app, the navbar, we’ll follow these steps:

cd ..

mkdir single-spa-demo-nav

cd single-spa-demo-nav

npx create-single-spa

We’ll then follow the CLI prompts:

1. Select “single-spa application / parcel”
2. Select “react”
3. Select “yarn” or “npm” (I chose “yarn”)
4. Enter an organization name, the same one you used when creating the root config app (“thawkin3” in my case)
5. Enter a project name (I used “single-spa-demo-nav”)

Now that we’ve created the navbar app, we can follow these same steps to create our two page apps. But, we’ll replace each place we see “single-spa-demo-nav” with “single-spa-demo-page-1” the first time through and then with “single-spa-demo-page-2” the second time through.

At this point we’ve generated all four apps that we need: one container app and three micro-frontend apps. Now it’s time to hook our apps together.

#microfrontend #single-spa #javascript #architecture #microservice-architecture #web-development #microservices #hackernoon-top-story

Serverless Vs Microservices Architecture - A Deep Dive

Companies need to be thinking long-term before even starting a software development project. These needs are solved at the level of architecture: business owners want to assure agility, scalability, and performance.

The top contenders for scalable solutions are serverless and microservices. Both architectures prioritize security but approach it in their own ways. Let’s take a look at how businesses can benefit from the adoption of serverless architecture vs microservices, examine their differences, advantages, and use cases.

#serverless #microservices #architecture #software-architecture #serverless-architecture #microservice-architecture #serverless-vs-microservices #hackernoon-top-story