Slide del MeetUp di Angular Roma dove Cristian Borelli e Andrea Stagi ci hanno raccontato le evoluzioni fatte sul Design Kit e Bootstrap Italia: dalle nuove tecnologie ai temi dell'accessibilità. L’occasione è stata utile per presentare i lavori per il nuovo Design Kit Angular che andrà ad arricchire le componenti Bootstrap Italia.

1. Angular
Roma
Passion, culture, training…
and beer!

2. Online / In Person
Sappiamo che il lavoro ci
tiene legati alla scrivania
più del dovuto… ma ci
teniamo a raggiungere
tutti!
Ospiti
I nostri ospiti sono
persone che hanno
passione ed hanno voglia
di confrontarsi.
Un MeetUp al mese!
Solitamente l’ultima
settimana del mese, ma
seguici sui social per non
perderti i nostri eventi!
01 02 03
Quando ci vediamo?

3. “Technology is best when it
brings people together.”
― Matt Mullenweg, inventore di Wordpress
Why a community?

4. NGCONF
MMXXII
Rome
Decmber
2nd,
2022
Spazio
Novecento
EUR
-
Rome

5. NGROME MMXXII
N. Persone?
Da quante città diverse?
300
50

6. NGROME MMXXIII ?
STAY TUNED

7. Luciano Raul Davide
Tech Lead
Community Manager
@ConTe.it
Tech Lead
Digital Manager
@KeyPartner
Senior Angular Dev
Frontend Architect
@ConTe.it
Chi c’è dietro ai MeetUp?
Giorgio
Senior Angular Dev
Frontend Architect
@Onpier
Marco
Software Engineer
CIO
@Evja
Ermanno
Software Engineer
Founder
@Fervento

8. Canale Telegram
t.me/+BcwJNt1X5UA4OTZk
● News
● Condivisione
● Supporto

9. SLIDESMANIA.COM
Mandaci la tua proposta a:
angularroma@mail.com
We Want you!
Vuoi portare un tuo talk al
prossimo MeetUp?
Vuoi ospitare un meetup?
La tua azienda potrebbe essere la
prossima location!

11. Angular, Bootstrap
Italia e non solo…
30 Gennaio 2023
AngularRome Meetup
Cristian Borelli
Design Angular Kit maintainer
Andrea Stagi
Open Source Project Leader

12. programma di oggi
PROGRAMMA
01. introduzione: cos'è il design system
del Paese, i vantaggi per il cittadino
e la PA, Bootstrap Italia internals,
Kit UI e piani futuri
02. come funziona e come abbiamo
strutturato nel dettaglio l’Angular
Design Kit
03. Q&A e birra
30’
30’

13. Il Design System
del Paese
13
01
Andrea Stagi
Open Source Project Leader

14. Designers Italia e Developers Italia hanno avviato una completa
revisione del design system del Paese, ovvero degli strumenti necessari
alla realizzazione delle interfacce per siti e servizi digitali della PA, così
da renderle coerenti, semplici e fruibili da tutti i cittadini: rinnovati kit di
progettazione e sviluppo interfaccia, i modelli standard di siti web per le
PA (Comuni e scuole, in futuro ASL e musei), il kit Angular che affiancherà
l’avviato kit React.
30 Gennaio 2023
AngularRome Meetup

15. Un progetto digitale
accessibile è un progetto
digitale di qualità, un
progetto fatto bene
DTD @IUAV 2022
Una breve introduzione sui temi
dell’attenzione e del progetto di
trasformazione digitale dei servizi pubblici.
Cosa vuol dire «fatto bene» nel contesto di
+22.000 Enti pubblici?

16. Fatto bene guarda oltre l’oggi
Fatto bene è accessibile by design
Fatto bene è open e partecipazione
Fatto bene è a norma
…
DTD @IUAV 2022

17. Fatto bene è aiutato
dal design system del Paese
DTD @IUAV 2022
Un insieme di principi, risorse e «blocchi già
pronti», pensato per progettare e sviluppare
esperienze utente, di cittadinanza.
Costando anche meno a parità di qualità, grazie a
riuso e condivisione di buone pratiche.
Da dicembre 2021 lo stiamo aggiornando dalle
fondamenta in termini tecnologici e di
accessibilità, ma anche di visione e gestione.
Dove siamo oggi?

