Short introduction to Elm

Elm is functional, statically typed language which compiles to JavaScript. Check how it provides much better control and performance, and can you start using it next to JS.

Transcript

1. ELM LANGUAGE SHORT INTRODUCTION BY KRZYSZTOF KUCHARSKI
2. COMPILES TO JAVASCRIPT STATICALLY TYPED PURELY FUNCTIONAL
3. MORE COMPLICATED THAN JS ?
4. ELM IS SIMPLE
5. LET'S DIVE IN
6. ARCHITECTURE
7. REACT + REDUX 1 1 https://www.theodo.fr/blog/2016/03/getting-started-with-react-redux-and-immutable-a-test-driven-tutorial-part-2/
8. SIMILAR TO ELM
9. OUR "APPLICATION"
10. import Html exposing (Html, button, div, text) import Html.Events exposing (onClick) main = Html.beginnerProgram { model = model, view = view, update = update } -- MODEL type alias Model = Int model : Model model = 0
11. -- UPDATE type Msg = Increment | Decrement update : Msg -> Model -> Model update msg model = case msg of Increment -> model + 1 Decrement -> model - 1 -- VIEW view : Model -> Html Msg view model = div [] [ button [ onClick Decrement ] [ text "-" ] , div [] [ text (toString model) ] , button [ onClick Increment ] [ text "+" ] ]
12. WHY IS IT BETTER ? (IN MY OPINION)
13. FRIENDLY COMPILER
14. FASTER THAN ANGULAR / REACT / THIS WEEK'S FRAMEWORK
15. JAVASCRIPT INTEROP you can start writing elm next to your React components import Elm from 'react-elm-components'; import { Counter } from '../elm/Cou.elm'; ... <Elm src={Counter} />
16. PIPE OPERATOR sum (filter (isOver 100) (map getCost records)) vs records |> map getCost |> filter (isOver 100) |> sum
17. NO RUNTIME EXCEPTIONS
18. WEBPACK PLUGIN up to speed in 2 min
19. PRODUCTION READY noredink with 80k+ lines in elm
20. CAN I USE IT ON PRODUCTION ?
21. "IT DEPENDS"