Frontend- Entwicklung mit React/Reacl. Michael

Size: px

Start display at page:

Download "Frontend- Entwicklung mit React/Reacl. Michael Sperber @sperbsen"

Aldous Conley
10 years ago
Views:

1 Frontend- Entwicklung mit React/Reacl Michael

2 Individualsoftware branchenunabhängig Scala, Clojure, Erlang, Haskell, F#, Swift Schulungen, Coaching group.de funktionale- programmierung.de

3 Die nächste GUI

4 MVC

5 MVC Modell View Controller

6 Problem Modell View Änderung hoffentlich entsprechend Änderung Modell View

7 JavaFX

8 Best of JavaFX javafx.application.platform.runlater(! new Runnable {! override def run() {! val webview =! new javafx.scene.web.webview()! val webengine = webview.getengine! val mainurl = getclass.getresource! ( /index.html")! webengine.load(mainurl.toexternalform)! })!

9 Wo läuft JavaScript/HTML5? Browser Mobile JavaFX Windows- Apps QT Gtk

11 Was ist so schlimm an JavaScript? JavaScript DOM- Manipulation

12 Reacl ClojureScript JavaScript

13 Reacl Modell generiert View Änderung neues Modell User generiert neuer View

14 Rendering in React Programm virtuelles DOM

15 Die allgegenwärtige Todo- App

16 Lisp funktional JVM

17 Clojure 15! true! false! "foo"! (+ 1 2)! (+ 1 (* 2! ( )))!

18 Clojure (def pi )!! (defn circumference! [r]! (* 2 pi r))!

20 Applikations- Zustand (defrecord Todo [id text done?]) (def t1 (->Todo 0 Make money false) (def t2 (->Todo 1 retire false) (defrecord TodosApp [next-id todos]) (def ts (->TodosApp 2 [t1 t2]))

21 Einzelnes Todo (reacl/defclass to-do-item! this todo []! render! (dom/div! app state (dom/input {:type "checkbox"! :value (:done? todo)})! (dom/button "Zap")! (:text todo)))!

22 Todo abhaken (reacl/defclass to-do-item! this todo []! render! (dom/div! (dom/input {:type "checkbox"! :value (:done? todo)! :onchange! (fn [_]... )})! (dom/button "Zap")! (:text todo)))!

23 Todo abhaken (reacl/defclass to-do-item! this todo []! render! (dom/div! (dom/input {:type "checkbox"! :value (:done? todo)! :onchange! (fn [_]! (reacl/send-message!! this!...))})! (dom/button "Zap")! (:text todo)))!

24 Todo abhaken (reacl/defclass to-do-item! this todo []! render! (dom/div! (dom/input {:type "checkbox"! :value (:done? todo)! :onchange! (fn [_]! (reacl/send-message!! this! (.-checked (dom/dom-node this...)))})! (dom/button "Zap")! (:text todo)))!

25 Todo abhaken (reacl/defclass to-do-item! this todo []! render! (dom/letdom! [checkbox (dom/input! {:type "checkbox"! :value (:done? todo)! :onchange! (fn [_]! (reacl/send-message!! this! (.-checked (dom/dom-node this checkbox))))})]! (dom/div checkbox! (dom/button "Zap")! (:text todo))))!

26 Checkbox- Message behandeln (reacl/defclass to-do-item! this todo []! render! (dom/letdom! [checkbox (dom/input! {:type "checkbox"! :value (:done? todo)! :onchange! (fn [_]! (reacl/send-message!! this! (.-checked (dom/dom-node this checkbox))))})]! (dom/div checkbox! (dom/button "Zap")! (:text todo)))! handle-message! (fn [checked?]! (reacl/return :app-state! (assoc todo :done? checked?))))!

27 Checkbox- Message behandeln handle-message! (fn [checked?]! (reacl/return! :app-state! (assoc todo :done?! checked?)))! (reacl/send-message!! this! (.-checked (dom/dom-node this checkbox)))

28 Reine Funktionen id 5 id 5 text retire (assoc :done? true) text retire done? false done? true

29 Todo löschen (dom/button "Zap") [ ]

30 Todo löschen (defrecord Delete [todo])! (dom/button! {:onclick! (fn [_]! (reacl/send-message!! parent (->Delete todo)))}! "Zap")!!

31 Parent- Parameter (reacl/defclass to-do-item! this todo [parent]...)!

32 Unveränderbare Daten [ ] [ ]

33 Unveränderbare Daten

34 Lokaler Zustand local state

35 Applikations- Zustand, lokaler Zustand (reacl/defclass to-do-app! this app-state local-state []! initial-state! render! (dom/div! (dom/h3 "TODO")!...))! app state local state

36 Todo- App (defrecord TodosApp! [next-id todos])!! (defrecord NewText [text])! (defrecord Submit [])! (defrecord Change [todo])! (defrecord Delete [todo])!!

37 Todo- App (reacl/defclass to-do-app! this app-state local-state []! render! (dom/div! (dom/h3 "TODO")! (dom/div! (map (fn [todo]! (dom/keyed (str (:id todo))! (to-do-item! todo! (reacl/reaction this ->Change)! this)))! (:todos app-state)))!...)))!

38 Reacl- Komponente instanzieren (to-do-item! todo! (reacl/reaction this ->Change)! this)) (reacl/defclass to-do-item! this todo [parent]!...)!

39 ! Reaktionen (reacl/reaction this ->Change)! (defrecord Change [todo])!

40 Unveränderbare Daten [ ] [ ]

41 Todo ändern handle-message! (fn [msg]! (cond!...! (instance? Change msg)! (let [changed-todo (:todo msg)! changed-id (:id changed-todo)]! (reacl/return :app-state! (assoc app-state! :todos (map (fn [todo]! (if (= changed-id (:id todo))! changed-todo! todo))! (:todos app-state)))))))!

43 Neue Todos (reacl/defclass to-do-app! this app-state local-state []! render! (dom/div!...! (dom/form! {:onsubmit (fn [e]! (.preventdefault e)! (reacl/send-message! this (->Submit)))}!...! (dom/button! (str "Add #" (:next-id app-state)))))!

44 Neue Todos handle-message! (fn [msg]! (cond!...! (instance? Submit msg)! (let [next-id (:next-id app-state)]! (reacl/return :local-state ""! :app-state! (assoc app-state! :todos! (concat (:todos app-state)! [(->Todo next-id! local-state false)])! :next-id (+ 1 next-id)))!

45 Text für neues Todo (reacl/defclass to-do-app! this app-state local-state []! render! (dom/div!...! (dom/form!...! (dom/input {:onchange! (fn [e]! (reacl/send-message!! this! (->NewText! (.. e -target -value))))! :value local-state})))))!

46 Text für neues Todo handle-message! (fn [msg]! (cond!...! (instance? NewText msg)! (reacl/return :local-state! (:text msg))))!

47 Komponenten- Baum Argumente, App- Zustand Reaktion Message- Handler lokaler Zustand App- Zustand Message- Handler Argumente, App- Zustand Argumente, App- Zustand

48 React/Reacl JavaFX Design mit HTML5/CSS ClojureScript statt JavaScript [Clojure statt Java] unveränderliche Daten & React statt DOM- Manipulation group/reacl

49 Clojure/ClojureScript/Reacl mehr Infos: funktionale- programmierung.de

50 Todo löschen handle-message! (fn [msg]! (cond!...! (instance? Delete msg)! (let [id (:id (:todo msg))]! (reacl/return :app-state! (assoc app-state! :todos! (remove (fn [todo] (= id (:id todo)))! (:todos app-state)))))!!

Clojure Web Development

Clojure Web Development Philipp Schirmacher We'll take care of it. Personally. groups.google.com/group/clojure-dus 2012 innoq Deutschland GmbH Agenda Clojure Basics Web Development Libraries Micro Framework