w tym video przerobimy statyczny layout messengera na aplikację vue.js jest korzystającą z

es modules oraz single file components

więc ten materiał będzie bazował na layout'cie

który stworzyliśmy w poprzednim video gdzie tworzyliśmy widok mobilny komunikatora

jeżeli zależy ci na zrozumieniu jak ten markup powstał oraz jak wygląda sterowanie odsyłam

cię do poprzedniego video no i zacznijmy od tego że odpowiem na jedno z waszych

pytań czyli jak robię taki podgląd na żywo w starszych

wideo korzystam z bracketsa i też materiał na temat bracketsa znajdziecie na kanale

natomiast w VSCode jest takie rozszerzenie które nazywa się live

priview i chodzi tutaj o to

rozszerzenie od microsoftu czyli z takim logiem no i w momencie gdy zainstalujecie to rozszerzenie

i przejdziecie sobie do pliku index.html możecie otworzyć

tak zwaną paletę visual studio code za pomocą skrótu klawiszowego command

bądź ctrl shift p no i w tym momencie możemy wpisać sobie tutaj live

priview i jak widzicie mamy tutaj opcję show live review show preview

external browser i właśnie z tej opcji skorzystamy no i w tym momencie otwiera nam

się tutaj taki mini terminal który sygnalizuje że nasza strona jest już serwowana na

serwerze lokalnym znajdującym się pod adresem 127.0.0.1

i porcie :3000 no i mając już ustawiony podgląd na żywo na naszym serwerze lokalnym

możemy przejść do przerabiania tej aplikacji na faktyczną

aplikację vue.js więc gdy przejdziemy sobie do dokumentacji

zawsze gdy korzystacie z różnego rodzaju frameworków korzystajcie z oficjalnej dokumentacji

no chyba że projekt nie jest dobrze udokumentowany na szczęście vue.js należy

do tych projektów które są dobrze udokumentowane więc gdy przejdziemy sobie do sekcji

quickstart to zobaczymy że mamy tutaj różne opcje jak zacząć pracę

z vue.js większość poradników idzie ścieżką pracy

z NodeJS i instalacją przez npma, jest to tak naprawdę dobre podejście

jeżeli już pracujemy na projektach produkcyjnych natomiast jeżeli

dopiero zaczynacie swoją przygodę z front endem czy z web developmentem no to może

to być dodatkowy narzut informacji czy wiedzy którą musicie zdobyć aby

w ogóle zacząć pracę z vue.js i to ma tak naprawdę nawet swoją nazwę jest

to tak zwane "js fatigue" czyli koncept tego że próg wejścia

do frontend developmentu stopniowo zwiększył się przez właśnie

ilość narzędzi które są wymagane do tego aby tak naprawdę zacząć pracę

na danym projekcie więc ja nie będę korzystał tutaj z podejścia

wykorzystującego nodeJS, w kolejnych częściach tej serii oczywiście przerobimy ten projekt

w taki sposób aby był on bazujący na epidemię ale w tym wideo

sama znajomość html css a i javascriptu wystarczy

aby stworzyć waszą pierwszą aplikację z VueJS więc przejdziemy sobie troszkę dalej

i tutaj mamy taką sekcję "without build tools" i jest to właśnie

to rozwiązanie na którym nam zależy wystarczy załadować sobie plik

z kodem źródłowym vue.js 3 no i zamontować tak naprawdę całą aplikację

pod jednego diva który ma tutaj identyfikator #app no i tutaj dzieje się

cała magia w vue.js która tworzy nam aplikację natomiast jest to

takie bardzo klasyczne i nawet bym powiedział retro podejście pracy

z zewnętrznymi zależnościami nawet w sytuacjach gdzie nie korzystamy z

różnych module bundlerów i takim troszkę bardziej współczesnym

podejściem są tak zwane ES modules tak naprawdę na potrzeby tego video

one nie będą miały tak dużych różnic między tym podejściem a poprzednim, oprócz

tego że będziemy mieli troszkę inną składnię oraz współczesne słowa kluczowe

jak na przykład import i export dostępne bezpośrednio w przeglądarce więc to

co zrobimy to ja po prostu przekopiuje sobie ten fragment dokumentacji

i umieszcze go w naszym kodzie źródłowym no jak widzicie tutaj w znaczniku

script mamy atrybut type ustawiony na wartość import map i ta składnia

narzuca nam format taki, że musimy w obiekcie zadeklarować sobie

klucz imports no i tak naprawdę i każdy kolejny klucz wewnątrz tego obiektu

imports będzie nazwą paczki którą chcemy pobrać i tutaj jest link

