Elm Language - RIP Tutorial · PDF file from: elm-language It is an unofficial and free Elm...

Click here to load reader

  • date post

  • Category


  • view

  • download


Embed Size (px)

Transcript of Elm Language - RIP Tutorial · PDF file from: elm-language It is an unofficial and free Elm...

  • Elm Language


  • Table of Contents

    About 1

    Chapter 1: Getting started with Elm Language 2

    Remarks 2

    Versions 2

    Examples 2

    Installation 2

    Using the installer 2

    Using npm 3

    Using homebrew 3

    Switch between versions with elm-use 3

    Further reading 3

    Hello World 3

    Editors 4

    Atom 4

    Light Table 4

    Sublime Text 4

    Vim 4

    Emacs 4

    IntelliJ IDEA 4

    Brackets 4

    VS Code 4

    Initialize and build 5

    Initialization 5

    Building the project 5

    Style Guide and elm-format 5

    Embedding into HTML 6

    Embed into the body tag 6

    Embed into a Div (or other DOM node) 7

  • Embed as a Web worker (no UI) 7

    REPL 8

    Local Build Server (Elm Reactor) 10

    Chapter 2: Backend Integration 11

    Examples 11

    Basic elm Http.post json request to node.js express server 11

    Chapter 3: Collecting Data: Tuples, Records and Dictionaries 14

    Examples 14

    Tuples 14

    Accessing values 14

    Pattern matching 14

    Remarks on Tuples 14

    Dictionaries 14

    Accessing values 15

    Updating values 15

    Records 16

    Accessing values 16

    Extending Types 16

    Updating values 17

    Chapter 4: Custom JSON Decoders 19

    Introduction 19

    Examples 19

    Decoding into union type 19

    Chapter 5: Debugging 20

    Syntax 20

    Remarks 20

    Examples 20

    Logging a value without interrupting computations 20

    Piping a Debug.log 20

    Time-traveling debugger 21

    Debug.Crash 21

  • Chapter 6: Functions and Partial Application 23

    Syntax 23

    Examples 23

    Overview 23

    Lambda expressions 24

    Local variables 24

    Partial Application 25

    Strict and delayed evaluation 26

    Infix operators and infix notation 27

    Chapter 7: Json.Decode 28

    Remarks 28

    Examples 28

    Decoding a list 28

    Pre-decode a field and decode the rest depending on that decoded value 28

    Decoding JSON from Rust enum 29

    Decoding a list of records 30

    Decode a Date 31

    Decode a List of Objects Containing Lists of Objects 32

    Chapter 8: Lists and Iteration 34

    Remarks 34

    Examples 34

    Creating a list by range 34

    Creating a list 34

    Getting elements 35

    Transforming every element of a list 36

    Filtering a list 36

    Pattern Matching on a list 37

    Getting nth element from the list 37

    Reducing a list to a single value 38

    Creating a list by repeating a value 39

    Sorting a list 40

    Sorting a list with custom comparator 40

  • Reversing a list 40

    Sorting a list in descending order 41

    Sorting a list by a derived value 41

    Chapter 9: Making complex update functions with ccapndave/elm-update-extra 42

    Introduction 42

    Examples 42

    Message which call a list of messages 42

    Chaining messages with andThen 42

    Chapter 10: Pattern Matching 44

    Examples 44

    Function arguments 44

    Single type deconstructed argument 44

    Chapter 11: Ports (JS interop) 45

    Syntax 45

    Remarks 45

    Examples 45

    Overview 45

    Note 45

    Outgoing 45

    Elm side 45

    JavaScript side 46

    Note 46

    Incoming 46

    Elm side 46

    JavaScript side 47

    Note 47

    Immediate outgoing message on start-up in 0.17.0 47

    Get started 48

    Chapter 12: Subscriptions 50

    Remarks 50

    Examples 50

  • Basic subscription to Time.every event with 'unsubscribe' 50

    Chapter 13: The Elm Architecture 52

    Introduction 52

    Examples 52

    Beginner program 52

    Example 52

    Program 53

    Example 53

    Program with Flags 55

    One way parent-child communication 56

    Example 56

    Message tagging with Html.App.map 57

    Chapter 14: Types, Type Variables, and Type Constructors 59

    Remarks 59

    Examples 59

    Comparable data types 59

    Type Signatures 59

    Basic Types 60

    Type Variables 61

    Type Aliases 62

    Improving Type-Safety Using New Types 63

    Constructing Types 65

    The Never type 65

    Special Type Variables 66

    Credits 68

  • About

    You can share this PDF with anyone you feel could benefit from it, downloaded the latest version from: elm-language

    It is an unofficial and free Elm Language ebook created for educational purposes. All the content is extracted from Stack Overflow Documentation, which is written by many hardworking individuals at Stack Overflow. It is neither affiliated with Stack Overflow nor official Elm Language.

    The content is released under Creative Commons BY-SA, and the list of contributors to each chapter are provided in the credits section at the end of this book. Images may be copyright of their respective owners unless otherwise specified. All trademarks and registered trademarks are the property of their respective company owners.

    Use the content presented in this book at your own risk; it is not guaranteed to be correct nor accurate, please send your feedback and corrections to [email protected]

    https://riptutorial.com/ 1

    http://riptutorial.com/ebook/elm-language https://archive.org/details/documentation-dump.7z mailto:[email protected]

  • Chapter 1: Getting started with Elm Language


    [Elm][1] is a friendly functional programming language compiling to JavaScript. Elm focuses on browser-based GUIs, single-page applications.

    Users usually praise it for:

    No runtime exceptions.• Best compiler errors ever• The ease of refactoring.• Expressive type system• The Elm Architecture, which Redux is inspired by.•


    Version Release Date

    0.18.0 2016-11-14

    0.17.1 2016-06-27

    0.17 2016-05-10

    0.16 2015-11-19

    0.15.1 2015-06-30

    0.15 2015-04-20



    To start development with Elm, you need to install a set of tools called elm-platform.

    It includes: elm-make, elm-reactor, elm-repl and elm-package.

    All of these tools are available through CLI, in other words you can use them from your terminal.

    Pick one of the following methods to install Elm:

    Using the installer

    https://riptutorial.com/ 2

    http://elm-lang.org/blog/compiler-errors-for-humans http://blog.jenkster.com/2016/06/how-elm-slays-a-ui-antipattern.html http://guide.elm-lang.org/architecture/ http://elm-lang.org/blog/the-perfect-bug-report https://gist.github.com/evancz/d5f418f42827262ece857aa8ff6458c6 http://elm-lang.org/blog/farewell-to-frp http://elm-lang.org/blog/compilers-as-assistants http://elm-lang.org/blog/compiler-errors-for-humans http://elm-lang.org/blog/announce/0.15 https://github.com/elm-lang/elm-platform https://github.com/elm-lang/elm-make https://github.com/elm-lang/elm-reactor https://github.com/elm-lang/elm-repl https://github.com/elm-lang/elm-package

  • Download the installer from the official website and follow the installation wizard.

    Using npm

    You can use Node Package Manager to install Elm platform.

    Global installation:

    $ npm install elm -g

    Local installation:

    $ npm install elm

    Locally installed Elm platform tools are accessible via:

    $ ./node_modules/.bin/elm-repl # launch elm-repl from local node_modules/

    Using homebrew

    $ brew install elm

    Switch between versions with elm-use

    Install elm-use

    $ npm install -g elm-use

    Switch to an older or newer elm version

    $ elm-use 0.18 // or whatever version you want to use

    Further reading

    Learn how to Initialize and build your first project.

    Hello World

    See how to compile this code in Initialize and build

    import Html

    https://riptutorial.com/ 3

    http://elm-lang.org/install https://www.npmjs.com/ http://www.riptutorial.com/elm/example/7220/initialize-and-build http://www.riptutorial.com/elm/example/7220/initialize-and-build

  • main = Html.text "Hello World!"



    https://atom.io/packages/language-elm• https://atom.io/packages/elmjutsu•

    Light Table


    Sublime Text






    IntelliJ IDEA




    VS Code


    https://riptutorial.com/ 4

    https://atom.io/packages/language-elm https://atom.io/packages/elmjutsu https://github.com/rundis/elm-light https://packagecontrol.io/packages/Elm%20Language%20Support https://github.com/ElmCast/elm-vim https://github.com/jcollard/elm-mode https://plugins.jetbrains.com/plugin/8192 https://github.com/tommot348/elm-brackets https://marketplace.visualstudio.com/items?itemName=sbrink.elm

  • Initialize and build

    You should have Elm platform installed on your computer, the following tutorial is written with the assumption, that you are familiar