5 trendów technologii frontendowych w 2020

Stoisz przed pytaniem jakiej technologii frontendowej powinieneś się uczyć w 2020. Każda technologia może stracić zainteresowanie, stąd moim zdaniem warto skupić się na nowych i rosnących technologiach lub takich które są już z nami od kilku lat, ale rosną tak szybko, że warto żeby więcej deweloperów poznało dany temat. Zapraszam do lektury i dzielenia się komentarzami pod postem.

Może jeszcze zanim co nowego, to zdanie co się nie zmieni. Dalej ważna jest znajomość:

• HTML
• CSS – btw. znasz już CSS Grid? Tutaj znajdziesz krótkie wprowadzenie: CSS Grid – Co powinieneś o nim wiedzieć?
• SCSS lub LESS – z najpopularniejszą notacją nazwnictwa BEM
• Node.js – dla chętnych na pisanie backendu
• frameworki też z nami zostają: React, Angular lub Vue – jeśli chodzi o React, zastanów się czy zaczynając nowy projekt dalej potrzebujesz REDUXa, może hooki i contexty wystarczą.
• paczki i NPM też znami zostają

A teraz do sedna.

Oto lista 5 technologii frontendowych, które moim zdaniem będą na topie w 2020:

1. TypeScript

   Język TypeScript to numer jeden jeśli chodzi o szybko rosnącą technologię frontendową, być może już miałeś możliwość kodować zawodowo w TypeScript.

   Jak pokazuje Google Trends, od opublikowania TypeScript w 2012 popularność z roku na rok szybko rośnie:

   

   Google Trends TypeScript w 2020

   Kto korzysta na używaniu TypeScript? Głównie większe zespoły i to tam częściej i szybciej spotkasz wykorzystanie tej technologii. Pojedynczy programista dalej pewnie będzie korzystał po prostu z JavaScript w swoich projektach.

   A z jakimi technologiami się łączy? Wszędzie tam, gdzie jest JavaScript tam może być TypeScript, gdyż jest transpilowany do JavaScript.

   Jeśli używasz Angulara to zapewne już używasz TypeScript, gdyż jak mówi oficjalna strona: TypeScript is a primary language for Angular application development.

   Ale nie tylko Angular działa z TS. Jak najbardziej można go używać z innymi frameworkami np. React, czy Node.js – to również są idealni partnerzy.

   Chcesz dowiedzieć się więcej? Tutaj znajdziesz moje wprowadzenie do TypeScript.

2. GraphQL

   

   Google Trends TypeScript w 2020

   GraphQL to język odpytywania API o dane i manipulowania nimi. Wymyślony przez Facebook, do ich własnych potrzeb, w celu zastąpienia RESTa. Co odróżnia GraphQL od REST to to że:

   • jest tylko jeden endpoint! – w REST endpointy mnożą się jak szalone, a FB jeszcze bardziej i trzeba je pamiętać (wiem, jest Swagger, ale dalej trzeba pamiętać i śledzić co się zmieniło)

   • już domyślnie to klient(frontend) określa, które pola chce otrzymać!

     Przykład: znajdź projekt GraphQL i zwróć tylko pole version:

     {
       project(name: "GraphQL") {
         version
       }
     }

   • można pobrać dane z wielu encji w JEDNYM zapytaniu! – ponieważ w REST na wszystko jest osobny endpoint, trzeba wysyłać wiele requestów

   • tworząc API automatycznie tworzy się dokumentacja, i istnieje jeszcze fajniejsze narzędzie GraphiQL z playgroundem do testowania i walidowania zapytań

   Popularność GraphQL od 2016 również szybko rośnie:

   

   Google Trends – GraphQL w 2020

   Kto już używa GraphQL? Facebook, GitHub (GitHub GraphQL API), Pinterest, Shopify czy Cursoera.