18. Fatto bene è immaginato
con il kit UI
Un kit per la progettazione di interfacce, lo abbiamo
ricostruito da zero usando le ultime tecnologie disponibili e
in coordinamento con i kit di sviluppo, con un occhio al tema
open design e al GDPR.
Nelle prime release ha indicazioni di accessibilità utili ai
designer per comprendere l’uso dei colori rispetto alle
dimensioni dei testi. Stiamo immaginando di integrare
strumenti di etichettatura per la semantica dei mockup e
possibilità di aggiungere indicazioni di accessibilità come
fatto per Bootstrap Italia.

19. Fatto bene è realizzato con
Bootstrap Italia
Costruito quando la norma prevedeva i criteri WCAG 2.x,
Bootstrap Italia serve per sviluppare interfacce e si basa
sul framework Bootstrap.
Abbiamo tolto la ruggine e, per fare le cose con attenzione,
stiamo manutenendo il passaggio tecnologico a Bootstrap
5. Nel farlo siamo andati oltre l’accessibilità del framework
Bootstrap, validando componente per componente e
scegliendo soluzioni di rottura laddove necessario (es. form
e campi standard dei dispositivi).
DTD @IUAV 2022

20. Fatto bene segue
modelli standard
DTD @IUAV 2022
La progettazione di esperienze digitali semplici ed efficaci
richiede tempo, risorse e molta ricerca. I modelli di siti e
servizi digitali per gli enti (oggi scuole e Comuni, oggetto
dell’investimento 1.4.1 del PNRR, domani ASL e musei)
permettono di rispondere ai bisogni dei cittadini in modo
rapido e a minor costo, sfruttando flussi e funzionalità
validate dalla ricerca.
I modelli comprendono l’architettura dell’informazione, i
template HTML e i temi CMS, corredati da una serie di guide
pratiche a supporto.

21. Fatto bene a volte non basta. Le «parti» del
design system del Paese non sono tutto.
Fatto bene ha bisogno di test e feedback
DTD @IUAV 2022

22. Bootstrap Italia
22
01.a

23. DEPRECATA LA VERSIONE
Bootstrap Italia
1.6.3
Release
DEPRECATA

24. Benvenuto Bootstrap Italia 2.3.0!
- Un tema basato sul framework Bootstrap 5.2.3 (e versioni successive in futuro)
- Versione bundle / non bundle
- Aggiunta del supporto a TypeScript
- Miglioramenti lato accessibilità (by design)
- Miglioramenti pipeline CI/CD

25. ANNUNCIO
Bootstrap Italia
2.3.0
Release
~1800

26. Gli strumenti di sviluppo
Bootstrap Italia 2.0 al momento continua ad utilizzare:
- Jekyll per la compilazione della documentazione
- Docker (già utilizzato dalla 1.5)
- Vercel (già utilizzato dalla 1.5. per preview e test)
La parte di compilazione sarà gestita con:
- Rollup (semplicità di configurazione)
Vediamo insieme gli strumenti per usarlo e per contribuire attivamente al progetto.

27. Come utilizzarlo
Bootstrap Italia 2 può essere utilizzato in locale utilizzando Docker
È anche possibile clonare il repository, installare le dipendenze e attivare la build
docker-compose up
npm i && npm run dev-code

28. CI/CD
Abbiamo migrato le pipeline di CI e CD da CircleCI a Github Action
- Deploy staging su Vercel per ogni PR
- Controllo accessibilità con Pa11y
- Controllo HTML e link con HTMLProofer
- Controllo semantica dei commit + auto generazione changelog e pubblicazione
release
- Test di build della libreria
- Aggiornamento della documentazione

29. Tree shaking
Bootstrap Italia 2 è stato progettato e sviluppato in modo da supportare il
tree-shaking che permette di utilizzare solo i componenti che servono per il progetto
ed escludere il resto.
Il tree shaking come pensato su questa nuova versione include comunque dei “side
effect” ovvero del codice comune che comunque viene importato a prescindere dai
componenti che si vogliono utilizzare (ad esempio le variabili globali iniettate e il
track focus).

30. Tree shaking
import { Slider } from “bootstrap-italia”;
Button
Slider
Input
…
Slider
Common (side
effect)
Common
Bundle JavaScript del progetto
Bootstrap Italia
Rollup /
Webpack