do pobrania właśnie tej paczki w związku z czym będziemy mieli już pobraną

paczkę o nazwie view w każdym skrypcie który będzie miał taki module

no i możemy sobie już z tego modułu view importować

pojedyncze funkcje które nas interesują tutaj na elemencie #app montowana

jest nasza aplikacja której definicja jest właśnie tutaj czyli

wewnątrz naszego diva o id #app będziemy mieli już naszą aplikację

vue.js zainstalowaną w związku z czym ta informacja w tych wąsach

będzie już zinterpretowana przez framework jakim jest właśnie vue.js i w

tym wypadku zostanie wzięta z funkcji data() i pola message

w związku z czym gdy to sobie zapiszemy no to oczywiście po przescrollowaniu w

górę zobaczymy tutaj ten tekst "hello vue" w związku z czym vue.js jest już zainstalowany

na naszej stronie i nasze import mapy i ES modules działają

natomiast to co warto tutaj wspomnieć to fakt że

es modules i import map nie jest jeszcze najlepiej wspierane jeżeli chodzi o wszystkie przeglądarki

na przykład na dzień nagrywania tego materiału firefox wspiera import

mapy jedynie za specjalną flagą w związku z czym to podejście

nie jest raczej rozwiązaniem produkcyjnym ale jest świetnym jeżeli chodzi o poznawanie

frameworku jakim jest na przykład właśnie vue.js tak by potem przenieść naszą aplikację

do projektu w którym korzystamy z pełnoprawnego module bundlera na przykład

więc co możemy zrobić to przenieść sobie naszą aplikację

czyli cały ten nasz markup który tutaj zadeklarowaliśmy do vue.js

sa no i najlepszy sposób aby to zrobić są to komponenty i

jak zobaczymy sobie spowrotem w dokumentacji vue.js mamy tutaj sekcję

mówiącą o tym jak możemy ładować komponenty

przez protokół HTTP w związku z czym gdy skopiujemy sobie

tutaj ten oto przykład wkleimy go do naszego

pliku index.html

i przeniesiemy sobie tą treść do odpowiedniego pliku

możemy sobie otworzyć tutaj w sidebarze listę katalogów

w katalogu src utworzyć sobie katalog js no i w tym katalogu

stworzyć sobie na przykład messenger.js

i w momencie gdy zapiszemy ten plik w tym miejscu

i w naszym pliku index.html

podmienimy odpowiednio ścieżki czyli tutaj musimy oczywiście zmienić domyślny plik z

dokumentacji na ścieżkę do naszego pliku czyli jest to ścieżka relatywna

czyli src/js/messenger.js

no i będziemy go montowali z powrotem na #app więc jak widzimy tutaj już nam się

pojawiło "count is 0" czyli nasza aplikacja faktycznie korzysta już z tego

komponentu więc jedyne co pozostało to przenieść sobie

naszą aplikację tutaj w to pole template i możemy

to zrobić po prostu kopiując całą tą treść naszego markupu

wytniemy ją no i w pliku

messenger.js po prostu ją wkleimy natomiast praca z komponentami

w taki sposób nie jest zbyt wygodna no bo jak widzicie nie mamy nawet tutaj żadnego

podpowiadania składni w związku z czym jeżeli chcielibyśmy iść w tym kierunku

i korzystać z tego typu modułów i komponentów jak

z dokumentacji vue.js no to możemy sobie zainstalować tutaj takie rozszerzenie

jakim jest "es-string-html"

i w momencie gdy zainstalujecie to rozszerzenie

to co będziecie mogli zrobić to nad dowolną linijką

która zawiera w sobie markup htmlowy możecie napisać

po prostu w komentarzu html i zobaczycie że

to już ładnie nam podpowie składnie pomimo tego że to jest plik javascriptowy więc

jest to takie ułatwienie jeżeli chcemy korzystać z tej składni natomiast nie jest to składnia

z której ja osobiście chciałbym korzystać w takim produkcyjnym projekcie takim

rozwiązaniem po które z reguły się sięga jeżeli chodzi o komponenty

vue.js są tak zwane single file components czyli w skrócie sfc

i single file components wyglądają w taki sposób że cała treść

danego komponentu czyli może to być na przykład cały komponent

messenger wylądowałaby sobie w pliku w nowym katalogu

powiedzmy vue mesenger.vue

no i tutaj możemy mieć podział na

nasz markup czyli cały nasz kod html może być

w znaczniku template i tutaj możemy dawać zenkapsułowane

style oraz skrypty które będą uruchamiane

w kontekście tego konkretnego komponentu i jak faktycznie tego użyć w samej

