{"id":9962,"date":"2022-06-02T16:08:37","date_gmt":"2022-06-02T14:08:37","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-90-tworca-solidjs-dolacza-do-netlify-i-nowosci-z-microsoft-build\/"},"modified":"2022-09-19T13:16:27","modified_gmt":"2022-09-19T11:16:27","slug":"frontend-thursday-vol-90-tworca-solidjs-dolacza-do-netlify-i-nowosci-z-microsoft-build","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-90-tworca-solidjs-dolacza-do-netlify-i-nowosci-z-microsoft-build\/","title":{"rendered":"Frontend Thursday vol. 90 – Tw\u00f3rca SolidJS do\u0142\u0105cza do Netlify i nowo\u015bci z Microsoft Build"},"content":{"rendered":"\n

1. Tw\u00f3rca SolidJS do\u0142\u0105cza do Netlify<\/h2>\n\n\n\n

SolidJS to framework, kt\u00f3ry troch\u0119 niespodziewanie przedar\u0142 si\u0119 do JavaScriptowego \u201cmainstreamu\u201d. Kiedy rok temu pojawi\u0142y si\u0119 pierwsze wzmianki na jego temat zgodnie z dziennikarskim obowi\u0105zkiem podzieli\u0142em si\u0119 nimi z Wami w 44 edycji naszego przegl\u0105du<\/a>. Przyznam si\u0119 szczerze, \u017ce potraktowa\u0142em go jako kolejn\u0105 chwilow\u0105 ciekawostk\u0119 i nie przy\u0142o\u017cy\u0142em do niego wi\u0119kszej wagi – jak si\u0119 p\u00f3\u017aniej okaza\u0142o nies\u0142usznie. Je\u015bli jeste\u015bcie ciekawi dlaczego SolidJS podbi\u0142 serca deweloper\u00f3w i dlaczego Virtual DOM ju\u017c dawno jest passe, to odsy\u0142am Was do 79 edycji naszego przegl\u0105du<\/a>, gdzie Artur podda\u0142 SolidJS dog\u0142\u0119bnej analizie.<\/p>\n\n\n

\n
\"\"\/<\/figure><\/div>\n\n\n

Wi\u0119kszo\u015b\u0107 artyku\u0142\u00f3w w sieci wspominaj\u0105c o SolidJS odnosi si\u0119 do wynik\u00f3w ankiety State of JS 2021 w kategorii zadowolenia deweloper\u00f3w. SolidJS wraz ze Svelte zaj\u0105\u0142 w niej egzekwo pierwsze miejsce – oba frameworki otrzyma\u0142y 90% pozytywnych odpowiedzi. Ja niestety chcia\u0142bym podda\u0107 lekkiej polemice ten og\u00f3lny optymizm. Do korzystania z SolidJS przyzna\u0142o si\u0119 tylko 3% respondent\u00f3w ankiety, czyli oko\u0142o 250 os\u00f3b. Oznacza to, \u017ce zadowolonych z SolidJS by\u0142o oko\u0142o 225 deweloper\u00f3w. Dla por\u00f3wnania w przypadku Svelte by\u0142o to prawie 1500 os\u00f3b, a w przypadku Reacta ponad 5000 os\u00f3b.<\/p>\n\n\n

\n
\"\"\/
BTW. Je\u015bli szukacie z\u0142ych wykres\u00f3w na podstawie, kt\u00f3rych mo\u017cna wyci\u0105gn\u0105\u0107 z\u0142e wnioski to polecam ten artyku\u0142<\/a>.<\/figcaption><\/figure><\/div>\n\n\n

Nie oznacza to natomiast, \u017ce SolidJS wypad\u0142 w State of JS s\u0142abo. Statystyk\u0105, kt\u00f3ra szczeg\u00f3lnie robi na mnie wra\u017cenie jest ch\u0119\u0107 do nauczenia si\u0119 frameworku w nadchodz\u0105cym roku. W tej kategorii SolidJS zaj\u0105\u0142 solidne drugie miejsce z wynikiem 56% (ponad 4000 respondent\u00f3w). Nawet je\u015bli tylko garstka deweloper\u00f3w mia\u0142a ju\u017c okazj\u0119 pobawi\u0107 si\u0119 SolidJS, to zdecydowanie zdoby\u0142 on rozg\u0142os niezb\u0119dny do dalszego rozwoju.<\/p>\n\n\n

\n
\"\"\/<\/figure><\/div>\n\n\n

Rozg\u0142os jaki SolidJS w \u015brodowisku nie pozosta\u0142 bez echa. W minionym tygodniu Netlify og\u0142osi\u0142o, \u017ce przyjmie w swoje szeregi Ryana Carniato – tw\u00f3rc\u0119 zyskuj\u0105cego na popularno\u015bci frameworku. Ojciec SolidJS b\u0119dzie m\u00f3g\u0142 w pe\u0142nym wymiarze godzin po\u015bwi\u0119ci\u0107 si\u0119 pracy nad swoim frameworkiem. Na razie nie pojawi\u0142a si\u0119 konkretna roadmapa dla SolidJS, ale licz\u0119 na to, \u017ce w zbli\u017caj\u0105cych si\u0119 miesi\u0105cach b\u0119d\u0119 mia\u0142 okazj\u0119 cz\u0119\u015bciej do niego wraca\u0107.<\/p>\n\n\n\n

Na zako\u0144czenie chcia\u0142bym zwr\u00f3ci\u0107 jeszcze uwag\u0119 na ciekawy trend, kt\u00f3ry mo\u017cna ostatnio zaobserwowa\u0107. Ray Carniato nie jest jedynym deweloperem, kt\u00f3rego wi\u0119ksza firma przygarn\u0119\u0142a pod skrzyd\u0142a wraz z rozwijanym przez siebie frameworkiem. Kilka tygodni temu Vercel og\u0142osi\u0142 zatrudnienie Richa Harissa, tw\u00f3rcy Svelte. Szczerze przyznam, \u017ce taka forma rozwoju jest ciekaw\u0105 alternatyw\u0105 dla tworzenia startup\u00f3w wok\u00f3\u0142 projekt\u00f3w Open Source lub r\u00f3wnie popularnych bibliotek utrzymywanych z datk\u00f3w spo\u0142eczno\u015bci.<\/p>\n\n\n\n

\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n

https:\/\/dev.to\/ryansolid\/when-netlify-asks-you-to-full-time-oss-you-say-yes-5ccf<\/a>
https:\/\/vercel.com\/blog\/vercel-welcomes-rich-harris-creator-of-svelte<\/a>
https:\/\/www.netlify.com\/blog\/announcing-serverless-compute-with-edge-functions\/<\/a>
https:\/\/www.tekkiwebsolutions.com\/blog\/jamstack-web-development\/<\/a><\/p>\n\n\n\n

2. Nowo\u015bci z Microsoft Build<\/h2>\n\n\n\n

2.1 Ostateczne odliczanie do ko\u0144ca IE11<\/h3>\n\n\n\n

O tym, \u017ce Internet Explorer umiera wiedzieli\u015bmy ju\u017c od dawna. Najpierw tw\u00f3rcy framework\u00f3w i bibliotek masowo zacz\u0119li rezygnowa\u0107 ze wsparcia dla IE11, a p\u00f3\u017aniej sam Microsoft og\u0142osi\u0142, \u017ce nie zamierza ju\u017c d\u0142u\u017cej wspiera\u0107 starszego brata Edge. Oczywi\u015bcie zmiana nie mog\u0142a nast\u0105pi\u0107 od razu, wi\u0119c deweloperzy z Redmond wyznaczyli odleg\u0142\u0105 dat\u0119 16 czerwca 2022. Jak si\u0119 okazuje, czas leci szybciej ni\u017c mi si\u0119 wydawa\u0142o i oficjalny pogrzeb IE11 odb\u0119dzie si\u0119 ju\u017c za nieca\u0142e 2 tygodnie.<\/p>\n\n\n

\n
\"\"\/
No dobra, z tym oficjalnym pogrzebem to troch\u0119 koloryzowane (ale na swoj\u0105 obron\u0119 powiem, \u017ce Microsoft sam prowadzi podobn\u0105 narracj\u0119). IE11 nie b\u0119dzie ju\u017c wspierany na standardowym Windows 10, ale w wersjach serwerowych b\u0119dzie \u017cy\u0107 jeszcze do 2029 roku.<\/figcaption><\/figure><\/div>\n\n\n

Je\u015bli w Waszej firmie nadal wykorzystywany jest IE11 to\u2026 jak najszybciej zacznijcie szuka\u0107 sobie jakiej\u015b lepszej posady. A tak zupe\u0142nie serio, to Microsoft przygotowa\u0142 dla takich firm specjalny tryb w Microsoft Edge, kt\u00f3ry umo\u017cliwia emulacj\u0119 IE11. Je\u015bli mieli\u015bcie okazj\u0119 pobawi\u0107 si\u0119 t\u0105 emulacj\u0105 to koniecznie dajcie zna\u0107 jak to dzia\u0142a w praktyce (niestety wersja Edge na macOS nie posiada tej funkcjonalno\u015bci) <\/p>\n\n\n\n

Koniec Internet Explorer oznacza r\u00f3wnie\u017c powoln\u0105 \u015bmier\u0107 silnika Chakra. Na konferencji Microsoft og\u0142osi\u0142, \u017ce WebView2, czyli komponent umo\u017cliwiaj\u0105cy uruchomienie webowej aplikacji wewn\u0105trz C#, trafi do kolejnych framework\u00f3w i bibliotek. Zmiana silnika JavaScript spowodowa\u0142a spore optymalizacje wydajno\u015bci – kod wykonuje si\u0119 nawet 85% szybciej przy mniejszym zu\u017cyciu zar\u00f3wno procesora jak i pami\u0119ci RAM.<\/p>\n\n\n\n

Spor\u0105 cz\u0119\u015b\u0107 swojej prezentacji Microsoft po\u015bwi\u0119ci\u0142 r\u00f3wnie\u017c PWA. Te od jakiego\u015b czasu dost\u0119pne s\u0105 w Microsoft Store, a teraz dosta\u0142y r\u00f3wnie\u017c swoj\u0105 specjaln\u0105 zak\u0142adk\u0119 wewn\u0105trz Microsoft Edge. To nie jedyny ruch rozszerzaj\u0105cy gam\u0119 aplikacji na Windows. Na tej samej konferencji, gigant z Redmond og\u0142osi\u0142, \u017ce dogada\u0142 si\u0119 z gigantem z Seattle (Amazon) i w swoim sklepie umo\u017cliwia\u0142 b\u0119dzie wyszukiwanie aplikacji Androidowych (kt\u00f3re ju\u017c od jakiego\u015b czasu mo\u017cna uruchamia\u0107 na Windows 11)<\/p>\n\n\n\n

2.2 Xamarin nie \u017cyje, niech \u017cyje .NET MAUI<\/h3>\n\n\n\n

Ostatnimi czasy panuje niesamowita moda na tworzenie mi\u0119dzyplaformowych framework\u00f3w. Chyba ka\u017cda wi\u0119ksza firma walczy aktualnie o kawa\u0142ek tego tortu. Google promuje Fluttera (kt\u00f3ry kilka tygodni temu przy okazji Google I\/O otrzyma\u0142 stabilne wsparcie dla macOS i Linuxa), Facebook wspiera React Native (kt\u00f3rego wersj\u0119 na macOS i Windows rozwija Microsoft), a JetBrains rozwija Jetpack Compose (w kt\u00f3rym stabilne wsparcie dla desktopowej wersji przesun\u0119\u0142o si\u0119 troch\u0119 w czasie, ze wzgl\u0119du na sytuacj\u0119 za wschodni\u0105 granic\u0105). Nawet \u015brodowisko Open Source ma swojego Electrona (i nie przekonacie mnie, \u017ce Slack czy Figma to s\u0142abo dzia\u0142aj\u0105ce aplikacje). Do tego zacnego grona do\u0142\u0105cza r\u00f3wnie\u017c Microsoft, kt\u00f3ry przy okazji swojej konferencji opublikowa\u0142 .NET Multi-platform App UI.<\/p>\n\n\n

\n
\"\"\/
Wszyscy maj\u0105 ochot\u0119 na kawa\u0142ek tortu, jakim jest posiadanie mi\u0119dzyplaformowego frameworku. Ja natomiast troch\u0119 pow\u0105tpiewam, czy na rynku aby na pewno jest tak popyt na tego typu technologi\u0119, czy te\u017c jest to troch\u0119 sztuczne pompowanie balonika<\/figcaption><\/figure><\/div>\n\n\n

W notatce Microsoftu dotycz\u0105cej ich nowego dziecka pr\u00f3bowa\u0142em doczyta\u0107 si\u0119, co ma wyr\u00f3\u017cni\u0107 je na tle dost\u0119pnych ju\u017c rozwi\u0105za\u0144. Szczerze m\u00f3wi\u0105c, mnie nie przekona\u0142y argumenty giganta z Redmont. Nag\u0142\u00f3wk\u00f3w takich jak \u201c\u0142atwa personalizacja\u201d, \u201cwydajno\u015b\u0107\u201d czy \u201cniesamowity developer experience\u201d nie potrafi\u0119 traktowa\u0107 na powa\u017cnie. Jedyn\u0105 ciekawostk\u0105, kt\u00f3r\u0105 uda\u0142o mi si\u0119 wygrzeba\u0107, jest wsparcie dla systemu operacyjnego Tizen. Je\u015bli chcecie pisa\u0107 aplikacje na Smart TV, to mo\u017ce rzeczywi\u015bcie jest to ciekawa opcja. <\/p>\n\n\n\n

\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n

https:\/\/news.microsoft.com\/build-2022-book-of-news\/<\/a>
https:\/\/devblogs.microsoft.com\/dotnet\/introducing-dotnet-maui-one-codebase-many-platforms\/<\/a>
https:\/\/blogs.windows.com\/msedgedev\/2022\/05\/24\/microsoft-edge-build-2022\/<\/a><\/p>\n\n\n\n

3. Animacje przej\u015b\u0107 mi\u0119dzy statycznymi stronami<\/h2>\n\n\n\n

Statyczne, renderowane po stronie serwera aplikacje wracaj\u0105 ostatnio do \u0142ask i trendy takie jak HTML Over Wire<\/a> s\u0105 tego najlepszym przyk\u0142adem. Jednym z argument\u00f3w obro\u0144c\u00f3w podej\u015bcia Single Page Applications by\u0142y jak do tej pory animacje przej\u015b\u0107 mi\u0119dzy stronami. Dotychczasowe API przegl\u0105darek nie umo\u017cliwia kontroli ani nad znikaj\u0105c\u0105 stron\u0105, ani nad t\u0105 kt\u00f3ra zaraz j\u0105 zast\u0105pi. Oznacza to, \u017ce przygotowanie jakichkolwiek animacji jest niemo\u017cliwe. Google pracuje jednak nad rozwi\u0105zaniem tego problemu i pierwsze efekty mo\u017cecie zobaczy\u0107 w najnowszym Google Chrome Canary 101.<\/p>\n\n\n\n

Aby skorzysta\u0107 z nowego API, zamiast ze standardowego sposobu nawigacji, nale\u017cy odpowiednio wykorzysta\u0107 nowe metody dodane do obiektu document.<\/p>\n\n\n\n

const transition = document.createDocumentTransition();\nawait transition.start(...);<\/code><\/pre>\n\n\n\n
Po wywo\u0142aniu kodu powy\u017cej przegl\u0105darka wykona dwa screenshoty: jeden strony znikaj\u0105cej z ekranu i drugi strony, kt\u00f3ra za chwil\u0119 ma si\u0119 pojawi\u0107 na ekranie . Nast\u0119pnie przy pomocy standardowych animacji CSS mo\u017cemy zaimplementowa\u0107 nasz\u0105 w\u0142asn\u0105 tranzycj\u0119. O powsta\u0142ej w ten spos\u00f3b strukturze mo\u017cna my\u015ble\u0107 w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n\n\n\n
<!-- ::page-transition=container(root)  -->\n<transition-container>\n  <!-- ::page-transition-image-wrapper(root)  -->\n  <image-wrapper>\n    <!-- ::page-transition-outgoing-image(root) -->\n    <outgoing-image \/>\n    <!-- ::page-transition-incoming-image(root) -->\n    <incoming-image \/>\n  <\/>\n<\/><\/code><\/pre>\n\n\n\n
Prosta animacja fadeIn przy u\u017cyciu nowego API wygl\u0105da nast\u0119puj\u0105co:<\/p>\n\n\n\n
@keyframes fadein {...}\n\n@keyframes fadeout {...}\n\n::page-transition-outgoing-image(root) {\n    animation: fadeout 2s;\n}\n::page-transition-incoming-image(root) {\n    animation: fadein 2s;\n}<\/code><\/pre>\n\n\n\n
Wykorzystuj\u0105c opisany powy\u017cej mechanizm nie jeste\u015bmy w stanie zaimplementowa\u0107 zaawansowanych animacji (takich jak na przyk\u0142ad miniaturka rozszerzaj\u0105ca si\u0119 do pe\u0142nego wideo). Na szcz\u0119\u015bcie Google pomy\u015bla\u0142 te\u017c o takich przypadkach i umo\u017cliwia podzielenie strony na dowolne mniejsze cz\u0119\u015bci, a nast\u0119pnie animowanie ich osobno. W takim wypadku zamiast screenshotu ca\u0142ej strony, b\u0119dziemy mie\u0107 do czynienia z screenshotem tylko jej fragmentu. Aby wydzieli\u0107 kawa\u0142ek strony nale\u017cy do jego styli doda\u0107 `page-transition-tag: <part-name>;`, a nast\u0119pnie odwo\u0142a\u0107 si\u0119 do nich za pomoc\u0105 odpowiednich pseudo element\u00f3w.<\/p>\n\n\n
\n
\"\"\/
Przyk\u0142ad animacji jakie b\u0119dzie mo\u017cna tworzy\u0107 przy u\u017cyciu nowego API<\/figcaption><\/figure><\/div>\n\n\n
.video-miniature {\n  page-transition-tag: video-miniature;\n  contain: paint;\n}<\/code><\/pre>\n\n\n\n
@keyframes fadein {...}\n\n@keyframes fadeout {...}\n\n@keyframes scaleUp {...}\n\n@keyframes showAtTheEnd {...}\n\n::page-transition-outgoing-image(root) {\n    animation: fadeout 2s;\n}\n::page-transition-incoming-image(root) {\n    animation: fadein 2s;\n}\n\n::page-transition-outgoing-image(video-miniature) {\n    animation: scaleUp 2s;\n}\n::page-transition-incoming-image(video-miniature) {\n    animation: showAtTheEnd 2s;\n}<\/code><\/pre>\n\n\n\n
Na razie nie wiadomo kiedy i czy nowe API trafi do zwyk\u0142ej wersji Chrome. Nawet wersja dostarczona w Canary nie jest w pe\u0142ni kompletna, bo wspiera tylko Single Page Application\u2026 Trzymam jednak kciuki za standaryzacj\u0119 propozycji Google, bo mo\u017cliwo\u015bci jakie otwiera nowe API wygl\u0105daj\u0105 naprawd\u0119 ciekawie.<\/p>\n\n\n\n
PS: Je\u015bli macie odrobin\u0119 wi\u0119cej czasu to gor\u0105co polecam 15 minutowe wideo na temat nowego API z ostatniego Google I\/O. Jake Archibald t\u0142umaczy niuanse nowego API zdecydowanie lepiej ni\u017c ja.<\/p>\n\n\n\n
\n