Berkenalan dengan Bahasa Pemrograman Elm

Wisnu Adi Nurcahyo 1 Maret 2017

Berkenalan dengan Bahasa Pemrograman Elm

Elm merupakan sebuah functional language yang hasil kompilasinya dijadikan JavaScript. Elm digunakan untuk membuat website atau web application. Elm memiliki penekanan yang sangat kuat pada kesederhanaan (simplicity), kemudahan penggunaan (ease-of-use), dan quality tooling.

Apa yang membuat Elm menarik?

  1. Tidak ada runtime error. Tidak ada null. Tidak ada undefined is not a function.
  2. Memiliki error message yang bersahabat sehingga memudahkan kita untuk mengatasi masalah yang terjadi.
  3. Kode yang well-architected bersamaan dengan tumbuhnya app kita.
  4. Memiliki performa yang baik.
  5. Mendukung JavaScript interop.

Contoh Program

Mari kita lihat contoh program sederhana di bawah.

import Html exposing (beginnerProgram, div, button, text)
import Html.Events exposing (onClick)


main =
  beginnerProgram { model = 0, view = view, update = update }


view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (toString model) ]
    , button [ onClick Increment ] [ text "+" ]
    ]


type Msg = Increment | Decrement


update msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1

Untuk demonstrasinya, dapat dilihat langsung di halaman ini. Program tersebut merupakan program counter sederhana. Seperti yang kita lihat, hasil kompilasi Elm adalah JavaScript.

Contoh Pesan Error

> List.map + [1, 2, 3, 4, 5]
-- TYPE MISMATCH --------------------------------------------- repl-temp-000.elm

The left argument of (+) is causing a type mismatch.

3|   List.map + [1, 2, 3, 4, 5]
     ^^^^^^^^
(+) is expecting the left argument to be a:

    number

But the left argument is:

    (a -> b) -> List a -> List b

Hint: It looks like a function needs 2 more arguments.

Dengan pesan ini, kita tahu bahwa argument pertama yaitu (a -> b) adalah sebuah function. Selain itu, bagian (+) memberi tahu tipe data apa yang bisa digunakan. Sehingga, kita dapat memperbaikinya dengan kode berikut.

> List.map (\n -> n + 1) [1, 2, 3, 4, 5]
[2,3,4,5,6] : List number

Pencegahan Runtime Error di JavaScript

> String.join [] ["Hello", "World!"]
-- TYPE MISMATCH --------------------------------------------- repl-temp-000.elm

The 1st argument to function `join` is causing a mismatch.

3|   String.join [] ["Hello", "World!"]
                 ^^
Function `join` is expecting the 1st argument to be:

    String

But it is:

    List a

Contoh di atas merupakan salah satu kasus sederhana dari penggabungan sebuah string. Dengan pengecekan seperti ini, kode JavaScript yang dihasilkan menjadi aman (tidak ada runtime error).

Performa yang Baik

Performa Elm

Pembahasan mengenai uji performa ini tersedia di Elm Blog.

Penutup

Demikian perkenalan dengan Elm di tulisan ini. Di tulisan lainnya, kita akan memulai belajar Elm. Sampai bertemu di lain kesempatan!