Elm, Functional Programming di Front-End

Elm Programming Language

Beberapa weekend belakangan ini saya asyik melakukan explorasi di sebuah bahasa yang relatif baru, yaitu Elm. Ini adalah tulisan pertama saya yang berbicara tentang hal teknis mengenai pemrograman, yang membahas hasil dari eksplorasi yang saya dapatkan. “Sharing knowledge = the best way to learn” adalah pedoman saya dalam belajar dan bereksplorasi.

Bacaan ini untuk siapa?

Untuk dapat memahami beberapa terminologi di artikel ini, minimal mengetahui tentang programming, front-end web development, JavaScript, dan DOM. Pemahaman React tidak required, tapi akan sangat membantu.

Memulai Eksplorasi di Planet Baru!

Elm adalah bahasa functional programming yang dapat di-compile menjadi HTML dan JavaScript. Sebagai front-end developer, tentu kita selalu berkutat dengan HTML dan JavaScript. Dengan Elm, kita bisa membuat HTML dan JavaScript tersebut dengan menggunakan gaya functional programming dan memanfaatkan konsep yang diterapkan di functional programming seperti immutability dan composability. Elm sendiri pertama kali dirancang oleh Evan Czaplicki di tahun 2012 dan mendapat support oleh NoRedInk.

Apa sih yang membuat saya tertarik untuk mengeksplorasi Elm?

• Functional Programming. Paradigma pemrograman ini hal yang cukup baru bagi saya, dan sebagai seseorang yang antusias dengan perkembangan front-end, Elm menjadi pilihan yang menarik untuk dicicipi.
• Elm Architecture. Pertama kali saya mendengar Elm adalah semenjak saya menyentuh Redux, sebuah state management library untuk React. Redux terinspirasi dari arsitektur Elm.
• Implementasi Virtual DOM yang cepat. Apa itu virtual DOM?
• Error Message yang relatif lebih bersahabat ketimbang bahasa pemrograman lainnya.

“Develop a passion for learning. If you do, you will never cease to grow.” — Anthony J. D’Angelo

Pengalaman Pertama Kenalan dengan Elm

Oke, mungkin saya mau sharing tentang pengalaman pertama pada saat saya berkenalan dengan Elm. Untuk memulai Elm, kita telah disuguhkan dokumentasi yang sangat bersahabat untuk memulai petualangan untuk mengeksplor Elm. Kita juga disediakan Playground untuk bereksperimen dengan Elm tanpa harus menginstall apapun.

Jujur, ada mixed feeling pada saat pertama kali menyentuh sintaks di Elm. Di satu sisi, sebagai seorang programmer yang terbiasa dengan gaya penulisan sintaks di JavaScript, awalnya tidak terbiasa dengan gaya penulisan sintaks di Elm. Tapi seiring waktu setelah mencicip dan menjajal berbagai sintaks dan menulis beberapa aplikasi dan salah satunya aplikasi todo sederhana dengan Elm, ternyata penulisan sintaks di Elm cukup indah bagi saya.

Berikut ini adalah contoh kode Elm yang akan menampilkan teks “Halo Dunia” di browser:

Mudah, bukan? Disini kita mengambil element text dari modul Html dengan cara mengimport HTML dan mengambil text. Kita juga dapat menggunakan berbagai element HTML untuk menyusun tampilan. Berikut ini adalah perbandingan contoh kode HTML dan kode Elm untuk membuat tampilan list sederhana.

Tampilan Todo List Sederhana menggunakan HTML biasa

Tampilan Todo List Sederhana menggunakan Elm

Untuk pengenalan sintaks lebih jauh untuk dapat menulis aplikasi sederhana dengan Elm, dapat ditemui di dokumentasi Elm. Pembelajaran paling seru adalah dengan bermain dengan dokumentasi dan terjun ke text editor kita.

Saya juga bertemu dengan error message yang sangat bersahabat. Baru kali ini saya bertemu dengan error message yang begitu ramah. Berikut adalah contoh error message yang ramah di Elm:

Contoh Error Message di Elm 1

Contoh Error Message di Elm 2

Gambaran Elm Architecture

Elm Architecture adalah pola yang menggambarkan bagaimana aplikasi yang dibuat menggunakan Elm disusun. Point penting dari Arsitektur Elm, sesuai dengan yang dijabarkan di dokumentasi Elm mengenai hal ini, adalah untuk modularity dari setiap kode dan memungkinkan kode dapat digunakan kembali. Bagi yang pernah mencicipi React, kira-kira gambarannya serupa, dimana kita dapat memisahkan kode menjadi sebuah component terpisah dan dapat digunakan oleh banyak component lainnya, tanpa harus menulis ulang component tersebut.

