Frontend: podsumowanie 2021 & perspektywy

Kontynuujemy temat frontendowego podsumowania 2021! Mamy nadzieję, że zaznajomiliście się z CSS-owymi zmianami, jeśli nie to sprawdźcie je koniecznie. Tym razem na dowiemy się co się działo w poprzednim roku u JavaScriptu, gotowi? To lecimy!

Frontend Wrapped 2021 – JavaScript

Jaki był ten rok dla JavaScipta? Można by rzec, że wyśmienity, bo nadal króluje. Zacznijmy jednak od tego, co się u niego zmieniło. Zmian w standardzie ECMA było pięć:

1. String.prototype.replaceAll()

Od tego roku możemy już nie trudzić się aż tak z regexem, uff 😀 . Co to oznacza?

const text = 'frontowisko jest fajne!'
const oldway = text.replace(/f/g, 'F'); //output: 'Frontowisko jest Fajne!'
const newway = text.replaceAll('f', 'F'); //output: 'Frontowisko jest Fajne!'

Do tej pory, by zastępować jakiś schemat (pattern) mieliśmy jedną metodę replace. I aby podmienić wszystkie wystąpienia pierwszego parametru, należało posłużyć się wyrażeniem regularnym (regex) i flagą global (oznaczenie g w kodzie). Natomiast replaceAll ułatwia nam sprawę i robi to za nas 🙂 . Prawdopodobnie nowa metoda może mieć również pozytywne znaczenie dla wydajności, ponieważ dla tak prostej zadania nie potrzeba parsować żadnego wyrażenia regularnego. Jeśli chcesz poznać kilka innych metod, sprawdź nasz wpis o 5 sposobach na podmianę tekstu w Javascript.

2. Logical assignment operators

Pojawiły się nam 3 nowe operatory przypisania, są nimi: ||= , &&=  oraz ??= .

I tak pierwszy z nich (logiczny operator przypisania OR) jest równoznaczny z:  x || (x=y) . Co można sobie przetłumaczyć na to, że y będzie przypisane do x ,  tylko wtedy gdy x będzie dawało wartość false. Cool.

Znajdźmy zatem jakiś „życiowy” przykład:

let user = {name: "Agata", city: "Poznań", age: ""};
user.age ||= 5
console.log(user.age); // output: 5

Jak można zobaczyć, user.age został przypisany do wartości 5,  ponieważ wcześniejsza wartość była ""  pustym stringiem, czyli false . Na tej samej zasadzie działa &&=, tylko wtedy x musi dawać wartość true .

Z tej trójcy najbardziej przydatny wydaje się być ostatni operator, który wykorzystuje nullish operator ,tj. ??. Oznacza to, że jeśli wartość nie została przypisana do zmiennej, to zostanie ona przypisana do wartości podanej po prawej stronie.

let age;
age ??= 5;
console.log(age) // output: 5

3. Numeryczny separator

const number = 123333333;

Też macie problem jaka właściwie to wartość? Tysiące, miliony, miliardy ? Otóż od teraz JavaScript ułatwia sprawę i można sobie wstawić podłogi, takie o : const number = 123_333_333; . Wartości te są równoznaczne 🙂

Neeeeeext!

4.  Promise.any

Może kojarzycie Promise.all , w takim razie Promise.any to przeciwieństwo. Obietnica any zostanie spełniona, gdy jakikolwiek z promisów przekazanych do tablicy zostanie rozwiązany poprawnie. Oznacza to, że interesuje ją tylko ten, który dostanie poprawną odpowiedź jako pierwszy i tylko ten rezultat zwróci, reszta jest pomijana.

