What About Elm?
1 like364 views
The document discusses the Elm programming language, highlighting its purpose to simplify coding and its functional programming features for web development. It describes Elm's core syntax, libraries, reliability through constructs like state machines and tagged unions, as well as examples of graphics and game development. Additionally, it emphasizes the importance of community engagement through workshops aimed at enhancing skills in functional programming and game design.
![GRAPHICS EXAMPLEGRAPHICS EXAMPLE
import Html exposing (text)
import Graphics.Collage exposing (..)
import Graphics.Element exposing (..)
import Color exposing (lightBrown)
main =
Html.fromElement (collage 200 200 [
filled lightBrown (ngon 4 50)
])](https://image.slidesharecdn.com/whataboutelm-160426160244/85/What-About-Elm-8-320.jpg)
![WHY ELM SIGNALS?WHY ELM SIGNALS?
type alias Model = Int
type Action = Increment | Decrement
update : Action -> Model -> Model
update action model =
case action of
Increment -> model + 1
Decrement -> model - 1
view : Signal.Address Action -> Model -> Html
view address model =
div []
[ button [ onClick address Decrement ] [ text "-" ]
, div [ countStyle ] [ text (toString model) ]
, button [ onClick address Increment ] [ text "+" ]
]
Running Code!](https://image.slidesharecdn.com/whataboutelm-160426160244/85/What-About-Elm-12-320.jpg)
What About Elm?
- 1. WHY ELM?WHY ELM? SCOTT SMITHSCOTT SMITH SCOTTNELSONSMITH@GMAIL.COMSCOTTNELSONSMITH@GMAIL.COM
- 2. WHY ELM EXIST??WHY ELM EXIST?? Purpose: "writing great code should be easy … now it is" How: "the best of functional programming in your browser" Example: "Hello World"
- 3. WHY ELM LANGUAGE?WHY ELM LANGUAGE? Elm Syntax Core Language
- 4. WHY ELM LIBRARIES?WHY ELM LIBRARIES? Rendering Effects elm-http start-app elm-effecs elm-html elm-svg elm-markdown elm-webgl Core
- 5. WHY ELM RELIABILITY?WHY ELM RELIABILITY? Contracts Enumerations State Machines Tagged Unions Banishing NULL Recursive Data Structures Precisely model the problem!
- 6. WHY ELM EXAMPLES?WHY ELM EXAMPLES? Graphics Games
- 7. WHY ELM GRAPHICS?WHY ELM GRAPHICS? Build in concepual layers shape outline the shape form "fill in" shape using texture collage render List of form in rectangular area Html convert collage to HTML elements
- 8. GRAPHICS EXAMPLEGRAPHICS EXAMPLE import Html exposing (text) import Graphics.Collage exposing (..) import Graphics.Element exposing (..) import Color exposing (lightBrown) main = Html.fromElement (collage 200 200 [ filled lightBrown (ngon 4 50) ])
- 9. GRAPHICS EXMAPLE USING ELIXIR PIPEGRAPHICS EXMAPLE USING ELIXIR PIPE tho it's called a forward function in Elm import Html exposing (text) import Graphics.Collage exposing (..) import Graphics.Element exposing (..) import Color exposing (lightBrown) main = ngon 4 50 |> filled lightBrown |> List.repeat 1 |> collage 200 200 |> Html.fromElement
- 10. WHY ELM GAMES?WHY ELM GAMES? ( )GitHub Mario Pong Froggy
- 11. WHY ELM ARCHITETURE?WHY ELM ARCHITETURE? -- MODEL type alias Model = { ... } -- UPDATE type Action = Reset | ... update : Action -> Model -> Model update action model = case action of Reset -> ... ... -- VIEW view : Model -> Html view = ...
- 12. WHY ELM SIGNALS?WHY ELM SIGNALS? type alias Model = Int type Action = Increment | Decrement update : Action -> Model -> Model update action model = case action of Increment -> model + 1 Decrement -> model - 1 view : Signal.Address Action -> Model -> Html view address model = div [] [ button [ onClick address Decrement ] [ text "-" ] , div [ countStyle ] [ text (toString model) ] , button [ onClick address Increment ] [ text "+" ] ] Running Code!
- 13. WHY ELM REACTIVE?WHY ELM REACTIVE?
- 14. WHY ELM FOR ME?WHY ELM FOR ME? Javascript is general purpose – no "point of view" Functional programming: creativity through constraints Hoping it guides me on building a non-trivial 2D game
- 15. WHY LEARN ELM?WHY LEARN ELM? Weekly Elm Hacking Session Saturday mornings 10:00-noon (starting May 7) Here Emphasis on client functional programming Game development Sophisticated user experience Integration w/ Elixir/Phoenix