Kurs Nuxt.js

Wprowadzenie

Koszyk Koszyk
  • Opis
  • Recenzje
  • Autor
  • Transkrypt
  • Pytania i odpowiedzi
  • QA

4 ocen

Wprowadzenie

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.

  1. Praktyczny kurs, praktyczny projekt: klon Wikipedii
  2. Migracja statycznej strony HTML do ekosystemu Nuxt
  3. Tworzenie klasycznych komponentów VueJS
  4. Przygotowanie własnego API i konsumpcja zewnętrznych endpointów
  5. Tworzenie i wykorzystanie modułów i pluginów do Nuxt
  6. SSR - Server Side Rendering
  7. Programowanie z duchem idei progressive enhancement
  8. Animacje podczas przejść między podstronami
  9. Wsparcie dla różnych wersji językowych
  10. Niebanalne funkcjonalności aplikacji
  11. Optymalizacja dla wyszukiwarek internetowych

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.

Dlaczego wybrać właśnie ten kurs?

  1. Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję ze zdobytej wiedzy!
  2. Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i pracować efektywniej.
  3. Uczysz się na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.
1 godzina 12 minut

Vue 3

Przegląd nowości

Vue.js w wersji 3 to nadal znane i lubiane Vue, ale w świetnej, nowej, bardziej wydajnej odsłonie. Prace nad tym frameworkiem trwały ponad 2 lata. Framework został napisany całkowicie od nowa - dzięki temu jest znacznie bardziej modułowy i zapewnia wyraźnie większą wydajność. Z zewnątrz nie zmieniło się jednak tak wiele. Nowa odsłona to wynik kompromisu pomiędzy dodanymi nowościami, niekompatybilnymi zmianami, a zachowaniem natury Vue 2, którą pokochały miliony designerów i deweloperów. W materiale tym poznasz wszystkie najważniejsze nowości i zmiany jakie zawitały w oficjalnym wydaniu Vue 3.0.0!

Piotr Palarz

1 godzina 24 minuty

Mini CMS z Vue

Vue.js to jeden z najpopularniejszych framerowków JavaScriptowych ostatnich lat. Z pomocą tego uniwersalnego narzędzia rozszerzysz swoją stronę internetową o dynamiczny interfejs lub od podstaw stworzysz nawet rozbudowaną aplikację internetową. Pracę z Vue.js omówiliśmy już dokładnie w dwóch kursach: <a href="http://eduweb.pl/kursy/javascript/vuejs-od-podstaw.html">Vue.js od Podstaw</a> oraz <a href="http://eduweb.pl/kursy/javascript/vuejs-techniki-zaawansowane.html">Vue.js Techniki Zaawansowane</a>. <br><br> W warsztacie tym skupimy się natomiast na napisaniu z użyciem tego frameworka praktycznej aplikacji, a będzie to mini system CMS w formie aplikacji SPA (Single Page Application), bazujący na stworzonym wcześniej API typu REST. Zobaczysz w jaki sposób stworzyć aplikację po stronie klienta, która komunikować się będzie z serwerem, a także generować cały widok. Jej możliwości to wyświetlanie wpisów, możliwość ich dodawania, edycji czy usuwania. Dodatkowo zaimplementujemy możliwość logowania z użyciem JWT (JSON Web Tokens). <br><br> Na warsztat zaprasza Piotr Palarz.

Piotr Palarz

5 godzin 11 minut

Kurs Vue.js

Techniki Zaawansowane

Vue.js to obok React i Angular najpopularniejszy framework do tworzenia nowoczesnych aplikacji internetowych. Jest jednak coś, co wyróżnia go na tle konkurentów - niski próg wejścia! Oznacza to, że nie musisz posiadać zaawansowanej wiedzy lub znać innych frameworków JavaScript, aby rozpocząć swoją przygodę z zupełnie innym podejściem, do tworzenia interfejsów użytkownika napędzanych danymi.

