Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Disseny i implementació

Com es construeix la interfície d’una aplicació web, des dels patrons que comparteixen totes les interfícies fins a una aplicació React. Pressuposa el llenguatge: JavaScript modern i el DOM són a Programació Web.

Com llegir aquests documents

Els documents van del model general a l’eina concreta:

  1. El context. Què és una aplicació web, com es reparteixen la feina el client i el servidor, i per què s’imposa el model Single-Page Application (SPA).
  2. Els patrons. Qualsevol interfície, web o d’escriptori, es basa en les mateixes idees: un arbre de components, listeners que reaccionen als esdeveniments i una separació entre model i vista.
  3. La manera imperativa. JavaScript al navegador: escoltar esdeveniments, modificar el DOM a mà i demanar dades al servidor amb Fetch. Funciona, però cada canvi d’estat obliga a actualitzar la vista pas a pas.
  4. La manera declarativa. En comptes de dir com canviar la vista, es declara com ha de ser per a cada estat. És el canvi de mentalitat que justifica React, i val la pena entendre’l abans de veure’n la sintaxi.
  5. React. Primer les eines que calen per treballar-hi (toolchain), després els fonaments (components, JSX, hooks) i finalment com dissenyar una aplicació sencera a partir d’una maqueta.
flowchart TD
    W["Aplicacions web"] --> P["Patrons de disseny"]
    P --> J["JavaScript i APIs"]
    J --> D["Paradigma declaratiu"]
    D --> R1["Fonaments React"]
    T["Toolchain"] --> R1
    R1 --> R2["Disseny React"]

Fonaments

  • Aplicacions web: client i servidor sobre HTTP, història del web i el model Single-Page Application
  • Patrons de disseny: els patrons on es basa el disseny d’interfícies, com la vista d’arbre, els listeners i el model-vista

Del DOM a la interfície declarativa

  • JavaScript i APIs: JavaScript al front-end, amb esdeveniments, manipulació del DOM i Fetch API
  • Paradigma declaratiu: declaratiu contra imperatiu, gestió de l’estat, efectes secundaris i web reactiva

React

  • Toolchain: les eines de l’entorn de desenvolupament: gestor de paquets, empaquetat, transpilació i proves
  • Fonaments React: components, JSX, flux de dades i hooks
  • Disseny React: dissenyar una aplicació a partir d’una maqueta, en sis passos, fins a extreure la lògica dels components

Després

Una interfície que funciona encara ha de ser fàcil d’usar per a tothom: és el tema d’Usabilitat i informes. Provar-la i posar-la en producció és a Preparació i distribució.

Itinerari curt

Si no pots llegir-ho tot, aquests cinc documents en ordre donen una base suficient per construir una primera aplicació React:

Aplicacions web → JavaScript i APIs → Paradigma declaratiu → Fonaments React → Disseny React

Referències

Last change: , commit: 1b2bff7