• Post last modified:24/11/2021
  • Reading time:8 mins read
  • Post comments:1 Komentarz

Cześć, witam was w kolejnym odcinku Frontendówki i zapraszam do przeglądu najważniejszych frontendowych newsów z poprzedniego tygodnia. Tydzień ten był nieco krótszy i zbyt dużo w nim się nie działo, więc dzisiejszy odcinek powinien pójść nam dość szybko.

GitHub Copilot

Zacznę niestandardowo od informacji o Copilocie od GitHuba. W końcu również i ja otrzymałem dostęp do tegoż narzędzia i miałem okazję popracować z nim 2 dni przy dość standardowej aplikacji Reacta z Reduxem i muszę wam przyznać, że pierwsze wrażenie jest naprawę „wow”. Spodziewałem się po prostu nieco lepszej autosugestii od tego, co mam w VS Code, ale generowane fragmenty kodu były tak dokładne i przewidujące moje zamiary, że w kilku sytuacjach zadawałem sobie pytanie „no skąd on to wie?”. Z pierwszymi wrażeniami jest trochę jak z nową zabawką — na początku zawsze cieszy, więc jeszcze trochę z nim po obcuję i po jakimś tygodniu, może dwóch, będę mógł wam powiedzieć nieco więcej.

https://copilot.github.com/

🆕 Release radar

Przechodzimy teraz już do release radaru, czyli do przeglądu releasów najpopularniejszych frameworków i bibliotek frontend-owych.

👉 Angular 13

Na pierwszy ogień idzie Angular i jego najnowsza, trzynasta wersja. Nie doczekaliśmy się jakiś dużych przełomowych zmian,  w większości są to drobne poprawki i usprawnienia. Z ważniejszych rzeczy należy wspomnieć o porzuceniu wsparcia dla IE 11, finalnej zamianie View Engine na silnik Ivy, zaktualizowanie TypeScripta oraz RxJS do ich najnowszych wersji, porzucenia wsparcia dla Node.js w wersji niższej niż 12.2 i ogólne poprawienie szybkości budowania aplikacji o ok. 60%.
Nowa wersja oczywiście wprowadza również kilka breaking change-y, więc osoby zainteresowane migracją zapraszam do stosownej dokumentacji.

https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296
https://github.com/angular/angular/releases/tag/13.0.0
https://javascript.plainenglish.io/angular-13-in-depth-83be8f979e26

👉 React Router 6

Najważniejszą informacją poprzedniego tygodnia w świecie react-owtym była najnowsza wersja biblioteki react-router. Narzędzie to jest stosowane w lwiej części aplikacji napisanych w Reakcie, dlatego też informacja o tym, iż wersja 6.0 jest po prostu jednym wielkim „breaking change-m” mocno zaskoczyła wielu developerów. Na swojej stronie twórcy poinformowali o tym, iż pracują nad narzędziem, które zapewni kompatybilność wsteczną z wersją piątą i zachęcają do niemigrowania większych aplikacji do tego czasu. Wygląda więc,  że „piątka” jeszcze dość długo pozostanie rynkowym standardem i jedynie nowo powstające aplikacje będą mogły pozwolić  sobie na skorzystanie z najnowszej wersji.React-router od niedawna jest częścią większą projektu „Remix-run”, więc zapewne tak drastyczne zmiany były trochę wymuszone architekturą właśnie Remixa.Z najważniejszych zmian, które trafiły do wersji 6.0, należy wymienić możliwość stosowania zagnieżdżonych ścieżek, stosowanie metryk, a nie kolejności wystąpienia w kodzie w celu zdeterminowania tego, który komponent ma zostać wyrenderowany oraz oczywiście skorzystanie z dużej ilości hooków, co finalnie przełożyło się na zmianę rozmiaru paczki o ok. 50%.

https://github.com/remix-run/react-router/releases/tag/v6.0.0
https://remix.run/blog/react-router-v6

👉 Puppeteer 11

