AngularJS Warsaw #8

Talk #1: Tworzenie aplikacji wielojęzykowych w AngularJS Bartłomiej Narożnik

Prelegent, został przedstawiony przez Darka (organizatora) jako jeden z najlepszych programistów z którymi pracował.

Zarządzenie wielojęzykowością

• Podejście monarchistyczne - tylko tłumaczenie języka
• Podejście anarchistyczne - osobny Front-end
• Podejście federalistyczne - wspólna cześć, ale dla każdej kultury dostosowujemy aplikacje

Narzędzie angular-translate

• Obsługuje większość tego co oferuje Angular
• Parametryzacja
• Można przetłumaczyć całe fragmenty HTMLa
• Można dodać obsługę błędów

Instalacja bardzo prosta, wystarczy zdefiniować:

1. Zależność
2. Język
3. Struktura translacji (JSON)

Dobrze się obsługuje, gdy mamy service. Jednakże filter również pasuje. Dyrektywa jest najbardziej popularna w użyciu.

Zmienne w tłumaczeniach

Trzeba podawać dodatkowo wartości tych zmiennych np. translate-values w dyrektywach.

Zmiana języka

Metoda use(key), gdzie key to klucz z językiem.
Uruchomienie metody bez argumentu zwróci obecnie używany język.

Pluralizacja

Obsługuje messageformat.js.

Obsługa błędów

Jeśli jest problem z tłumaczeniem, np. jeśli klucz nie ma swojego odpowiednika, możemy dostać console.warn() z tego tytułu, albo też możemy zdefiniować swój handler.
Mamy mnóstwo zdarzeń, na które możemy nasłuchiwać, więc można stwierdzić, że możliwości są ogromne.

Bezpieczeństwo

• angular-sanitize (z modułu)
• albo po prostu escape

Zalecane jest aby używać angular-sanitize.

Jak wykryć język?

Funkcja determinePreferredLanguage

navigator.languages[0]
navigator.language
navigator.browserLanguage
navigator.systemLanguage
navigator.userLanguage

Język z jakim jest zainstalowana przeglądarka, co nie koniecznie jest wystarczające, np. w dużych firmach mamy zainstalowane z domyślnymi ustawieniami (ang) a przecież mówimy po polsku.

Lepsze rozwiązanie to parsowanie nagłówka HTTP "Accept-Language", gdzie wystarczy zmienić język w przeglądarce, wtedy będziemy mieli zawsze poprawny język odpowiadający preferencjom użytkownika.

Talk #2: AngularJS. Najczęściej zadawane pytania na rozmowie kwalifikacyjnej Dariusz Kalbarczyk

Darek razem z Bartkiem przygotowują razem książkę o tytule takim jak tytuł tej prelekcji.

Skąd pomysł na książkę?

Ostatnimi czasy Darek rekrutował całymi dniami w Katowicach i Szczecinie kandydatów na developerów do firm, gdzie projekty oparte były na AngularJS.
Po przeprowadzonych rozmowach postanowił zebrać wszystkie pytania w jedno miejsce i napisać książkę.

Według Darka, pracodawca poszukuje pracowników według takich 3 kryteriów:

• 33% - czy ma to czego firma oczekuje?
• 33% - czy mu się w ogóle chce?
• 33% - jak się sprawdzi w zespole?

Seria pytań

1. Dlaczego warto używać Angulara?

Odp. z sali: "Jest pocięty", ale jest komponentyzacja, która przekłada się na testy,

2. Czy angular jest zależny od jQuery?

Odp. z sali: nie jest zależny, ponieważ posiada jqLite, czyli takie podstawy z biblioteki jQuery, jeśli jednak jQuery będzie dostępne przed osadzeniem Angulara, to wykorzysta on metody obiektu jQuery.

3. Wymień najważniejsze cechy Angulara.

Odp. z sali: moduły, SPA, i ... reszta cech.

4. Co to są moduły w Angularze?

Odp. z sali: Kontenery, podobne do przestrzeni nazw. Możemy definiować zależności.

5. Jakie komponenty możemy definiować w modułach?

Odp. z sali: kontrolery, dyrektywy, configi.

6. Jak nazywa się moduł główny Angulara?

Odp z sali: ng - moduł główny, ładowany domyślnie, podczas startu aplikacji.

7. Jak Angular ładuje zależności?

Odp. z sali: Dependency Injection.

8. Kiedy są ładowane moduły zależne?

Brak odpowiedzi.

9. Co to jest globalne API?

