Frontend Thursday vol. 61 – nowa dokumentacja React.js, Selenium 4.0, Next.js 12 i Gatsby 4

1. React ma nową dokumentację 📄

Przez lata dokumentacja Reacta zdążyła już trochę zardzewiała i względem dzisiejszych standardów nie jest już uznawana za najlepszą. Zespół stojący za biblioteką jest świadomy tych problemów, i dlatego już jakiś czas temu rozpoczął inicjatywę całkowitego przepisania dokumentacji. W zeszłym tygodniu mogliśmy zobaczyć pierwsze efekty tej akcji, bo opublikowane zostały nowe React Docs w wersji Beta.

Jeśli chodzi o warstwę merytoryczną, to główną zmianą jest postawienie na React Hooks jako domyślnego paradygmatu. Oznacza to, że klasyczne klasowe podejście do komponentów zostało ograniczone do minimum, a gdy to tylko możliwe przykłady w dokumentacji wykorzystywać będą hooki.

Zmiany dotyczą również warstwy wizualnej. Nowa dokumentacja wygląda… schludnie. Prawdziwym killer-feater są interaktywne przykłady, które możemy dowolnie modyfikować. Funkcjonalność ta ma ułatwić początkującym naukę i w tej kwestii całkowicie zgadzam się z autorem dokumentacji.

Na obecny moment przepisane zostało już 70% sekcji “Learn React” i tylko 5% sekcji “API”. Ja czekam z niecierpliwością, aż nowa dokumentacja opuści betę, bo szykuje nam się godny rywal dla dokumentacji Vue.

Źródła:

https://beta.reactjs.org/

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

2. Selenium 4.0 😎

Znajdując się w bańce entuzjastów nowych technologii, konferencji i newsów ciężko nie oprzeć się wrażeniu, że Cypress na dobre wyparł Selenium z rynku. Prawda jest jednak taka, że oba te rozwiązania mocno różnią się od siebie i Selenium na razie nigdzie się nie wybiera. Jako dowód ostateczny przytoczę wydanie w minionym tygodniu wersji 4.0 tego frameworku. Jest to wydarzenie o tyle istotne, że jeśli wierzyć githubowi, to poprzednia wersja Selenium (3.141.59) została wydana prawie trzy lata temu!

Co nowego trafiło do Selenium 4.0? Oczywiście doczekaliśmy się kilku usprawnień API, jak na przykład klasa Options rozszerzająca klasę Capabilities. Nie będziemy jednak zagłębiać się tutaj w szczegóły, bo te będą zrozumiałe tylko dla stałych użytkowników Selenium i mogą różnić się w zależności od języka z którego korzystacie.

Najciekawszą i największą nową funkcjonalnością nowego wydania są bez wątpienia relatywne selektory. Od teraz możliwe znalezienie elementów poniżej, powyżej, po lewej, po prawej i w pobliżu innego elementu.

WebElement passwordArea = driver.findElement(By.id("password"));
WebElement labelOfPass = driver.findElement(with(By.tagName("label")).above(passwordArea));
System.out.println(labelOfPass.getText());

Z nowości wartych wspomnienia: drivery oparte o Chromium zostały rozszerzone o DevToolsy. Oznacza to, że możliwe będzie na przykład symulacja sieci 3G, czy ustawienie żądanej geolokalizacji.

WebDriver driver = new ChromeDriver();
DevTools devTools = ((HasDevTools)driver).getDevTools();
devTools.createSession();
devTools.send(
        Emulation.setGeolocationOverride(
                Optional.of(38.89511),
                Optional.of(-77.03637),
                Optional.of(1)
      )
);

Twórcy mocno podkreślają też całkowite przebudowanie Selenium Grid, tak aby był on przystępniejszy dla deweloperów. Dostaliśmy więc wsparcie dla Dockera i Kubernetesa oraz możliwość uruchomienia Grida w pojedynczym procesie. Na koniec wspomnijmy jeszcze, że Selenium również doczekało się nowej dokumentacji.