Majorowego releasu doczekał się również Puppeteer, czyli tzw. bezgłowy Chrome, narzędzie stosowane dość często do automatycznego testowania aplikacji czy scrapowania stron. Jeden breaking change, kilka usprawnień i bugfixów wystarczyły, aby wersję 10.4 zamienić na wersję 11.0

https://github.com/puppeteer/puppeteer/releases/tag/v11.0.0

👉 Recoil 0.5

Jeżeli nie po drodze wam z Reduxem i do zarządzania stanem swoich aplikacji używacie facebookowego Recoila, to tutaj również pojawiło się kilka usprawnień, a najnowszą wersją jest teraz wersja 0.5.

https://github.com/facebookexperimental/Recoil/releases/tag/0.5.0

👉 Workbox 6.4

Jeżeli w swoich aplikacjach implementujecie zasady PWA, to jest duża szansa na to, że korzystacie z Workboxa, czyli zestawu narzędzi ułatwiającego nam pracę z tym właśnie podejściem. Zmiany w najnowszej wersji 6.4 nie są duże, aczkolwiek np. zawierają najnowszego TypeScripta.

https://github.com/GoogleChrome/workbox/releases/tag/v6.4.0

👉 TypeScript 4.5 RC

A skoro już przy TypeScripcie jesteśmy, to ten nie zwalnia tempa i już jest niemal gotowy do tego, aby przedstawić światu swoją najnowszą wersję 4.5. Na samym początku października pojawiła się Beta, z tego, co sprawdzałem, to Release Candidate jest niemal jej kopią, więc już niedługo powinniśmy doczekać się stabilnego releasu. Gdy takowy się pojawi, na pewno dowiecie się o tym w jednym z kolejnych odcinków frontendówki.

https://github.com/microsoft/TypeScript/releases/tag/v4.5-rc

📰 Przegląd prasy

Na tym kończymy releasy, przejdźmy teraz do przeglądu frontend-owej prasy

👉 Chrome Dev Summit 2021

3 listopada odbyła się jednodniowa konferencja Chrome Dev Summit 2021, na której mogliśmy dowiedzieć się, nad czym obecnie pracuje zespół odpowiedzialny za rozwój przeglądarki Chrome. Zapis tego wydarzenia został nagrany i jest możliwy do obejrzenia na YouTube.

https://www.youtube.com/playlist?list=PLNYkxOF6rcIBju4hD9ed1pt6YO20LgLWg

👉 Firefox 94

W poprzednim tygodniu ujrzeliśmy również nową wersję Firefoxa okraszoną numerem 94. Nie uświadczyliśmy jakiś drastycznych zmian i feature-ów, a osoby zainteresowane oczywiście zapraszam do zapoznania się z „release notem” na stronie MDN-a.

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/94

👉 Chrome Canary

Bardzo ciekawe narzędzie pojawiło się w najnowszym Chrome Canary, a mianowicie możliwość nagrania oraz ponownego odtworzenia zachowania na stronie. Co bardzo fajne, raz nagrane flow możemy sobie edytować oraz odtwarzać w różnych warunkach, czyli np. przy zasymulowanej dużo wolniejszej sieci (np.  3G). Myślę, że jest to coś, czego w Chromie naprawdę brakowało programistom i będziemy mogli dzięki temu zaoszczędzić sporo czasu podczas pracy.

https://developer.chrome.com/docs/devtools/recorder/

👉 Core Web Vitals

Na Twitterze pojawił się również ciekawy tweet Addyego Osmaniego mówiący o tym, iż coraz więcej stron mieści się w limitach wyznaczonych przez Core Web Vitals i dotyczy to również tych stron i aplikacji, które są pisane przy użyciu najpopularniejszych obecnie frameworków i bibliotek. 

👉 WarsawJS

W tym tygodniu mam zaproszenie tylko na jedno spotkanie i będzie to meetup organizowany przez stołeczną społeczność WarsawJS. Spotkanie odbędzie się zarówno stacjonarnie, jak i online. Tematy zaplanowanych prelekcji znajdziecie w poniższym linku. 

https://app.evenea.pl/event/warsawjs-meetup-87