Odp. z sali: Metody obiektu angular, np. angular.copy.

10. Jaka jest różnica jest pomiędzy prefiksem $ a $$?

Odp. z sali: W Angularze za pomocą $ oznaczone są właściwości publiczne obiektu, a z $$ prywatne.

11. Co to jest $scope i $rootScope?

Odp. z sali:

• $rootScope jest to najwyższy rodzaj $scope (główny)
• $scope - obiekt skleja kontroler i widok.
• $scope-y mogą być zagnieżdżane.
• $rootScope.$new może tworzyć niezwiązane z niczym scope-y, można go zapakować w service i traktować jako obsługa sygnałów.

12. Wyjaśnij różnice pomiędzy ng-if oraz ng-show?

Odp. z sali: ng-if usuwa z DOM, a ng-show korzysta ze styli CSS do ukrycia elementu.

13. Jakie specjalne zmienne udostępnia ngRepeat?

Odp. z sali: last, first, even, odd, index, middle.

14. Co to jest i jak działa ng-include?

Odp. z sali: Dyrektywa służy do ładowania plików statycznych. Niestety, ale nie można z innej domeny.

15. Co jest szybsze $digest czy $apply?

Odp. z sali: $digest jest szybszy bo jedzie tylko w dół.
$apply w górę i w dół.

16. Jak działa funkcja $destroy dla danego zakresu?

Odp. z sali: Usuwa $scope z pamięci.

17. Jaka jest różnica pomiędzy $watch i $observe?

Odp. z sali:
- $watch można wykorzystywać w dyrektywach w funkcji link i kontrolerach
- $observe tylko w dyrektywach w obiekcie attrs.

18. Wymień metody serwisu $http?

Odp. z sali: $get, $head, $post, $put, $delete, $jsonp, $patch

19. Wymień metody wspierane przez serwis $resource?

Odp. z sali: $get, $save, $query, $remove, $delete.

20. Które dyrektywy wspierają animacje?

Odp. z sali: ng-show, ng-if, ...

21. Co to jest IIFE?

Na to pytanie ja odpowiedziałem! Chciałem chociaż raz móc odpowiedzieć. Przy mojej znajomości Angulara (brak realizacji żadnego projektu) powiedziałem, że IIFE to pewnego rodzaju $scope dla Angulara.
Generalnie o IIFE można opowiadać i opowiadać, a odpowiedzi musiały być jak najbardziej trafne.

Każda poprawna odpowiedź kończyła się otrzymaniem od organizatorów drobnych upominków. Według mnie jest to bardzo miły gest.

Talk #3: Host your AngularJS app like a PRO! Tomasz Wiśniewski

Prelekcja sponsorowana.

Tomasz opowiadał o Azure App Service. Usługa jest za darmo do 10 produkcyjnych aplikacji internetowych.

Prelekcja zachęciła mnie do skorzystania z tego narzędzia! Także, spróbujmy dać szansę. Zachęcam do podzielenia się wnioskami w komentarzach.

Talk #4: Ionic kreator. Interfejs szybko łatwo i przyjemnie. Dariusz Biedrzycki

Tworzenie UI w ionic-u jest żmudne oraz nudne, dlatego powstał Ionic Creator, który to ma "interfejs webowy".

Kiedy ja używam takiego kreatora?

• Zaczynam projekt - wyklikując go
• Tworzę nowy template

Darek pokazuje jak się obsługuje kreator Ionica. Opisuje plusy i minusy tego narzędzia na żywo. Co prawda miał przygotowane slajdy, ale publiczność opowiedziała się za prezentacja z użyciem właściwego narzędzia.

Zalety

• Szybkie tworzenie formularzy w aplikacji mobilnej
• Klient od razu widzi projekt

Minusy

• Nie da się wgrać do kreatora własnego projektu
• W bezpłatnej wersji można zrobić tylko 1 projekt
• Statyczny routing, czyli nie można parametryzować ścieżek

Podsumowanie

Jako organizator WarsawJS cieszę się, że w warszawskiej społeczności developerów JavaScript, powstają nowe organizacje związane z tym językiem.

Jako osoba lubiąca interakcje międzyludzkie, staram się być obecny na większości meetupów, nie zawsze mi się to udaje, ale jeśli jestem uczestnikiem takiego wydarzenia, to na 90%, kilka dni po wydarzeniu pojawi się wpis zawierający moje notatki ze spotkania.

Najbliższe spotkanie AngularJS Warsaw odbędzie się za około 2 miesiące, na które organizatorzy serdecznie zapraszają!