przeglądarce to co musielibyśmy zrobić to zaimportować

sobie specjalną bibliotekę która pozwala nam na ładowanie single file komponentów

przez przeglądarkę i ja do tego wykorzystałem bibliotekę vue3-sfc-loader

czyli po prostu single file component loader

dla vue.js i jak zobaczymy sobie w dokumentacji tutaj

mamy różne opcje dla ładowania naszych modułów i

widzimy że wystarczy nam funkcja loadModules tylko że będziemy musieli ją

sobie zaimportować zgodnie z ES Modules poprzez nasze import

mapy w związku z czym gdy przejdziemy sobie do sekcji dist

to zobaczymy że ta biblioteka będzie serwowana z takiego linku

w związku z czym ja to sobie skopiuję dodamy sobie do naszego

import mapa nowy wpis vue3-sfc-loader

no i po dwukropku

damy jego lokację tylko że jest to główny

odnośnik do całego projektu a my musimy pobrać konkretną wersję

esm czyli tutaj musimy skopiować sobie tą sekcję i dokleić

ją do końca tego linku i po zapisaniu pod

tym linkiem możemy to zapisać jako vue-sfc-loader i zaktualizujemy sobie ten nasz

skrypt który importuje nam całą aplikację na to

jak prezentuje się dokumentacja

tej biblioteki więc po prostu skopiujemy sobie cały tutaj

przykład podmienimy go w całości

no i oczywiście będziemy go musieli troszkę zmienić tutaj te options możemy zostawić jako domyślne

jeżeli chcielibyśmy sprecyzować w jaki sposób pliki vue powinny

być pobierane no to oczywiście możemy to dostosować nam wystarczy opcja

domyślna no i tutaj zamiast ładować sobie loadModule poprzez window

no to możemy po prostu zrobić sobie tutaj

import { loadModule }

from, no i tutaj nazwa naszej paczki

czyli po prostu vue-sfc-loader no i tutaj możemy się tego pozbyć

no i możemy tutaj zapisać sobie nazwę naszego komponentu ją zmienię

z my-component na messenger no i tak samo

zmienię tutaj nazwę pliku który będziemy pobierali

bo oczywiście będzie on w innej lokacji czyli w

katalogu vue będziemy mieli plik messenger.vue

i jak widzimy mamy tutaj błąd w przeglądarce który mówi nam że

vue nie jest zdefiniowany a to wynika z tego że po prostu dokumentacja

vue-sfc-loader korzysta z innej notacji niż dokumentacja vue.js

i zamiast tutaj importować pojedynczą funkcję z całego vue możemy

zaimportować całe vue, właśnie jako zmienną Vue z której

korzysta ten przykład ale ta biblioteka nie może nam znaleźć tutaj pliku vue

messenger.vue zobaczmy czy ścieżka jest poprawna

i jest poprawna tylko że musimy dodać jeszcze

katalog src z przodu i w tym momencie cała nasza aplikacja

jest już uruchamiana z poziomu vue.js poprzez single file components

więc będziemy w stanie rozbić tą całą wielką aplikację

na pojedyncze komponenty korzystając już z plików vue.js co na

pewno ułatwi migrację z tego rozwiązania bazującego na protokole

https bez żadnych module bundlerów po prostu w przeglądarce

na konfigurację produkcyjne w związku z czym gdy stworzyliśmy już sobie nasz pierwszy

komponent vue możemy pozbyć się tego pliku messenger.js ponieważ i tak nie jest już

używany więc ja go po prostu tutaj usunę no i pomyślmy jak

chcielibyśmy podzielić naszą aplikację na komponenty taki najprostszy pomysł

to byłoby wydzielenie sobie tutaj tego top-nava jako osobny komponent

tego main-nava jako osobny komponent i całej tej treści jako

komponent trzeci i właśnie to zrobimy w związku z czym stworzymy sobie nowy

plik top-nav.vue

i ponownie template

ustawimy na treść

htmlową tej listy

nie numerowanej więc to sobie wytniemy w tym momencie tutaj ten top-nav

nam zniknął natomiast gdy przeniesiemy go sobie do tego miejsca

i zaimportujemy na poziomie messengera czyli tutaj już oprócz

template będziemy mieli również script no to jesteśmy w

stanie zaimportować sobie top-nav

from top-nav.vue

jak widzicie mamy też podpowiadanie składni więc

to co zrobimy to wyeksportujemy sobie domyślny obiekt

czyli jest to dokładnie ten sam kod z którego korzystaliśmy w przykładzie gdzie messenger

