Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Praktyczne porady na temat optymalizacji
wydajności aplikacji tworzonych z użyciem
Agenda
● Kilka słów o mnie
● "Angular jest powooooooolny... jak Java."
● Rodzaje optymalizacji
● Dostępne narzędzia
● Pros...
Za wszystkie nietrafne tłumaczenia i wszelkie inne makaronizmy
serdecznie przepraszam!
Kilka słów o mnie
● Łukasz Bachman, lukaszbachman@gmail.com
● staż deweloperski (oficjalnie): 2.5 roku @ Software House, 3...
Czy AngularJS jest mało wydajny?
Skąd przekonanie, że Angular nie
jest wydajny?
● Brak znajomości narzędzi (AngularJS, przeglądarki)
● Powierzchowna znajom...
Rodzaje optymalizacji
● Pamięciowa (RAM)
● Czasowa (CPU)
● CPU vs. RAM
● Zasobów (pula połączeń HTTP, blokowanie w środowi...
Dostępne narzędzia
● Środowisko uruchomieniowe - przeglądarka WWW
● https://developers.google.com/web/fundamentals/perform...
Narzędzia: przeglądarka WWW
● budowanie drzew: DOM, CCSOM
● blokowanie zasobów
● etapy renderowania
○ tworzenie drzewa ren...
Demo
Optymalizacja ng-repeat: wyniki
ng-repeat Natywny JS i DOM Częściowe aktualizacje
1047ms 801ms 322ms
Czas renderowania pie...
AngularJS: Podstawowe techniki
optymalizacji
● nie zanieczyszczaj obiektów $scope
● eliminuj zbędne obiekty $watch
● korzy...
AngularJS: Podstawowe techniki
optymalizacji (c.d.)
● używaj reguł CSS zamiast ng-class
● unikaj funkcji w dyrektywach ng-...
AngularJS: Bardziej zaawansowane techniki
optymalizacji
● Opóźnione wywołanie funkcji i aktualizacji modelu (Debounce)
● M...
Przypadek użycia: optymalizacja warstwy
usługowej aplikacji w AngularJS
● Specyfika aplikacji:
○ przetwarzanie dużych zbio...
Rozwiązanie: utworzenie nowego API
RESTowego dla aplikacji klienckiej JS
● odseparowanie danych zmiennych i niezmiennych
●...
Bibliografia
● Niezbędnik: http://bahmutov.calepin.co/improving-angular-
web-app-performance-example.html
● https://develo...
Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS
Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS
Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS
Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS
Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
AngülarJS – Czyli o czym warto pamiętać programując za Odrą
Next
Upcoming SlideShare
AngülarJS – Czyli o czym warto pamiętać programując za Odrą
Next
Download to read offline and view in fullscreen.

Share

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

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

  1. 1. Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem
  2. 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. 3. Za wszystkie nietrafne tłumaczenia i wszelkie inne makaronizmy serdecznie przepraszam!
  4. 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. 5. Czy AngularJS jest mało wydajny?
  6. 6. 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
  7. 7. Rodzaje optymalizacji ● Pamięciowa (RAM) ● Czasowa (CPU) ● CPU vs. RAM ● Zasobów (pula połączeń HTTP, blokowanie w środowisku wielowątkowym)
  8. 8. 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
  9. 9. 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
  10. 10. Demo
  11. 11. Optymalizacja ng-repeat: wyniki ng-repeat Natywny JS i DOM Częściowe aktualizacje 1047ms 801ms 322ms Czas renderowania pierwszej części tabeli: 13ms!
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  • danielhusak76

    Jul. 22, 2015
  • szarkens

    Mar. 24, 2015
  • piotrpelczar

    Mar. 17, 2015

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.

Views

Total views

3,537

On Slideshare

0

From embeds

0

Number of embeds

1,039

Actions

Downloads

11

Shares

0

Comments

0

Likes

3

×