:sparkles: PWA :sparkles:
Logo

Piotr Kowalski

Organizator WarsawJS , Trener, YouTuber

WarsawJS Meetup #26

To już 26-te nasze spotkanie! Mi jako organizatorowi jest bardzo miło "gościć" tyle osób, które bez przymusu, z chęcią przychodzą w drugą środę miesiąca do Państwomiasto, aby posłuchać ciekawostek, nowinek, dobrych praktyk w języku JavaScript.

WarsawJS

Invitation

Zaproszenie dość szczególne. Dostałem od mojego działu drona-zabawkę. Chciałem go wykorzystać aby dodać czegoś nowego do naszych zapowiedzi. Może i dron-zabawka, ale świat z 4-5 metrów wygląda inaczej.

Ciężko mi było w te kilka minut lotu nagrać jakieś ciekawe ujęcie. Dodałem do zapowiedzi te, które wyszły najlepiej, czyli najstabilniej.

Zapraszam do oglądania!


Talk #1: Web Components. Are we there yet? [PL] Dominik Lubański

Elementy w HTML mogę być: Semantyczny, funkcjonalny, czy też wizualny. Dominik Lubański. 2016-10-12

Elementy mogą być definiowanie deklaratywne, czyli zapisanie w pliku HTML.

Komunikacja z API elementów, które są bardziej skomplikowane i posiadają swoje metody może polegać na uruchomieniu imperatywnym (rozkazującym).

4 specyfikacje w połączeniu definiują Web Component-y:

  • Shadow DOM
  • Custom Elements
  • Templates
  • HTML Imports
Shadow DOM uruchamiamy imperatywnie. Nie możemy deklaratywnie stwierdzić, że element gdzieś ma Shadow DOM. Dominik Lubański. 2016-10-12

Specyfikacja Templates daje programistom definiowania kontenerów <template>, które nie są wyświetlane, pomimo, że ona żywym drzewem w DOM.

Dominik serdecznie zachęca do wykorzystania Web Components, aby zunifikować biblioteki, które tworzą UI.

Talk #2: Kind of JavaScript [EN] Mariusz Nowak

Dobra organizacja wartości w JSie zakłada podział na:

  • Immutable
    • Primitive non-value
      • undefined
      • null
    • Primitive value
      • number
      • boolean
      • string
      • symbol
  • Mutable

Różnica między null a undefined w JavaScript?

  • null - jest wartością, która mówi, że nie ma wartości
  • undefined - mówi, że nie ma wartości, nie ma klucza, nie ma niczego

Dobra praktyka

Usuwanie klucza z obiektu powinno odbywać się poprzez nadpisanie wartości null-em, zamiast wykorzystywać operator delete.

obj.foo = null; // Good practice ✔
delete obj.foo; // Bad practice ✖

Mariusz wytłumaczył jak działa Object Boxing, czyli dlaczego prymitywy mają właściwości. Kolejne dwa terminy, które po prelekcji będą dla nas jasne, to:

  • Type Coercion - rzutowanie typów, to poważny temat. Przy pracy z językiem, stykamy się z koercją w wielu miejscach. Ważne jest zrozumienie tego mechanizmu i zapoznanie się np. Falsy Values.
  • Duck Typing - czyli, porównywanie obiektu, na podstawie jego zawartości, np. czy posiada właściwości takie jak?

Talk #3: Angular 2 quickstart, Angular 2 automated unit testing [PL] Robert Gurgul

Ze względu na to, że aplikacje tworzone w oparciu o framework Angular 2 tworzone są w TypeScript, to będzie istniała pewna różnica między środowiskami developerskimi projektów opartych na Angular 1 (starym) oraz Angular 2 (nowym). Elementem tym będzie transpilator.

Robert podczas prelekcji pokazał narzędzie angular-cli - narzędzie automatyzując oraz standaryzujące budowanie aplikacji Angularowych.

Ostatnio zastanawiałem się nad tym "dlaczego w ogóle lubię programować?"
Lubię programować, bo lubię widzieć co zrobiłem. Gdy napiszę fajny kod, lubię sprawdzić czy on działa. Robert Gurgul. 2016-10-12

Robert poleca jazdę pociągiem, bo wtedy ze względu na brak internetu możemy pisać testy. Dobre testy to takie, które mock-ują całą komunikację z serwerem, więc faktycznie nie potrzebujemy internetu do dopisania do naszej aplikacji kilkunastu testów. W pełni się z tym zgadzam. Swoją drogą, żyjemy w XXI wieku i w pociągach dalekobieżnych dalej nie ma sieci Wi-Fi. Ciekawe czy nasze dzieci będą kiedykolwiek w takiej sytuacji.

Sponsorzy spotkania

Tagi: warsawjs meetup

1 miesiąc i 3 tygodnie wcześniej napisałem: Konferencja: Codemotion Warsaw 2016 1 tydzień i 3 dni później napisałem: Hackathon: Node Knockout #6 (2016)

Możesz osadzić kod wykorzystując: <pre><code class="{language}"></code></pre>