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.

Usare i Design System - Un approccio Frameworkless per la tua Web Application

277 views

Published on

Workshop per il CSSDay 2019

Published in: Technology
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL eBOOK INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookeBOOK Crime, eeBOOK Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL eBOOK INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookeBOOK Crime, eeBOOK Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL eBOOK INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookeBOOK Crime, eeBOOK Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL eBOOK INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookeBOOK Crime, eeBOOK Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Usare i Design System - Un approccio Frameworkless per la tua Web Application

  1. 1. Usare i Design System Un approccio Frameworkless per sviluppare la tua Single Page Application 1
  2. 2. WE DEVELOP DIGITAL PROJECT TOGETHER WITH YOU. 2
  3. 3. 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 3
  4. 4. Alessandro Violini Interaction Designer Interface Developer Drummer & Retro-Computer collector @violo CSSDay19 - Faenza Antonio Dell’Ava Frontend Developer Background in UX loves cycling @creativecaos
  5. 5. Settiamo le Aspettative 5
  6. 6. Vocabolario 6 Design System Pattern Percettivi margini tipografia palette di colori navigazione iconografia form layout CTA principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali styleguide componenti (pattern library)
  7. 7. Pattern Funzionali Sono i design pattern che descrivono soluzioni relative a problemi funzionali dell’interfaccia come menu, bottoni, form, actionbar, etc etc Componente un implementazione di un design pattern Sinonimi 7 Pattern Library una lista organizzata di componenti con relativa documentiazione Design Pattern Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem.” — Christopher Alexander
  8. 8. Pattern Percettivi Le qualità “senza nome” che caratterizzano esteticamente il design system. La loro somma definisce l’individualità del prodotto. Styleguide l’implementazione dei pattern percettivi Sinonimi 8
  9. 9. Vocabolario è la rappresentazione dell’uso corretto delle parole in un dato momento storico Linguaggio è un sistema di comunicazione tra “parlanti” in cui il significato e l’uso delle parole è definito e condiviso ed è espressione di una cultura comune. Un frase scritta da un parlante, quando letta da un altro- anche in un luogo e un momento diverso - avrà lo stesso significato. Definizioni 9 Letteratura è un’istanza d’uso del linguaggio derivata dalla cultura condivisa sul significato e l’uso delle parole. Con un linguaggio condiviso un testo può essere scritto da più persone come se avessero un’unica mente. Pattern Library Design System Interfaccia
  10. 10. Design System ≠ Pattern Library Linguaggio ≠ Vocabolario 10
  11. 11. Perché un Design System? 11
  12. 12. Un Design System è un insieme interconnesso di pattern e di pratiche condivise organizzate in modo da raggiungere lo scopo del prodotto digitale. Pattern = elementi ripetuti e combinati per comporre l’interfaccia Pratiche = modo in cui vengono usati i pattern Che cos’è un Design System 12
  13. 13. Non è una styleguide Non è un pattern-library Non è un lavoro da Designer Non è UX Non è una checklist di cose da fare Cosa NON è un Design System 13
  14. 14. Business Model Personas o Proto-Personas Jobs to be done User Journey User Interface Che informazioni servono per un Design System? 14
  15. 15. Perché ci permette di realizzare un prodotto sano aiutandoci ogni volta a prendere micro e macro decisioni sane in funzione degli obiettivi di business e tenendo conto delle esigenze degli utenti. Perché un Design System? 15
  16. 16. L’interazione delle parti del nostro design è ciò che influisce sull’emotività dell’esperienza del nostro utente. Un linguaggio comune in tutto il team è fonte di allineamento. Mappare lo stato componentistico del nostro software ne permette una buona manutenzione. Perché un Design System? 16
  17. 17. Esiste qualche scorciatoia? 17 Design System Pattern Percettivi Material Design? Principi di Design Governance Parametri e regole d’uso comuni Linguaggio Condiviso Pattern Funzionali Custom Variables?
  18. 18. 1- I Principi 18
  19. 19. Il principio è un concetto, un enunciato che sta alla base di un ragionamento. Non è una regola ma sono l’insieme dei principi a funzionare come una mappa che orientano le tue scelte. Cos’è un principio? 19
  20. 20. Perché è tramite i principi che ci assicureremo che la nostra progettazione rispetti gli scopi del prodotto. Perché i principi in un Design System? 20
  21. 21. Vengono definiti da tutto il team. Sono in genere da 3 a 5 con le seguenti caratteristiche: - Autentici e genuini - Pratici e applicabili - Con un chiaro punto di vista - Facilmente ricordabili I principi di un Design System 21
  22. 22. I principi non devono essere generici o scontati. Devono orientarti su qualcosa ed è importante che non dia adito ad interpretazioni diverse nel team. Esempio errato: “funzionale” Esempio corretto: “non un pixel in più a quelli richiesti per la funzionalità” 1 - Autentici e genuini 22
  23. 23. I principi devono comunicarvi una strada o una scelta. Pensalo come un consiglio, e non solo come un termine giusto. Esempio errato: “completezza” Esempio corretto: “mostrare tutte le opzioni piuttosto che dare una direzione” 2 - Pratici e applicabili 23
  24. 24. I principi devono aiutarci a definire priorità ed equilibrio anche se a volte ci sono situazioni conflittuali. Esempio errato: “completezza e piacevolezza” Esempio corretto: “Seguire le seguenti priorità: prima completezza delle informazioni di contesto poi piacevolezza estetica” 3 - Con un chiaro punto di vista 24
  25. 25. Se un team non ricorda i principi probabilmente sono migliorabili. Vanno usati spesso, resi visibili, utilizzati per feedback e perché no creati acronimi per ricordarli meglio. Esempio d’uso errato: non fare mai riferimento ai principi nelle discussioni Esempio d’uso corretto: stampo i principi su fogli A4 che ci accompagnano in ogni confronto 4 - Facilmente ricordabili 25
  26. 26. Esercizio: Completa la lista dei Principi Sulla base dello scenario dell’applicazione a cui stai lavorando ipotizza altri principi che guideranno il design system. ➔ ricorda, le basi per per formulare un principio utile sono: ◆ deve “servire” l’obiettivo del software ◆ deve fornire un principio pratico e applicabile sulla UI ◆ deve essere facilmente ricordabile ◆ deve dare un punto di vista preciso ➔ la “prova del 9” è chiedersi “il contrario del mio principio potrebbe essere valido per un altro design system?” Template slide 4:3 Tipografia e colori 26
  27. 27. Parametri e regole d’uso comuni & Governance 27
  28. 28. 28 Parametri e regole d’uso comuni Integrato Restrittivo Modulare Flessibile
  29. 29. 29 Design System: Governance ➔ Quale è il team? Livello di delega? ➔ Quali sono gli strumenti? ➔ Come si rendono visibili i risultati? Canali? ➔ Quali sono i riti?
  30. 30. 30
  31. 31. 31
  32. 32. I Design Pattern 32
  33. 33. Un Design Pattern rappresenta una soluzione progettuale generale ad un problema ricorrente. - Christopher Alexander - Cos’è un Design Pattern 33
  34. 34. Ogni Design Pattern descrive un problema ricorrente nel nostro scenario e di conseguenza anche il nucleo della soluzione a tale problema. Per questo è utilizzabile milioni di volte senza mai applicarlo allo stesso identico modo. Cos’è un Design Pattern 34
  35. 35. L’elenco dei Design Pattern definiscono la Pattern Library della nostra applicazione. Più Design Pattern interconnessi tra loro definiscono il Design Language della nostra applicazione. I Design Pattern nel Design System 35
  36. 36. I Pattern Funzionali sono i blocchi tangibili dell'interfaccia. Il loro scopo è quello di abilitare o incoraggiare determinati comportamenti degli utenti. I Pattern Funzionali 36
  37. 37. Il Pattern evolve ma il comportamento rimane lo stesso. Definire quali sono i pattern e a quale scopo servono aiuta a non generare duplicati e ci permette di evolverli insieme al nostro software. I Pattern Funzionali 37
  38. 38. I Pattern Percettivi sono l’essenza estetica del nostro elemento. Essi sono sempre presenti anche in un componente puramente funzionale. I Pattern Percettivi 38
  39. 39. Anche se sono lo strato più esterno, i Pattern Percettivi funzionano bene quando vivono nel core del brand ed evolvono con il prodotto. Il Pattern Percettivo per eccellenza è quello che caratterizza e differenzia il nostro prodotto. I Pattern Percettivi 39
  40. 40. Carta e matita Sketch (https://www.sketchapp.com/) Invision (https://www.invisionapp.com/) Adobe XD (https://www.adobe.com/it/products/xd.html) Figma (https://www.figma.com/) ... Tool per i Design Pattern 40
  41. 41. Interface Inventory 41
  42. 42. Come definire i design pattern? ➔ Interface inventory ( http://bradfrost.com/blog/post/interface-inventory/ ) ➔ Processo induttivo da UI+User Journey ai Pattern (design driven) ➔ Va fatto periodicamente e dopo aver progettato (bene) l’interfaccia ➔ devono essere presenti: frontenders, designers, persone che si occupano di copy (4/ 8p) ➔ L’outcome che ci aspettiamo è una lista di pattern standardizzabili sotto forma di schizzi ➔ Il processo è più importante del risultato 42
  43. 43. 1. Identificare l’area di analisi 43 Identificare un segmento della user journey che corrisponda a una delle macro-attività da sostenere Fatturazione
  44. 44. 2. Dividere l’attività analizzata in azioni 44 visualizza la lista dei preventivi emessi
  45. 45. 2. Dividere l’attività in azioni: esercizio A partire dall UI della tua applicazione “tagga” (con un post it) ogni azione presente in ogni schermata che sostiene il comportamento della schermata ➔ esempi concreti: ◆ filtra la lista dei fascicoli ◆ condivide l’articolo ◆ fotografa l’andamento finanziario di un portafoglio cliente ◆ cambia la modalità di visualizzazione dei look ➔ ogni azione ha per soggetto implicito la parte di interfaccia taggata 45
  46. 46. 3. Raggruppare gli elementi per scopo 46 presenta un overview di un elemento ➔ raggruppare gli elementi che sostengono azioni analoghe (svolgono la stessa funzione) ➔ il livello di granularità degli elementi raggruppati deve essere il medesimo, non avremo un elemento atomico come “bottone” nello stesso gruppo di “elenca i fascicoli” ➔ siete voi a dover decidere i grado di specificità del gruppo
  47. 47. 3. Raggruppare gli elementi per scopo: esercizio Raggruppa tutti gli elementi che sostengono la stessa azione ➔ esempi concreti di gruppo: ◆ elenca i fascicoli ◆ cerca articoli ◆ naviga nell’applicazione (menu) ◆ triggera un’azione ➔ il livello di granularità degli elementi raggruppati deve essere il medesimo, non avremo un elemento atomico come “bottone” nello stesso gruppo di “elenca i fascicoli” ➔ siete voi a dover decidere i grado di specificità del gruppo ➔ cose che “appaiono” diverse potrebbero stare nello stesso gruppo ➔ la discussione è il vero obiettivo! 47
  48. 48. 4. Definisci i pattern 48 genericospecifico lista fascicoli lista preventivi lista fattura lista fascicoli lista documenti fiscali lista content block “Se modifico le fatture voglio che si modifichino anche i preventivi?”
  49. 49. 4. Definisci i pattern: esercizio Definisci i Pattern: ➔ Ogni pattern può essere più specifico o più generico ➔ esempi: ◆ lista fascicoli E lista preventivi VS lista generica ◆ lista radio E vista articoli VS lista generica ◆ primary menu E tabs VS menu generico ◆ header E action bar VS header with actions generica ➔ la “prova del 9” quando uniamo due pattern in uno è “quando modifico A voglio che cambi anche B?” ➔ Considera che ogni pattern potrà avere delle varianti 49
  50. 50. 5. Struttura dei contenuti: elementi 50 Lista documenti contabili ➔ Data ➔ Numero ➔ Destinatario ➔ Causale ➔ Imponibile ➔ Anticipo ➔ Stato ➔ Riporta in bozze ➔ Accetta preventivo ➔ [...]
  51. 51. 5. Struttura dei contenuti: gerarchia 51 Lista documenti contabili ➔ Data ➔ Numero ➔ Destinatario ➔ Causale ➔ Imponibile ➔ Anticipo (solo per preventivo) ➔ Stato ➔ Azioni ◆ Riporta in bozze (solo per preventivo) ◆ Accetta preventivo (solo per preventivo) ◆ Incasso (solo fattura) ◆ [...]
  52. 52. Azioni 5. Struttura dei contenuti: wireframe & varianti 52 Data Numero Destinatario Causale Imponibile Stato Riporta in bozze Accetta Rifiuta Lista documenti contabili: variante preventivo AzioniData Numero Destinatario Causale Imponibile Stato Storna Incasso Lista documenti contabili: variante fattura anticipo Fattura
  53. 53. 5. Struttura dei contenuti: esercizio Struttura dei contenuti: ➔ elenca per ogni pattern gli elementi (immagini, testo, titolo, meta, etc etc) di contenuto ➔ determina la loro gerarchia e gli eventuali elementi varianti e/o opzionali ➔ Definisci con un wireframe la struttura visuale del pattern ➔ Definisci eventuali varianti della struttura visuale 53
  54. 54. 6. Naming: esercizio Naming: ➔ definisci un nome per ogni pattern che rifletta il suo grado di specificità ➔ esempi: ◆ grado di specificità alto: Lista Preventivi ◆ grado di specificità medio: Lista Documenti Contabili ◆ grado di specificità basso: Lista 54
  55. 55. Pattern Library: sviluppo e manutenzione 55
  56. 56. La Pattern Library è uno strumento per documentare e condividere i Design Pattern. Cos’è una Pattern Library 56
  57. 57. Ordine alfabetico, gerarchico o per funzionalità. L’importante è che sia fatta come è abituato a pensare il team. Struttura di una Pattern Library 57
  58. 58. Organizzazione ideale minima: nome scopo esempio di codice (snippet) varianti Struttura di una Pattern Library 58
  59. 59. Se utile è possibile aggiungere anche: versioning membri del team pattern correlati dos e don’t Struttura di una Pattern Library 59
  60. 60. Esiste ma non viene usata Viene usata solo da una parte del team Anti-pattern di una Pattern Library 60
  61. 61. Condividete il modo in cui farlo. O siete rigidi e disciplinati nell’accettare nuovi componenti e avete un sistema che vi aiuta a capire se il pattern esiste già e/o se potete modificarlo oppure inserite un nuovo pattern solo se è stato riusato almeno “n” volte. Update di una Pattern Library 61
  62. 62. OOCSS Atomic Design BEM Scrivere un componente 62
  63. 63. Separa la struttura dalla skin Separa il contenuto dal contenitore Scrivere un componente - OOCSS 63
  64. 64. Scrivere un componente - Atomic Design 64
  65. 65. Blocco Elemento Modificatore Scrivere un componente - BEM 65
  66. 66. .nav_menu{ height:$nav-menu-height; background-color:$nav_menu-bg-color; &__list{ list-style:none; &__item{ float:left; height:40px; text-transform:uppercase; font-size:18px; padding-top:18px; text-align:center; &--active{ border-bottom: 3px solid $nav-menu-hover-color; } } } } Esempio BEM 66
  67. 67. Frontify (https://frontify.com/) PatternLab (https://patternlab.io/) Fractal (http://www.fractal-design.com/) Storybook (https://storybook.js.org/) KSS (http://warpspire.com/kss/) Tool per Pattern Library 67
  68. 68. Esercizio: Implementa il Componente Progettato ➔ Utilizza il repository del tuo scenario di applicazione: ◆ ius maior: https://github.com/adellava/ius-maior-design-system-sketch ◆ day: https://github.com/Violo/day-design-system-sketch ◆ banca soldo https://github.com/Violo/bancasoldo-design-system-sketch ◆ modatrendy42 https://github.com/Violo/modatrendy42-design-system-sketch ➔ Fare una fork, clonare il repo, seguire il readme Template slide 4:3 Tipografia e colori 68
  69. 69. Architetture Frameworkless per i Design System 69
  70. 70. Cosa significa frameworkless? https://github.com/frameworkless-movement/manifesto 70
  71. 71. Alternative allo sviluppo dei Componenti 71 ➔ Usare un framework UI ◆ Integrato con il framework di front-end (es. material UI) ◆ Integrabile con il framework di front-end (es. Bootstrap) ◆ CSS only (es. Bulma) ➔ Scrivere i componenti con il framework di front-end + CSS ➔ Web Components ◆ molto costosi ◆ web standard
  72. 72. Quando utilizzarli 72 quanto il componente è centrale nella consegna del valore? specificitàdelcomponente web components
  73. 73. WebComponents: Esempio 73 https://github.com/adellava/simple-web-components-with-manipulation
  74. 74. <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 ); WebComponents: Esempio 74
  75. 75. class InputCurrency extends HTMLElement { static get observedAttributes () { [ // attributi osserbabili ] } connectedCallback () { // render // bind events } attributeChangedCallback (name) { //... sync my template } } WebComponents: Esempio 75
  76. 76. const emitChangeValue = (element) => { const event = new window.CustomEvent("value-change", { detail: () => Number.parseFloat(element.value), bubbles: true }); element.dispatchEvent(event); }; WebComponents: Esempio 76
  77. 77. Esercizio: Implementa il Componente dotato di Comportamento Utilizza questo repository come esempio: ➔ simple-web-components-with-manipulation https://github.com/adellava/simple-web-components-with-manipulation Template slide 4:3 Tipografia e colori 77
  78. 78. Conclusioni 78
  79. 79. Stiamo assumendo! recruitment@flowing.it 79
  80. 80. Alessandro Violini Antonio Dell’Ava @violo - @creativecaos Grazie 80

×