reorder

fsprojects · Apr 15, 2017 · 46d380d · 46d380d · haf · May 22, 2017
1 parent 5d4833f
commit 46d380d
Showing 1 changed file with 104 additions and 101 deletions.
diff --git a/slides/index.md b/slides/index.md
@@ -11,125 +11,51 @@
 <br />
 <br />
 
-### Look mum no JavaScript
+### Modern mobile app development
 
 <br />
 <br />
-Steffen Forkmann
-
-[@sforkmann](http://www.twitter.com/sforkmann)
+Steffen Forkmann - [@sforkmann](http://www.twitter.com/sforkmann)
 
 ***
 
----
-
 ### Modern mobile app development?
 
-* "Native mobile apps"
-* Hot loading
-* Easy to refactor / Maintainability
-* Correctness
+* UI/UX
+    * "Native mobile apps"
+    * Performance
+* Tooling
+    * Hot loading
+    * IntelliSense
+* Maintainability
+    * Easy to debug
+    * Correctness
 
 ---
 
-### "Native mobile apps"
+### "Native" UI
 
  <img src="images/meter.png" style="background: transparent; border-style: none;"  width=300 />
 
 ---
 
-### Hot loading
-
-<img src="images/hotloading.gif" style="background: transparent; border-style: none;"  />
-
----
-
-### Hot loading
+### Tooling
 
 <img src="images/hotloading.gif" style="background: transparent; border-style: none;"  />
 
-***
-
-### React
-
-* Facebook library for UI 
-* <code>state => view</code>
-* Virtual DOM to calc minimal number of DOM changes necessary
-
----
-
-### Virtual DOM - Initial
-
-<br />
-<br />
-
-
- <img src="images/onchange_vdom_initial.svg" style="background: white;" />
-
-<br />
-<br />
-
- <small>http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html</small>
-
----
-
-### Virtual DOM - Change
-
-<br />
-<br />
-
-
- <img src="images/onchange_vdom_change.svg" style="background: white;" />
-
-<br />
-<br />
-
- <small>http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html</small>
-
----
-
-### Virtual DOM - Reuse
-
-<br />
-<br />
-
-
- <img src="images/onchange_immutable.svg" style="background: white;" />
-
-<br />
-<br />
-
- <small>http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html</small>
-
-
 *** 
 
-### ReactNative
-
- <img src="images/ReactNative.png" style="background: white;" />
-
-
- <small>http://timbuckley.github.io/react-native-presentation</small>
-
-*** 
+### Model - View - Update
 
-### Elm - Architecture
+#### "Elm - Architecture"
 
  <img src="images/Elm.png" style="background: white;" width=700 />
 
 
  <small>http://danielbachler.de/2016/02/11/berlinjs-talk-about-elm.html</small>
 
----
-
-### Elm - Architecture - Benefits
-
-* Model is single source of truth
-* A pure view function
-* Side effects are modelled as Tasks, handled by the runtime
-* Apps are well structured. All state modifications happen in the central update
 
-*** 
+--- 
 
 ### Model - View - Update
 
@@ -147,14 +73,13 @@ Steffen Forkmann
 
 ### Model - View - Update
 
-    // VIEW (rendered with React)
-
-    let view count dispatch =
+    // VIEW
 
-        R.div []
-            [ R.button [ OnClick (fun _ -> dispatch Decrement) ] [ R.str "-" ]
-              R.div [] [ R.str (string count) ]
-              R.button [ OnClick (fun _ -> dispatch Increment) ] [ R.str "+" ] ]
+    let view model dispatch =
+        div []
+            [ button [ OnClick (fun _ -> dispatch Decrement) ] [ str "-" ]
+              div [] [ str (model.ToString()) ]
+              button [ OnClick (fun _ -> dispatch Increment) ] [ str "+" ] ]
 
 ---
 
@@ -206,7 +131,7 @@ Steffen Forkmann
 
 ### Sub-Components
 
-    // VIEW (rendered with React)
+    // VIEW
 
     let view model dispatch =
         let counterDispatch i msg = dispatch (Modify (i, msg))
@@ -215,9 +140,9 @@ Steffen Forkmann
             model.Counters
             |> List.mapi (fun i c -> Counter.view c (counterDispatch i)) 
         
-        R.div [] [ 
-            yield R.button [ OnClick (fun _ -> dispatch Remove) ] [ R.str "Remove" ]
-            yield R.button [ OnClick (fun _ -> dispatch Insert) ] [ R.str "Add" ] 
+        div [] [ 
+            yield button [ OnClick (fun _ -> dispatch Remove) ] [  str "Remove" ]
+            yield button [ OnClick (fun _ -> dispatch Insert) ] [ str "Add" ] 
             yield! counters ]
 
 ---
@@ -250,6 +175,84 @@ Steffen Forkmann
 
 # Demo
 
+***
+
+### React
+
+* Facebook library for UI 
+* <code>state => view</code>
+* Virtual DOM
+
+---
+
+### Virtual DOM - Initial
+
+<br />
+<br />
+
+
+ <img src="images/onchange_vdom_initial.svg" style="background: white;" />
+
+<br />
+<br />
+
+ <small>http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html</small>
+
+---
+
+### Virtual DOM - Change
+
+<br />
+<br />
+
+
+ <img src="images/onchange_vdom_change.svg" style="background: white;" />
+
+<br />
+<br />
+
+ <small>http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html</small>
+
+---
+
+### Virtual DOM - Reuse
+
+<br />
+<br />
+
+
+ <img src="images/onchange_immutable.svg" style="background: white;" />
+
+<br />
+<br />
+
+ <small>http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html</small>
+
+
 *** 
 
+### ReactNative
+
+ <img src="images/ReactNative.png" style="background: white;" />
+
+
+ <small>http://timbuckley.github.io/react-native-presentation</small>
+
+***
+
 ### Show me the code
+
+*** 
+
+### TakeAways
+
+* Learn all the FP you can!
+* Simple modular design
+
+*** 
+
+### Thank you!
+
+* https://github.com/fable-compiler/fable-elmish
+* https://ionide.io
+* https://facebook.github.io/react-native/