25.0307 Doc URLs Stack URLs Lab notes (Gdrive), Git

This page describes FE/BE (frontend/backend) concepts. This is my own conceptual understanding (best guess). I wrote this because I did not find any similar explanation.

TOC

• Overview
• 1 1 FE (using #273 as an example)
  • 1.1 browser-based FE compared to windows app
  • 1.2 why a browser?
  • 1.3 FE requirements
  • 1.4 FE setup (vue)
• 2 BE (todo)

Overview

Another viewpoint.

• 1 Backend
• 2 DB
• 3 REST API
• 4 Frontend (integrates the REST API)
• 5 Swagger
• 6 GraphQL backend
• 7 GraphQL UI
• 8 API docs (for complete REST API descriptions (what swagger does not cover) or for GraphQL)
• 9 AIEO (AI engine optimization)

1 FE (using #273 as an example)

 

1.1 browser-based FE compared to windows app

a couple of AI blurbs:

• Vue is an open-source JavaScript framework for building user interfaces (UIs) and single-page applications (SPAs). It's used to develop websites and web apps.
• React is a JavaScript library primarily used for building user interfaces, particularly for single-page applications where content updates frequently without requiring a page reload. .... the UI is divided into independent and reusable pieces (components).

left: vue front end (FE). right: windows app.

1.2 why a browser?

• HTTP connection to BE (backend), DB, other computers. before HTTP(S) it was really hard to connect securely to a remote computer.
• browser = vm. shielded from os
• javascipt allows programming. run dev (not compile). browser tab = app.

1.3 FE requirements

FE should feel like windows app. to appreciate what this means, think about the evolution of a windows app.

• (left) at first in 1980s only had a screen with fixed lines of text. DOS.
• (middle) then added pixelation (not sure what tech term for this is) and graphics, where the OS adjusts pixels to show graphics and fonts in any format anywhere on screen (grayscaled pixel corners, etc).
• (right) with windows you had multiple apps displayed on screen at one time. with popup windows you could move, etc. that was a revolution (early 90s?). its all taken for granted nowadays.

need same windows functionality in the browser

• should have look and feel like windows app
• app is running locally (in a browser tab), only goes to backend when need something (and only retrieve that something)
• has popups, toolbar, independent components (react, vue)
• fits to screen, auto adjust, fonts adjust, etc. (bootstrap)

a browser tab corresponds to a single app window in windows.

1.4 FE setup (vue)

Use #273 as example. Vue front end.

• index.html. browser entry point.
• main.js. describes
  • App.vue. defines
    • navbar (top of dialog)
    • routerview (dialog main part that changes when path changes)
  • Router.

“Router” merely changes the routerview contents (usually in “react”ion to a button being pressed, etc)

• router/index.js defines all the “routes” (views that are displayed for url paths).
• each (router)view (conveniently referred to as “components” at times) defines the components that make up that (router)view.
• components (Hero, HomeCards, JobListings).

how vue structure (right) corresponds to browser frontend (left) requirements as described in (3).

2 BE (todo)