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.
W tej lekcji zrobię krótkie wprowadzenie
o tym czym jest next i jak ma się do innych frameworków.
Więc jeżeli wejdziemy na stronę oficjalną next next, fork to zobaczymy, że
na samej górze w banerze jest napisane Déjà vu Framework.
To są pierwsze słowa autorów Nexta
opisujące czym jest faktycznie ten produkt, więc można byłoby to określić, że
EXT jest tym samym czym jest next dla jak ta.
To znaczy taką nadbudówki
na framework, który już istnieje, który po prostu rozszerza jego kompetencje.
Jest to tak naprawdę po prostu podzbiór
View jest podzbiorem Nexta albo Next jest zbiorem View.
To znaczy jeżeli wyobrazimy sobie, że A to
jest View i cała nasza wiedza o View, to Next dodaje nowe funkcjonalności do
View, nie modyfikuje ich, jedynie rozszerza.
I z tych rozszerzeń będziemy korzystać, w
związku z czym jeżeli nie jesteś zapoznany z View, to ja w tym momencie zaproszę Cię
do innych kursów na platformie PL, abyś szkolił się w tym zakresie, ponieważ
tak naprawdę praca z Maxem bez znajomości frameworka Vue mija się z celem, bo
będziemy korzystali z aspektów View, które są dosyć powszechnie
znane i ja też nie będę wchodził w dokładną mechanikę View.
W tym kursie.
Jeśli chodzi o porównanie do innych frameworków.
No to możemy. Tutaj troszkę statystyk z ostatnich.
W momencie nagrywania tego kursu wideo, które twórcy udostępnili nam,
w związku z czym w sierpniu 2020 statystyki stawały się
tak, że ponad 1 1 miliona pobrań miał ten projekt na platformie NPM
mieli ponad 200 tysięcy unikalnych odwiedzających na stronie.
Georg jest, czyli tak jak tutaj weszliśmy i ponad milion projektów stworzonych.
Przypominam, że to jest sierpień 2020, więc sporo czasu już od
tego momentu minęło i te statystyki na pewno są wyższe.
No i generalnie w tamtym momencie było 43
tysięcy followersów na Twitterze i 30 tysięcy gwiazdek na GitHubie, w
związku z czym widzimy, jak community plasuje się w tamtym czasie.
Oczywiście od tej pory na pewno urosła i w trakcie też zachodzą zmiany.
To jest projekt, to nie jest projekt,
który jest już zamrożony i na horyzoncie widać również nexta.
Trójka, o którym będę mówił w późniejszych częściach tego kursu.
Jeśli mielibyśmy porównać na przykład
Nexta do Nexta, bo to jest takie najpopularniejsze porównanie tych dwóch
narzędzi, to przede wszystkim różni je framework.
Czyli pracować nad tym będziemy tak jak
pracujemy z View, a z Next pracujemy tak, jak pracujemy z redaktorem.
Oba narzędzia są reaktywne, natomiast
Next nie jest tak bardzo funkcyjny jak React, a wychodzi to z założenia, że View
miało być tym prostszym frameworkiem, jak to w momencie kiedy on został tworzony.
Od tego czasu powstały różne inne
alternatywy, takie jak z Felt, które również zakładają prostotę tworzenia
zaawansowanych aplikacji w sposób bliski natywnego, bez konieczności dużego
osiągnięcia wiedzy jak działa dany framework.
Więc to jest fundamentalna różnica między tymi dwoma rozwiązaniami,
więc moglibyśmy tak naprawdę porównać też WR jak ta, ale takie najprostsze
plusy i minusy na start to jest to, że po prostu Next ma troszkę
mniejsze community niż Next i może przez to mieć nie pluginów co też tutaj.
W tym blogu które znalazłem na kom jest takie fajne porównanie
nexta z tekstem oraz z miejscem, które jest jeszcze innym frameworkiem
do tworzenia backend owych aplikacji w skrypcie.
Ale ja bym się tutaj tak naprawdę nie
przejmował tym jakie są przedstawione tutaj plusy i minusy.
Chyba, że faktycznie nie znasz jeszcze ani
jednego marka, to znaczy ani redakcja, ani View, ani Nexta, ani Nexta.
No to w tym momencie możesz zastanawiać się, który z nich jest lepsze.
Tak naprawdę są to po prostu narzędzia i w
zależności od tego, z którym jesteś bardziej.
Zbliżony, czy ten, który bardziej Ci podejdzie osobiście jako.
Narzędzie, które.
Jest dla Ciebie prostsze do zrozumienia i prostsze w pracę.
To na tej podstawie możesz zdecydować, który z tych dwóch wybrać.
Ale zarówno nas, jak i Next są o tyle fajne, że frontend deweloperzy, którzy
mają wiedzę na temat danego frameworka, są w stanie tworzyć back endowe aplikacje.
Ponieważ Next i Next korzystają z miejsca pod spodem, czyli możemy tworzyć tak
naprawdę full stack nowy projekt samodzielnie.
Jeżeli jesteśmy frontend developerami i taki był zamysł obu tych projektów.
Więcej o podziale między backend frontend.
W kontekście ACTA będę mówił w kolejnych lekcjach, a w tym momencie chciałbym
zaprosić Cię do kolejnej sekcji tego kursu, czyli faktycznie fundamentów tego,
jak pracować z tekstem, jak stworzyć swój własny projekt.
I w tym momencie, gdy już przejdziemy
przez ten etap, zaczniemy pracę nad projektem Wikipedii.