const requests = Promise.any([ 
  fetch('jakis-url-1'),
  fetch('jakis-url-2)
]);
// jeśli drugi fetch wykona się pierwszy, wtedy zostanie to on zostanie zwrócony
requests.then(resp => console.log(resp));

Natomiast obietnica zostanie odrzucona, gdy wszystkie odpowiedzi będą nieprawidłowe.

5. WeakRef

To ja może zacytuję:

This proposal contains two advanced features, WeakRef and FinalizationRegistry. Their correct use takes careful thought, and they are best avoided if possible.

Jak sami radzą lepiej unikać używania tego 😀 . Zaawansowany feature, który wiąże się z tzw. garbage collection, czyli z usuwaniem z pamięci nieużywanych obiektów. Jeśli jesteście ciekawi, to odsyłam do lektury propozycji. 

To tyle jeśli chodzi o ES2021! Jeśli chcecie używać powyższych funkcjonalności, to tylko upewnijcie się, że lokalnie/w projekcie macie odpowiednią wersję Node.js. 

Frontend Wrapped 2021 – podsumowanie roku

Przejdźmy zatem do świata  globalnego frontendu. Pamiętacie, jak napisałam, że JavaScript króluje?

JavaScript nie traci na popularności

Źródło: https://octoverse.github.com/

W zestawieniu języków programowania, wykonanego przez github, na pierwszym miejscu jest właśnie JavaScript. Jest to w takim razie bardzo dobra informacja dla tych, którzy chcą zostać frontend developerami lub już są i chcą się dalej rozwijać 😉 . Coraz więcej miejsc pracy będzie korzystało z usług lub rozwijało projekty, do których jest potrzebna umiejętność programowania w JavaScripcie.

TypeScript rośnie w siłę

Równie silnie trzyma się TypeScript, który wraz z czasem i kolejnymi projektami coraz więcej ludzi zaczyna używać. I aby było jasne dla niewtajemnoczonych – TypeScript to rozwinięcie JavaScriptu. Jego składania jest niemal idealnyczna co JS’a, jednak wprowadza kilka dodatkowych rzeczy, w tym najważniejsze to typowanie zmiennych. Wydaje mi się, że można śmiało stwierdzić, że w obecnym 2022 roku na pewno zawojuje!

Źródło: Wykres ściągnięcia paczki typescipt z npm

Święta trójca frameworków JavaScriptu

Mowa oczywiście o React, Angular i Vue. Nie będzie zaskoczeniem, że React utrzymuje swoją pierwszą pozycję w tym zestaweniu. m.in. dlatego że ma największą liczbę pobrań na npm:

Dodatkowo w ankiecie przeprowadzonej przez stackoverflow zebrał największe zainteresowanie od programistów, którzy nie pracują w tej technologii.

Źródło: Ankieta stackoverflow  . P.S. ankieta obcięta na potrzeby wpisu, nie doszukujcie się tu sumy 100% 😀

Jednakże inne frameworki również nie pozostają w tyle. Jest nim, np. Svelte, który wygrał w tej samej ankiecie na najbardziej ulubioną technologię. Może to też pomysł dla tych, co po nauce JavaScriptu zastanawiają się, którego frameworku tego języka się nauczyć 😉

Nowe frameworki

Frontend nie byłby frontendem, gdyby nie doszły w ciągu roku jakieś nowe frameworki.

Dostaliśmy tutaj, m.in. Astro, które ponoć jest super. To statyczny generator strony, który pisze się w języku tego frameworku, ale który właściwie pozbywa się przy budowaniu strony (build) niepotrzebnego Javascriptu, renderując się do samego HTMLa i CSSa.  Dzięki czemu sama strona jest bardzo szybka.

Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called partial hydration.

Mamy też nowy framework Reacta – React Remix, który ma być chyba lepszym NextJs. Czy pewną wschodzącą gwiazdę tj. framework Vite.

I jeśli mam być szczerze, to kompletnie żadnym z nich się nie interesowałam, ale może przyjdzie KIEDYŚ na to pora 😀

Podsumowanie

To tyle ode mnie z nowinek JavaScriptowych. Mam nadzieję, że zachęciło to Was do zgłębiania jego tajemnic. Ja nadal to robię i mnóstwo rzeczy zawsze zaskakuje, hehe 😀 . Jestem ciekawa jak podobał Wam się Frontend Wrapped 2021, czy w ogóle się podobał, co Was zainteresowało, także dajcie znać!

Miłego zdobywania świata frontendu! I pysznej kawusi 😉 .