Intervento di Salvatore Laisa, Lead Frontend Engineer di Contactlab e Maurizio Mangione, Google Developer Expert & MialnoJS Founder

1. #SENDSummit17
Creare UI semplici, intuitive ed efficaci
con la Pattern Library di Contactlab.
Web Components in produzione.
Salvatore Laisa: Lead Frontend Engineer @ Contactlab
Maurizio Mangione: Google Developer Expert & MilanoJS Founder

2. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17 2

3. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17 3

4. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17
COME SARÀ IL WEB
TRA 10 ANNI?
4

5. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17
HTML in origine
5

6. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17
HTML in origine
Pubblicato nel 1993 da Tim Berners Lee
Definisce marcatura e semantica di documenti web tramite i tag
Revisionato dal W3C
Set di tag fissi
Successivamente si affiancano CSS e Javascript per stili e comportamenti
Iterazione attuale: HTML 5.1 (2016)
6

7. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17
La chimera della componentizzazione
Nascono le prime librerie di UI come jQuery UI, Kendo, ExtJS
Permettono di riutilizzare pattern di UX
L’implementazione è completamente artificiale e quindi onerosa in termini di
download e performance di esecuzione
Non sono mobile friendly
7

8. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17
La chimera della componentizzazione
8

9. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17
Web Components v0
Specifica proposta da Google al W3C nel 2013 circa
Permette agli sviluppatori di registrare dei tag custom nel browser, ognuno
con una propria marcatura, aspetto e stile
Viene esposto il concetto di Shadow DOM, fino ad allora riservato solo ad
alcuni tag standard
Per i browser che non supportano la specifica sono state progettate delle
polyfill in Javascript
9

10. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17
Web Components v0
10

11. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17 11

12. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17 12

13. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17
Polymer
Sviluppato da Google
Basato sullo standard Web Components
Syntactic sugar
Utilizzato da:
13

14. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17
Tanti moduli, una sola UX
Individuata la tecnologia che garantisse longevità ai nostri frontend e il
framework per velocizzare lo sviluppo, lo step successivo era consolidare UI e
UX per i diversi moduli della nuova piattaforma che stavamo per creare, allo
scopo di:
Uniformare il design
Non dover reimplementare o copiare/incollare codice in ogni modulo
Mantere allineati nel tempo i diversi frontend
Nasce così la...
14

15. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17 15

16. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17
Contactlab Pattern Library
Basata su Polymer e Web Components
Raggruppa: visual design, iconografia e componenti basilari di UI
Open source
Utilizzabile su progetti in essere basati su Javascript standard, jQuery,
Angular o React
Realizzata sulla base delle nostre esigenze ma riutilizzabile in altri contesti
16

17. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17
Vi ricordate?
17

18. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17
Contactlab Pattern Library
18

19. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17
Pensare in componenti
Creare componenti complessi combinando componenti atomici
Vero riutilizzo del codice
Si mantiene consistenza nei pattern e nella UX
Componenti «dumb» all’interno di componenti «smart» (mediator pattern)
19

20. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17
Pensare in componenti
20

21. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17 21

22. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17
Online demo
22

23. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17
Dove siamo arrivati…
23
…e dove stiamo andando

24. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17
Web Components v1
Revisione della sintassi, supporto alle classi ES6
Adozione cross-browser in corso: Chrome e Safari offrono già supporto
nativo, Firefox è in fase di implementazione, Edge in «considerazione»
Nuove polyfill con lazy-load
Nuovo sito ufficiale
24

25. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17 25

26. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17
Next steps
Nuova versione della Pattern Library
Da «Pattern Library» a «Design System»
Compatibile con la specifica v1 dei Web Components
Maggiore atomicità
Stili incapsulati (niente più CSS globale)
Maggiori performance
26

27. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17
…one more thing
Da oggi abbiamo un nuovo spazio dove condividere le nostre idee, esperienze e
sperimentazioni su molti aspetti legati allo sviluppo Frontend, al Design e a
tematiche di UI/UX
https://medium.com/the-frame
27

28. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17 28

29. SEND17
è un evento
organizzato da
GRAZIE
GRAZIE

30. è un evento organizzato da
© Copyright 2017 Contactlab This document may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
#SENDSummit17
TAKE AWAY
30
Nel dubbio, seguire lo standard
Eliminiamo la complessità
Riutilizzo, riutilizzo, riutilizzo