Przejdź do treści

AngularJS Warsaw #2

Organizatorami spotkania są Arek Kalbarczyk i Darek Kalbarczyk, których książka AngularJS. Pierwsze kroki od 6 tygodni jest na 1 miejscu helion.pl.

Poniżej załączam swoje notatki robione podczas prelekcji. Zastrzegam sobie, że w notatkach nie mam zawartych wszystkich rzeczy, które zostały opowiedziane przez prelegentów.

AngularJS Warsaw

Talk #1: AngularJS UI Router [PL] Arek Kalbarczyk

Czym jest SPA?

  • Dzięki SPA wzrasta responsywność.
  • Mamy wrażenie zbliżone do aplikacji desktopowej.

Routing

Routing służy do przeładowywania widoków i szablonów.
Ułatwia modularyzację.
Dzięki routingowi można połączyć szablon i kontroler, nie trzeba wiązać dyrektywy.

ngRoute

W wersji AngularJS 1.2 został wyodrębniony.

To on łączy URL i szablony, czyli aplikacja wie, że ma przeładowywać szablony.

To on wie, do jakiejś ścieżki podłączyć dany moduł oraz wspiera, co się ma dziać kiedy, ścieżka nie jest odnaleziona.

UI Router - zewnętrzna biblioteka do AngularJS

Istotna zmiana względem ngRoute, który wiąże ze sobą ścieżki. W UI Router Wszystkie ścieżki są połączone poprzez stany. Jest to lepsze, bo można zmienić URLa.

Można zrobić incepcję 😄

W ngRoute nie mamy możliwości dziedziczenia szablonów. w UI Router można zrobić stany dziedziczące.

Możemy na jednej stronie załączyć kilka niezależnych routingów.

Co trzeba zrobić jeśli chcemy skorzystać z UI Router?

  • trzeba wstrzyknąć moduł za pomocą dependency injection
  • konfiguracja - za pomocą serwisu - providera w fazie konfiguracji ładowania
  • nie musimy konfigurować w jednym pliku
  • jak przełączać się pomiędzy stanami - za pomocą ui-sref
  • ui-view wyświetla nasz szablony - może on być w dowolnym fragmencie body

Zagnieżdżony routing

  • do szablonu można załadować kolejny widok - czyli jest to zagnieżdżenie
  • nie warto przesadzać i robić 3 "podstanów"
  • wg UX nie powinniśmy robić więcej niż 3 podstanów, bo typowy użytkownik powinien doklikać się do celu w max 3 kliknięciach

Multi routing

  • definiujemy tyle dyrektyw ile chcemy
  • przypisujemy wartości: view-1, view-2, ...
  • konfiguracja!
    • stan rodzica
    • przekazujemy informację dot. zagnieżdżonych stanów (nazwa rodzica stanów)

Struktura aplikacji

.
├── app
│   ├── app.js
│   └── modules
│       ├── home
│       │   ├── directives
│       │   ├── homeController.js
│       │   ├── homeView.html
│       │   └── services
│       ├── module2
│       └── modules3
├── assets
│   ├── images
│   └── styles
├── index.html
└── scripts

UI Router SEO

  • 23 maj 2014 roku - Googlebot parsuje JavaScript!
  • czyli wchodząc na naszą stronę, jest w stanie zrozumieć naszą stronę i ją zindeksować
  • robots.txt może blokować crawlery
  • jeżeli chcemy osiągnąć prawdziwe wyniki to trzeba odwołać się do stałych metod
  • przed hash znajduje się wykrzyknik - escaped fragments
  • biblioteka prerender.io - pomaga nam przerenderować template po stronie serwera
  • ciekawe udogodnienie ale nie rozwiązanie ost

Warto wiedzieć

  • htmlMode na true
  • base href na /
  • obsługa historii:
    • możemy zaimplementować po stronie serwera, który będzie zapamiętywał stany na których byliśmy
    • jeden wyjątek: każdy stan musi zawierać swoją unikalną ścieżkę
    • oraz kilka innych kroków
  • jeśli chcemy uatrakcyjnić:
    • ng-enter
    • ng-leave

Na zakończenie...

Slajdy: pro.ispringcloud.com/acc/Hgk7GNIxMjQ4/view/1248-hbbYD-3MyQB-hJwuz
Demo: github.com/akalbarczyk/Prelekcje
Czas trwania prelekcji: 18:35 - 19:01

Talk #2: AngularJS + Bootstrap - duet internetowej przyszłości [PL] Tomasz Żarnowiec

Czym jest bootstrap?

  • jest frameworkiem CSS
  • ma predefiniowane klasy CSS