Źródła:

https://blog.kloia.com/selenium-4-0-released-new-features-comparison-with-previous-versions-and-more-5675bf079040
https://www.selenium.dev/documentation/
https://www.selenium.dev/blog/2021/announcing-selenium-4/

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

3. Next.js 12 i Gatsby 4 👀

Gdyby nasze przeglądy miały motywy tematyczne, to w tym tygodniu takim motywem byłby Server Sider Rendering w React. W minionym tygodniu przywitaliśmy bowiem nie jedno, a dwa duże wydania największych bibliotek do Server Side Renderingu na rynku.

Nasze podsumowanie zacznijmy od większego z graczy, czyli Next.js, który doczekał się wersji oznaczonej numerkiem 12. Najważniejszą informacją z całego wydania jest proces odświeżania aplikacji przyśpieszony trzykrotnie i proces budowania aplikacji przyśpieszony aż pięciokrotnie. Jeśli śledzicie nasze przeglądy, to pewnie spodziewacie się, jak osiągnięto taki skok wydajności. Next.js dołączył do narzędzi wokół JavaScriptu napisanych w Rust, które w 2021 roku rosną jak grzyby po deszczu.

Do nowego Next.js trafiło też kilka funkcjonalności, które ucieszą wszystkich early adapterów. Od wersji 12 wspierany będzie bowiem React 18, a do fazy alfa trafiło wsparcie dla React Server Side Components (jeśli jeszcze o nich nie słyszeliście, to więcej możecie przeczytać w 22 edycji naszego przeglądu – opublikowanej jeszcze na LinkedIn i Facebooku, aż łezka zakręciła mi się w oku).

Co dzieje się po drugiej stronie barykady? Trochę ponad miesiąc temu informowaliśmy Was o pojawieniu się bety Gatsby 4 i w minionym tygodniu doczekaliśmy się wersji stabilnej. Największą nowością `Deffered Static Generation`, czyli możliwość odłożenia generowania statycznej wersji strony do momentu, kiedy odwiedzi ją pierwszy użytkownik. Oczywiście zmian i nowości jest więcej, ale od wersji beta niewiele się zmieniło, dlatego wszystkich zainteresowanych odsyłam do źródeł i Frontend Thursday vol. 56 w którym szerzej opisywaliśmy temat.

Źródła:

https://www.gatsbyjs.com/blog/whats-new-in-gatsby-4/
https://nextjs.org/blog/next-12

A teraz zapraszamy na reklamy:

Jesteśmy podekscytowani mogąc Was wreszcie poinformować o naszym nowym projekcie 🤩.

Wraz z Earborne Media stworzyliśmy bowiem Podcast Root Cause by Vived, którego dwa pierwsze odcinki już w ten piątek będziecie mogli znaleźć na wszystkich dobrych platformach streamingowych (i YouTube też 😉).

Powiedzieć, że świat IT zmienia się dynamicznie, to jak powiedzieć, że Facebook i Google mają wielu użytkowników. Skąd programiści czerpią wiedzę? Czym obecnie żyje świat IT i jakie są najlepsze sposoby, żeby zorganizować w nim pracę?

W pierwszym sezonie dowiecie się min:

• Jaka jest optymalna ścieżka rozwoju programisty
• Kiedy AI zastąpi Code Monkeys?
• Czego jeszcze nie powiedzieliśmy o Blockchainie
• Czy to już czas na DevOps w Twojej firmie?
• Turkus-Srurkus…

O zarobkach programistów mówi się bardzo dużo, albo unika tematu. Czy system wynagrodzeń w IT jest dobrze skonstruowany? I od jakiego momentu pełni rolę czynnika higienicznego.

Premiera już w piątek o godzinie 11:00, a już dziś zapraszamy do wzięcia udziału w wydarzeniu na naszym facebookowym Fanpage. Tam też poinformujemy o linkach do poszczególnych kanałów 🎉