był po prostu plikiem JavaScript no i we vue.js aby tworzyć komponenty

które będą zależnościami danego komponentu no bo messenger.vue jest

już komponentem możemy zadeklarować po prostu pole components

ja tutaj oczywiście korzystam z tej składni vue.js a dwójki

wiotczeje się trójce mamy dodatkowe funkcje setup i troszkę inne

pisanie komponentów natomiast ta składnia jest nieco prostsza i jest tak samo wspierana

przez biurze jest ta trójka w związku z czym po prostu zadeklarujemy tutaj

chęć użycia tego komponentu TopNav no i w tym momencie w pamięci naszego komponentu

mamy już dostęp do tego komponentu TopNav i wystarczy

że załadujemy go sobie w naszym template i możemy to zrobić w taki

sposób że po prostu zapiszemy sobie tutaj <top-nav /> lower

case sam i jak widzimy nasz top nas już tutaj wrócił i dlaczego

ta składnia snake-casem czyli z małych liter podzielona myślnikami

działa ponieważ jest to po prostu domyślna nazwa którą

komponenty biorą czyli jako że ja zadeklarowałem tutaj ten komponent

o takiej nazwie oczywiście mógłbym go zaimportować o jakiejś innej powiedzmy

myNav no i w tym momencie nazwa komponentu tutaj na

górze już by nam się zmieniła musiałbym wykorzystać tutaj nasze <my-nav />

i w tym momencie to nam ponownie działa natomiast warto o

tym pamiętać że to w jaki sposób zadeklarujemy klucze tutaj

w naszych komponentach ponieważ to jest po prostu skrót od TopNav: TopNav

ma wpływ na to jak do komponentów będziemy musieli dobierać

się z naszego template i tutaj mógłbym napisać

dowolny tekst aby zaimportować to jako TopNav a tutaj

zapisać to jako MyNav

momencie ten import jest poprawnie wykrywany natomiast

fakt że ten klucz w obiekcie components nazywa się MyNav no to będziemy

musieli się odwoływać do template poprzez

<my-nav /> ale w notacji skróconej po prostu możemy przekazać samą

nazwę zmiennej po przecinku wymieniając kolejne komponenty no i

tak naprawdę możemy dalej podzielić ten przykład czyli pobrać sobie

nasz main-nav stworzyć

nowy plik czyli main-nav.vue

ponownie template

wklejamy nasz template zapisujemy

no i tutaj musimy po prostu zaimportować kolejny komponent czyli

MainNav from

main-nav.vue no i tutaj dodajemy sobie do

komponentów i ponownie wykorzystujemy w naszym template

<main-nav> i oczywiście możemy tutaj użyć albo tej skróconej notacji zamykając tag

tak w taki sposób albo jeżeli chcemy możemy użyć też pełnej notacji

w tym momencie nie ma to znaczenia bo tak czy siak po prostu rysujemy statyczny

html ale z poziomu w vue.js no i jako ostatni krok możemy po prostu

cały nasz content-wrapper

przenieść sobie do ostatniego komponentu

content-wrapper.vue

template wklejamy

zapisujemy i ponownie

content-wrapper

content-wrapper no i przekazujemy ostatni

z naszych komponentów i w tym momencie gdy wykorzystamy go w tym miejscu

czyli content-wrapper no to nasza aplikacja

renderuje się już poprawnie pomimo tego

że jest całkowicie zależna i zbudowana w vue.js

czyli cała nasza logika aplikacji nie znajduje się już w index.html

bo mamy tutaj tylko domyślną logikę

która pobiera nasze skrypty i zależności tak naprawdę ten "message" możemy sobie stąd usunąć

ponieważ i tak zostaje nadpisana poprzez nasze komponenty vue

i jest to po prostu entrypoint do całej naszej aplikacji i

to rozwiązanie jest o tyle fajne że pozwala nam na pracę z vue.js w przeglądarce bez

żadnych module bundlerów natomiast dodaliśmy sobie bardzo dużą zależność jakim

jest działający w javascript ponieważ gdy będzie jakikolwiek problem

z naszą aplikacją na tym poziomie czyli ja tutaj sobie napiszę nie wiem jakiś tekst

który wywróci nam naszą aplikację no to ta aplikacja nie jest już

funkcjonalna i dlatego często przy okazji progressive enhancement i

innych podejść które mówią aby aplikacje

działały bez javascriptu nie chodzi tutaj tyle o użytkowników

którzy wyłączają jawnie javascript tylko o bycie gotowym

na sytuację w których javascript z jakiegokolwiek powodu nie