Piotr Palarz

7 godzin 6 minut

Kurs Vue.js

od Podstaw

Vue.js to obok React i Angular najpopularniejszy framework do tworzenia nowoczesnych aplikacji internetowych. Jest jednak coś, co wyróżnia go na tle konkurentów - niski próg wejścia! Oznacza to, że nie musisz posiadać zaawansowanej wiedzy lub znać innych frameworków JavaScript, aby rozpocząć swoją przygodę z zupełnie innym podejściem, do tworzenia interfejsów użytkownika napędzanych danymi.

Piotr Palarz

Autor: Wojciech Połowniak

Sr. Fullstack Engineer

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

https://koduje.pl
https://twitter.com/wopolow

Ten kurs nie posiada jeszcze transkryptu. Choć bardzo się staramy, wygenerowanie transkryptów do wszystkich kursów jest bardzo czasochłonne. W wielu przypadkach wymaga zaangażowania drogiego oprogramowania i godzin pracy przy poprawianiu transkryptu tak, aby był on możliwie jak najlepszy.

Zależy nam na tym, aby przygotować transkrypty do wszystkich naszych treści. To jedyny sposób dla osób niedosłyszących, aby mogły wygodnie uczyć się technologii. Poza tym, transkrypty ułatwiają skanowanie kursu w poszukiwaniu informacji i jego indeksowanie.

Szukamy osób, które mogłyby nam pomóc w poprawianiu transkryptów. Jeśli masz chwilę wolnego czasu i interesuje Cię dany kurs, w zamian za taką pomoc chętnie udostępnimy Ci wybrany materiał. Wyślij swoje zgłoszenie tutaj, jeśli możesz pomóc nam rozwijać platformę.

  • Informacje
  • Lekcje

Autor: Wojciech Połowniak

Czas: 7 godzin 2 minuty

Wersja: -

Aktualizacja: 28.10.2021

  • Certyfikat w ramach Ścieżki
  • Dostęp z urządzeń przenośnych
  • Licencje dla firm i szkół
Podaruj w prezencie

Wstęp

  • Wprowadzenie

  • W tym kursie

  • Czym jest Nuxt

Fundamenty Nuxta

  • Tworzenie nowego projektu

  • Struktura aplikacji

  • Zmienne środowiskowe

  • Konfiguracja

Migracja do Nuxta

  • Cykl życia aplikacji

  • Przenoszenie statycznej strony do nuxta

  • Tworzenie layoutów strony

Tworzenie standardowych komponentów Vue

  • Sekcja treści

  • Spis treści

  • Główne informacje

Pluginy i moduły

  • Rozszerzenia do Vue

  • Moduły Nuxt

Tworzenie API

  • JavaScript po stronie serwera

  • Server middleware

  • Połączenia z innymi źródłami danych

  • Integracja z wikijs

Renderowanie po stronie serwera

  • Wykorzystanie Vuexa

  • Async data

  • Routing middleware

  • Podpinanie komponentów pod dane z serwera

  • Aktualizacja głównych informacji

Routing w Nuxt

  • Nuxtowe linki

  • Przejścia między podstronami

  • Dynamiczne podstrony

Programowe użycie nuxta

  • Generowanie statycznych plików

  • Start aplikacji z innego entrypointu

Lokalizacja danych

  • Tłumaczenie stałych elementów interfejsu

  • Implementacja różnych wersji językowych

  • Lista dostępnych języków

  • Tłumaczenie na poziomie API

Udoskonalanie projektu Minipedii

  • Odnośniki do prawdziwego źródła danych

  • Strona ładująca losowe artykuły

  • Tworzenie strony głównej

  • Wyszukiwarka po stronie

Optymalizacja dla wyszukiwarek

  • Sitemap generation

  • SEO przy użyciu JSONLD Schema

  • Dobre praktyki

Zakończenie

  • Co dalej - Vue3 i Nuxt3

  • Podziękowanie

}