Miniony tydzień był ucieleśnieniem najgorszych snów redaktora Frontendowych Czwartków. Żaden duże frameworki nie dostały nowej wersji, Twittera nie podbiła żadna nowa biblioteka i nie odbyła się żadna istotna konferencja. W skrócie: świat frontendowych nowinek stanął w miejscu.

Autor Frontendowego Czwartku wyczekujący chociaż jednego istotnego newsa

Z takim założeniem kładłem się spać jeszcze wczoraj, żeby dziś rano obudzić się i zobaczyć Google ogłaszającego Fluttera 2 i ratującego sytuację (a co jeśli Google śledzi Frontendowe Czwartki, przeczytał draft kolejnej edycji i postanowił uratować nasz cotygodniowy cykl? 🙊). Wszystkich równie mocno spragnionych nowości zapraszam więc na kolejną (może trochę wyjątkową) edycję naszego przeglądu. Łapcie kawę ☕  i życzę miłej lektury 📰 .

Autor Frontendowego Czwartku sprawdzający Keep Up w czwartek rano

1. Flutter 2

Jako frontend deweloperzy jesteście prawdopodobnie bardzo przywiązani do przeglądarek i możecie zastanawiać się, czemu zebrałem Was tutaj, żeby mówić o mobilnym Flutterze. Jeśli chociaż kątem oka śledzicie, co dzieje się w frameworku z logiem niebieskiego ptaszka (aż dziwne, że Google nie pokłócił się o to z Twitterem), to wiecie, że od dłuższego czasu trwały prace na implementacją Flutter for Web. Z pokazaną wersją 2, wsparcie to oficjalnie zyskało status stabilnego. Oznacza to, że Flutter dołączył do zacnego grona Ionica i React Native i wykorzystując jeden code base umożliwiał będzie wsparcie trzech platform (iOS, Android, Web).

Reakcja przeciętnego odbiorcy Frontendoweg Czwartu na nagłówek dotyczący Fluttera

Od bety Flutter for Web nie zmieniło się wiele, jeśli chodzi o założenia w jaki sposób renderowane będą strony. Śpieszę natomiast z przypomnieniem, jak to będzie działać dla wszystkich tych, którzy przegapili tą informację. Flutter mianowicie wspiera dwa tryby renderowania. Pierwszy jest hybrydą HTML, CSS, Canvas i SVG zoptymalizowaną pod jak najmniejszy bundle size. Drugi tryb opiera się w całości na Canvasie i w zamian za spory bundle oferuje lepszą jakość i wydajność. Domyślnie Flutter będzie serwował w pierwszym trybie dla urządzeń mobilnych i w drugim dla desktopów. Pogrzebałem trochę w internecie, ale nie udało mi się znaleźć stron, które zdecydowałby się na pierwszy tryb renderowania. Natrafiłem za to na świetne demo z prezentacji Google’a, które pokazuję jak szybko i płynnie działa Flutter w przeglądarce. Możecie go znaleźć tutaj (kilka innych ciekawych dem możecie znaleźć tutaj)

Oprócz najważniejszej z perspektywy Web Developera informacji o Flutter for Web pojawiło się też sporo aktualizacji dotyczących samego Fluttera. We współpracy z Microsoftem powstało API wspierające składane urządzenia (takie jak Surface Duo). Flutter mocno zainwestował też we wsparcie desktopowych aplikacji i przygotował cały zbiór funkcjonalności dedykowanych dla tego środowiska. Od dzisiaj Flutter będzie też domyślnym wyborem do tworzenia okienkowych aplikacji dla Ubuntu (wykorzystywany będzie między innymi w samym instalatorze systemu). Nowości zakończymy Toyotą dzielącą się informacją, że wykorzystuje Flutter jako języka dla Embeddu.

Google na prezentacji wspomniał także o rozwoju języka stojącego za Flutterem, czyli Darta. Ostatnio otrzymał on wsparcie dla null safety, podobne do tego znanego z Kotlina. Kolejna funkcjonalność, nad którą skupiać się teraz będą programiści z Google to feature zainspirowany Kotlinem, czyli data classes. Ja osobiście nie zakochałem się w Darcie od pierwszego wejrzenia, ale język zdecydowanie skręca teraz w coraz ciekawszym kierunku. BTW pamiętacie jeszcze próby Googla ze zrobieniem z Darta nowego standardu dla Web’a albo dziwne eksperymenty takie jak Angular Dart?

Fluttera można lubić lub nie. Ciężko natomiast pozbyć się wrażenia, że w jego środowisku dzieje się naprawdę dużo, a Google potrafi wygenerować wokół tego odpowiedni blichtr. Ciężko mi przypomnieć sobie drugą prezentację, czy nawet sam release frameworku, który byłby tak wypchany informacjami.

Źródła:

https://developers.googleblog.com/2021/03/announcing-flutter-2.html
https://www.youtube.com/watch?v=zSbsIiluix
https://www.youtube.com/watch?v=yll3SNXvQCw

2. What’s new in Chrome DevTools 89 & 90

Ten tygodniowy przegląd zdominowany jest przez Google, bo druga nowość, którą chce się z Wami podzielić jest Chrome 90. Jako że, od kiedy ostatni raz dzieliłem się z Wami nowościami z Chrome DevTools minęło już trochę czasu, to przy okazji zerknąłem też na wersję 89.

Z mojej perspektywy interesujące zmiany były 3. Po pierwsze dodano możliwość zrobienia zrzutu wybranego komponentu, co w moim przypadku zminimalizowało potrzebę przycinania screenshotów (patrzę na Ciebie Canva i czekam, aż funkcjonalność eksportowania obrazów z emoji znowu zacznie działać). Druga funkcjonalność, której regularnie używam są preview kolorów dla css-variables, od których aż roi się w Ionicu. Ostatnia funckcjonalność, która przyciągneła moja uwagę to komponent do konfigurowania kątów w gradiencie. Mała rzecz, a cieszy.

Now kontrolka umożliwiająca dobranie odpowiedniego kąta gradientu w chrome

Oczywiście zmian było więcej i jeśli chcecie poczytać o szczegółach, to zapraszam do źródeł. Ja natomiast zastanawiam się, czy interesują Was informacje o nowych funkcjonalnościach DevToolsów? Jakiś czas temu zostały one wypchnięte z weekly, ale może pora to zmienić? Koniecznie dajcie nam znać na Facebooku 😉.

PS. Z czystej ciekawości postanowiłem zerknąć też, co dzieje się w peletonie przeglądarek i chyba zaczynam rozumieć, dlaczego to właśnie Chrome cieszy się największą popularnością wśród deweloperów (wg. State of JS 2020). Firefox w tym samym czasie dodał wsparcie dla “pretty print” JSONów, natomiast w Safari dla deweloperów nie zmieniło się nic.

Na koniec kontrowersyjna opinia z Twittera. Mi podoba się koncepcja przerzucenia developmentu do Safari ale jakoś ciągle brakuje mi odwagi...‌‌

Źródła:

https://developers.google.com/web/updates/2021/02/devtools
https://developers.google.com/web/updates/2021/01/devtools