grundlegende konzepte von elm, react und angulardart 2 im vergleich
TRANSCRIPT
![Page 1: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/1.jpg)
Angulardart 2 vs React vs ElmMohammed El Batya - Münchner Webwoche 2016
![Page 2: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/2.jpg)
![Page 3: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/3.jpg)
![Page 4: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/4.jpg)
Mohammed El Batya
Wer bin ich?
Job 1: Lean Java Expert @ comSysto
Job 2: Freiberufl. Wirtschaftsinformatiker
Job 3: PendelPanda - Entwickler
Hobby: Spielen und Entdecken :)
![Page 5: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/5.jpg)
Mein Skill-Level
● ReactJS
● AngularDart2
● Elm
![Page 6: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/6.jpg)
Vorgeschichte
![Page 7: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/7.jpg)
2011 2016
PendelPanda - Fahrplanauskunft
Heute
![Page 8: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/8.jpg)
![Page 9: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/9.jpg)
Von PendelPanda “inspirierte” Apps
PendelMe - iOSSBB - Android / iOS?
![Page 10: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/10.jpg)
PendelPanda.de
![Page 11: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/11.jpg)
PendelPanda.de
![Page 12: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/12.jpg)
PendelPanda.de
![Page 13: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/13.jpg)
![Page 14: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/14.jpg)
... in den nächsten zwei Wochen
![Page 15: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/15.jpg)
PendelPanda.dePendelPanda.one
![Page 16: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/16.jpg)
Welches Framework?
v1 / v2
v1 / v2
![Page 17: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/17.jpg)
stateofjs.com/2016/frontend
Elm?
![Page 18: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/18.jpg)
http://elm-lang.org
![Page 19: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/19.jpg)
Finale Auswahl
2
JS +JSX
Dart
Elm
Evan Czaplicki
Sprache Entwickler
Masterarbeit
![Page 20: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/20.jpg)
Kompilieren / Transpilieren
JSX
Dart
Elm
Pures JavaScript
Assemblersprachedes modernen Webs
![Page 21: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/21.jpg)
SyntaxReact: JavaScript + JSX
![Page 22: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/22.jpg)
React JavaScript + JSX - Beispiel 1
Pseudo-HTML als Erweiterung der Skriptsprache
![Page 23: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/23.jpg)
React JavaScript + JSX - Beispiel 2
JSX Elemente können auch Variablen zugewiesen werden.
![Page 24: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/24.jpg)
React JavaScript + JSX - Beispiel 3
Der Rest ist ganz “normales” JavaScript
![Page 25: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/25.jpg)
SyntaxAngularDart2: Dart
![Page 26: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/26.jpg)
Dart - Beispiel 1
“Objektorientierter Mix aus JavaScript und Java”
![Page 27: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/27.jpg)
Dart - Beispiel 2
Annotations werden umfangreich verwendet
![Page 28: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/28.jpg)
Dart - Vorteile gegenüber JavaScript
● Klassen, Interfaces, Vererbung
● Typprüfung!!! optional
● Einfach weniger Stolperfallen
![Page 29: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/29.jpg)
SyntaxELM
![Page 30: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/30.jpg)
ELM - Eigenschaften
● Rein funktional
● 100%tige Immutabilität
● Statische Typisierung
● Sonderbehandlung von Nebeneffekte
● Pseudo-HTML als Teil der Sprache
![Page 31: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/31.jpg)
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
![Page 32: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/32.jpg)
ELM - Beispiel für Typen
![Page 33: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/33.jpg)
ELM - Beispiel für Funktionen
Implementierung
Deklaration der Funktionssignatur
// Finde in der Liste Model.Buttons// einen Button mit der gegebenen Button.Id
![Page 34: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/34.jpg)
ELM - Beispiel für Funktionen im Detail
Funktionsname RückgabetypTypen der 2 Parameter
Namen der 2 Parameter
![Page 35: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/35.jpg)
ELM - Pseudo-HTML - Beispiel
![Page 36: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/36.jpg)
ELM - Immutabilität
![Page 37: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/37.jpg)
KomponentenbasierteUI - FrameworksReact und Angular
![Page 38: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/38.jpg)
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
![Page 39: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/39.jpg)
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 ...}
![Page 40: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/40.jpg)
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
![Page 41: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/41.jpg)
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
![Page 42: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/42.jpg)
Später :P
Konkrete Beispiele?
![Page 43: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/43.jpg)
Die Elm Architektur
![Page 44: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/44.jpg)
Model View
Elm-Architektur
Model
Model Model
Model Model
Model
Model
View View
View
View View
View
View
View
Nicht Komponentenorientiert
![Page 45: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/45.jpg)
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
![Page 46: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/46.jpg)
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
![Page 47: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/47.jpg)
PendelPanda’s Komposition
![Page 48: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/48.jpg)
Prototyp - Funktionsumfang
![Page 49: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/49.jpg)
Komponenten
App
ActionBar
ButtonGrid
GridButton
Paw
Connection
![Page 50: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/50.jpg)
Zeig denCode !!!
![Page 51: Grundlegende Konzepte von Elm, React und AngularDart 2 im Vergleich](https://reader031.vdocuments.pub/reader031/viewer/2022030304/58796fb71a28ab37368b5d23/html5/thumbnails/51.jpg)
Anglular: PendelPanda.one
Elm: /elm/index.html
React: /react/index.html