Ta lekcja jest w bazie eduweb
Zaloguj się kontem z dostępem albo wykup dostęp do bazy, żeby obejrzeć wideo.
Lekcja 40/ 42Dobre praktyki
Nuxt.js: Dobre praktyki
Czego się nauczysz
- Praktyczny kurs, praktyczny projekt: klon Wikipedii
- Migracja statycznej strony HTML do ekosystemu Nuxt
- Tworzenie klasycznych komponentów VueJS
- Przygotowanie własnego API i konsumpcja zewnętrznych endpointów
- Tworzenie i wykorzystanie modułów i pluginów do Nuxt
- SSR - Server Side Rendering
- Programowanie z duchem idei progressive enhancement
- Animacje podczas przejść między podstronami
- Wsparcie dla różnych wersji językowych
- Niebanalne funkcjonalności aplikacji
- Optymalizacja dla wyszukiwarek internetowych
Nuxt.js - Prosty i Nowoczesny Framework dla Vue.js
Programiści specjalizujący się w JavaScript już dawno przestali być postrzegani jako tylko i wyłącznie Front-End developerzy. JavaScript po stronie serwera jest już z nami ponad 10 lat za sprawą pierwszych wersji NodeJS.
W świecie gdzie frameworki takie jak React, Angular, Svelte czy VueJS są podstawą tworzenia współczesnych aplikacji internetowych, rozwiązania pozwalające pojedynczemu developerowi stworzenie pełnoprawnej aplikacji zaczęły kiełkować.
Tym właśnie jest NuxtJS - intuicyjny framework dla VueJS, który pozwoli Ci tworzyć zaawansowane konfiguracje Twoich wydajnych aplikacji internetowych, bazując na wiedzy którą już posiadasz z VueJS.
Praktyczny kurs - praktyczny projekt
W tym projekcie tworzyć będziemy praktyczny projekt - klona Wikipedii! Minipedia pobierze dane z prawdziwego źrodła danych, zewnętrznego API WikiMedia - będzie łudząco podobna do oryginału oraz współdzieliła najważniejsze funkcjonalności, takie jak dostarczanie treści w różnych wersjach językowych, możliwość wyszukiwania artykułów, czy pobieranie najpopularniejszych wpisów dla danego języka. Stworzymy także podstronę wyświetlającą za każdym razem losowy artykuł w danej wersji językowej.Zobaczysz też, jak dokonać migracji ze statycznej strony HTML na Nuxt - oraz jak tworzyć przykładowe komponenty podczas tego procesu.Dzięki temu wszystkiemu, dowiesz się jak wykorzystać nabytą wiedzę w praktyce.
Renderowanie po stronie serwera
Dzięki Nuxtowi dowiesz się jak optymalizować Twoje strony www z duchem idei progressive enhancement, dostarczając coraz to lepsze doświadczenia dla swoich użytkowników oraz tworząc aplikację napisaną w 100% w JavaScript, która będzie działała nawet wtedy, gdy użytkownik jawnie wyłączy go w przeglądarce! To wszystko za SSR (Server Side Rendering), dzięki któremu treści będą gotowe do konsumpcji już przy wstępnej, pierwszej odpowiedzi z serwera WWW.Oczywiście, ma to swoje implikacje na wydajność naszej aplikacji - sprawiając że Lighthouse czy optymalizacja pod SEO staje się coraz prostsza!
Najciekawsze pluginy i moduły
Czymże jest ekosystem danego frameworka bez wsparcia społeczności! Dlatego podczas tego kursu nauczysz się instalować i wykorzystywać różne pluginy i moduły, które zaoszczędzą Ci dużo czasu. Dowiesz się też, jak tworzyć własne moduły - które rozszerzą działanie Twojej aplikacji Nuxt w sposób czysty i zarządzalny.
Tworzenie API
Nuxt jest frameworkiem w którym pracujemy zarówno po stronie front-endu, jak i back-endu. W związku z czym, stworzymy swoje własne API (bazujące na express.js) które będzie pewnego rodzaju pośrednikiem pomiędzy API WikiMedia oraz Twoją aplikacją internetową.
Routing w Nuxt
W tym kursie, dowiesz się także jak tworzyć swoje własne Middleware'y - czyli fragmenty kodu wywoływane pomiędzy przechodzeniem między stronami, czy podczas innych zapytań HTTP.Dodatkowo, zobaczysz jakie narzędzia daje nam Nuxt aby tworzyć progresywne aplikacje internetowe, oferując wsparcie dla takich funkcjonalności jak np. animacje między przejściami pojedynczymi podstronami naszego serwisu.
Lokalizacja i tłumaczenie danych
Tajemnicze i18n - czyli numeronim odpowiadający angielskiemu słowu "internalisation" - odnosi się w kontekście web developmentu do tłumaczenia danych na różne języki. Podczas realizacji projektu Minipedii, nie tylko wykorzystamy standardowe podejście do tłumaczeń stałych elementów naszego interfejsu użytkownika, ale także przetłumaczymy same dane zwracane z API, wykorzystując inną wersję językową w zależności od preferencji użytkownika!
Optymalizacja dla wyszukiwarek internetowych
Poznasz też kilka ciekawych pluginów i rozwiązań dotyczących optymalizacji pod SEO - poza faktem, że podejście spełniające intencje użytkownika jest najlepszym, co możemy zrobić - pluginy generujące nam mapę stron automatycznie na podstawie zadeklarowanych przez nas podstron, czy generatory danych jsonld pomogą w pozycjonowaniu Twojej wydajnej aplikacji jeszcze wyżej w hierarchii wyszukiwarek.
Dla kogo jest ten kurs?
Aby móc efektywnie korzystać z tego kursu, powinieneś posiadać średnio zaawansowaną wiedzę z kategorii Front End, z naciskiem na umiejętność posługiwania się JavaScriptem oraz solidne podstawy NodeJS. Konieczna jest znajomość Vue, jako że Nuxt jest frameworkiem korzystającym z niego u swoich podstaw. Jeśli czujesz się dość swobodnie w wyżej wymienionych aspektach web developmentu, ten kurs będzie idealny dla Ciebie.
Kurs Nuxt.js
13 rozdziałów42 lekcje7h 2min
Wstęp
12min
- Wprowadzenie1min(zablokowana)
- W tym kursie4min(zablokowana)
- Czym jest Nuxt6min(zablokowana)
Fundamenty Nuxta
41min
- Tworzenie nowego projektu10min(zablokowana)
- Struktura aplikacji11min(zablokowana)
- Zmienne środowiskowe13min(zablokowana)
- Konfiguracja6min(zablokowana)
Migracja do Nuxta
21min
- Cykl życia aplikacji6min(zablokowana)
- Przenoszenie statycznej strony do nuxta11min(zablokowana)
- Tworzenie layoutów strony4min(zablokowana)
Tworzenie standardowych komponentów Vue
44min
- Sekcja treści11min(zablokowana)
- Spis treści14min(zablokowana)
- Główne informacje19min(zablokowana)
Pluginy i moduły
20min
- Rozszerzenia do Vue8min(zablokowana)
- Moduły Nuxt12min(zablokowana)
Tworzenie API
37min
- JavaScript po stronie serwera3min(zablokowana)
- Server middleware10min(zablokowana)
- Połączenia z innymi źródłami danych9min(zablokowana)
- Integracja z wikijs16min(zablokowana)
Renderowanie po stronie serwera
1h 3min
- Wykorzystanie Vuexa11min(zablokowana)
- Async data12min(zablokowana)
- Routing middleware16min(zablokowana)
- Podpinanie komponentów pod dane z serwera10min(zablokowana)
- Aktualizacja głównych informacji14min(zablokowana)
Routing w Nuxt
23min
- Nuxtowe linki5min(zablokowana)
- Przejścia między podstronami8min(zablokowana)
- Dynamiczne podstrony10min(zablokowana)
Programowe użycie nuxta
18min
- Generowanie statycznych plików7min(zablokowana)
- Start aplikacji z innego entrypointu11min(zablokowana)
Lokalizacja danych
1h 1min
- Tłumaczenie stałych elementów interfejsu12min(zablokowana)
- Implementacja różnych wersji językowych11min(zablokowana)
- Lista dostępnych języków21min(zablokowana)
- Tłumaczenie na poziomie API17min(zablokowana)
Udoskonalanie projektu Minipedii
58min
- Odnośniki do prawdziwego źródła danych7min(zablokowana)
- Strona ładująca losowe artykuły14min(zablokowana)
- Tworzenie strony głównej19min(zablokowana)
- Wyszukiwarka po stronie18min(zablokowana)
Optymalizacja dla wyszukiwarek
21min
- Sitemap generation5min(zablokowana)
- SEO przy użyciu JSONLD Schema9min(zablokowana)
- Dobre praktyki7min(zablokowana)
Zakończenie
5min
- Co dalej - Vue3 i Nuxt34min(zablokowana)
- Podziękowanie1min(zablokowana)
Ten kurs jest w bazie eduweb
Dostęp do wszystkich kursów z bazy eduweb za 199 zł/mies.
Autor kursu
Bio
Cześć! Nazywam się Wojtek i moja obecna rola to Full Stack Engineer - tworzeniem stron zajmuję się już od ponad dziesięciu lat. Jeśli miałbym wskazać moją pasję, to zdecydowanie byłoby to programowanie w technologiach webowych i dalsze szerzenie się wiedzą :)
Możesz kojarzyć mnie z kanału Koduje na Youtube, gdzie stworzyłem ponad 50 darmowych poradników dotyczących różnych zagadnień z Front-Endu, czy jako głównego koordynatora cyklicznych spotkań Meet.js Warszawa. Poza tym jestem też członkiem programu Mozilla TechSpeakers - technologie open-source, ich tworzenie oraz przemowy publiczne również nie są mi obce. Od czasu do czasu prowadzę również indywidualne zajęcia dla osób poszukujących swojej pierwszej pracy jako Front-End developer.
Uwielbiam tematykę dostępności sieci - o której świadomość, zwłaszcza na polskim rynku - jest dosyć znikoma. Interesuję się również IoT oraz VR (❤️) czy Game-Developmentem, również w JavaScript!
Uważam, że nauczanie jest zdecydowanie najlepszą metodą, by poszerzać swoje horyzonty i dalej się rozwijać!
https://koduje.pl