3. Hack Your Career
• Wstęp do programowania w chmurze przy użyciu
Kubernetes'a
Wykłady - AEiI
(14:00 – 15:30, s.428)
Warszaty – SAP Hybris
(17:00 – 18:30, s. Death Valley)
10.04
19.04 • Tworzenie testowalnej aplikacji, czyli TDD w praktyce
25.04• Bots everywhere
10.05 • Angular – stań się kanciastym
23.05
30.05
05.06
• Troubleshooting przy pomocy Spring AOP
• Ghost in the shell
• DevOps - czyli jak przestałem klikać i pokochałem
automatyzację
https://fb.com/Hack.your.Career Zarejestruj się na wydarzenie
4. Top ecommerce,
marketing, billing
Najlepszy Pracodawca
2017 w rankingu AON
Jedno z 20 centrów
SAP’s Labs Network
> 350 pracowników
Development: Go, Java,
Cloud Native solutions
5. Slajd o prowadzących
• Edyta Sporysz
Ÿ Web developer with two years of experience
focused mainly on AngularJS and Angular
frameworks.
• Dariusz Jagieło
• Backend dev becoming full stack after
5 years of working in Java world.
• Ivijan Hađija
• Enthusiastic web developer with a passion
for JavaScript related technologies.
11. Historia Angulara
Dawno, dawno temu….
Prawie 10 lat temu!
• Misko Hevery (developer @Google)
Przełomowe wersje w rozwoju Angular:
• AngularJs 1.x ->
AngularJs 1.5.x ->
Angular 2 ->
Angular 4 ->
Angular 5 ->
Angular ??
12. Angular teraz
• TypeScript-based open-source
front-end web-application platform
• jest rozwijany przez Google i
społeczność deweloperów
• kompletne przepisanie w v2
• Stackoverflow statystyki 2018
• https://insights.stackoverflow.com/survey/2018
• #technology-frameworks-libraries-and-tools
14. Zalety angular-cli
• Project generation
• Code generator for:
• components, directives, classes, modules, services, etc.
• Build generation
• Unit test runner
• End-to-end test runner
• Easy local development
• Linting
• CSS pre-processor support
• JIT/AOT compilation
• ng new
• ng init
• ng generate
• ng build (--prod)
• ng test
• ng e2e
• ng serve
15. angular-cli demo
• Przykład tworzenia aplikacji/komponentu/serwisu
• Dokumentacja: https://github.com/angular/angular-cli/wiki/generate
19. Wprowadzenie do komponentów, dyrektyw i formularzy
• Przykład komponentu i jego szablonu
• Przykład dyrektyw
• Przepływ danych między klasą komponentu i jego szablonem
• Przykład prostego formularza
• Komunikacja między komponentami
25. Budowa formularzy – stylowanie formularza w zależności od
stanu elementu
Angular automatycznie dołącza klasy css do elementu formularza w zależności od jego stanu, np.:
• .ng-valid
• .ng-invalid
• .ng-pristine
• .ng-dirty
• .ng-touched
• .ng-untouched
35. Serwisy – po co?
• Komponenty nie powinny zajmować się pobieraniem i zapisywaniem danych
• Wydzielenie wspólnej funkcjonalności
• Komponenty powinny być najprostsze jak to możliwe
• Usunięcie zależności, ukrycie szczegółów implementacyjnych
• Bo Angular Style Guide tak mówi https://angular.io/guide/styleguide#05-15 J
• Jak dodać serwis? à Angular CLI – ng g service my-service
36. Programowanie reaktywne
• ReactiveX à RxJS
• Połączenie najlepszych idei z:
o Observable, czyli wzorca Producent
o Wzorca Iterator
o Programowania funkcyjnego
37. Komunikacja HTTP
• Http(Angular < v4) à HttpClient (XHR przeglądarki)
• Testowalność (HttpTestingModule)
• Typowane żądania
• Interceptory żądań i odpowiedzi
• Odpowiedź jako strumień (Observable)