elm introduction at OK Lab Niederrhein

Transcript

1. ELM FUNCTIONAL PROGRAMMING IN YOUR BROWSER INTRODUCTION BY ELMAR BURKE
2. WHO AM I? Elmar Burke @elmarburke on mostly every network hallo@elmarburke.de
3. I'M ONE OF THE PEOPLE AT ANGULARJS.DE We have articles about AngularJS and Angular 2, a developer register and we give workshops!
4. EVERYTHING STARTS WITH A Hello World main = span [class "welcome-message"] [text "Hello, World!"]
5. "THE HISTORY OF PROGRAMMING" AS SEEN FROM JAVASCRIPT 1. Assembly 2. C 3. Java 4. JavaScript
6. "THE HISTORY OF PROGRAMMING" AS SEEN FROM JAVASCRIPT 1. Assembly - maintainability 2. C - memory management 3. Java - all those freakin' types 4. JavaScript - maintainability
7. WHAT'S THE NEXT LANGUAGE? > Types? > Functional? > Gradual Types? > Prolog? > Stack-based?
9. WHAT MAKES ELM SO GREATE > No runtime exceptions > Friendly Error Messages > Blazing fast rendering1 > Libraries with guarantees > Clean syntax > Smooth JavaScript interop 1 With the package elm-html
10. LETS BUILD SOMETHING WE'LL BUILD A SIMPLE COUNTER IN ELM Go to elm-lang.org and grab the installer or head over to elm-lang.org/try
11. THE ELM ARCHITECTURE > Model — the state of your application > Update — a way to update your state > View — a way to view your state as HTML
12. import Html exposing (..) -- MODEL type alias Model = { ... } -- UPDATE type Msg = Reset | ... update : Msg -> Model -> Model update msg model = case msg of Reset -> ... ... -- VIEW view : Model -> Html Msg view model = ...
13. import Html exposing (Html, button, div, text) import Html.App as Html import Html.Events exposing (onClick) main = Html.beginnerProgram { model = 0, view = view, update = update } type Msg = Increment | Decrement update msg model = case msg of Increment -> model + 1 Decrement -> model - 1 view model = div [] [ button [ onClick Decrement ] [ text "-" ] , div [] [ text (toString model) ] , button [ onClick Increment ] [ text "+" ] ]
14. ADD A RESET BUTTON You'll need > A message > An update > A button
15. ADD TYPES Types are optional. You can just add them.