Pengaturcaraan Reaktif Fungsi dengan Elm: Pengenalan

mata teras

ELM adalah bahasa pengaturcaraan berfungsi yang disusun menjadi JavaScript, memberi tumpuan kepada mempermudah dan meningkatkan pembangunan front-end. Ia menggunakan kesimpulan jenis, adalah reaktif dan menggabungkan corak pengaturcaraan berfungsi seperti pandangan tulen, ketelusan rujukan, dan data yang tidak berubah.
ELM menggunakan mod seperti data yang tidak berubah, pandangan tulen yang menggambarkan DOM, aliran data sehala, keadaan berpusat dan deskripsi variasi data berpusat, dan kesan sampingan yang terhad. Corak ini menjadikan aplikasi lebih mudah untuk meramalkan, mengekalkan, dan teguh.
Ciri keselamatan Elm mengelakkan kemungkinan nilai yang kosong, memaksa pemaju untuk mengendalikan semua laluan alternatif dalam aplikasi. Ini memberikan banyak keyakinan terhadap permohonan itu dan jarang melihat kesilapan runtime dalam aplikasi ELM.
Senibina Elm mengikuti corak model-view-update (MVU), yang berbeza daripada corak model-view-controller (MVC) yang digunakan dalam banyak bahasa lain. Corak ini menjadikannya mudah untuk membina struktur kod dan menyimpulkan bagaimana data mengalir melalui aplikasi.

Elm adalah bahasa pengaturcaraan berfungsi yang telah menarik perhatian baru -baru ini. Artikel ini meneroka apa itu dan mengapa anda perlu memberi perhatian kepadanya.

tumpuan utama Elm adalah untuk menjadikan pembangunan depan lebih mudah dan lebih mantap. ELM menyusun kepada JavaScript, jadi ia boleh digunakan untuk membina aplikasi untuk mana -mana pelayar moden.

Elm adalah bahasa yang ditaip secara statik dengan kesimpulan jenis. Jenis kesimpulan bermakna kita tidak perlu mengisytiharkan semua jenis diri kita, kita boleh mempunyai pengkompil menyimpulkan banyak jenis untuk kita. Sebagai contoh, dengan menulis

, pengkompil tahu bahawa one = 1 adalah integer. one

Elm adalah bahasa pengaturcaraan yang hampir semata -mata berfungsi. ELM didasarkan pada banyak corak fungsional seperti pandangan tulen, ketelusan rujukan, data yang tidak berubah, dan kesan sampingan yang terkawal. Ia berkait rapat dengan bahasa ML lain seperti Haskell dan OCAML.

Elm adalah reaktif. Segala -galanya di Elm mengalir melalui isyarat. Isyarat dalam mesej ELM Pass dari masa ke masa. Sebagai contoh, mengklik butang akan menghantar mesej melalui isyarat.

Anda boleh memikirkan isyarat yang serupa dengan peristiwa dalam JavaScript, tetapi tidak seperti peristiwa, isyarat adalah warga kelas pertama di ELM dan boleh diluluskan, diubah, ditapis, dan digabungkan.

sintaks elm

sintaks Elm adalah serupa dengan Haskell, kerana kedua -duanya adalah bahasa keluarga ML.

<code class="language-elm">greeting : String -> String
greeting name =
  "Hello" ++ name</code>

Ini adalah fungsi yang mengambil satu rentetan dan mengembalikan rentetan lain.

Mengapa menggunakan Elm?

Untuk memahami mengapa anda harus mengikuti Elm, mari kita bincangkan beberapa trend pengaturcaraan front-end sejak beberapa tahun kebelakangan:

Huraikan keadaan dan bukannya peralihan dom

Tidak lama dahulu, kami membina permohonan kami dengan mengubah DOM secara manual (contohnya, menggunakan jQuery). Apabila aplikasi berkembang, kami memperkenalkan lebih banyak negeri. Perlu mengekod peralihan di antara semua negeri secara eksponen meningkatkan kerumitan permohonan, menjadikannya lebih sukar untuk dikekalkan.

