Prosty i Nowoczesny Framework dla Vue.js
7 godz. 2 min · Vue.js · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerW 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.
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!
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.
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ą.
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.
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!
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.
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.
Cześć, Opowiem Ci szybko o tym, co znajdzie się w przyszłości w WU.
Jako, że Next w wersji 2 14 jest ostatnią wersją Next w wersji Major 2.
Tzn.
Następna duża wersja duża aktualizacja dla nas ta będzie już wersją trzecią.
Na etapie nagrywania tego kursu Next 3 nie jest jeszcze dostępne publicznie.
Nie jest nawet w publicznej becie czy w Alfie.
Natomiast wiemy już mniej więcej, co się w nim wydarzy, m.in. będziemy mieli domyślne
wsparcie dla kompresji najlepiej znanego z wujka Piotrka.
Garaż nagrał bardzo ciekawy warsztat na serwisie DP dotyczących zmian między WU 2
a F3, w związku z czym używając next kompozycji Napi jesteśmy w stanie
wykorzystywać też tę samą składnię z użyciem setupu i ładowaniem
różnych zależności, niezależnie od tego, co znajduje się w naszym komponencie.
Jest to taka podstawowa zmiana względem Nexta 2 że Next 3 będzie miał wsparcie dla
O3 domyślne jesteśmy w stanie korzystać z 5, najlepiej już teraz w Next 2 14 i
przygotować się na przyszłe update Nexta poprzez użycie właśnie tej paczki.
W związku z czym jeżeli chcesz być gotowy
na migrację do nowszej wersji, możesz zacząć przygotowywać się już teraz.
Innymi zmianami, o których mówią autorzy biblioteki jest np.
to, że layouty zostaną całkowicie
zastąpione przez phishing, czyli tworzenie różnych motywów.
Jest po prostu inna nomenklatura i troszkę
inne mechanizmy, ale mniej więcej idea działania będzie
taka sama, że będziemy mieli w pewien sposób różne fragmenty
komponentów, w zależności od tego, gdzie są zdefiniowane.
Istotną zmianą jest też zmiana w tagach.
W tym momencie,
jak zauważyłeś, korzystaliśmy tutaj z konwencji takiej, że wszystkie dynamiczne.
W naszym przypadku był to tylko jeden route.
Mają podkreślenie jako parametr, czyli dzięki temu mamy parametr id dostępny.
Na instancję Wertera.
W przyszłości będzie to zmienione na nawiasy kwadratowe, więc jest to tak
naprawdę zmiana troszkę estetyczna, ale dzięki temu będziemy mogli w łatwy sposób
tworzyć kilka różnych parametrów w jednym komponencie, a nie koniecznie tworzyć
dodatkowe katalogi tylko dlatego, aby stworzyć dodatkowy parametr.
Jeśli pracujemy z
katalogami Pages, dodatkowo wewnątrz tak bardzo dużo się zmienia.
Jest on lżejszy, korzysta z piątki.
Cały bundle list, który Max nam narzuca
zawiera jedynie 20 kilobajtów, jeżeli jest zgrupowane, co jest całkowitą wagą w
dwójki, w związku z czym będzie to o wiele szybsze rozwiązanie
jest napisane w skrypcie, w związku z czym typowanie będzie.
Wspierane domyślnie.
Static Cloud Generation też będzie wspierane domyślnie, w związku z czym
deklarowanie Waszego kodu na serwisy takie jak.
NET Life będzie uproszczone.
I tych zmian jest oczywiście o wiele, wiele więcej.
Będą też zmiany w tym jak piszemy moduły dla Nexta.
Akurat nasze build module nie zostaną zmienione w żaden sposób, w
związku z czym możemy tak samo pisać moduły typu.
Nakaz internalizacji, czyli te, które ładujemy poprzez property.
Może one ulegną zmianie.
Więc jeżeli jesteś autorem modułów dla
Nexta to oczywiście będziesz musiał zwrócić uwagę jak przy migrować Twój moduł
na nexta trójkę i chciałbym tutaj wskazać kilka źródeł.
Jak można dowiedzieć się więcej o tym co dzieje się w komentarzach?
Tutaj zamieszczę dwa odnośniki do
wywiadów z materiałami tej biblioteki, którzy mówią o wersji trzeciej.
Jest to wywiad po angielsku, natomiast są polskie napisy z tego co widziałem.
Jeżeli nie, to możecie oczywiście
włączyć automatyczną generację napisów na YouTubie.
I tam dowiecie się bardzo wielu szczegółów na temat tego, co dzieje się na horyzoncie
i czego się spodziewać, gdy nadejdzie ten czas, że Next 3 będzie już dostępne.
Oczywiście możecie spodziewać się aktualizacji tego kursu.
Jak z migrować się na wersję trzecią?
Tymczasem dziękuję Ci serdecznie za
poświęcony czas i do zobaczenia w lekcji zakończenia tego kursu.