31. Ottimizzare il CSS
@import 'bootstrap-italia/src/scss/custom/slider;
custom/buttons.scss
custom/slider.scss
custom/input.scss
…
custom/slider.scss
Common SCSS
Bundle CSS del progetto
Bootstrap Italia
SASS
Common SCSS

32. Demo

33. Demo
Dimensioni Bootstrap Italia JS: ~350 KB
Dimensioni Demo JS: ~130 KB
Dimensioni Bootstrap Italia CSS: ~500 KB
Dimensioni Demo CSS: ~200 KB
Codice completo: https:/
/github.com/astagi/demo-bsitalia-2

34. Interoperabilità degli esempi
Generiamo una API che andrà a popolare il sito designer. Esempio Accordion.
Gatsby
api/componenti/accordion.json

35. Il kit UI
35
01.b

36. Rilascio e aggiornamento libreria
➔ profilo Designers Italia nella
community Figma
➔ note di rilascio delle parti disponibili
o modificate
➔ versionamento semantico
➔ generazione dei token

37. Come utilizzarlo davvero?
👉 Vai alla pagina community figma.com/@designersitalia 👈

38. Come utilizzarlo?
➔ vai sulla pagina community
figma.com/@designersitalia
➔ duplica il file in draft (bozza)
Figma free:
non è possibile aggiungere una libreria con questo
profilo, ma…
◆ aggiungi una nuova pagina
◆ usa gli stili presenti nel file originale
◆ cerca e trascina i componenti dal pannello Asset
⚠ non modificare nulla delle altre pagine
Figma Pro:
➔ sposta il file in un Team
➔ pubblica Stili e Componenti dal file appena
spostato
➔ crea un nuovo file progetto
➔ aggiungi dal pannello Asset la libreria appena
pubblicata
➔ DIVERTITI 🤙

39. Come aggiornarlo?
➔ vai sulla pagina community
figma.com/@designersitalia
➔ duplica il file aggiornato in draft (bozza)
Figma free:
ripeti i passi come se fosse un nuovo file…
◆ aggiungi una nuova pagina
◆ usa gli stili presenti nel file originale
◆ cerca e trascina i componenti dal pannello Asset
⚠ non modificare nulla delle altre pagine
Figma Pro:
➔ sposta il file nel Team
➔ rimuovi la vecchia versione di libreria
➔ pubblica Stili e Componenti dalla nuova versione
➔ apri il progetto da aggiornare
➔ dal pannello Asset risulterà una libreria mancante:
seleziona e scegli come libreria quella appena
pubblicata
➔ stili e componenti verranno ricollegati
automaticamente 🤙

40. Design token
40
01.c

41. 41
Cosa sono i design tokens?
I design tokens rappresentano
uno stile visivo applicabile in
modo coerente a progetti,
piattaforme, strumenti e codice
➔ Colori
➔ Tipografia
➔ Forme
➔ Spazi
➔ Dimensioni
➔ Ombre e profondità
➔ Animazioni

42. Il plugin Figma Tokens è configurato
in modo tale da seguire le regole
della tassonomia:
Permette di gestire e avere
interconnessi tra i token
appartenenti ai 3 gruppi
(sets) con diverso livello di
dettaglio

