Nuxt.js: Cykl życia aplikacji
Prosty i Nowoczesny Framework dla Vue.js
7 godz. 2 min · Vue.js · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerCzego 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
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.
W tej lekcji będziemy zajmowali.
Się migracją naszej klasycznej strony www,
a w samym HTML i CSS ie mini padding do faktycznie narasta.
Jednak zanim przejdziemy do praktycznego przykładu.
Chciałem opowiedzieć troszkę o Lexicon.
Czyli cyklu życia aplikacji.
Jest to dosyć teoretyczna wiedza, która nie jest przydatna zbyt często.
Bardziej jest przydatna.
Właśnie jeżeli pracujemy nad własnymi modułami.
Ale jeżeli chcemy pracować.
Świadomie z tym intuicyjnym frameworkiem, to oczywiście jest to przydatne, więc.
Ten diagram jest skierowany.
Dla nas w wersji większej niż 2.
2.12 Korzystamy z 2. 14.
6, w związku z czym to się nam aplikuje.
I tak szybko.
Po prostu przetłumaczymy sobie to, co się tutaj znajduje.
Czyli mamy tutaj taką.
Prostą legendę oznaczającą, że taki różowy ptaszek będzie oznaczał, że.
Kontekst.
Nexta jest dostępny w tym liście jako fuksa.
A o kontekście też będziemy mówili.
W momencie, kiedy przejdziemy do server side tworzenia aplikacji.
Taka gwiazdka oznacza, że w każdym
komponencie dane Like Czajkowski jest dostępny.
No i gwiazdka z wykrzyknikiem oznacza, że
tylko w komponentach typu Pages są one dostępne.
To znaczy nie. Wszystkie.
Właściwości i nie wszystkie metody będą dostępne na każdym z etapów.
Czyli jeśli otworzymy tutaj nasz projekt
mini, to zobaczymy, że te katalogi, które znajdują się w Pages
będą miały dostęp do paru więcej funkcji niż np.
komponenty znajdujące się w katalogu components.
Czyli pierwszym naszym. Krokiem jest Next Server IT.
Jest to po prostu.
Więc na serwer i wywoływane jest tylko i wyłącznie wtedy.
Jeżeli korzystamy z siły JAXA, czyli
jeżeli nie stworzyliśmy żadnego pliku w katalogu store, ten life będzie pominięty.
Ale faktycznie w lekcjach.
Mamy dostęp do kontekstu.
W kontekście właśnie Jest store.
Mamy dostęp do raportów, mamy dostęp do
wielu różnych opcji, z których będziemy później korzystać.
Troszkę niżej w tym liczniku huku niż tutaj raczej widywałem.
To jest coś, co też będziemy tworzyli. Przede wszystkim.
Po to, aby. Uzupełniać.
Dane na naszych podstronach z informacjami znajdującymi się w aplikacjach.
I tak jak wspomniałem wcześniej, możemy zadeklarować tak samo jak.
Deklarujemy. HEAD a to jesteśmy w stanie zadeklarować.
Middleware globalnie w pliku skąd i. Gdzie jest.
Następnie.
Jeżeli chodzi o priorytet aplikowane są middleware.
Layoutów i później.
Page.
Walidacja może odbywać się.
Tylko i wyłącznie.
W komponentach typu Page i również mamy tutaj dostęp do kontekstu, czyli jako
parametr możemy tutaj obiekt Context przekazać.
No i jest tutaj wymóg, że musi ta funkcja
zwrócić true albo w zależności od tego czy root został prawidłowo wykonany czy nie.
I z tych bardzo takich mglistych.
Naiwnych rachunków.
Przechodzimy do faktycznie.
Przydatnych metod, z których będziemy korzystali podczas tego kursu.
Async data jest to funkcja, która wywołuje.
Się na backend.
I dzięki niej jesteśmy w stanie zassać. Dane np.
z zewnętrznego API z bazy danych i przekazać je dalej do komponentu.
Alternatywnie Fetch robi dokładnie to samo.
Jest nawet napisane Kindle same as async data send komponent data.
Ale jest to właściwość z deprecjonowania, to znaczy, że.
Nie będzie ona wspierana.
W ogóle to się wszystko nam troszkę pozmienia, ale już w tym momencie ona się
tutaj znajduje ze względu na kompatybilność wsteczną.
Jeżeli tworzyliśmy aplikację na gotowo wcześniej niż w wersji 2.12
i async, data jest dostępna tylko i wyłącznie na komponentach typu Page, czyli
nawet w layoucie ani w komponentach nie będziemy mogli użyć tej metody.
To znaczy możemy ją sobie zadeklarować, ale ona nic nie zrobi.
I później przechodzimy faktycznie do normalnego lisa Hooka znanego nam z WW.
Czyli tutaj.
Wywołuje się.
Created w momencie kiedy instancja View jest stworzona.
Tutaj fetch taka.
Sama nazwa funkcji w zupełnie innym miejscu.
Tutaj warto to zauważyć, że to dzieje już się.
W momencie tworzenia instancji WU.
Tutaj to się działo jeszcze przed tym.
I jest to tak naprawdę przygotowanie nas do.
Tego jak na XT trójka będzie działało właśnie z metodą fetch.
Będziemy mogli dynamicznie zaciągać różnego typu zasoby na.
Front endzie z.
Funkcjonalnościami takimi jak casting czy inne tego typu rzeczy, które.
W tym momencie. Są troszkę problematyczne do osiągnięcia.
Hug bi. Formant wywoływany jest przed stworzeniem
pierwszego render drzewa dom i znane wszystkim Mantis.
W momencie, kiedy aplikacja jest już
gotowa i widzimy to, co faktycznie powinno się wyrenderować i dalej jest
przekierowanie do pełnego newsa znanego nazwą.
I tutaj właśnie dlatego mówiłem, że.
Next jest zbiorem View, ponieważ jak widzimy.
On wykorzystuje te same łuki.
Które w view się znajdują.
Ale dodaje kilka.
Własnych rzeczy od siebie.
W związku z czym bez View nie ma nexta.
Tak samo jak bez ACTA nie ma Nexta.
I tyle z teorii.
Jest to naprawdę mgliste, ale pracując nad projektem.
Używając Next Jamesa. Spokojnie.
Zrozumiesz do czego służą poszczególne łuki.
Albo nie będziesz musiał tak naprawdę o nich myśleć, ponieważ.
Większość z tych rzeczy dzieje się po prostu intuicyjnie.
Jeżeli chcemy, aby coś wykonało się szybciej, to wykonuje się szybciej,
a jeśli spodziewamy się, że dana rzecz wydarzy się dopiero po
zamontowaniu aplikacji, to wydarzy się dopiero po zamontowaniu aplikacji.
W następnej lekcji faktycznie.
Rzucimy naszą aplikację
do Nexta i zaczniemy pracę nad projektem wykorzystując pełnię możliwości Nexta.