{"id":10194,"date":"2021-01-20T11:00:00","date_gmt":"2021-01-20T10:00:00","guid":{"rendered":"https:\/\/vived.io\/frontend-wednesday-vol-21\/"},"modified":"2022-09-19T13:16:47","modified_gmt":"2022-09-19T11:16:47","slug":"frontend-wednesday-vol-21","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-wednesday-vol-21\/","title":{"rendered":"Frontend Wednesday vol. 21"},"content":{"rendered":"

Hej
Widzimy si\u0119 po raz pierwszy w nowym miejscu i w odrobin\u0119 od\u015bwie\u017conej formule . W tym tygodniu mam dla Was podsumowanie roku 2020 w oparciu o gwiazdki GitHub\u2019a, nowy proposal dla JavaScrptu, release notes Snowpack\u2019a i Scala.js. \u0141apcie popo\u0142udniow\u0105 kaw\u0119 \u2615\ufe0f i zapraszam do lektury .<\/p>\n

1. 2020 JavaScript Rising Stars \u2b50\ufe0f<\/h2>\n

Po\u0142owa stycznia ju\u017c za nami, a sieci ci\u0105gle nie przestaj\u0105 zalewa\u0107 kolejne podsumowania i raporty dotycz\u0105ce roku 2020. Dzi\u015b dla odmiany mam dla Was raport oparty nie o ankiet\u0119 czy zescrapowane dane, a o przyrost gwiazdek na GitHubie. Prawdopodobnie pierwsze, o czym teraz pomy\u015bleli\u015bcie to, \u017ce gwiazdki nie s\u0105 najlepszym odwzorowaniem rynku pracy, ale czasem trendy na GitHubie pozwalaj\u0105 wychwyci\u0107 przysz\u0142e trendy w\u015br\u00f3d deweloper\u00f3w ju\u017c we wczesnej fazie.<\/p>\n

Frontendowa \u015aroda na prze\u0142omie roku 2020\/2021\u200c\u200c<\/span><\/figcaption><\/figure>\n

Analiz\u0119 zaczniemy od backendu, bo jak wynika chocia\u017cby z State of JS 2020, czy\u015bci Frontend Developerzy powoli odchodz\u0105 do lamusa. Tutaj mamy te\u017c do czynienia z najbardziej rzucaj\u0105cym si\u0119 w oczy trendem w ca\u0142ym raporcie, czyli wzrostem popularno\u015bci Deno. Deno to nast\u0119pca Node\u2019a, kt\u00f3ry natywnie wspiera TypeScript, stawia na bezpiecze\u0144stwo i naprawia b\u0142\u0119dy swojego poprzednika. Na razie o du\u017cych wdro\u017ceniach na produkcj\u0119 nic nie s\u0142ycha\u0107, ale rosn\u0105ce zamieszanie wok\u00f3\u0142 tematu pozwala mie\u0107 nadziej\u0119, \u017ce projekt nie sko\u0144czy jako kolejna ciekawostka.<\/p>\n

Wracaj\u0105c do clue Frontendowej \u015arody warto spojrze\u0107, jak si\u0119 sprawy maj\u0105 w\u015br\u00f3d framework\u00f3w frontendowych. Na GitHubie niepodzielnie kr\u00f3luje Vue, kt\u00f3ry kolejny rok z rz\u0119du gromi konkurencj\u0119 pod wzgl\u0119dem wzrost\u00f3w i gwiazdek. Ciekawe rzeczy dziej\u0105 si\u0119 natomiast w peletonie stawki. Angular wyprzedzi\u0142 Svelte i uplasowa\u0142 si\u0119 na trzeciej pozycji (czasami zastanawiam si\u0119, czy trzecia pozycja Angulara nie powinna sta\u0107 si\u0119 r\u00f3wnie memiczna, co czwarta pozycja Arsenalu w tabeli Premier League, ale trzymam kciuki za lepsz\u0105 przysz\u0142o\u015b\u0107 Angulara, wi\u0119c powstrzymam si\u0119 od tego por\u00f3wnania). Pierwsz\u0105 pi\u0105tk\u0119 zamyka debiutant Alpine, czyli framework stawiaj\u0105cy na szybko\u015b\u0107 i prostot\u0119, kt\u00f3ry podobno \u015bwietnie spina si\u0119 z Elixirem czy Ruby.<\/p>\n

Je\u015bli m\u00f3wimy o frontendzie to nie spos\u00f3b pomin\u0105\u0107 CSS\u00f3w. Tutaj zdecydowanie wygra\u0142 Tailwind (niedawno informowali\u015bmy Was o wersji 2.0<\/a>), wok\u00f3\u0142 kt\u00f3rego zaczyna si\u0119 robi\u0107 coraz wi\u0119cej ha\u0142asu. Podej\u015bcie Utility First zdaje si\u0119 powoli wypiera\u0107 BEM, wi\u0119c je\u015bli jeszcze nie mieli\u015bcie szansy spr\u00f3bowa\u0107, to mo\u017ce by\u0107 ostatni moment, \u017ceby wskoczy\u0107 do tego poci\u0105gu.<\/p>\n

Na koniec jeszcze jedna obserwacja: w\u015br\u00f3d narz\u0119dzi do budowania aplikacji, po latach stagnacji, wreszcie co\u015b zaczyna si\u0119 zmienia\u0107. W rankingu gwiazdek wygra\u0142 raczkuj\u0105cy Rome, ale nie jest to jedyna konkurencja dla webpacka. Ci\u0119\u017cko powiedzie\u0107, jak sytuacja w tej kategorii potoczy si\u0119 dalej, ale du\u017ca konkurencja na pewno przyniesie nam deweloperom sporo nowych feater\u00f3w i mo\u017cliwo\u015bci.<\/p>\n

Je\u015bli chcecie wyrobi\u0107 sobie w\u0142asn\u0105 opini\u0119 albo jeste\u015bcie ciekawi pozosta\u0142ych kategorii, to odsy\u0142am Was do raportu podlinkowanego ni\u017cej. <\/p>\n

https:\/\/risingstars.js.org\/2020\/en<\/a><\/h3>\n<\/p>\n

2. JavaScript immutable types <\/h2>\n

Osobi\u015bcie czuj\u0119 spore przywi\u0105zanie do programowanie funkcyjnego. Wszystko zacz\u0119\u0142o si\u0119 na studiach od nauki Haskella. Zaj\u0119cia sprawi\u0142y mi sporo trudno\u015bci ale r\u00f3wnocze\u015bnie zaintrygowa\u0142y mnie do dalszej eksploracji tematu. Tym, co wtedy przyku\u0142o moj\u0105 uwag\u0119, by\u0142 dosy\u0107 popularny kurs `Functional Programming in Scala` prowadzony przez samego tw\u00f3rc\u0119 j\u0119zyka. Od tego momentu zacz\u0119\u0142a si\u0119 moja fascynacja zar\u00f3wno Scal\u0105 i programowaniem funkcyjnym.<\/p>\n

\u015acie\u017cka mojej kariery poprowadzi\u0142a mnie jednak w niespodziewanych kierunkach i tak oto wyl\u0105dowa\u0142em jako Fullstack Developer. W moich pierwszych zawodowych styczno\u015bciach z JavaScriptem, du\u017cym zaskoczeniem by\u0142o okre\u015blenie tego j\u0119zyka jako funkcyjnego. JavaScript w niczym nie przypomina\u0142 znanych mi j\u0119zyk\u00f3w funkcyjnych\u2026<\/p>\n

Moja reakcja kiedy pierwszy raz czytam, \u017ce JavaScript to j\u0119zyk funkcyjny – koloryzowane<\/figcaption><\/figure>\n

Nie jest to jednak m\u00f3j dziennik, wi\u0119c wr\u00f3\u0107my do tematu, a jest nim proposal, kt\u00f3ry przybli\u017ca JavaScript do bycia prawdziwie funkcyjnym j\u0119zykiem, czyli wprowadzenie niemutowalnych typ\u00f3w. Co prawda przed proposalem jeszcze daleka droga, ale mamy nadziej\u0119 \u017ce finalnie dotrze on do specyfikacji w 2022 roku.<\/p>\n

Niemutowalne dane b\u0119d\u0105 wspiera\u0107 rekordy i krotki, a pr\u00f3ba wymieszania ich z mutowalnymi danymi b\u0119dzie skutkowa\u0107 b\u0142\u0119dem. Niemutowalne dane b\u0119d\u0105 te\u017c wsp\u00f3\u0142pracowa\u0107 z por\u00f3wnywanie przez warto\u015b\u0107. <\/p>\n

<\/p>\n

\/\/ new records\nconst r1 = #{ a: 1, b: 2 };\n\/\/ new tuples\nconst t1 = #[1, 2, 3];\n<\/code><\/pre>\n
<\/p>\n
Osoby, kt\u00f3re do tej pory gimnastykowa\u0142y si\u0119 z tworzeniem niemutowalnych typ\u00f3w wiedz\u0105 o jak du\u017cym usprawnieniu tutaj mowa. Do tej pory podobny efekt mo\u017cna by\u0142o osi\u0105ga\u0107 przez `Object.freeze()` albo tworzenie klas z samymi getterami, jednak mia\u0142o to swoje ograniczenia (np. osi\u0105gni\u0119cie w ten spos\u00f3b zagnie\u017cd\u017conego immutability by\u0142o bardzo trudne).<\/p>\n
Je\u015bli chcecie pozna\u0107 wi\u0119cej szczeg\u00f3\u0142\u00f3w, to odsy\u0142am Was do linku poni\u017cej. <\/p>\n
3. Snowpack v3.0 \u2603\ufe0f<\/h2>\n
W pierwszym punkcie m\u00f3wili\u015bmy o zamieszaniu w\u015br\u00f3d narz\u0119dzi do budowania aplikacji i tutaj mamy jednego z prowodyr\u00f3w tej sytuacji. Snowpack posiada produkcyjn\u0105 wersj\u0119 ju\u017c od ponad roku, a w tym tygodniu doczeka\u0142 si\u0119 wersji 3.0. To czym wyr\u00f3\u017cnia si\u0119 Snowpack jest szybko\u015b\u0107 budowania (albo mi si\u0119 wydaje, albo wszystkie nowe narz\u0119dzia do budowania wyr\u00f3\u017cniaj\u0105 si\u0119 tym samym ). Je\u015bli b\u0119dziecie kiedy\u015b szuka\u0107 narz\u0119dzia do zbudowania waszego hobbystycznego projektu, to Snowpack mo\u017ce okaza\u0107 si\u0119 warty sprawdzenia, bo otrzyma\u0142 w 2020 roku nagrod\u0119 w kategorii Productivity Booster przyznan\u0105 przez przyosawards.com. <\/p>\n
Deweloper konfiguruj\u0105cy Snowpack po raz pierwszy\u200c\u200c<\/span><\/figcaption><\/figure>\n
Co nowego w wersji 3.0 ? Przede wszystkim Streaming Imports, kt\u00f3re pozwalaj\u0105 ca\u0142kowicie pomin\u0105\u0107 krok instalacji dependencji. Opr\u00f3cz tego w releasie dosz\u0142o te\u017c sporo optymalizacji i ulepsze\u0144 dla API.<\/p>\n
<\/p>\n
\/\/ you do this:\nimport * as React from 'react';\n\/\/ but get behavior like this:\nimport * as React from 'https:\/\/cdn.skypack.dev\/react@17.0.1';\n<\/code><\/pre>\n
<\/p>\n
4. Announcing Scaja.js 1.4.0 <\/h2>\n
Dla wielu os\u00f3b nie zainteresowanych \u015brodowiskiem Scali informacja, \u017ce projekt scala.js ci\u0105gle \u017cyje i jest rozwijany, mo\u017ce by\u0107 sporym zaskoczeniem (dla wielu zainteresowanych tym \u015brodowiskiem r\u00f3wnie\u017c, bo projekt \u017cyje troch\u0119 z boku ca\u0142ego ekosystemu). W \u015bwiecie, w kt\u00f3rym TypeScript ca\u0142kowicie zdominowa\u0142 rynek typowanego JavaScriptu, scala.js w jaki\u015b spos\u00f3b znalaz\u0142a swoj\u0105 nisz\u0119 (ciekawostka: prace nad TypeScript rozpocz\u0119\u0142y si\u0119 w 2012 roku, a nad Scala.js w 2013 roku, wi\u0119c mo\u017ce istnieje alternatywny wszech\u015bwiat, w kt\u00f3rym scala.js zajmuje pierwsze miejsca w\u015br\u00f3d frontend developer\u00f3w). Je\u015bli zastanawiacie si\u0119 gdzie jest ta nisza, to o dobrym zastosowaniu dla scala.js mo\u017cecie przeczyta\u0107: tutaj<\/a> (TLDR: narz\u0119dzie rozszerzaj\u0105ce dokumentacj\u0119 o wyszukiwanie funkcji na podstawie jej sygnatury. Dzi\u0119ki kompilacji do js w pe\u0142ni dzia\u0142aj\u0105ce po stronie klienta).<\/p>\n
Wracaj\u0105c na ziemi\u0119 scala.js jest mocno w tyle, je\u015bli chodzi o funkcjonalno\u015b\u0107 JavaScriptu. W opublikowanej w tym tygodniu wersji biblioteka otrzyma\u0142a wsparcie dla lazy loadingu bibliotek: funkcjonalno\u015bci, kt\u00f3ra w JavaScript jest obecna ju\u017c od lat. <\/p>\n
<\/p>\n
class HeavyFeature {\n  def doHeavyFeature(x: Int): Int =\n    x * 2\n}\nclass MyApp {\n  def useHeavyFeature(): Unit = {\n    val input: Int = getInput()\n    val resultPromise: js.Promise[Int] = js.dynamicImport {\n      new HeavyFeature().doHeavyFeature(input)\n    }\n    for (result <- resultPromise.toFuture)\n      updateUIWithOutput(result)\n  }\n}\n<\/code><\/pre>\n
<\/p>\n
Rzadki obrazek pokazuj\u0105cy scala.js nadganiaj\u0105c\u0105 nowe funkcjonalno\u015bci JavaScriptu<\/figcaption><\/figure>\n
Nic nie zapowiada nag\u0142ego wzrostu popularno\u015bci takich projekt\u00f3w jak scala.js albo Kotlin\/JS, ale na pewno warto wiedzie\u0107 o ich istnieniu. Dla ca\u0142ego grona zatwardzia\u0142ych backend deweloper\u00f3w, nienawidz\u0105cych JavaScriptu z ca\u0142ego serca, jest to jedyna droga do tworzenia frontendu.<\/p>\n
\n
Mamy nadzieje, \u017ce si\u0119 podoba\u0142o i do zobaczenia za tydzie\u0144! \u26a1\ufe0f<\/p>\n
Je\u015bli chcesz otrzymywa\u0107 tego typu tre\u015bci spersonalizowane pod Ciebie, pobierz Vived!<\/p>\n