“It is not the beauty of a building you should look at; its the construction of the foundation that will stand the test of time.” — David Allan Coe

Esensi dari arsitektur Elm terdiri dari tiga komponen, yaitu:

• Model yang menampung state dari aplikasi,
• Update yang merupakan function dimana perubahan state terjadi, dan
• View yang menampilkan aplikasi dalam bentuk HTML.

State?

Bagi yang belum familiar dengan apa itu state di Elm (ataupun di React dan library front-end lainnya), state adalah status yang dimiliki oleh aplikasi kita. Misalkan kita memiliki sebuah button yang hanya bisa di klik satu kali oleh user, dan setelah di klik akan di disable. Saat button tersebut belum pernah di klik, ada sebuah state yang menyatakan bahwa button tersebut belum di klik, misalkan kita namakan isDisabled. Pada saat awal aplikasi berjalan, berarti state isDisabled kita adalah false, menandakan button kita masih bisa di klik. Namun setelah di klik, state tersebut akan berubah menjadi true, membuat button tersebut menjadi disabled.

Yang menarik dengan adanya arsitektur ini adalah aplikasi kita menjadi sangat predictable, karena bayangkan saat kita mempunyai Single-Page Application dengan state yang begitu banyak, setiap perubahan state akan diatur oleh Update, karena itu tidak akan terjadi perubahan state yang kita tidak tahu darimana asalnya.

Mungkin hal ini menggelitik beberapa orang (at least saya pribadi) yang sering menemukan bug (ya, ini harus di bold, something yang “we all love to hate”) yang luar biasa sulit ditemukan pada saat kita membuat Single-Page Application dengan JQuery ataupun library lainnya, karena sangat memungkinkan terjadinya perubahan state aplikasi yang “all over the place”.

Alur Arsitektur Elm

Arsitektur Elm yang terdiri dari tiga komponen dari dapat digambarkan di gambar berikut ini dimana, secara berurutan:

1. Update akan mengubah state pertama kali aplikasi dijalankan,
2. Model akan menampung state terkini,
3. View akan merender Html yang memuat state dari Model
4. User yang berinteraksi dengan View dapat melakukan berbagai tindakan yang kemudian tindakan tersebut akan mentrigger pengiriman message ke Update. Contoh, pada saat user mengisi textbox, akan ter-trigger pengiriman message yang menginfokan kepada Update untuk melakukan perubahan terhadap state sesuai dengan tindakan yang dilakukan.
5. Model akan menerima hasil perubahan dan memiliki state yang telah terupdate, dan alur ini akan terus berjalan dan kembali ke langkah nomor 3.

Oke, Keren Juga, Mulai dari Mana ya?

“A recipe is a story that ends with a good meal” — Pat Conroy

Untuk mulai mencoba Elm, panduan instalasi di dokumentasi Elm sudah menjelaskan dengan sangat clear. Kita bisa menggunakan berbagai Text Editor seperti Atom, Sublime Text, VS Code, Vim, dan lain-lain untuk mulai terjun mencicip Elm, dan kita bisa memanfaatkan Elm-format untuk membuat kode Elm kita menjadi lebih indah.

Menggunakan command Elm-make, kita dapat meng-compile file Elm menjadi file HTML dan JavaScript. Kita juga dapat memanfaatkan Webpack atau Gulp + Browserify untuk melakukan hal ini.

Bagi yang sudah familiar dengan package manager seperti NPM, elm juga memiliki package manager sendiri yang sangat mudah untuk digunakan untuk dapat megimport berbagai open-source library dari komunitas Elm.

Konklusi

Elm adalah bahasa pemrograman dengan paradigma functional programming yang menarik untuk kita coba dalam pengembangan front-end. Sejauh ini saya sangat tertarik untuk membuat SPA sederhana menggunakan Elm, dan tentunya di kesempatan berikutnya saya akan membagikan berbagai temuan menarik dari eksplorasi saya selanjutnya.

Sekian dulu sharing saya, apabila ada masukan, kritik, komentar, dan lain-lain, silakan berikan respon, dan silakan berikan ❤ jika sharing ini cukup bermanfaat dan informatif :)