Prezentacja skupiać się będzie na doznaniach jakie niesie praca z frameworkiem Aurelia. Opowiem, co mnie osobiście przekonało do sprawdzenia go, a także jak z tej próby wyszedł. Opiszę jak Aurelia integruje się z innymi nowoczesnymi rozwiązaniami, a także skonfrontuję ją z popularnymi alternatyami. Pomogę Wam opanować podstawy, poznać założenia jakie stoją za projektem i dostarczę wszystkich informacji niezbędnych, żebyście byli w stanie sami zdecydować, czy to coś dla Was.

1. Jacek Mirowski
jacek@mirowski.me
Framework

3. Krótko o mnie

4. Krótko o mnie

5. Krótko o mnie

7. Agenda
● Skąd się wzięła Aurelia
● Dlaczego Aurelia
● Przykład: TODO App
● Wiązanie danych
● Co jeszcze dostaniesz w pakiecie
● Linki
● Q&A

8. Sk d si wzi ła Aureliaą ę ę

9. Sk d si wzi ła Aureliaą ę ę

10. Sk d si wzi ła Aureliaą ę ę
Rob Eisenberg
Były członek zespołów tworzących Anular 2.0 i Angular Material
Twórca frameworków: Caliburn, Caliburn.Micro i Durandal

11. Dlaczego Aurelia

12. Dlaczego Aurelia
● Otwarte źródła (MIT)
Sytuacja podobna jak w pozostałych popularnych rozwiązaniach wyłączając React’a

13. Dlaczego Aurelia
● Otwarte źródła (MIT)
● Dobre wsparcie
Podobnie jak Ember jest oficjalnym produktem konkretnej firmy
Blu Spire zapewnia wsparcie dla firm z prawdziwego zdarzenia

14. Dlaczego Aurelia
● Otwarte źródła (MIT)
● Dobre wsparcie
● Brak zewnętrznych zależności
Podobnie jak React, Polymer i Vue
Inaczej niż w przypadku Angulara 2 i Embera

15. Dlaczego Aurelia
● Otwarte źródła (MIT)
● Dobre wsparcie
● Brak zewnętrznych zależności
● Aktywna społeczność

16. Dlaczego Aurelia
● Otwarte źródła (MIT)
● Dobre wsparcie
● Brak zewnętrznych zależności
● Aktywna społeczność
● Wsparcie dla najnowszych technologii
EsNext, TypeScript, Web Components (wraz z Shadow DOM)

17. Dlaczego Aurelia
● Otwarte źródła (MIT)
● Dobre wsparcie
● Brak zewnętrznych zależności
● Aktywna społeczność
● Wsparcie dla najnowszych technologii
● Nowoczesna architektura
W pełni funkcjonalny framework o modularnej budowie
Pozwala wybrać elementy zależnie od aktualnych potrzeb, inne zastąpić

18. Dlaczego Aurelia
● Otwarte źródła (MIT)
● Dobre wsparcie
● Brak zewnętrznych zależności
● Aktywna społeczność
● Wsparcie dla najnowszych technologii
● Nowoczesna architektura
● Konwencja ponad konfiguracją
Pozwala pisać aplikacje przy minimalnej ilości potrzebnego do tego kodu

19. Dlaczego Aurelia
● Otwarte źródła (MIT)
● Dobre wsparcie
● Brak zewnętrznych zależności
● Aktywna społeczność
● Wsparcie dla najnowszych technologii
● Nowoczesna architektura
● Konwencja ponad konfiguracją
● Łatwość nauki i zapamiętania
Posiada dobrą dokumentację z licznymi przykładami
Używa konstrukcji podobnych do czystego JS

20. Dlaczego Aurelia
● Otwarte źródła (MIT)
● Dobre wsparcie
● Brak zewnętrznych zależności
● Aktywna społeczność
● Wsparcie dla najnowszych technologii
● Nowoczesna architektura
● Konwencja ponad konfiguracją
● Łatwość nauki i zapamiętania
● Niska natarczywość
Pozwala skupić się na logice biznesowej, jest bardzo elastyczna

21. Przykład: TODO App

22. Przykład: TODO App

23. Przykład: TODO App

24. Przykład: TODO App

25. Przykład: TODO App

26. Przykład: TODO App

27. Przykład: TODO App

28. Przykład: TODO App

29. Przykład: TODO App

30. Przykład: TODO App

31. Przykład: TODO App

32. Przykład: TODO App

33. Przykład: TODO App

34. Przykład: TODO App

35. Przykład: TODO App

36. Przykład: TODO App

37. Przykład: TODO App

38. Przykład: TODO App

39. Przykład: TODO App

40. Przykład: TODO App

41. Przykład: TODO App

42. Wi zanie danychą
Atrybuty
<hml-tag attribute.command="expression">
attribute: dowolny atrybut html lub svg
command:
one-time: wiązanie jednokierunkowe z modelu widoku do widoku; jednorazowe
one-way: wiązanie z modelu widoku do widoku
two-way: wiązanie dwukierunkowe
bind: wiązanie automatyczne; dwukierunkowe dla pół formularzy i
jednokierunkowe w niemal każdym innym przypadku
expresion: wyrażenie JavaScript

43. Wi zanie danychą
Zdarzenia DOM
<hml-tag event.command="expression">
event: nazwa zdarzenia DOM bez przedrostka „on”; np. „click” lub „submit”
command:
trigger: wiąże event handler z elementem
delegate: wiąże event handler z dokumentem (lub granicą Shadow DOM)
expresion: wyrażenie JavaScript (specjalna zmienna „$event” pozwala na dostęp
do zdarzenia wewnątrz wyrażenia)
Aurelia domyślnie wywołuje „preventDefault()”. By wyłączyć to zachowanie event
handler musi zwrócić „true”.

44. Wi zanie danychą
Angular 2
Jednokierunkowe
<html-tag [attribute]="expression">
<html-tag bind-attribute="expression">
Dwukierunkowe
<html-tag [(attribute)]="expression">
<html-tag bindon-attribute="expression">
Zdarzenia DOM
<html-tag (event)="expression">
<html-tag on-event="expression">
Vue
Jednokierunkowe
<html-tag v-bind:attribute="expression"></a>
Dwukierunkowe
<input v-model="expression">
Zdarzenia DOM
<html-tag v-on:event="expression">

45. Wi zanie danychą
Polymer
Jednokierunkowe
<html-tag attribute$="[[expression]]">
Dwukierunkowe
<html-tag attribute="{{hostValue::event}}">
Zdarzenia DOM
<html-tag on-event="expression">
React
Jednokierunkowe
<html-tag attribute="{expression}"></a>
Zdarzenia DOM
<html-tag on-event="{expression}">

46. Co jeszcze dostaniesz w pakiecie
● Routing
● Kontener zależności
● Klienty HTTP
● Narzędzia konsolowe
● Walidacja
● Wirtualizacja UI
● Kolejka zadań
● Logi
● Inspektor
● Internacjonalizacja
● Polyfille
● Obsługa historii
● System wiadomości
● Renderowanie po stronie serwera w drodze!

47. Linki
http://aurelia.io/
https://github.com/aurelia
http://aurelia.io/hub.html#/doc/persona/developer
http://blog.aurelia.io/
https://twitter.com/AureliaEffect
https://twitter.com/EisenbergEffect

48. Q&AJacek Mirowski
jacek@mirowski.me