daripada melakukan ini, reaksi dan perpustakaan lain mempopularkan konsep memberi tumpuan kepada menggambarkan keadaan DOM tertentu dan kemudian mempunyai perpustakaan mengendalikan transformasi DOM untuk kami. Kami hanya memberi tumpuan kepada menggambarkan negeri -negeri yang diskret, bukan bagaimana kita sampai ke sana.

Ini membawa kepada pengurangan yang ketara dalam kod yang perlu ditulis dan dikekalkan.

acara dan penukaran data

Dari segi keadaan permohonan, adalah perkara biasa untuk mengubah keadaan diri anda, seperti menambah komen kepada array.

Daripada melakukan ini, kita hanya perlu menerangkan bagaimana keadaan aplikasi perlu diubah berdasarkan peristiwa, dan kemudian biarkan sesuatu yang lain memohon transformasi ini untuk kita. Di JavaScript, Redux menjadikan cara ini membina aplikasi yang popular.

Kelebihan ini ialah kita boleh menulis fungsi "tulen" untuk menggambarkan transformasi ini. Fungsi ini lebih mudah difahami dan diuji. Manfaat tambahan ialah kita dapat mengawal di mana keadaan aplikasi berubah, menjadikan aplikasi kami lebih mudah untuk dikekalkan.

Satu lagi manfaat ialah pandangan kita tidak perlu tahu bagaimana untuk mengubah keadaan, mereka hanya perlu mengetahui peristiwa mana yang hendak dihantar.

aliran data sehala

Satu lagi trend yang menarik adalah untuk membiarkan semua peristiwa aplikasi mengalir dengan cara satu arah. Daripada membenarkan sebarang komponen untuk berkomunikasi dengan komponen lain, kami menghantar mesej melalui saluran paip mesej pusat. Paip pusat ini menggunakan transformasi yang kami inginkan dan menyiarkan perubahan ke semua bahagian aplikasi. Fluks adalah contoh.

Dengan melakukan ini, kita dapat lebih memahami semua interaksi yang berlaku dalam aplikasi.

Data yang tidak berubah

Data pembolehubah menjadikannya sukar untuk mengehadkan lokasinya untuk berubah, kerana mana -mana komponen yang mempunyai akses kepadanya boleh menambah atau memadam kandungan. Ini membawa kepada ketidakpastian, kerana negara boleh diubah di mana -mana sahaja.

Dengan menggunakan data yang tidak berubah, kita dapat mengelakkannya dengan mengawal lokasi perubahan keadaan aplikasi. Menggabungkan data yang tidak berubah dengan fungsi yang menggambarkan transformasi, kami mendapat aliran kerja yang sangat kuat, dan data yang tidak berubah membantu kami menguatkuasakan aliran sehala dengan tidak membenarkan kami mengubah keadaan di lokasi yang tidak dijangka.

keadaan berpusat

Satu lagi trend dalam pembangunan front-end adalah dengan menggunakan "atom" yang terpusat untuk menyelamatkan semua negeri. Ini bermakna kita meletakkan semua negeri di dalam pokok besar dan bukannya menyebarkannya di seluruh komponen.

Dalam aplikasi biasa, kita biasanya mempunyai keadaan aplikasi global (mis., Koleksi pengguna) dan keadaan khusus komponen (mis., Keadaan penglihatan komponen tertentu). Ia kontroversial sama ada menyimpan kedua -dua negeri di satu tempat adalah bermanfaat. Tetapi ada manfaat yang besar untuk sekurang -kurangnya menyimpan semua negeri aplikasi di satu tempat, iaitu, menyediakan negara -negara yang konsisten di semua komponen permohonan.

Komponen tulen

Trend lain ialah menggunakan komponen tulen. Ini bermakna bahawa diberi input yang sama, komponen akan sentiasa menjadikan output yang sama. Tiada kesan sampingan berlaku di dalam komponen ini.