działa ale z drugiej strony mamy tutaj też problemy z wydajnością ponieważ

domyślnie zanim ten javascript się wywoła mamy tutaj pustego diva bez żadnej

treści i to co się często robi to albo jakiś prerendering

albo po prostu server side rendering  i rozwiązania typu na nuxt.js

czyli po prostu framework dla frameworka vue.js który

pozwala nam generować komponenty na backendzie w taki

sposób gdy przeglądarka będzie prosiła o początkowe informacje

z naszej strony www te komponenty będą już wyrenderowane

bo gdy ja odświeżę tutaj tą stronę z shiftem zobaczę że

mamy tutaj taki długi okres oczekiwania na wyrenderowanie się

tego przykładu i to ma już implikacje w kontekście pozycjonowania

stron internetowych ponieważ google ma różne rankingi co do tego jak strony

powinny być renderowane aby były lepiej pozycjonowane w wyszukiwarce

internetowej ale to są tematy na inne odcinki

w związku z czym jako podsumowanie tego przykładu zrobimy jeszcze

jedną rzecz ponieważ cały nasz kod cssowy jest w tym momencie

globalny więc to co moglibyśmy zrobić to przenieść sobie wszystkie

nasze style które odnoszą się do konkretnych

komponentów czyli tutaj nasz

main-nav będzie miał

swój własny znacznik style wewnątrz którego

będą style odnoszące się tylko i wyłącznie do tego komponentu

i to też możemy z poziomu vue.js wymusić tak aby te style nie były dostępne

nigdzie indziej sprawdźmy czy tutaj jest

jeszcze jakieś odniesienie no i tutaj faktycznie wychodzą takie problemy

jak będziemy współdzieli tego typu selektory czy chcemy

je rozłączyć czy chcemy wykorzystać może scssa aby stworzyć jakiś

mixin no tutaj już robi się dużo problemów natomiast ja w tym momencie

po prostu zduplikuje sobie ten selektor

i w top-navie po prostu

go przekopiuje oczywiście będziemy mogli to

w kolejnych przykładach naprawiać

jak widzisz tutaj po usunięciu tych styli nasza

aplikacja już się troszkę rozjechała ale gdy dodamy je tutaj

no to ona wraca na swoje miejsce więc nie mamy już styli

współdzielonych globalnie tylko wyenkapsułowane

do konkretnych komponentów więc tutaj moglibyśmy oczywiście

te nazwy klas sobie pozmieniać conversations search to wyląduję

nam w content-wrapperze czyli tutaj znacznik style

kopiujemy wklejamy, top-nav

do top-nava

no i tutaj mamy już takie globalne style i

to też jest dobre pytanie gdzie powinniśmy je trzymać możemy stworzyć sobie jakiś plik global

kropka css i tam je wszystkie umieścić

czyli moglibyśmy zostawić to tak naprawdę w tym miejscu albo możemy przenieść

to do naszego komponentu messenger no tutaj to jest

już do dyskusji na podstawie pojedynczego

przypadku czyli ja to tutaj po prostu przeniosę do style

wkleję no i nie jest to oczywiście rozwiązanie optymalne ponieważ mamy tutaj

bardzo generyczne selektory które nie są zenkapsułowane do

tego komponentu w grze jest ale tak naprawdę przynieśliśmy całą

naszą aplikację do komponentów vue.js i

ten plik styles.css moglibyśmy sobie już usunąć

i usunąć go również tutaj z importa

naszego globalnego więc w tym wideo utworzyliśmy

sobie tak naprawdę taką piaskownicę w której będziemy mogli eksperymentować

z naszym przykładem i wydaje mi się że jest to najprostszy setup w sytuacji

gdy chcesz zacząć pracę z vue.js ale nie kojarzysz jeszcze NodeJS

nie kojarzysz npm to tak naprawdę możesz skupić się na nauce tego frameworka

a gdy przyjdzie czas po prostu zmigrować na rozwiązanie produkcyjne kolejnych

video z tej serii oczywiście jeżeli będzie wystarczające zainteresowanie zajmiemy się

troszkę tym jak ustrukturyzować swój projekt aby był zarządzalny

i łatwo się po nim nawigowało przejdziemy przez wszelkiego rodzaju

usprawnienia do samej aplikacji więc jeśli masz pomysły co moglibyśmy zrobić

z tą aplikacją koniecznie daj znać w komentarzu a ja tymczasem się z wami żegnam

siemka top-nav.vue jak widzicie mamy już nawet podpowiadanie skłag-skła... [sigh]

w pozostałych częściach tej serii... ble ble ble... no!

spoko, cześć :)

‍