3. Generatory stron statycznych

   To będzie kolejny rok jeszcze większej uwagi skupionej na optymalizacji czasu ładowania się strony internetowej. Stąd też dalej popularność zyskują generatory stron statycznych takie jak:

   • GatsbyJS – bardzo popularny tool tego typu, bazuje na React.js, oferuje łatwą integrację ze źródłami danych i dobrą wydajność out-of-the-box

   • Next.js – sam używam do tworzenia tej strony, Next również bazuje na React.js, także jeśli masz doświadczneie z React, to pozanie Next.js jest bardzo proste. Generowanie strony statycznej w Next to tylko dodatkowy ficzer. Głównie jest to narzędzie dające na start skonfigurowany SSR (Server Side Rendered) React.

   • Jekyll

   • Hugo – Hugo używa np. letsencrypt.org strona Linux Foundation udostępniająca darmowe cerfytikaty SSL

   Strony statyczne oferują na starcie dużo wyższą wydajność, gdyż część wygenerowania strony wykonuje się tylko raz w momencie generowania strony internetowej. Dzieje się to albo w CI/CD albo po prostu na komputerze programisty.

   Jeśli chcesz dowiedzieć się więcej o optymalizacji szybkości strony, to zachęcam do przeczytania artykułu: Optymalizacja strony www pod Google.

   Ponieważ strony statyczne wymagają najzwyklejszego serwera, który pozwala hostować pliki html, css i JS, to dobrze współgrają z usługami od Amazona: AWS S3 oraz AWS Cloudfront. Tym sposobem za około pół dolara na miesiąc, uzyskujemy rozwiązanie w chmurze – bezpiecznie i niezawodne.

   Popularność GatsbyJS oraz Next.js według Google Trends:

   

   Google Trends – GatsbyJS i Next.js w 2020

4. Szybkie i wygodne strony na urządzenia mobilne

   Google jakiś czas temu przestawiło zwoje roboty, żeby głównie patrzyły na stronę jak się ładuje i wyświetla na urządzeniach mobilnych. Wynika to z ilości ruchu z tychże urządzeń, która przewyższa desktopy.

   Jeśli chcesz być wysoko w wynikach musisz być mobile-friendly. Z tym wiąże się również szybkość ładowania na urządzeniach mobilnych. Z tego powodu, jeszcze raz zachęcam do lektury: Optymalizacja strony www pod Google.

   Jeśli chodzi o React.js warto zainteresować się technologią React Supsense.

5. Rozwiązania server-less w chmurze

   Rozwiązania chmurowe będą jeszcze popularniejsze.

   

   Google Trends – AWS w 2020

   Server-less nie oznacza, że nie ma serwera, a to że nim nie administrujemy i nie wiemy dokładnie gdzie są.AWS Lamda to usługa, w której definiujemy kod funkcji. Takie funkcje projektuje się, aby wykonywały się od milisekund do MAX kilku sekud. Przy każdym odpaleniu takiej funkcji dostajemy serwer tylko "na chwilę".

   Takie podejście się samo skaluje, gdyż dla każdego odpalenia dostaniemy "niezależny" serwer o takich samych możliwościach oraz sprawia, że nie płacimy za serwer kiedy go nie używamy, co znacznie obniża koszta.

   Ja zamierzam dalej rozszerzać swoją wiedzę w tym kierunku – polecem i Tobie. Dla "Frontenda" chyba lepiej zgłębiać najpopularniejszą chmurę – AWS, ale każda będzie lepsza niż rzadna.

Podsumowując technologie frontendowe na rok 2020

Wśród technologii frontendowych dalej, królują frameworki i JavaScript, lecz co raz więcej osób, a zwłaszcza większe zespoły będą używać ich z TypeScriptem.

Więcej backendów powstanie w GraphQL, choć sprawdzony REST dalej z nami będzie.

Dla Google liczą się urządzenia mobilne, także istotna jest optymalizacja strony, a w zasadzie optymalizacja na całego – im szybciej będzie się ładować tym lepiej. Oczywiście User Experience na stronie jest równie ważny. Jeszcze bardziej zyskają na popularności generatory stron statycznych.

Obniżając koszta, więcej architektur aplikacji będzie server-lessowych. Warto zgłębiać rozwiązania chmurowe.

Jakie są Wasze typy? Które technologie frontendowe będą popularne? Swoje typy zostawcie w komentarzach.