👉 Ciekawe artykuły

W poprzednim tygodniu trafiłem również na kilka ciekawych artykułów i sześcioma z nich, które wydawały mi się najbardziej wartościowe i uniwersalne, podzielę się teraz z wami. Wśród wspomnianej już szóstki wpisów znajdziecie podsumowanie najpopularniejszych obecnie frameworków CSS, informację o tym, jak sprawdzić, czy nasz użytkownik ma obecnie połączenie z Internetem, krótkie, aczkolwiek treściwe porównanie obiektów i map w JavaScript, siedem różnych sposobów na debuggowanie naszych aplikacji  za pomocą konsoli, omówienie kilku najpopularniejszych błędów popełnianych przy pracy z hookami oraz telegraficzny opis czterech bardzo ważnych koncepcji w JavaScript, czyli IIFE, Scope, Closures oraz Hoisting.

https://dev.to/thenerdydev/best-css-frameworks-in-2021-1f3p

https://javascript.plainenglish.io/javascript-validate-online-status-7e195b6a89a8

https://javascript.plainenglish.io/how-maps-make-up-for-limitations-of-objects-in-javascript-6c71f6e61af0

https://blog.siddu.tech/7-console-log-alternatives

https://blog.bitsrc.io/common-react-hooks-mistakes-every-developer-should-avoid-defd47d09d8c

https://javascript.plainenglish.io/4-javascript-concepts-that-every-developer-should-know-a20f0d4c9dd8

🛠 Toolbox

Tradycyjnie na zakończenie przedstawię wam kilka narzędzi które, mimo iż nie są frameworkami lub bibliotekami, mogą nam znacznie pomóc w naszej codziennej pracy.

👉 npkill

Pierwszym z takich narzędzi jest „npkill”, czyli konsolowa aplikacja, za pomocą której możemy odnaleźć oraz szybko usunąć foldery „node_modules” z naszego dysku twardego. Usuwanie to jest również dużo szybsze niż standardowe usuwanie folderu przy pomocy eksploratora plików. 

https://npkill.js.org/

👉 AnyWebP

Drugim narzędziem jest „AnyWebP”, czyli dostępny w przeglądarce konwerter dowolnego pliku graficznego na stosunkowy nowy, dużo lżejszy format, jakim jest WebP. Konwertować możemy pojedyncze, jak i wiele plików naraz.

https://anywebp.com/convert-to-webp.html

👉 Photopea

Trzecie narzędzie jest już bardzo popularne i szeroko znane wśród frontend-owców, ale być może dopiero zaczynasz swoją karierę i jeszcze o nim nie słyszałeś, więc Photopea jest swego rodzaju odchudzoną wersją Photoshopa dostępną za darmo w przeglądarce. Oczywiście nie doświadczymy tutaj wszystkich funkcjonalności Photoshopa, aczkolwiek ich lista jest tak duża, że w zupełności wystarczy większości z nas. 

https://www.photopea.com/

🙂 Podziękowanie

Przypominam, że wszystkie narzędzia omówione na łamach frontendówki możecie znaleźć na moim blogu w jednym, zbiorczym wpisie dostępnym pod adresem frontstack.pl/toolbox.

Na tym kończymy dzisiejszą frontendówkę, bardzo wam dziękuję za przeczytanie całości materiału, jak zawsze czekam na komentarze, co wam się podoba, co byście zmienili, usunęli lub dodali, zachęcam również do zasubskrybowania kanału na YT i do usłyszenia już za tydzień.

Kamil

Kamil Józwik

Frontend developer👨‍💻 Autor kursów na frontschool.pl, małego narzędzia dla programistów - frontbook.dev oraz kolejnych postów na tym blogu. Ulubiony stos technologiczny to React wraz z TypeScript oraz wszystko, co "nowe" w tym pięknym dynamicznym front end-owym świecie 🙂
Subscribe
Powiadom o
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Łukasz
Łukasz
2 miesięcy temu

Bardzo dobre podsumowanie. Czekam na więcej