Ini menjadikannya lebih mudah untuk memahami dan menguji komponen kami daripada sebelumnya, kerana mereka lebih mudah untuk diramal.

Kembali ke Elm

Ini adalah model yang sangat baik yang menjadikan aplikasi lebih mantap dan lebih mudah untuk diramal dan diselenggarakan. Walau bagaimanapun, untuk menggunakannya dengan betul dalam JavaScript, kita perlu berhati -hati untuk mengelakkan melakukan sesuatu di tempat yang salah (mis. Mengubah keadaan di dalam komponen).

Elm adalah bahasa pengaturcaraan yang telah mempertimbangkan banyak corak ini dari awal. Ia membuat mengadopsi dan menggunakannya sangat semula jadi tanpa bimbang melakukan sesuatu yang salah.

Di Elm, kami membina aplikasi dengan menggunakan kaedah berikut:

• Data yang tidak berubah
• Penerangan Pandangan Murni Dom
• aliran data sehala
• keadaan berpusat
• kedudukan penerangan mutasi data berpusat
• Kesan sampingan terhad

Keselamatan

Salah satu kelebihan yang besar dari ELM adalah keselamatan yang disediakannya. Dengan sepenuhnya mengelakkan kemungkinan nilai yang menjadi batal, ia memaksa kita untuk memproses semua laluan alternatif dalam aplikasi.

Contohnya, dalam JavaScript (dan banyak bahasa lain), anda boleh mendapatkan ralat runtime dengan melakukan perkara berikut:

<code class="language-elm">greeting : String -> String
greeting name =
  "Hello" ++ name</code>

Ini akan mengembalikan NAN dalam JavaScript, yang anda perlu berurusan untuk mengelakkan kesilapan runtime.

jika anda mencuba sesuatu yang serupa di Elm:

<code class="language-javascript">var list = []
list[1] * 2</code>

pengkompil akan menolak ini dan memberitahu anda bahawa

mengembalikan jenis mungkin. Jenis mungkin mungkin atau mungkin tidak mengandungi nilai, dan kita mesti menangani kes -kes di mana nilai itu tidak ada apa -apa. List.head list

<code class="language-elm">list = []
(List.head list) * 2</code>

Ini memberikan banyak keyakinan untuk permohonan kami. Kesalahan runtime jarang dilihat dalam aplikasi ELM.

(Bahagian berikut adalah serupa dengan teks asal, buat sedikit pelarasan untuk mengelakkan pertindihan)

(Aplikasi sampel, mari kita pergi ke sekepingnya dan sebagainya, kerana panjang artikel, ia ditinggalkan di sini. Teks asal telah menggambarkan sepenuhnya fungsi kod dan tidak akan diulang di sini.)

Kesimpulan

Elm adalah bahasa pengaturcaraan yang menarik yang mengambil model yang sangat baik untuk membina aplikasi yang boleh dipercayai. Ia mempunyai sintaks yang bersih dan mempunyai banyak ciri keselamatan yang dibina untuk mengelakkan kesilapan runtime. Ia juga mempunyai sistem jenis statik yang sangat baik, yang sangat membantu semasa proses pembinaan semula dan kerana ia menggunakan kesimpulan jenis ia tidak menghalang pembangunan.

belajar bagaimana untuk membina lengkung pembelajaran untuk aplikasi ELM tidak mudah, kerana aplikasi yang diprogramkan menggunakan reaktif berfungsi adalah berbeza dari apa yang kita gunakan, tetapi ia berbaloi.

(sumber tambahan, soalan yang sering ditanya, bahagian, kerana panjang artikel, ia ditinggalkan di sini. Teks asal telah menggambarkan sepenuhnya maklumat yang relevan dan tidak akan diulang di sini.) 🎜>

Atas ialah kandungan terperinci Pengaturcaraan Reaktif Fungsi dengan Elm: Pengenalan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!