Angular: Optymalizacja wykrywania zmian
od Podstaw
6 godz. 45 min · Angular · Full-stack i Programowanie
Mateusz KuleszaSenior Software Developer, Konsultant, TrenerCzego się nauczysz
- Kompletne podstawy Angular
- Ciekawe, praktyczne projekty
- Budowanie własnego Portfolio
- Bardziej zaawansowane koncepcje
- Formularze i REST API
- I wiele więcej!
Dynamiczny HTML i CSS
Pierwsze dwa działy kursu są idealne dla osób które rozpoczynają swoją przygodę z Angularem i stanowią wprowadzenie do frameworka. Zaczynamy od prostych przykładów, gdzie budujemy formularz zapisu na newsletter. Jest to przykład pozornie prosty, ale dzięki łatwości z jaką Angular wprowadza dynamizm, manipulacje wyglądem a nawet animacje wcale taki nie będzie. Zobaczysz, że nawet prosty przykład możemy zamienić w interaktywny, dynamiczny interfejs, który wciągnie użytkownika!
Zbuduj Portfolio razem z kursem
W kolejnych sekcjach kursu nie robimy prostych ćwiczeń, ale krok po kroku budujemy prawdziwy projekt. Jeśli marzyło Ci się stworzenie i opubliklowanie eleganckiej strony WWW lub aplikacji z Twoim CV oraz listą projektów, to nie musisz marzyć dalej. Możesz podążać krok po kroku i z każdą lekcją budować własną stronę portfolio. Będziesz zaskoczony, że z podstawową znajomością JavaScript, HTML i CSS zaczniesz błyskawicznie tworzyć złożone eleganckie i interaktywne interfejsy użytkownika.
Produktywność i błyskawiczne tworzenie aplikacji
W kursie stawiam na produktywność. Koniec że żmudnym klepaniem setek lini HTML i CSS, koniec z zawiłym kodem jQuery. Wykorzystując bibliotekę Bootstrap i modyfikując gotowe elementy HTML możemy skupić się na tym co najważniejsze. Zobaczysz jak wykorzystać interpolacje i wiązania by struktura HTML i CSS zmieniała się sama po każdej akcji użytkownika. Dzięki poprawnemu użyciu mechanizmów Angulara, mozolna praca z DOM, którą znasz np. z jQuery staje się zbędna. Angular renderuje interfejs za Ciebie - prosto z danych które umieścisz w komponentach.
Formularze i komunikacja z REST API
Już w pierwszych sekcjach kursu dowiesz się jak wykorzystać moduł formularzy w praktyce, by tworzyć automatyczne dynamicznie generowany formularze i pobierać z nich dane. Dowiesz się także jak znając wyłącznie podstawy JavaScript połączyć naszą stronę portfolio z serwerem i pobrać pliki JSON, w tym nasze projekty, opisy i zdjęcia ze zdalnego serwera!
Jak działa Angular? Wykrywanie zmian i optymalizacje
Podczas pracy nad Twoim portfolio nie tylko poznasz podstawy pracy z angularem, ale w kilku lekcjach zagłębimy się na chwilę w samo działanie Angulara. O ile jest to wiedza zaawansowana, tak znajomość mechanizmów wykrywania zmian już na samym początku pracy z Angularem da Ci lepsze zrozumienie tego narzędzia i pozwoli pisać kod który będzie nie tylko prosty i czytelny ale też będzie działał błyskawicznie. W tym kursie nie tylko pokazuje jak czegoś użyć, ale kiedy, dlaczego oraz jak to działa od środka. Nawet jeśli Angular nie jest dla Ciebie nowością - ten kurs da Ci głębsze zrozumienie jego koncepcji.
Dla kogo jest ten kurs?
Ten kurs przygotowałem dla osób początkujących w Angularze, ale w taki sposób by mógł on służyć także do powtórzenia, uporządkowania wiedzy czy uzupełnieniu braków dla osób które pracowały już z Angularem. Jeśli jesteś front-end developerem, ale jeszcze nie miałeś okazji zapoznać się z Angular, lub chcesz uzupełnić szczątkową wiedzę o fundamenty - to jest kurs dla Ciebie! Dodatkowo, jeśli zaczynasz przygodę z front-end ale masz już podstawy HTML i JavaScript, to kolejny ważny krok na Twojej drodze do kariery!
Angular 10+
W poprzedniej lekcji
takie liczniki który przeciął biblioteki dodatkowej ładnie się nam animacją.
Ja przed tą lekcją dodam iż dodatkowy
efekt mianowicie właśnie zwiększającej się liczby taki i taki szukający przez chwilę
tutaj kolor fioletowy i teraz bardzo fajna wygląda bardzo fajnie
to działa ale nim to zostawimy i pójdziemy dalej.
Chciałbym w tym momencie poruszyć bardzo ważny temat mianowicie w jaki sposób
biblioteki inne zwykłe skrypty owe takie jak czy qwerty czy ten odłamek tutaj w
jakiś sposób one aktualizuje HTML wyczuwam zmianę wprowadzając zmiany na stronie
zmiany tekstu struktury czy animacji oraz w jaki sposób robi to Angola.
Gdzie jest różnica
oraz na co musimy zwrócić uwagę szczególnie jeśli chcemy żeby nasze
aplikacje były szybkie żeby akcje były wydajne żeby nie przypominały
że mamy bardzo dużo elementów na stronie no to może to wpływać na wydajność.
Tak więc przejdźmy do kodu.
I tutaj pozwoliłem sobie dodać dodatkowy parametr GROM który ustawiamy oczywiście
jako import i co jakiś czas czyli losu jakiś czas
powiedzmy między 3 a 3 5 między 8 między 3 a 8 sekund.
Sobie Interview zwiększa wartość naszego licznika
o tę wartość którą przekazano i aktualizuje się wykonała animację.
Ale to robi biblioteka
natomiast dodatkowo jeśli przejdziemy do samego komputera
który ma dodatkowo jeszcze animację dodaną sam kolarza czyli pozwoliłem sobie dodać
to CSS a tutaj jakąś przykładowo animację która tutaj kolor fioletowy
i animacja jest aktywowane poprzez dodanie klasy tak.
Czyli jeśli ustawie tutaj zmienną update animację tymczasem uruchamia się animacja
i po sekundzie ta animacja się kończy zmieniam data na Fox Life klasa stosowana
animacja Włączam więc animacje piszę tylko na chwilkę.
Co tu jest istotne.
Tu już mamy dwóch różnych metod zmieniania
trybu HTML dwóch różnych metod uruchamiania tych animacji.
Tutaj ta metoda update po prostu bezpośrednio manipuluje HTML.
Czy wy macie wykonuje tutaj update tak jakiś kod w środku który bezpośrednio
operuje na elemencie który tutaj przekazaliśmy na negatywnym elemencie.
Natomiast to podejście tutaj wykorzystuje wykrywanie zmian.
Czyli ja wprowadzą jakąś zmianę by
komunikować operacje sprawdzać co się zmieniło i jak już
wprowadza zmiany za mnie a Muller za mnie dodaje lub usuwa klasę
mnie aktywuje aktywuje animacje ja nie muszę ręcznie manipulować elementem.
Teraz te dwie różne metody mają swoje wady i zalety a Muller także potrafi wykryć
zmiany w kodzie który jest importowany z zewnątrz nawet obce biblioteki nawet
jakieś loginy Top Gear także kiedy coś się dzieje i próbuje też sprawdzić czy coś się
zmieniło w HTML czy musimy wprowadzić zmiany.
Teraz jak to wpływa na wydajność.
Zacznijmy od tego że na ktoś komentuje ten
kod który nam aktualizuje tutaj naszą wartość
komentuje tę bibliotekę i krok po kroku zobaczymy jak to działa.
Czyli powiedzmy sobie teraz w ten sposób
to będziemy cały czas taką samą wartość tych liczników odświeżyć stronę.
Jest to 2011.
Nic się nie dzieje i Englert też nie przygotowuje nie drukuje
niczego co jest ciekawe że jeśli ja po prostu zmieniam wartość czy powiedzmy
sobie ustawę tutaj set Interview to tak jak jest poniżej.
W ten sposób to po każdej zmianie czyjeś
zwiększy powiedzmy zadbali o wartości jest grą
i zrobię to powiedzmy co sekundę to normalnie musiałbym nie tylko zmienić
wartość ale musiałem także zaktualizować elementy.
Czyli musiałbym znaleźć elementy na stronie używając
rzeczy które i tutaj w tym elemencie powiedzmy Killer
tekst inny HTML musiałbym zaktualizować tę wartość żeby ona się pojawiła na stronie.
Spróbujmy teraz niż te zmiany się pojawiają co jakiś
czas i teraz w ogóle gmina ma okulary po prostu aktualizuje ręcznie.
To jest ciekawe to że nie muszę tego aktualizować w ten sposób ręcznie.
Wystarczy że zmienię wartość ta wartość
jest tutaj gdzieś zbudowana na stronie ona gdzieś tam się znajduje właśnie w
kolumnach albo w nawiasach kwadratowych gdzie ona jest użyta.
To teraz tam przy każdej zmianie wykona tutaj jeszcze raz te wszystkie
wartości i jeszcze raz je ewoluuje sprawdzić co się pod nimi kryje.
Jeśli któraś z tych wartości się zmieniła sam wprowadzi zmiany na stronie
mamy też animacje też druga ale tym razem nie muszę ręcznie martwić się o.
My to wiemy.
Skąd kler wie kiedy musi zaktualizować wartość.
Ja nie powiedziałem mu daru i aktualizuje skąd.
Mianowicie ambulans będziemy sobie tutaj plik Polish Films a queer ma załączone coś
takiego jak sądzę jest to bardzo fajna biblioteka
która wykrywa zmiany zmiany wprowadzane z zewnątrz spoza
aplikacji czyli nasz ekran musi się tylko zmienić jeśli przyszły jakieś zewnętrzne
dane powiedzmy od użytkownika z serwera lub na przykład od zegara systemowego.
Minął czas czyli funkcja sądzę jest biblioteka jest opracowuje
wszystkie funkcje które przyjmują przychodzą te zdarzenia z zewnątrz spoza
naszej aplikacji czyli Time Out Interview event Energy http: web cookies.
Wszystkie przychodzące zdarzenia są opracowane w tzw.
zone i ta zona po prostu wie kiedy się rozpoczyna obsługa jakiegoś zdarzenia czy
przypadkiem zaczynamy obsługę Interview po sekundzie czeka aż to funkcja do końca się
wykona i potem powiadamia Klara że ma sprawdzić wszystkie elementy na stronie
czy coś się nie zmieniło czyli Interview offset temat itd.
Uruchamia się w ten sposób wykrywanie zmian.
Po wykonaniu tej funkcji w ogóle spróbuję zaktualizować wszystkie elementy na
stronie OK teraz jak mogę to zmierzyć a mogę to sprawdzić
tutaj jest coś takiego jak pędzi do uliczek.
Do tego mógłbym także dodać specjalny
interfejs u góry czyli mógłbym także tutaj dodać specjalny interfejs do Czech.
Dzięki temu jeśli się pomyli i powiedzmy zapomniał
liter dodamy tylko więcej to będę miał błąd informacja że brakuje metody doczeka
więc zróbmy sobie metodę Buczek i tu po prostu powiem konsolę blog.
Detektyw Hanks i to oznacza że komponent rodzic
właśnie przechodzi sprawdzanie zmian i nasz komponent będzie za chwilę następny.
Więc jest to szansa bo jeszcze
wprowadzać zmiany posprzątać nim nasz komputer będzie sprawdzany.
Zobaczmy jak często to się dzieje odświeża stronę.
I tu jak widzisz bardzo dużo wykrywane
zmian ale tak naprawdę jest to jedno wykrywanie zmian.
Tylko trzy komponenty i każdy z nich raportu osobno tą samą informację więc na
chwilkę także pozbędą się dwóch komponentów a w Counter mieli tylko jeden
komputer odświeża stronę i zobacz jak przy pierwszym uruchomieniu wykrył
zmiany żeby powstawać wszystkie wartości a następnie co sekundę za każdą.
Coś się dzieje.
On ponownie wykrywa zmiany.
Gdybym gdzieś dodał jeszcze jakieś kolejne zdarzenie czyli powiedzmy w naszym
komputerze to dałbym tutaj KLIK i w tym pliku chciałbym jeszcze naszą
wartość zwiększyć powiedzmy o 10 równa się +10.
I nie tylko tutaj na Steinmeier
ale także dodatkowe eventy jak widzisz moje kliknięcia myszą.
Każda interakcja z zewnętrznym światem
jest wykreowana i powoduje to dodatkowe sekwencje sprawdzenie zmian czy akurat
idzie od góry i wszystkie dynamiczne rzeczy wszystkie zmienne wrażenia
parametry społeczne się zmieniły i tylko elementy które się faktycznie
zmieniły tylko te są aktualizowane żeby niepotrzebnie nie przerywać na stronie
elementów które tak naprawdę się nie zmieniły nie potrzebują takiego
generowania czyli to nam powie ile mamy tutaj zmian.
Jak często sprawdzam wszystkie elementy.
Im więcej elementów takich dynamicznych
jest na stronie tym aplikacja twoja będzie wolniej działała.
Im częściej te eksperymenty sprawdzać ma
oczywiście więcej sprawdzona aplikacja będzie nie działała.
Nie ma też za bardzo bo naprawdę muszą być setki elementów lub robić to wiele razy na
sekundę żeby odczuć że aplikacja działa wolniej.
Jak jednak wspomniałem tutaj ten Buczek powiadamia nas że nasza
rodzi się aktualizuje że Angola od góry sprawdza czy są jakieś zmiany.
Jeśli chcemy sprawdzić czy nasz komponent faktycznie się aktualizuje no tak jest
fajny prosty trik na to mogę sobie tutaj nie zmienną.
Tylko funkcje
sprawdź czy się aktualizuje czy Twoje funkcje i zobacz
ta funkcja wykonywana w HTML przy każdym sprawdzeniu za każdym razem jak sprawdzamy
po kolei czy coś się nie zmieniło a tą funkcję wykona za każdym sprawdzaniem żeby
zobaczyć czy wartość zwracana się różni i czy trzeba wędrować tutaj HTML.
Ja tej funkcji nie będę niczego zwracał ja
chciałbym tylko dostać kolejnego konsul noga i dowiedzieć się link Harold
i detektyw Arendt i zobaczymy jak tam zadziała odświeżenie strony.
Jak widzisz mamy wykrywanie rodzica.
Dziecko dziecko rodzic dziecko dziecko i w ten sposób
dziecko podwójnie jest sprawdzane żeby uniknąć takich sytuacji że powiedzmy nasza
funkcja tutaj czeka update Child zmienić coś co już zostało wygenerowane.
Czy gdyby nasza funkcja takim np.
zrobiła Label i zmieniła nazwę na coś innego no to wtedy
wykrywa to jako błąd dlatego że już coś było wyreżyserowane.
Teraz próbuje nagle w trakcie generowania
znowu będę robić żeby uniknąć jakichś podwójnych darować.
Mamy ekspresję a teraz męczy.
Tak więc tego chcemy uniknąć.
Nie chcemy w funkcjach niczego zmieniać te
funkcje powinny tylko zwracać wartość nie powinny niczego zmieniać.
Google robi to dwa razy.
Można to w pliku później wyłączyć w trybie produkcyjnym.
O tym powiemy.
Można wyłączyć to dodatkowe sprawdzanie
jak te informacje możemy wykorzystać jak możemy zoptymalizować takie właśnie
generowanie czy ktoś by często nie działał.
Mianowicie mogę tu u góry oznaczyć sobie
komponent przejąć detektor importować część detektor strategii
coś takiego i domyślnie zawsze sprawdza wszystkie komponenty chyba
że któryś z komponentów przyłączy się na tryb Push to oznacza że trzeba te zmiany
mu popchnąć poinformować że coś się zmieniło.
Teraz jak działa push działa w ten sposób że teraz widzisz.
Zegar nasz jest wykrywane.
Czy Muller tutaj z każdym naszym set
Interpol powiadamia naszych rodziców od góry.
Wszystkie komponenty wyżej
one są sprawdzane ale nasze dziecko nie jest sprawdzane.
Jeśli zmiana wystąpi w HTML u w naszym dziecku czy Tu klikamy na przykład wtedy
nasze dziecko jest już przygotowywane ale internet już tego nie robi.
Jeśli chcielibyśmy żeby The Interview faktycznie wędrował nasze dziecko no to
trzeba by tutaj zrobić coś takiego jak część detektora odlew
referencje i trzeba ręcznie po każdej zmianie powiadomić Angola
że coś się zmieniło możemy powiedzieć mu w tym momencie teraz
sprawdzić zmiany ale i tak rodzic już tak teraz sprawy zmian będzie.
Kolejce można nawet wymusić zmiany.
Detektyw będzie w tym momencie
możemy także po prostu dopisać się dołączyć do aktualnego sprawdzania rodzica
czy podzielić Mark woreczek czyli wymusić zmianę w tym momencie
lub jeśli zmiany będą szły od góry ktoś rysów będzie sprawdzany to przy okazji
niech nasz komponent też będzie sprawdzany.
Ok. Teraz zamiast grą tego parametru chyba nie
mamy zatem powiedzmy o 10 domyślnie i zobaczymy jak to się zachowa.
Czyli teraz jak widzisz jak każe mu się przypodobać.
Mamy inne przykłady.
Nie jest już podwójne przechowywanie są
pojedyncze bo tylko raz mówię mu Mark Anglicy żebym wraz z rodzicem się
przeładowany przykładowo nie mam dodatkowego sprawdzenia przez Exchange.
Jest takie ryzyko że będziemy
niepotrzebnie podwójne ale tu widzę że też jest OK.
Czy możesz sterować tym procesem
wykrywania zmian w Angoli że masz na to do tego metodę która całkowicie
wyłącza cały komponent i przełącza jakby sterowanie na ręczne.
Pamiętaj o tym że dalej działają wszystkie
zdarzenia w środku więc on push wykrywa zdarzenia w HTML u
także jeśli przekaże dane poprzez impuls rodzica czyli powiedzmy ten klik wywalił
umieścił gdzieś poziom wyżej powiedzmy gdzieś.
Dodam że na razie Tuvalu przekaże jako parametr.
W ten sposób zwiększając wartość tutaj
poprzez rodzica widzisz też mogę wymusić zmianę.
Jeśli rodzic
przy chorym serwuje się i przekazuje nam przekazuje nam nasze nowe informacje do
ich Płyta Push generalnie oznacza że trzeba mu w jakiś sposób powiadomić ten
komponent popchnąć mu tę informację że zmiany czy to poprzez import
czy to poprzez jakieś zdarzenie w środku wbudowane czy poprzez bezpośrednio w
JavaScript powiadomienie go proszę teraz właśnie wykryć zmiany bo wprowadziłem
zmiany i ręcznie powiadamia o tym że coś się zmieniło.
OK teraz zobaczmy jak możemy wykorzystać tę informację żeby zoptymalizować to co my
tutaj bo pojawia się tu w tym momencie września użycie takiej biblioteki np.
pod meteor.
Inter walczy update on się odbywa gdzieś
tam głęboko w bibliotece więc ciężko będzie mi tutaj zrobić detektor Czyngis
chan z drugiej strony nawet ja nie chciałbym aktualizacji bo zobacz że
bibliotek eter ona nie wprowadza zmian w danych ona bezpośrednio modyfikuje HTML
czyjeś ucho w ten sposób i zobaczymy teraz jak często
sprawdzę zmiany tutaj nic się nie dzieje kręciło się to
nam ale gdybyśmy wyłączyli to i bądź zareaguje na każdy Interview na
każdy temat który jest zamontowany w eterze.
No widzisz tych zmian jest bardzo dużo
jeśli chcielibyśmy dodatkowo jeszcze nasze animacje uruchomić teraz w ten sposób.
To z każdą animacją.
Zobacz jak wiele razy jest aktualizowane.
Jeśli ja teraz dodam tutaj
kilka kantorów i każdy z tych kantorów uruchomi własny zegarek
no to zaczęło być to problem bo gdy już tworzymy kilkadziesiąt zdarzeń
na każdą zmianę zaczyna być to problematyczne więc co możemy zrobić jeśli
mamy jakiś taki kod który nie chcemy nim ręcznie sterować.
On sam sobie wykonuje jakieś operacje ale
chcielibyśmy żeby on nie powodował wykrywania zmian.
Możemy włączyć cały komponent ale chciałbym jakby wyłączyć to wykrywanie
zmian komponentu tylko dla jakiegoś fragmentu kodu powiedzmy do naszego kodu.
Czy mam taką sytuację
to i ja mogę bezpośrednio odwołać się do naszej zony czyli.
On mógł pójść do przekazał dostęp do tej bieżącej zony tej strefy wykrywanie zmian
i teraz to ma bardzo dużo fajnych ciekawych funkcjonalności.
Powiedzmy ze on
mógł sprawdzić czy są jakieś zadania wykrywanie zmian czy też zostały wykryte
czy jest to stabilne czy czekamy czy może jakiś błąd był.
Możemy też
wykonać coś w takiej strefie wykrywania zmian i wiedzieć kiedyś ona zakończyła.
Możemy też wykonać coś poza strefą wykrywania zmian
czyli pierwsza ocena Gunnar oznacza że ten kod ma być normalnie wykonany
ale wszystkie zdarzenia w środku czy to są kliki czy to są Time Out Interview ale czy
cokolwiek nie mają powodować właśnie wykrywania zmian.
I tu zrobić to samo
zero tu zrobię to samo czyli ten cały Interview także uruchomienie tutaj Naszej
TV poza komputerem i zobaczymy jak to zadziała eter musimy wysunąć na zewnątrz.
Może robimy to w ten sposób
że tu stworzą zmienną eter a jej wartość powinno być to OK.
Teraz zobaczmy ile będzie wykrywania zmian odświeża stronę.
Jak widzisz te liczniki tam szaleją latają zwiększają się o różne wartości.
Mogę też klikać jeśli kliknąć
no to jest formularzy powolne wykrywanie zmian a zarówno mój Interview jak
Interview który sam wbudowany w środku w bibliotece Meteor one nie powodują w ogóle
zerwania ekranu nie zużywają zasobów komputera na niepotrzebne sprawdzanie
wszystkich innych elementów na stronie których nie chcemy w tym momencie
sprawdzać kiedy tylko ten wycinek a nie mówiłem OK tylko miał problem
że teraz skoro całkowicie wyłączyli wykrywanie zmian
to ustawienie tego update Animation w tym miejscu nie powoduje naszej animacji jak
ponieważ nasza animacja tutaj o nabór na właśnie wykrywanie zmian Aguilera
co możemy zrobić możemy to wszystko jakby uruchomić.
Poza dolarem ale ten wycinek z powrotem
wrócić tylko na moment i powiadomić Aguilera.
Tak z powrotem
jesteśmy sportem chcemy mieć w Zonie żeby z powrotem zaraz po wykonaniu tego kodu
żeby sprawdziły zmiany na ekranie zobaczymy.
Pierwsza animacja i przypomnienie.
Wrócił nasz fajny efekt podświetlenia.
Niestety tutaj jest więcej wykrywania
zmian bo ta część powoduje niestety sprawdzenie kra.
Jeśli wrócę do jednego tylko
komponentu pojedyncze spróbuję jeszcze można w ten sposób.
Takie jak widzisz jest dużo mniej zdarzeń
w porównaniu z sytuacją kiedy każda animacja w środku w tym także
niepotrzebnie sprawdzała wszystkie zmienne na ekranie.
Oczywiście nim krzyczał stosować wszędzie.
To jest istotne kiedyś bardzo dużo rzeczy
lub pracujesz z bardzo dużą ilością elementów dynamicznych na stronie i
czujesz widzisz że aplikacja spowalnia przecina się.
No to jest to bardzo fajny mechanizm.
Warto też wiedzieć tak dla siebie w jaki sposób działa wykrywanie zmian w ogóle.
Pomaga to w pracy pomaga także
przy optymalizacji także przy błędach typu rzędzie.
Afera z niczego które widzieliśmy wcześniej.