per sviluppare la tua single page application un approccio ...principi di design governance...
TRANSCRIPT
![Page 1: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/1.jpg)
Un Approccio Frameworkless per Sviluppare la tua Single Page Application
![Page 2: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/2.jpg)
Antonio Dell’Ava
frontend developerbackground in interaction design
loves cycling
![Page 3: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/3.jpg)
OUR
ideato e extrategy ora sono Flowing: una community inclusiva di persone che condividono passione per l’innovazione e bisogno costante di evoluzione. Abbiamo cocreato insieme questa nuova realtà, e insieme a chi condivide i nostri valori continuiamo a farla crescere giorno per giorno.
PEOPLE
![Page 4: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/4.jpg)
https://github.com/frameworkless-movement/
![Page 5: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/5.jpg)
Peace & Love...non odiamo i framework
![Page 6: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/6.jpg)
Prendere decisioni tecniche ≠ Usare il framework più di moda
![Page 7: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/7.jpg)
Interfacce Application
Frontend
![Page 8: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/8.jpg)
![Page 9: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/9.jpg)
Non FunctionalRequirements
Sviluppo del Progetto
UX Business Needs
![Page 10: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/10.jpg)
Non Functional Requirements
quanto durerà il software?
in quanto tempo deve essere appreso?
qual è il “ritmo” dell’interazione?
da chi deve essere utilizzato? che competenze ha?
![Page 11: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/11.jpg)
Come legarli al progetto?Design System
![Page 12: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/12.jpg)
Errate aspettative
“Per fare il design system devo avere una pattern library”
“Il design system è UX”
![Page 13: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/13.jpg)
The true story“ho una letteratura di interfacce che rispecchia i n.f.r., abbiamo lavorato per avere un linguaggio comune, quindi un vocabolario dei componenti mi sarà utile”
![Page 14: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/14.jpg)
14
Design SystemPattern Percettivi → Style Guide
margini
tipografiapalette di colori
navigazione
iconografia
form
layout
CTA
principi di design
governance
parametri e regole d’uso comuni
linguaggio condiviso
Pattern Funzionali → Componenti
![Page 15: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/15.jpg)
1. Principi2. Parametri e regole d’uso comuni3. Governance4. Pattern5. Pattern Library
Processo
![Page 16: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/16.jpg)
Design System: Principi
➔ 3..5 frasi
➔ tutto il team coinvolto
➔ Esempio errato:“completezza e piacevolezza”
➔ Esempio corretto:“Seguire le seguenti priorità: prima completezza delle
informazioni di contesto poi piacevolezza estetica”
➔ la “prova del 9” è chiedersi “il contrario del mio principio potrebbe essere
valido per un altro design system?”
![Page 17: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/17.jpg)
Design System: Parametri e regole d’uso comuni
Integrato
Restrittivo
Modulare
Flessibile
![Page 18: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/18.jpg)
Design System: Governance
➔ Quale è il team? Livello di delega?
➔ Quali sono gli strumenti?
➔ Come si rendono visibili i risultati? Canali?
➔ Quali sono i riti?
![Page 19: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/19.jpg)
Design System: Design Pattern
➔ [def] una soluzione progettuale
riusabile per un problema ricorrente
➔ Come? Processo induttivo da
UI+User journey a Design Pattern
http://bradfrost.com/blog/post/interface-inventory/
![Page 20: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/20.jpg)
Interface inventory
http://bradfrost.com/blog/post/interface-inventory/
➔ fa emergere quanto un pattern è centrale nella consegna
di valore
![Page 21: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/21.jpg)
1. Visualizzare il flusso
http://bradfrost.com/blog/post/interface-inventory/
➔ stampare un flusso di
interfaccia
➔ taggare i componenti
in funzione dello
scopo che hanno
![Page 22: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/22.jpg)
2. Definire il Pattern e la Struttura
http://bradfrost.com/blog/post/interface-inventory/
si ritagliano e si
raggruppano elementi
simili definendo la
specificità e i contenuti
![Page 23: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/23.jpg)
3. Battezzare e documentare il pattern e varianti
http://bradfrost.com/blog/post/interface-inventory/
![Page 24: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/24.jpg)
Pattern Library?
![Page 25: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/25.jpg)
Framework==
una pattern librarypronta
![Page 26: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/26.jpg)
26
Design SystemPattern Percettivi → Style Guide
Variabili(custom?)
principi di design
governance
parametri e regole d’uso comuni
linguaggio condiviso
Pattern Funzionali → Componenti
Framework(esteso?)
![Page 27: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/27.jpg)
IntegrabiliCSS only Integrati
Alcuni Esempi
https://github.com/troxler/awesome-css-frameworks
![Page 28: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/28.jpg)
È per forza un male usarli?
![Page 29: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/29.jpg)
Pitfalls
![Page 30: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/30.jpg)
1. Tradeoff
![Page 31: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/31.jpg)
PRO CONTRO
Framework UI
Velocity SpecificitàDebito Tecnico
![Page 32: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/32.jpg)
https://martinfowler.com/bliki/TechnicalDebtQuadrant.html
Avventato Prudente
Scelta
Involontario
“Non abbiamo tempo per
progettare”
“Cosa è la UX?”“Ora sappiamo come
avremmo dovuto farlo”
“Preferiamo accelerare e siamo consapevoli delle
conseguenze”
![Page 33: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/33.jpg)
2. Il Software soddisfa i bisogni nel tempo
![Page 34: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/34.jpg)
Tempo
Ciclo di Vita del Software
![Page 35: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/35.jpg)
Tempo
Ciclo di Vita del Software
MVP FEATURE 1 FEATURE N
![Page 36: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/36.jpg)
Tempo
Co
no
scen
za
![Page 37: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/37.jpg)
Tempo
Ciclo di Vita del Software
MVP FEATURE 1 FEATURE N
Scelta Framework
![Page 38: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/38.jpg)
4. Il frameworknon toglie il costo di allineamento
![Page 39: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/39.jpg)
Tempo
Ciclo di Vita del Software
MVP FEATURE 1 FEATURE N
Dis
alli
nea
men
to
![Page 40: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/40.jpg)
Alternative
![Page 41: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/41.jpg)
Possibili approcci
1. “Classico”: framework frontend
react/angular/vue + SCSS
2. WebComponents
![Page 42: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/42.jpg)
Esempio di Web Component
https://github.com/adellava/simple-web-components-with-manipulation
1
2
3
4
5
6
7
![Page 43: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/43.jpg)
Esempio Web Component
<html>
[...]
<body>
<mydesignsystem-input-currency
name="valore-bonifico" num="889271"
label="valore
bonifico"></mydesignsystem-input-curr
ency>
</body>
</html>
import InputCurrency from "./InputCurrency/InputCurrency";
window.customElements.define(
"mydesignsystem-input-currency", InputCurrency
);
![Page 44: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/44.jpg)
Esempio Web Component
class InputCurrency extends HTMLElement {
static get observedAttributes () { [ // attributi osserbabili ] }
connectedCallback () {
// render
// bind events
}
attributeChangedCallback (name) { //... sync my template }
}
![Page 45: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/45.jpg)
Esempio Web Component
const emitChangeValue = (element) => {
const event = new window.CustomEvent("value-change", {
detail: () => Number.parseFloat(element.value),
bubbles: true
});
element.dispatchEvent(event);
};
![Page 46: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/46.jpg)
Caratteristiche
1. Costosa
2. Compatibilità
3. Prestazioni
4. Web Standard
![Page 47: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/47.jpg)
Scelta Consapevole,come si fa?
![Page 48: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/48.jpg)
quanto deve durare il software?
specificità del design system
web components+ scss
react/vue/angular+ css only framework (es.
bulma)
react/vue/angular+ scss
framework UI end to end => es. material UI
framework UI end to end => es. material UI estesa con+ react/vue/angular componenti SCSS
![Page 49: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/49.jpg)
quanto deve durare il software?
specificità del design system
web components+ scss
react/vue/angular+ css only framework (es.
bulma)
react/vue/angular+ scss
framework UI end to end => es. material UI
framework UI end to end => es. material UI+ react/vue/angular componenti SCSS
Mia App
![Page 50: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/50.jpg)
quanto il componente è centrale nella consegna del valore?
specificità del componente
web components+ scss
react/angular/vue+
scss
framework UI end to end => es. material UI
react/vue/angular+
css only framework (es. bulma)UX da rivedere?
UX da rivedere?
![Page 51: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/51.jpg)
Conclusioni
![Page 52: per Sviluppare la tua Single Page Application Un Approccio ...principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali → Componenti](https://reader033.vdocuments.pub/reader033/viewer/2022051510/5fee123161982a5fb2333709/html5/thumbnails/52.jpg)