warsawjs-workshop-7-webcomponents

⛩️ WarsawJS Workshop #7 — Web Components

Wspierane przeglądarki

• Google Chrome v53

Projekt 1: Mockup (Demo)

Prezentacja obrazka w na komputerze

Treść zadania nr. 1

1. Zaprezentować obrazek z tekstem.
   1. Tekst musi być inny fontem
   2. Dodanie styli dla komponentu
2. Stworzyć markup w <template>.
3. Zbudować custom element
   1. Stworzyć klasę dziedziczącą po HTMLElement
   2. Podłączyć Shadow DOM-a do custom elementu
   3. Zapisać się na lifecycle hook connectedCallback
   4. Pobrać zawartość szablonu
   5. Wyrenderować szablon do Shadow DOM-a
      • widać obrazek, pomimo tego, że ma ustawionego atrybutu src nie jest wysyłany request po zasób
   6. Pobrać adres do obrazka
   7. Wyrenderować obrazek
4. Dodać kolejny custom element (z innym obrazkiem)
   1. Rozwiązać problem braku szablonu za pomocą cloneNode(true)
5. Dodać możliwość ustawiania innego tekstu dla różnych elementów
   1. Rozwiązać problem z kodowaniem ustawiając odpowiedni meta tag.
6. Zamknąć komponent w pojedynczy katalog
   1. Stworzyć główny plik index.html w aplikacji
   2. Zaimportować komponent za pomocą HTML Imports <link rel="import"/>

Projekt 2. GitHub Profile Card (Demo)

Prezentacja danych dowolnego użytkownika portalu GitHub

Treść zadania nr. 2

1. Stworzenie markupu
   1. Ustawienie kodowania
   2. Ustawienie tytułu strony
   3. Stworzenie template-u w znaczniku <template>
   4. Dołączenie pliku main.js
   5. Wykorzystanie znacznika github-profile-card-element do prezentacji danych na temat dowolnego użytkownika GitHub-a.
2. Ostylować komponent
   1. Avatar użytkownika
   2. Imię i nazwisko
   3. Bio
   4. Lista popularnych repozytoriów
3. Zarejestrowanie komponentu
   1. Stworzenie klasy dziedziczącej po HTMLElement
   2. Dołączenie Shadow DOM-a w konstruktorze
   3. W lifecycle hooku connectedCallback
      1. Wyrenderować template
      2. Pobrać login z atrybutów
      3. Wysłać zapytanie po publiczne dane użytkownika, którego login został zdefiniowany w atrybucie
   4. Wyświetlić dane użytkownika: imię i nazwisko, avatar, bio, lokalizację
   5. Po wykonaniu pierwszego zapytania wykonać drugie, które pobierze listę wszystkich repozytoriów.
   6. UWAGA: ze względu na limit zapytań w GitHub API, zapisać sobie odpowiedzi do katalog mocks/ a następnie zamienić URLe na pliki statyczne
   7. Posortować listę repozytoriów według liczby gwiazdek
   8. Zredukować listę repozytoriów do kilku, np. 5
   9. Wyrenderować repozytoria

Projekt 3: Media Projector (Demo)

Prezentacja dowolnych media obiektów (np. obrazków) w stylu rotowalnym.

Treść zadania nr. 3

1. Stworzenie markupu
   1. Dodanie 3 zdjęć jako dzieci nowo dodawanego komponentu.
2. Ostylowanie komponentu
   1. Na środku prezentować pole na media obiekt
   2. Na środku nad polem prezentować guzik PLAY
3. Zarejestrować akcję na kliknięcie w komponent
   1. Za pamięci od razu wyrejestrować handler na lifecycle hooku disconnectedCallback
4. Stworzyć klasę Slider, która będzie emulowała rotowanie elementu
   1. Wykorzystać ES5 getter
