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

Facebook

Google

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