![Page 1: Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55aabb6d1a28ab59138b4587/html5/thumbnails/1.jpg)
Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem
![Page 2: Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55aabb6d1a28ab59138b4587/html5/thumbnails/2.jpg)
Agenda
● Kilka słów o mnie● "Angular jest powooooooolny... jak Java."● Rodzaje optymalizacji● Dostępne narzędzia● Proste techniki optymalizacji● Bardziej zaawansowane techniki optymalizacji● Przypadek użycia● Bibliografia
![Page 3: Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55aabb6d1a28ab59138b4587/html5/thumbnails/3.jpg)
Za wszystkie nietrafne tłumaczenia i wszelkie inne makaronizmy serdecznie przepraszam!
![Page 4: Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55aabb6d1a28ab59138b4587/html5/thumbnails/4.jpg)
Kilka słów o mnie● Łukasz Bachman, [email protected]● staż deweloperski (oficjalnie): 2.5 roku @ Software House, 3 lata @ praca zdalna● ważniejsze technologie: Java (J2SE, J2EE, Spring), HTML+CSS, JavaScript, NodeJs● główne obowiązki
○ migracja aplikacji desktopowej e-discovery (Swing, REST) do wersji działającej w przeglądarce
○ projektowanie i wdrażanie nowych funkcji○ nadzór nad wydajnością całej platformy○ zapewnienie kompatybilności z poprzednimi wersjami
● u-w-i-e-l-b-i-a-m AngularJS!
![Page 5: Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55aabb6d1a28ab59138b4587/html5/thumbnails/5.jpg)
Czy AngularJS jest mało wydajny?
![Page 6: Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55aabb6d1a28ab59138b4587/html5/thumbnails/6.jpg)
![Page 7: Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55aabb6d1a28ab59138b4587/html5/thumbnails/7.jpg)
![Page 8: Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55aabb6d1a28ab59138b4587/html5/thumbnails/8.jpg)
Skąd przekonanie, że Angular nie jest wydajny?
● Brak znajomości narzędzi (AngularJS, przeglądarki)● Powierzchowna znajomość biblioteki● Brak analizy prawdziwych wąskich gardeł● Warstwa abstrakcji zwalnia z obowiązku analizy własnego
kodu● Przykład
![Page 9: Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55aabb6d1a28ab59138b4587/html5/thumbnails/9.jpg)
Rodzaje optymalizacji
● Pamięciowa (RAM)● Czasowa (CPU)● CPU vs. RAM● Zasobów (pula połączeń HTTP, blokowanie w środowisku
wielowątkowym)
![Page 10: Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55aabb6d1a28ab59138b4587/html5/thumbnails/10.jpg)
Dostępne narzędzia● Środowisko uruchomieniowe - przeglądarka WWW● https://developers.google.com/web/fundamentals/performance● https://developer.chrome.com/devtools
○ Timeline - śledzenie cyklu przetwarzania stron WWW○ Heap profiler - śledzenia alokacji pamięci○ CPU profiler - śledzenia czasu wykonywania operacji
● https://github.com/bahmutov/code-snippets● Dobre praktyki inżynierskie
![Page 11: Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55aabb6d1a28ab59138b4587/html5/thumbnails/11.jpg)
Narzędzia: przeglądarka WWW
● budowanie drzew: DOM, CCSOM● blokowanie zasobów● etapy renderowania
○ tworzenie drzewa renderingu○ pozycjonowanie elementów na dostępnej przestrzeni
urządzenia (layout)○ zapisanie poszczególnych pikseli na płótnie (paint)
● pula połączeń HTTP
![Page 12: Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55aabb6d1a28ab59138b4587/html5/thumbnails/12.jpg)
![Page 13: Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55aabb6d1a28ab59138b4587/html5/thumbnails/13.jpg)
![Page 14: Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55aabb6d1a28ab59138b4587/html5/thumbnails/14.jpg)
![Page 15: Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55aabb6d1a28ab59138b4587/html5/thumbnails/15.jpg)
Demo
![Page 16: Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55aabb6d1a28ab59138b4587/html5/thumbnails/16.jpg)
Optymalizacja ng-repeat: wyniki
ng-repeat Natywny JS i DOM Częściowe aktualizacje
1047ms 801ms 322ms
Czas renderowania pierwszej części tabeli: 13ms!
![Page 17: Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55aabb6d1a28ab59138b4587/html5/thumbnails/17.jpg)
AngularJS: Podstawowe techniki optymalizacji
● nie zanieczyszczaj obiektów $scope● eliminuj zbędne obiekty $watch● korzystaj z jednorazowego wiązania
(bind-once, ::)● pisz dyrektywy wykorzystujące
natywny JS● dodawaj '$track by' do ng-repeat
![Page 18: Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55aabb6d1a28ab59138b4587/html5/thumbnails/18.jpg)
AngularJS: Podstawowe techniki optymalizacji (c.d.)
● używaj reguł CSS zamiast ng-class
● unikaj funkcji w dyrektywach ng-*
● jeśli to możliwe, używaj $digest() zamiast $apply()● filtruj dane w kontrolerze, a nie w widoku
● dbaj o to, aby własne funkcje $watch() były wykonywane szybko
![Page 19: Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55aabb6d1a28ab59138b4587/html5/thumbnails/19.jpg)
AngularJS: Bardziej zaawansowane techniki optymalizacji
● Opóźnione wywołanie funkcji i aktualizacji modelu (Debounce)● Memoryzacja? (Memoization)● Renderuj to co niezbędne, ładuj resztę w miarę potrzeb (stronnicowanie,
Virtual Scrolling #1, Virtual Scrolling #1● web workers● buforuj duże struktury danych w zwykłych obiektach JS, kopiuj do
mniejszych tablic● możesz spróbować ukrywać część widoku zamiast go usuwać, aby
uniknąć tworzenia DOM
![Page 20: Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55aabb6d1a28ab59138b4587/html5/thumbnails/20.jpg)
Przypadek użycia: optymalizacja warstwy usługowej aplikacji w AngularJS
● Specyfika aplikacji:○ przetwarzanie dużych zbiorów dokumentów○ skomplikowane obliczenia po stronie serwerowej○ kilka otwartych okien aplikacji jednocześnie○ dwie aplikacje klienckie (J2SE, JS)
● Problem: użytkownicy raportują "zawieszenie się aplikacji po paru minutach pracy w grupie"● Diagnoza:
○ współdzielone zasoby RESTowe używane są w sposób nieodpowiedni w aplikacji JS
○ część serwerowa ewaluowała od początku projektu i zasoby te pobierały całe dokumenty do pamięci
○ część kliencka w JS ewaluowała i część danych uprzednio trzymanych w pamięci podręcznej była pobierana na nowo
● Efekt: wyczerpanie zasobów puli połączeń HTTP przeglądarki
![Page 21: Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55aabb6d1a28ab59138b4587/html5/thumbnails/21.jpg)
Rozwiązanie: utworzenie nowego API RESTowego dla aplikacji klienckiej JS
● odseparowanie danych zmiennych i niezmiennych● przechowywanie obietnic HTTP do danych niezmiennych w cache'u● utworzenie usługi SharedItemDataService, do której kontrolery AngularJS mogą dowiązywać
swój model $scope● optymalizacja części serwerowej (wyeliminowanie blokowania BD, dedykowane zasoby
REST)● Kilka wniosków:
○ szybkie prototypowanie vs. wydajne API○ ograniczenie liczby połączeń HTTP poprawiło responsywność wielu funkcji w
aplikacji○ cache obietnic HTTP umożliwiających dostęp do obiektów niezmiennych jest
niezbędny w aplikacjach typu SPA
![Page 22: Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55aabb6d1a28ab59138b4587/html5/thumbnails/22.jpg)
Bibliografia
● Niezbędnik: http://bahmutov.calepin.co/improving-angular-web-app-performance-example.html
● https://developers.google.com/web/fundamentals/performance/
● https://developer.chrome.com/devtools● http://jsfiddle.net/SDa2B/4/● http://kamilkp.github.io/angular-vs-repeat/#?tab=8