Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creare UI semplici, intuitive ed efficaci con la Pattern Library di Contactlab. Web Components in produzione.

310 views

Published on

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

Published in: Marketing
  • Be the first to comment

Creare UI semplici, intuitive ed efficaci con la Pattern Library di Contactlab. Web Components in produzione.

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 29. SEND17 è un evento organizzato da GRAZIE GRAZIE
  30. 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

×