Upload
comsysto-gmbh
View
52
Download
1
Embed Size (px)
Citation preview
Angulardart 2 vs React vs ElmMohammed El Batya - Münchner Webwoche 2016
Mohammed El Batya
Wer bin ich?
Job 1: Lean Java Expert @ comSysto
Job 2: Freiberufl. Wirtschaftsinformatiker
Job 3: PendelPanda - Entwickler
Hobby: Spielen und Entdecken :)
Mein Skill-Level
● ReactJS
● AngularDart2
● Elm
Vorgeschichte
2011 2016
PendelPanda - Fahrplanauskunft
Heute
Von PendelPanda “inspirierte” Apps
PendelMe - iOSSBB - Android / iOS?
PendelPanda.de
PendelPanda.de
PendelPanda.de
... in den nächsten zwei Wochen
PendelPanda.dePendelPanda.one
Welches Framework?
v1 / v2
v1 / v2
stateofjs.com/2016/frontend
Elm?
http://elm-lang.org
Finale Auswahl
2
JS +JSX
Dart
Elm
Evan Czaplicki
Sprache Entwickler
Masterarbeit
Kompilieren / Transpilieren
JSX
Dart
Elm
Pures JavaScript
Assemblersprachedes modernen Webs
SyntaxReact: JavaScript + JSX
React JavaScript + JSX - Beispiel 1
Pseudo-HTML als Erweiterung der Skriptsprache
React JavaScript + JSX - Beispiel 2
JSX Elemente können auch Variablen zugewiesen werden.
React JavaScript + JSX - Beispiel 3
Der Rest ist ganz “normales” JavaScript
SyntaxAngularDart2: Dart
Dart - Beispiel 1
“Objektorientierter Mix aus JavaScript und Java”
Dart - Beispiel 2
Annotations werden umfangreich verwendet
Dart - Vorteile gegenüber JavaScript
● Klassen, Interfaces, Vererbung
● Typprüfung!!! optional
● Einfach weniger Stolperfallen
SyntaxELM
ELM - Eigenschaften
● Rein funktional
● 100%tige Immutabilität
● Statische Typisierung
● Sonderbehandlung von Nebeneffekte
● Pseudo-HTML als Teil der Sprache
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
ELM - Beispiel für Typen
ELM - Beispiel für Funktionen
Implementierung
Deklaration der Funktionssignatur
// Finde in der Liste Model.Buttons// einen Button mit der gegebenen Button.Id
ELM - Beispiel für Funktionen im Detail
Funktionsname RückgabetypTypen der 2 Parameter
Namen der 2 Parameter
ELM - Pseudo-HTML - Beispiel
ELM - Immutabilität
KomponentenbasierteUI - FrameworksReact und Angular
Komponentenbasierte UIs
Click me
Hottest Users
On
Bla bla blaaaaaBla bla blaaaaa la bla blaaaaa Bla bla blaaaaa Bla bla blaaaaa Bla bla blaaaaa
● Wiederverwendbarkeit
● Testbarkeit
● Einheitliche UI
● Wartbarkeit
● Komponierbarkeit
Off
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 MouseDownThen pressedState = Pressed
If MouseUpThen pressedState = Unpressed clickHandler.call()Internal Model
{ pressedState : Pressed selectionState: NotSelected ...}
Interaktion einer Komponente mit Umwelt
Kind-UI-Komponente
Eltern-UI-Komponente
Public Model
StyleLayout
LogicInternal Model
Klare Schnittstelle für Interaktion mit Komponente
Daten / Einstellungen rein
Daten / Events raus
Aufgabe eines komponentenbasierten UI-Frameworks
Kind-UI-Komponente
Eltern-UI-Komponente
Public Model
StyleLayout
LogicInternal Model
Klare Schnittstelle für Interaktion mit Komponente
Daten / Einstellungen rein
Daten / Events raus
UI Framework
Später :P
Konkrete Beispiele?
Die Elm Architektur
Model View
Elm-Architektur
Model
Model Model
Model Model
Model
Model
View View
View
View View
View
View
View
Nicht Komponentenorientiert
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
4 Grundzutaten eines Elm-Programms
// Message + Altes Modell => Neues Modell + Folgemessageupdate : Msg -> Model -> (Model, Cmd Msg)
// Model => HTML, welches Messages erzeugen kannview : Model -> Html Msg
// Typdefinition des Modelstype alias Model
// Eine Art Enum aller möglichen Messages der Apptype Message
PendelPanda’s Komposition
Prototyp - Funktionsumfang
Komponenten
App
ActionBar
ButtonGrid
GridButton
Paw
Connection
Zeig denCode !!!
Anglular: PendelPanda.one
Elm: /elm/index.html
React: /react/index.html
Timetravel Debugging