Prezentacja z meetupu grupy "Uszanowanko Programowanko", tematyka AngularJS: http://www.uszanowanko.pl/angular Autor: Łukasz Bachman Szybkie prototypowanie aplikacji w AngularJS jest jedną z największych zalet tego narzędzia. Jednakże jako programiści musimy zadbać o to, aby pisane przez nas aplikacje były wydajne zarówno pod względem pamięciowym, jak i czasowym. W mojej krótkiej prezentacji chciałbym przedstawić kilka praktycznych porad, które pomogą to osiągnąć. Całość omówimy na prawdziwym studium przypadku aplikacji przetwarzającej duże zbiory danych.

1. Praktyczne porady na temat optymalizacji
wydajności aplikacji tworzonych z użyciem

2. 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

3. Za wszystkie nietrafne tłumaczenia i wszelkie inne makaronizmy
serdecznie przepraszam!

4. Kilka słów o mnie
● Łukasz Bachman, lukaszbachman@gmail.com
● 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!

5. Czy AngularJS jest mało wydajny?

8. 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

9. Rodzaje optymalizacji
● Pamięciowa (RAM)
● Czasowa (CPU)
● CPU vs. RAM
● Zasobów (pula połączeń HTTP, blokowanie w środowisku
wielowątkowym)

10. 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

11. 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

15. Demo

16. Optymalizacja ng-repeat: wyniki
ng-repeat Natywny JS i DOM Częściowe aktualizacje
1047ms 801ms 322ms
Czas renderowania pierwszej części tabeli: 13ms!

17. 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

18. 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

19. 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

20. 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

21. 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

22. 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