Koncepcja

  • wszystkie elementy które są zdefiniowane opierają się na klasach nie na ID
  • id jest złe - jeśli wykorzystamy ID to odnosimy się do jednego
  • klasy są re-używalne, nie tak jak ID
  • głowna zasada - mobile first
  • w Bootstrap mamy media-queries
  • boot dopasowuje tylko do szerokości - nigdy dla wysokości ekranu
  • co ciekawe tabele - mogą być skalowalne! - z nie responsywnego elementu mamy responsywny

Jak użyć?

  • podłączamy CSS w head
  • podłączamy JS w body na dole
    • jQuery
    • AngularJS
    • Bootstrap
    • następnie pluginy i dodatki JS-owe
  • ładujemy z CDN-a
    • bo nie mamy miejsca na serwerze
    • definicja poprzez //cdnjs.com/bootstrap.js to strona ustala protokół po jakim ściągnie liba

Grid (siatka) czyli podstawowy element bootstrapa

  • każda kolumna ma prefix
    • col-[xs-sm-md-lg]-[1-12] - odnosi się do szerokości wyświetlacza
  • najpierw skalujemy mały ekran, a potem do tych większych
  • div.row - dla desktop będzie wysokości 2 div-ów, ale po zmniejszeniu np. mobile to będzie zawierał 2 kontenery (1 pod drugim)

Animacje!

  • jQuery ma w sobie animacje, ale są one już w CSS
  • jQuery i tak modyfikuje CSS
  • jQuery opóźnia
  • jeśli mamy mały element do animacji to jQuery
  • jeśli duży content trzeba animować to tylko CSS
  • lib: Animate.css - zawiera zdefiniowanych kilkadziesiąt animacji
    • dodajemy po bootstrapie do index.html
    • bardzo lekka biblioteka: 20KB

Mój klucz do frontowego sukcesu: nie przeładowujemy - nie odświeżaj.

Slajdy: pro.ispringcloud.com/acc/I9z1QnkxMjU1/view/1255-R4pEa-5qwp8-iZQsK
Demo: github.com/tomaszzarnowiec/SPATemplate
Czas trwania prelekcji: 19:35 - 20:06

Talk #3: AngularJS - The Reactive Manifesto (v2.0) [PL] Marek Tuchalski

Reactive Manifesto (v2.0)

  • użytkownicy żądają responsywności rzędu 100ms
  • w dużej mierze jest to marketingowy zabieg
    • aby sam typ programowania spopularyzować
  • istnieją 4 punkty:
    1. responsive - obsługa błędów, np pojawiła się 504, trzeba poinformować usera
    2. resilient - odporność
      • architektura serwisowa
      • nie dotyczy Front-end-u - bardziej Back-end-u
      • slack i gmail - przykładowe aplikacje, z których można korzystać kiedy połączenie z internetem zanika
    3. elastic - Back-end-owa rzecz
      • skalowanie
        • automatyzacja mikroserwisów
        • replikacja danych
        • dodawania maszyn (manualna)
    4. message driven
      • systemy komunikują się poprzez wiadomości
      • gdzie na Front-end-zie można użyć message driven?
        • systemy muszą działa async, aby nie blokować zasobów, kiedy tego nie potrzebujemy

Project share by role

Reactive manifesto reklamuje Typesafe. Ludzie myślą, że to dotyczy tylko Back-end-ów Nieprawda! Aby aplikacja spełniała wymogi użytkowników to Front-end musi być responsywny!

Demo of 1-page HR Hiring & Idea Sharing platform

  • platforma, która ma zmieniać świat!
  • handlujmy szybko
  • obsługujmy błędy
  • wpinajmy błędy, bo jak faktycznie klient zobaczy to abyśmy mogli się przed typ zabezpieczyć

DDoS - jak z tym żyć?

Co jeśli przyjdzie nam przeżyć "Wykop Efekt" albo "Reddit Effect"?

Poprawnie to się nazywa Efekt Slashdot-a. Więcej do poczytania na ten temat https://pl.wikipedia.org/wiki/Efekt_Slashdota

  • Co powinna zrobić reaktywna apka?
  • Pokazać 504 gateway timeout!
  • bo lepiej jest pokazać aplikację dla części użytkowników, niż wcale

Facebook

  • continuous deployment
Netflix
  • zabija swoje serwery
  • gdzie się podnoszą następne

Bądź gotowy na fail!

Założenie:

  • że zawsze dostanę odpowiedź jest bardzo złym założeniem
  • to że dostaniemy 404 też jest złym założeniem
  • obsługujemy grupy błędów (4xx, 5xx)

Jak to osiągnąć? Odpowiedź: Separation of concerns!

Czas trwania prelekcji: 20:27 - 21:10
Prelegentem był Marek z firmy Evojam.
Kontakt: @marektuchalski

Marek na scenie.