SPA-k és a modern

front-end architektúra

(Összefoglalás / Áttekintés)

Motiváció

 

Modern front-end keretrendszer/megoldások használata elősegítheti a tesztelhetőbb, karbantarthatóbb és kezelhetőbb kliens oldali kódot

 

A kliens oldal átvehet felelősségeket a szerver oldalról, ami (szerintem) egy letisztultabb szerver oldali alkalmazást eredményez

Tartalom

Front-End napjainkig / Mi az az SPA
 

Modern JavaScript keretrendszerek (Angular)
 

JavaScript / TypeScript
 

Front-End projekt felépítése
 

Hogyan lehet áttérni lépésről lépésre

Érdemes visszatekinteni

2000-es évek elején már felmerül a koncepció, hogy a böngésző építse fel az oldalt JavaScript segítségével
(inkompatibilitás, nyelvi nehézségek, szabvanyok hiánya, gyenge WebAPI)

2006: JQuery (inkompatibilitás feloldása)

 

Megjelenik az AJAX a köztudatban technika

 

Később elindul egy SPA keretrendszer írási hullám, illetve egy nyelvújítás, szabványosítási hullám is (W3C)

 

Körvonalazódnak a kihívások és a megoldások az SPA-kkal kapcsolatban, egységesedés látszódik (React, Angular, Vue)

Single-page application

 

Az oldal felépítését nagy mértékben a kliens oldali kód végzi

 

Navigálás, felhasználói események nem eredményeznek oldal újratöltést, fölösleges kéréseket

 

Eggyel kifinomultabb felhasználói élményt lehet vele elérni

 

Kliens oldal felelőssége, mérete megnő, de lehetőség nyílik a böngésző által biztosított feature-k jobb kihasználására (pl. cache)

Keretrendszerek

 

Állapotkezelés (one-way data flow)

 

VirtualDOM

 

Komponens-alapu architektúra

 

Állapotkezelés (Angular)

 

with Observables (reactive programming) - RxJS


imperativ:

A + B = C


reactive:

A$ + B$ = C$

Smart es dump komponensek

ZoneJS for re-rendering
(Angular)

Angular vs others

complete solution for everything

CLI tool

testing support

ahead-of-time compilation

dependency injection and custom module system

TypeScript (AtScript) + RxJS

strict with concepts, but enable outside solutions

JavaScript

Egyszálon történő futtatás (asszinkronitas - event loop)

 

Nagyobb ráncfelvarráson esett át 2015-ben (ES6)
(osztályok, egységes modul rendszer, asszinkronitas kezelése)

 

Visszafele kompatibilitás megmaradt, régi böngészők támogatottsága fordításon keresztül történik

 

Azóta évente újabb verziót adnak ki (ES2018)

Asszinkronitás kezelése

Callbacks -> Promises -> Generators -> Async functions


async function streamAsyncIterator(payload) {
  // ...
}

for await (const chunk of streamAsyncIterator(response.body)) {
  // ...
}

TypeScript

Erős vs gyenge típusosság?

Érdemes inkább eszközként tekinteni rá,

mint csak egy újabb nyelvként

JavaScript nyelv kiegészítése

JavaScript

JavaScript@next

TypeScript

Jellemzői

 

Már a kezdetekkor jól kitalált es működő koncepció (csak bővül)

 

Folyamatosan növekvő támogatottság (típus csomagok)

 

Az utóbbi időben rengeteget fejlődött a típus rendszere (nincsenek null-ok)

 

Jól konfigurálható fordító, könnyű lépésről lépésre áttérni rá

 

Akár JavaScript-ről JavaScript-re fordításra is alkalmazható

Hátrányai

 

Kevésbé elterjedt függőségek esetén a nem létező vagy gyenge minőségű típus csomagok (@type/*) tudnak kellemetlenséget okozni

 

Egyre ritkább a rossz tapasztalat, az elterjedt csomagokhoz általában mindig hozzá tartozó típus csomag

 

Könnyen generálható típusinformáció projekthez

Kissé körülményes, de saját magunk is megírhatjuk

Konfigurálhatósága

# tsconfig.base.json
# tsconfig.test.json
# tsconfig.build.json
# tsconfig.json

{
  "compilerOptions": {

    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,

    "strict": true,
    "strictFunctionTypes": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true,

  }
}

"watch": "rm -rf dist && tsc --project ./tsconfig.build.json --watch",
"build": "rm -rf dist && tsc --project ./tsconfig.build.json",

Némi kód

import { ActionResponse, Logger, ActionParameters } from '../../../modules';
import { authDatabaseMiddleware } from '../../../middlewares';
import { ActionDescription } from '../../../decorators';
import { BaseAction } from '../../../models';

@ActionDescription({
  method: 'GET',
  path: '/api/accounts',
  middlewares: [authenticationMiddleware],
})
export class AccountsAction implements BaseAction {

  private _response: ActionResponse;
  private _logger: Logger;

  constructor({ response, logger }: ActionParameters) {
    this._response = response;
    this._logger = logger;
  }

  public async execute(): Promise<void> {
    this._logger.success({ message: 'Ok' });
    this._response.respondWithOk();
  }

}

Érvek mellette

 

IDE támogatottsága révén megkönnyíti a refaktorálást, a kódban való navigálást

 

Érdemes egy JavaScript projekt esetén is akár TypeScript konfigurációt megadni

(csökkenti a hibák számát, korai visszajelzés)

 

Rá épülő eszközök, pl. TSLint

Front-End projekt felépítés

Külön repository,
CI pipeline és deployment

Előnyök

 

Tisztább projekt felépítés, nem szennyezi a szerver oldali projektet konfigurációkkal, dependenciákkal, stb.

 

Külön deploy-olhatóság előny, jól leválaszható (redirector service)

 

Áttekinthetőbb, kezelhetőbb front-end projekt

Hátrányok

 

Kódmegosztás (NodeJS backend esetén)

 

Teljes deployment némi odafigyelést igényel, de még sosem okozott problémát

E2E tesztelés

Átállás új stack-re /
modern keretrendszerre

Oldalankénti vagy
akár komponensenkénti átállás

 

Új (pl. si-alttab-client) projekt létrehozása, kiépítése

 

Az asset-ek behúzhatóak a fő projektbe (némi lassulás)

 

Csak ott az alkalmazás inicializálódni, ahol a megfelelő komponens fel van használva
(akár flippel-hető is)

Thanks!

Internal Presentation #1: SPAs and modern front-end architecture

By Róbert Beretka

Made with Slides.com

Internal Presentation #1: SPAs and modern front-end architecture

Presentation for Email Channel Crew about NodeJS project setup with TypeScript and best practices.

  • 430

More from Róbert Beretka