5. Po kliknięciu w komponent zainicjować slider przekazując mu dane o dzieciach wraz z definicją funkcji, która zostanie uruchomiona każdorazowo gdy slider chce zaprezentować inną treść
   1. Stworzyć funkcję, która będzie wlewała do kontenera z ekranem żądany media obiekt
6. Zmienić kursor myszy, po najechaniu na przycisk PLAY
   1. Nie pokazywać łapki kiedy prezentowane są media obiekty

Projekt 4 (Demo HI, Demo FA)

Importowanie komponentów

Treść zadania nr. 4

1. Przystosowanie komponentu do bycia importowanym
   1. Dwa dokumenty (document.currentScript.ownerDocument i document)
   2. Przygotowanie pliku HTML, w którym będzie tylko definicja komponentu
2. Importowanie przy pomocy HTML Import
   1. Dwa dokumenty (importowany i importujący)
   2. Dodanie link[rel=import] do pliku
   3. Wstawienie komponentu na stronę
3. Importowanie przy pomocy Fetch API
   1. Utworzenie funkcji fetchComponent
   2. Parsowanie odpowiedzi przy pomocy DOMParser
   3. Naprawianie zepsutych relatywnych URL-ów w skryptach i arkuszach stylów
   4. Dołączanie potrzebnych elementów do strony

---

Popularne błędy

• Error nr. 1

  Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': "mockup" is not a valid custom element name
  

  ⛔ Nie wolno:

  customElement.define('mockup', MockupElement);

  👍 Trzeba:

  customElement.define('mockup-element', MockupElement);

• Error nr. 2

  Uncaught DOMException: Failed to construct 'CustomElement': The result must not have children (anonymous) @ (index):13
  

  ⛔ Nie wolno:

  this.textContent = '...';

  👍 Trzeba:

  shadow.textContent = '...';

• Error nr. 3

  Uncaught TypeError: Cannot read property 'content' of null
  at HTMLElement.connectedCallback (main.js:10)
  at main.js:21
  

  wewnątrz dokumentu importowanego przy pomocy link[rel=import].

  ⛔ Nie wolno:

  document.querySelector('...')

  👍 Trzeba:

  document.currentScript.ownerDocument.querySelector('...')

---

Źródła, czyli tam gdzie warto zajrzeć

• Artykuły
  • https://css-tricks.com/snippets/css/complete-guide-grid/
  • https://www.html5rocks.com/en/tutorials/webcomponents/imports/
  • https://hacks.mozilla.org/2014/12/mozilla-and-web-components/
  • https://developers.google.com/web/fundamentals/getting-started/primers/customelements
  • https://github.com/GoogleChrome/howto-components
• Video
  • https://www.youtube.com/watch?v=2YEE5W8HdKk
    • Slajdy: http://slides.com/smalluban/webcomponents
    • Dominik Lubański: Web Components. Are we there yet?
  • https://www.youtube.com/watch?v=myvGmcwOnL4
    • Slajdy: http://slides.com/coderitual/potential-power-of-web-components
    • Michał Skowronek: Potential power of web components
• Shimy / Polyfille
  • ShadyCSS - ShadowDOM style encapsulation
    • https://github.com/webcomponents/shadycss
  • ShadyDOM (mniejszy od ShadowDOM Polyfill)
    • https://github.com/webcomponents/shadydom
  • WebComponents.js
    • https://github.com/webcomponents/webcomponentsjs
  • Polymer
    • https://www.polymer-project.org/
    • w wersji v2 będzie wspierał v1
  • X-Tag
    • https://x-tag.github.io/
    • wspiera v0
  • Skate.js
    • https://skatejs.gitbooks.io/skatejs/content/
  • WebComponents.org
    • https://www.webcomponents.org/
• Inne
  • https://unsplash.it/
  • http://placeskull.com/
  • https://github.com/piotrl/github-profile-card
  • https://w3c.github.io/webcomponents/spec/custom/ - Specyfikacja

---

License

The MIT License @ 2017