AngularJS Warsaw #2

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

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

• Strona projektu UI Router: github.com/angular-ui/ui-router

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

• 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!

• oddzielić modele od widoku
• nie przekazywać danych przez scope-a
• izolować html od css
• styleguide dla kontrolerów - więcej na triangular.io/blog/styleguide-controllers/

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