Nuxt.js: Dobre praktyki

0:00W tej lekcji postaram się podsumować kilka.

0:03Dobrych praktyk i moich przemyśleń dotyczących Nexta.

0:06Nie będziemy więcej.

0:07Już faktycznie zmieniać kodu źródłowego w tych przykładach, w związku z czym

0:12jeżeli chciałbyś zobaczyć najbardziej aktualną wersję tego kodu źródłowego,

0:17to ostatnia lekcja jest lekcją, w której dzieje się ostatnio zmiana.

0:22I teraz opowiem troszkę o.

0:24Tym, w czym Next.

0:26Jest dobry, w czym ma. Jakieś luki.

0:29I jak. Generalnie do niego podchodzić.

0:31Jak widzimy jesteśmy w stanie przy pomocy

0:33Nexta stworzyć naprawdę szybko działającą aplikację internetową zgodną z.

0:38Duchem Progressive Enhancement. Ponieważ przypomnę.

0:41Tylko. Jeśli wyłączymy.

0:42JavaScript całkowicie, to dalej nasza

0:46aplikacja będzie funkcjonowała, w przeciwieństwie do tego, gdybyśmy.

0:51Napisali ją w czystym View bez żadnego rozwiązania sekundowego.

0:57Czyli jeśli przejdziemy na stronę główną, to wszystko nam dalej działa.

1:00Pomimo tego.

1:01Że JavaScript po stronie klienta jest wyłączony.

1:05To czego nie warto. Robić.

1:06W pakiecie to np. rzeczy jak.

1:09Kieszeń, który

1:11może mieć jakieś swoje moduły do kasowania, czyli zapisywania w pamięci czy

1:16na dysku gotowych wyników danych operacji, aby po prostu request szybciej.

1:21Bo są do tego dedykowane rozwiązania jak np.

1:24Relic. Variant czy inne tego typu podejścia.

1:28W związku z czym należy pamiętać, że Next jest to narzędzie.

1:31Do generowania kodu na podstawie komponentów View.

1:34I jeśli jesteśmy w stanie.

1:36Zrobić szybko. To super.

1:38Ale jeśli chcemy zrobić własny catering,

1:41być może zainstalować certyfikaty SSL, to oczywiście możemy to zrobić.

1:45Ale być może. Lepiej jest wystawić engine CSSa przed

1:49samym faktem i po prostu przekierować cały ruch HTTP na https.

1:54Na tamtym poziomie.

1:55Możemy również.

1:57Włączyć wsparcie dla HTTP 2, jednak bez

2:01engineers jest to dosyć ograniczone rozwiązanie, ponieważ serwer i tak musi

2:07zwrócić pierwsze bajty, które będą wskazywały, które assets.

2:10Możemy pobrać gdzieś w.

2:12Przypadku Engines.

2:13A już zanim jeszcze nasz zapytanie dojdzie

2:17do noda możemy dać wskazówkę do tego, które resource mogą się przydać.

2:23Kolejną rzeczą jeśli chodzi o.

2:25Nexta w kontekście dobrych.

2:26Praktyk jest optymalizacja.

2:28Czyli jeśli zerkniemy sobie.

2:29Na View Lazy Hydra 1 jest to. Taki moduł.

2:32Który pozwala nam na.

2:35Ograniczenie pracy, którą przeglądarka i view muszą.

2:38Zrobić. Po stronie klienta.

2:41Ponieważ jeśli my wchodzimy na stronę z

2:42włączonym Java skryptem i odświeżamy ją, to pierwszy render faktycznie dzieje się

2:47po stronie serwera, ale View tak czy siak przebudowuje całą naszą.

2:52Treść strony

2:54na moduły frontend owe tak aby jakaś reaktywność w momencie gdy użytkownik

2:59dokonuje interakcji z naszą aplikacją działała.

3:03W związku z czym tutaj mieliśmy taki.

3:05Błąd w konsoli.

3:07Być może już go nie ma, chyba już go nie

3:08ma, że jeżeli jest miszmasz między tym, co wygenerował nam serwer, a tym co

3:14View na froncie nam wygenerowała, to wtedy dzieje się tzw.

3:17full.

3:18Render, czyli tak naprawdę wszystko co serwer nam przygotował idzie do kosza.

3:22I my tworzymy aplikację od zera na

3:24froncie, co jest bardzo kosztowne w kontekście wydajności i wyszukiwarki też

3:27zwracają na to uwagę jak szybko nasza strona się ładuje.

