/ Learning Log

Learning Log - Week #10

Godzina 23. Dziecko śpi, zimny radlerek na wyciągnięcie ręki, za oknem zbiera się na burzę i deszcz - idealny czas aby napisać czego nauczyłem się przez ostatni tydzień ;)

Zarządzanie czasem

Zanim przejdę do części technicznej chciałbym podzielić się z Wami tym, czego nauczyłem się przez te dwa tygodnie przerwy w takiej miękkiej tatusiowo-HRowej strefie. Jeśli śledzicie mojego bloga to wiecie czym ta przerwa była spowodowana :) Urodził mi się syn. Mega uczucie. Wszyscy dookoła mówili: "zobaczysz - świat wywróci ci się o 180 stopni". Z początku nie chciałem wierzyć. Wiadomo - nowy członek rodziny, nowe obowiązki, zmiana priorytetów. Byłem jednak optymistą - ja nie dam rady!? No i jakoś daję radę :) Musiałem natomiast nauczyć się lepiej zarządzać swoim czasem. Można powiedzieć, że opieka nad noworodkiem to bułka z masłem. Oczywiście patrząc męskim okiem. No bo co? On tylko je i śpi. Wystarczy przebrać, trochę polulać i odstawić mamie na karmienie. No tak - tylko to jedzenie i spanie nie odbywa się w regularnych odstępach czasu :) Tym bardziej ciężko o sen kiedy za oknem 35 stopni :/ a w mieszkaniu jest jeszcze gorzej. Okien otworzyć nie bardzo się da, bo przewiew to zło dla małych dzieci. Więc o dłuższy sen - też ciężko. W praktyce wychodzi to tak, że czas na "swoje" rzeczy przypada kiedy Tymek śpi :) Tylko od tego czasu należy odjąć czas na obowiązki domowe i odciążenie mamy. Powiem Wam to wszystko uczy pokory i umiejętności zarządzania czasem i ustalania priorytetów.

Koniec tego tatusiowania :) przechodzimy do konkretów...technicznego mięska...

jest --changedSince

Jeśli regularnie czytacie moje wpisy w learning logu, na pewno czytaliście o jest --watch, który odpala tylko te testy, które zależą od zmian jakie wprowadziliśmy do naszego projektu. Same zmiany wykrywane są natomiast na podstawie systemu kontroli wersji np. git'a.

A co jeśli chcielibyśmy odpalić zestaw testów dla zmian pomiędzy branchami albo commitami? Odpowiedź jest prosta - używamy do tego parametru --changedSince.

Jako wartość parametru ustawiamy nazwę brancha bądź hash commita.

Załóżmy że jesteśmy na naszym feature-branchu. Dorzuciliśmy klika commitów i chcemy odpalić testy tylko dla zmian, które wprowadziliśmy względem brancha master. Do tego wystarczy komenda:

$ jest --changedSince=master

Z drugiej strony - jeśli jesteśmy na gałęzi master ale chcemy odpalić testy tylko dla zmian znajdujących się w trzech ostatnich commitach, możemy wykorzystać składnię HEAD^3:

$ jest --changedSince=HEAD^3

How awesome is that?! :) Jaki inny test runner pozwala na taką magię?

magic

webpack & dynamic import

W projekcie, w którym biorę udział stanęliśmy przed ważnym tematem jakim jest "internacjonalizacja" :) czyli krótko mówiąc - tłumaczenia. Żeby być bardziej dokładnym, doszliśmy do momentu, kiedy potrzebowaliśmy plików językowych dla de facto momentu - biblioteki moment.js :) Jako, że nie chcieliśmy pchać wszystkich tłumaczeń z moment/locales/ do naszego bundla, postanowiłem poeksperymentować ze składnią dynamic import. Dzięki temu naczyłem się, że po wpisaniu mniej więcej takiego kodu:

function loadLocale(lang) {
   import(`moment/locales/${lang}`).then(() => moment.lang(lang))
}

Webpack weźmie wszystkie pliki znajdujące się pod katalogiem moment/locales i stworzy na ich podstawie osobne bundle 😲.

locale

Szczerze - nie wiedziałem, że to tak fajnie zadziała :)

Teraz kiedy ustawiamy sobie język - dynamicznie dociągany jest odpowiedni plik z tłumaczeniami do moment.js. Nie "zatruwamy" przy tym naszego głównego bundla. Performance FTW! :)

How to abort fetch?

Jeśli do wysyłania zapytań HTTP z poziomu JavaScriptu używaliście jQuery albo low-level xhr to wiecie pewnie, że API xhr pozwala na zawołanie metody abort, która przerywa nasz request:

var xhr = new XMLHttpRequest(),
    method = "GET",
    url = "https://developer.mozilla.org/";
xhr.open(method, url, true);

xhr.send();

if (OH_NOES_WE_NEED_TO_CANCEL_RIGHT_NOW_OR_ELSE) {
  xhr.abort();
}

Zastanawialiście się kiedyś jak przerwać fetch'a ? Przecież fetch zwraca nam Promise co nie? A na Promise możemy zawołać tylko then albo catch albo od ES9 finally. To jak przerwać zapytanie do serwera?

Do tego wykorzystujemy AbortController.

Tworzymy controller, który w sumie ma tylko jedną metodę abort i pole signal.

const controller = new AbortController();
console.dir(controller)

AbortController

Pole signal przekazujemy jako parametr do wywołania fetch:

fetch(url, { signal: controller.signal });

Teraz jeśli chcemy przerwać nasze zapytanie wystarczy zawołać metodę abort na naszym controllerze:

const controller = new AbortController();
const signal = controller.signal;

// Przerywamy request po 5 sekundach
setTimeout(() => controller.abort(), 5000);

fetch(url, { signal }).then(response => {
  return response.text();
}).then(text => {
  console.log(text);
});

No i jak widać - da się :), a ktoś mi ostatnio próbował wmówić, że się nie da ;) ...

The cost of JavaScript in 2018

Na koniec w ramach rekomendacji - link do bardzo ciekawego artykułu Addy'iego Osmani'ego dotyczącego wydajności aplikacji napisanych w JavaScript. Addy już od jakiegoś czasu bardzo mocno udziela się w temacie wydajności. Jeśli zamiast czytać wolicie oglądać filmiki na YouTube - nie ma problemu! W artykule znajdziecie link do nagrania video ;)

Polecam: The cost of JavaScript in 2018


To tyle w dzisiejszym odcinku learning log'a :)

Zapraszam za tydzień!