Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich mit Pizza und Bier. Ein Prototyp, drei Implementierungen! Wo liegen Unterschiede und Gemeinsamkeiten? Erfahrungen und Meinungen aller Teilnehmer sind ausdrücklich erwünscht! Speaker Bio: Mohammed El Batya Begeisterter Java/Spring-, Android-, Web-Entwickler ... also quasi ein "Full-Stack-Entwickl­er". Entwickler von PendelPanda für Android. Entdecken und Ausprobieren von neuen Technologien, Programmiersprachen und Frameworks ist mein Hobby!

1. Angulardart 2 vs React vs Elm
Mohammed El Batya - Münchner Webwoche 2016

4. Mohammed El Batya
Wer bin ich?
Job 1: Lean Java Expert @ comSysto
Job 2: Freiberufl. Wirtschaftsinformatiker
Job 3: PendelPanda - Entwickler
Hobby: Spielen und Entdecken :)

5. Mein Skill-Level
● ReactJS
● AngularDart2
● Elm

6. Vorgeschichte

7. 2011 2016
PendelPanda - Fahrplanauskunft
Heute

9. Von PendelPanda “inspirierte” Apps
PendelMe - iOSSBB - Android / iOS?

10. PendelPanda.de

11. PendelPanda.de

12. PendelPanda.de

14. ... in den nächsten zwei Wochen

15. PendelPanda.dePendelPanda.one

16. Welches Framework?
v1 / v2
v1 / v2

17. stateofjs.com/2016/frontend
Elm?

18. http://elm-lang.org

19. Finale Auswahl
2
JS +JSX
Dart
Elm
Facebook
Google
Evan Czaplicki
Sprache Entwickler
Masterarbeit

20. Kompilieren / Transpilieren
JSX
Dart
Elm
Pures
JavaScript
Assemblersprache
des modernen Webs

21. Syntax
React: JavaScript + JSX

22. React JavaScript + JSX - Beispiel 1
Pseudo-HTML als Erweiterung der Skriptsprache

23. React JavaScript + JSX - Beispiel 2
JSX Elemente können auch Variablen zugewiesen werden.

24. React JavaScript + JSX - Beispiel 3
Der Rest ist ganz “normales” JavaScript

25. Syntax
AngularDart2: Dart

26. Dart - Beispiel 1
“Objektorientierter Mix aus JavaScript und Java”

27. Dart - Beispiel 2
Annotations werden umfangreich verwendet

28. Dart - Vorteile gegenüber JavaScript
● Klassen, Interfaces, Vererbung
● Typprüfung!!! optional
● Einfach weniger Stolperfallen

29. Syntax
ELM

30. ELM - Eigenschaften
● Rein funktional
● 100%tige Immutabilität
● Statische Typisierung
● Sonderbehandlung von Nebeneffekte
● Pseudo-HTML als Teil der Sprache

31. ELM - Unterschiede zu Dart / JavaScript
● Keine Objekte, Klassen, Interfaces etc.
● Keine For, While, Do Schleifen
● Kein “Null” oder ähnliches
● Keine Laufzeitfehler
● Keine unkontrollierten Nebeneffekte
● Pattern Matching und Destrukturierung

32. ELM - Beispiel für Typen

33. ELM - Beispiel für Funktionen
Implementierung
Deklaration der Funktionssignatur
// Finde in der Liste Model.Buttons
// einen Button mit der gegebenen Button.Id

34. ELM - Beispiel für Funktionen im Detail
Funktionsname RückgabetypTypen der 2 Parameter
Namen der 2 Parameter

35. ELM - Pseudo-HTML - Beispiel

36. ELM - Immutabilität

37. Komponentenbasierte
UI - Frameworks
React und Angular

38. Komponentenbasierte UIs
Click me
Hottest Users
On
Bla bla blaaaaa
Bla bla blaaaaa la bla blaaaaa Bla bla
blaaaaa Bla bla blaaaaa Bla bla blaaaaa
● Wiederverwendbarkeit
● Testbarkeit
● Einheitliche UI
● Wartbarkeit
● Komponierbarkeit
Off

39. UI-Komponenten im Detail - z.B. Button
Layout
Click me
Click me
Style
Click me
Click Me
Click me
Click Me
Model
External Model
{
caption : ‘Click me’
isDisabled : false
clickHandler: addAnItem
...
}
Logic
If MouseDown
Then
pressedState = Pressed
If MouseUp
Then
pressedState = Unpressed
clickHandler.call()Internal Model
{
pressedState : Pressed
selectionState: NotSelected
...
}

40. Interaktion einer Komponente mit Umwelt
Kind-UI-Komponente
Eltern-UI-Komponente
Public Model
StyleLayout
Logic
Internal Model
Klare Schnittstelle
für Interaktion mit Komponente
Daten / Einstellungen rein
Daten / Events raus

41. Aufgabe eines komponentenbasierten UI-Frameworks
Kind-UI-Komponente
Eltern-UI-Komponente
Public Model
StyleLayout
Logic
Internal Model
Klare Schnittstelle
für Interaktion mit Komponente
Daten / Einstellungen rein
Daten / Events raus
UI Framework

42. Später :P
Konkrete Beispiele?

43. Die Elm
Architektur

44. Model View
Elm-Architektur
Model
Model Model
Model Model
Model
Model
View View
View
View View
View
View
View
Nicht Komponentenorientiert

45. Elm-Architektur
view : Model -> Html Msg
update : Msg -> Model -> (Model, Cmd Msg)
Initial Message
+ Initial Model
New Model
Update Virtual
DOM
Render Diff to
Screen
Follow-Up Message
Events
User-Events like Clicks
ClockTicks, HTTP-Response, etc

46. 4 Grundzutaten eines Elm-Programms
// Message + Altes Modell => Neues Modell + Folgemessage
update : Msg -> Model -> (Model, Cmd Msg)
// Model => HTML, welches Messages erzeugen kann
view : Model -> Html Msg
// Typdefinition des Models
type alias Model
// Eine Art Enum aller möglichen Messages der App
type Message

47. PendelPanda’s
Komposition

48. Prototyp - Funktionsumfang

49. Komponenten
App
ActionBar
ButtonGrid
GridButton
Paw
Connection

50. Zeig den
Code !!!

51. Anglular: PendelPanda.one
Elm: /elm/index.html
React: /react/index.html

52. Timetravel Debugging