3:30A to wydłuża. Czas jej ładowania, w związku.

3:32Z czym wolej z ich edition robi tyle, że jesteśmy w stanie

3:37powiedzieć, które komponenty w ogóle nie będą miały żadnego

3:40rodzaju reaktywności na froncie, w związku z czym możemy je kompletnie wyłączyć np.

3:45. Tutaj.

3:46Lazy Hybrid Never sprawi, że ten konkretny

3:49komponent nigdy nie zostanie prze renderowane na froncie.

3:53Ponieważ tak czy siak.

3:54Jego kontent będzie taki sam.

3:57Jak został wygenerowany przez serwer.

4:01Bądź wskazać sytuacje.

4:03Kiedy to się powinno wydarzyć, czyli. Np.

4:05kiedy mamy stan idealny, czyli np. nic.

4:07Nie dzieje się. Ani w.

4:08Worku, ani w CP.

4:11W kontekście ładowania tej jednej strony.

4:13Tak samo możemy wskazać inne opcje, takie

4:15jak on interaction, czyli w momencie kiedy użytkownik na.

4:18Przykład wjedzie na dany komponent myszką, wtedy on się może przeredagować.

4:23I daje nam to naprawdę duży zysk czasu ładowania strony.

4:27Który w połączeniu z server side.

4:29Rendering Nexta potrafi dać naprawdę nieziemskie efekty wydajności.

4:34I jeżeli mówimy o wydajności, to kolejnym

4:37bardzo dobrym rozwiązaniem jest zmniejszanie rozmiarów klas CSS owych.

4:43I tutaj chciałem tylko zarzucić taki artykuł.

4:46Który mówi. Jak rozwiązania tego typu, które.

4:50Np. robi też Google.

4:51Jeżeli wejdziemy na komórkę i wpiszemy new.

4:57To podglądając tutaj klasy.

4:59Na tych elementach.

5:02Zobaczymy, że te klasy są naprawdę krótkie.

5:04To nie są klasy wymowne.

5:07One są.

5:08Uproszczony do losowych ciągów znaków tak

5:11aby były jak najkrótsze, bo faktycznie każdy.

5:15Bajt wysłane przez przeglądarkę się liczy.

5:18I to co możemy zrobić również w.

5:20Tekście jest opisane w tym artykule.

5:22Gdzie rozszerzając konfiguracją.

5:24FPGA jesteśmy w stanie zaimplementować tak zwane CSS modules.

5:28I dynamicznie zmieniać nazwy.

5:30Klasy na etapie budowania projektu.

5:33Czyli w naszym przypadku moglibyśmy dalej

5:36korzystać z naszych klas zadeklarowanych np.

5:39w tym pliku czyli side navigation. Dalej w naszym.

5:42Kodzie źródłowym by się znajdowało.

5:44Ale na etapie budowania projektu ona by się zmieniła.

5:47Np. na jakiś taki ciąg znaków bardzo krótki.

5:50I według tego artykułu ten developer uzyskał 70 procentową.

5:56Wydajność względem poprzedniego stanu aplikacji, czyli.

5:59Jest o 70% lżejsza.

6:01Jego bardzo success.

6:02A względem tego gdy.

6:04Miał zwykłe niezidentyfikowane nazwy klas.

6:08Jest to robione w tekście. Ja to.

6:10Zrobiłem w jednym z moich projektów, Jednak jest to bardzo skomplikowane proces

6:14i wymaga dużej znajomości Web packa oraz innych technologii, w związku z czym.

6:19Nie.

6:20Znalazło się tutaj miejsce na tego typu rozwiązania.

6:23Ale jeśli faktycznie szukasz.

6:25Wyzwania w kontekście tego, co jeszcze możesz zrobić, aby sprawić, żeby były one

6:29jeszcze szybsze, no to jest to na pewno dobre wyzwanie.

6:33Temat optymalizacji pod wyszukiwarki

6:36internetowe jest też bardzo szerokim tematem.

6:40Na temat którego można byłoby stworzyć osobny kurs.

6:44W związku z czym chciałbym Cię.

6:45Serdecznie zaprosić do ostatniej sekcji tego kursu, gdzie.

6:49Podsumuję co dalej.

6:51Będzie się działo z Maksem.

6:52Jako, że tutaj pracowaliśmy na naście wersji 2 14, a zarówno Next 3

6:59jak i VU 3 są już na horyzoncie i opowiem troszkę o tym, co czeka nas w przyszłości.