43. I design tokens vivranno in un file
indipendente dalla tecnologia – per
noi formato JSON – pubblicato su un
repository GitHub che sarà creato ad
hoc.
L’integrazione con lo
strumento Style Dictionary
consente di generare le
variabili CSS/Sass da
utilizzare in sviluppo
{
"color": {
"black": {
"value": "#000000",
"type": "color"
},
"white": {
"value": "#FFFFFF",
"type": "color"
},
"lightblue": {
"a01": {
"value": "#E8F2FC",
"type": "color"
},
"a02": {
"value": "#EDF5FC",
"type": "color"
},
"a03": {
"value": "#F2F7FC",
"type": "color"
},
"a04": {
"value": "#F5F9FC",
"type": "color"
}
:root {
--color-black: #000000;
--color-white: #FFFFFF;
--color-lightblue-a01: #E8F2FC;
--color-lightblue-a02: #EDF5FC;
--color-lightblue-a03: #F2F7FC;
--color-lightblue-a04: #F5F9FC;
--color-blue-a01: #bfdfff;
--color-blue-a02: #93c4f5;
--color-blue-a03: #6aaaeb;
--color-blue-a04: #4392e0;
--color-blue-a05: #207bd6;
--color-blue-a06: #0066CC;
--color-blue-a07: #0059b3;
--color-blue-a08: #004d99;
--color-blue-a09: #004080;
--color-blue-a10: #003366;
--color-blue-a11: #00264d;
--color-blue-a12: #001a33;
--color-bluegray-a01: #EBECED;
--color-bluegray-a02: #D9DADB;
--color-bluegray-a03: #C5C7C9;

44. GENERAZIONE DEI TOKEN (WORK IN PROGRESS)
github.com/italia/design-tokens-italia

45. Angular Design Kit
02
Cristian Borelli
Design Angular Kit maintainer

46. C’era una volta…

47. Luglio 2022:
➔ Repository abbandonato
da più di 4 anni
➔ Libreria aggiornata ad
Angular 6
➔ Componenti basati su
Bootstrap Italia v0.1

48. UI Kit - Tokens ❐
Novembre 2022:
➔ Libreria compatibile con
Angular 14
➔ Componenti basati su
Bootstrap Italia v2.0
➔ Comunicazione ufficiale da
parte di Developers Italia

49. …e oggi a che punto siamo?
+ 22 componenti / direttive
+ 26 in canale Slack #design-dev-angular
+ 5 Contributors attivi

50. 50
La Nuova Documentazione
https:/
/italia.github.io/design-angular-kit

51. Struttura Tecnica
Libreria e Documentazione

52. App multi lingua? No problem!
Tutte le labels utilizzate all’interno del
Design Angular Kit sono localizzabili (i18n)

53. Lo stile del Design Angular Kit si adatta alle esigenze del
tuo progetto
Scegli il colore, impostalo una sola volta
ed hai fatto.
Cosa posso personalizzare?
➔ Colori
➔ Fonts
➔ Dimensioni
➔ Spazi
➔ Ombre e profondità
➔ Animazioni

54. CI/CD
Abbiamo migrato le pipeline di CI e CD da CircleCI a Github Action
- Deploy staging su Vercel per ogni PR
- Controllo semantica dei commit (semantic commit) + auto generazione
changelog e pubblicazione release
- Test della libreria + generazione di coverage
- Aggiornamento della documentazione
- (In futuro) test E2E (Cypress o PlayWright?)

55. Live Coding!

56. ➔ Select
➔ Carousel
➔ Back To Top
➔ Notification
➔ Modal
➔ Card
➔ Alert
Prossimi Passi
➔ Avatar
➔ Nav Scroll
➔ Menu List
➔ Stepper
Sviluppo nuovi componenti:
Documentazione e test
per i componenti:

57. GRAZIE AI PREZIOSI CONTRIBUTI DELLA COMMUNITY
Antonino Bonanno
@AntoninoBonanno
Matteo Pellegrini
@Cruyff97
Guido Porcaro
@elgorditosalsero
Alessio Napolitano
@alenap93

58. Come partecipare
➔ Sei uno sviluppatore? Partecipa anche tu all’aggiornamento
del Design Angular Kit e di Bootstrap Italia
Prova a utilizzare Bootstrap Italia 2 e/o il Design Kit
Angular nei prossimi giorni, mentre si avvicina al suo
rilascio ufficiale.
Segnala issue e/o apri PR dedicate all’intero kit e/o a
parti specifiche per aiutarci a migliorarlo, sia lato
codice che lato documentazione. Anche un
suggerimento è prezioso per il progetto!
Segui gli aggiornamenti sui canali per restare
aggiornato sulle future implementazioni di tokens,
design kit React, Angular, Vue, style guide…
Usa
Proponi
Commenta
come-partecipo.italia.it

59. ➔ Chat slack.developers.italia.it (Canale: #design-dev-angular)
➔ Siti web developers.italia.it & designers.italia.it
➔ Mail contatti@{developers, designers}.italia.it
➔ Twitter @developersITA e @DesignersITA
Mastodon https:/
/mastodon.uno/@developersITA
➔ Blog medium.com/@Developers_Italia e medium.com/designers-italia
Grazie a tutti! Domande?
Intanto rimaniamo in contatto
AngularRome
Grazie a