:sparkles: PWA :sparkles:
Twarz autora bloga

Piotr Kowalski

Organizator WarsawJS Trener YouTuber

AngularJS Warsaw #8


W minioną środę zawitałem z kolegą na warszawskie Włochy, gdzie w siedzibie firmy Microsoft odbyło się kolejne spotkanie z Angularem, czyli AngularJS Warsaw.

Na spotkanie zapisało się 133 osoby i przyszło około 80. Taka prawidłowość występuje zawsze. Nigdy na spotkania nie przychodzi dokładnie tyle osób ile się zapisuje. Ale tak jest zawsze w życiu, chociażby zaproszenia na wesele. Zostaje zaproszonych 200 osób, a przychodzi 150.

Link do wydarzenia: meetup.com/AngularJS-Warsaw/

Podczas spotkania wysłuchaliśmy 4 prelekcji. A jedną z nich poprowadził nawet organizator całego zamieszania, Darek Kalbarczyk. Wszystkie prelekcje były zorientowane na framework AngularJS autorstwa Misko Havery'ego, Adam Abrons'a, pracujących w organizacji Google.

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

Czas trwania 19:05 - 19:20 + 3

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?
Darek Kalbarczyk opowiada o nowej książce, którą piszę razem ze swoim kolegą z pracy.

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.

Czas trwania 19:30 - 19:50

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.

Czas trwania 19:50 - 20:20

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
Czas trwania 20:28 - 20:57

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