บทที่ 1 เรื่อง Why is This a Great Time to Learn Elm ?
ทำไมถึงเป็นช่วงเวลาที่ดีมาก ๆ สำหรับการเรียนรู้ Elm
โดยจะมีเนื้อหาประกอบไปด้วยสิ่งต่าง ๆ ดังนี้
- Elm คืออะไร
- จุดเด่นของ Elm สำหรับการพัฒนา frontend ของ web
- เปรียบเทียบกับ JavaScript
- เริ่มต้นพัฒนาระบบงานด้วย Elm ซึ่งมีตัวช่วยทั้ง Ellie-app, Cloud9 และ Text Editor
มาเริ่มกันเลย
Elm คืออะไร
เป้าหมายหลัก ๆ คือ นำแนวทาง functional programming
มาใช้สำหรับการพัฒนา frontend ของ web
และช่วยทำให้ได้รับระสบการณ์ในการพัฒนาที่ดีกว่าเดิม
รวมทั้งยังช่วยลดปัญหา error ที่มักเจอบน production
เช่น JavaScript error เป็นต้น
นั่นหมายความว่า Elm จะทำการตรวจสอบในช่วง compile time ว่า
จะมี error ใด ๆ มีโอกาศเกิดขึ้นได้บ้าง
ทำให้เรารู้ปัญหาต่าง ๆ ตั้งแต่การ coding กันเลย
นั่นช่วยสร้างความมั่นใจให้นักพัฒนาได้อย่างสูง
ที่สำคัญ Elm สร้างด้วยแนวทางของ functional programming
หนึ่งในนั้นคือ Pure function ช่วยทำให้ไม่เกิด side effect
รวมทั้งเรื่องของ immutable ด้วย
ทำให้การ debug ง่ายขึ้นเป็นกอง
และยังทำงานร่วมกัน library ต่าง ๆ ได้
แน่นอนว่า Elm ให้เราสามารถจัดการกับ event หรือเกตุการณ์ต่าง ๆ ที่เกิดขึ้น ได้อีกด้วย ซึ่งยังคงความ immutable ไว้ให้
ทำไมต้องเรียนรู้ Elm ด้วย
โดยที่จะมีจุดเด่นต่าง ๆ เหล่านี้
- Virtual DOM ทำงานเร็วมาก ๆ
- Compile-time error นั่นคือจับ error ได้ตั้งแต่การเขียน code
- Zero runtime exception เป้นสิ่งที่ชอบมาก ๆ
- ช่วยเพิ่ม productivity ให้ทีม
- มีระบบ Type ให้ ซึ่งดีมาก ๆ
- ง่ายต่อการ refactoring
- ขนาดของ output ที่ได้เช่น HTML, CSS และ JavaScript มีขนาดเล็กกว่า framework อื่น ๆ
- Time-traveling debugging
- ที่ชอบอีกตัวคือ Pipe syntax ( |> )
มาเริ่มต้นด้วยการเขียน code ดีกว่า
การเริ่มต้นทำได้หลายแบบ ยกตัวอย่างเช่น
- Elm try
- ตัวอย่างจาก Elm เลย มี editor online ให้ใช้
- Ellie app เป็น Editor online
- สร้าง project ผ่าน Create-elm-app
ทำการติดตั้งแบบง่าย ๆ และมี REPL ให้ใช้งานดังนี้
[gist id="e66cc62647c5da5a99d2a4c0381cd24f" file="1.txt"]จากนั้นก็ Hello World กันหน่อยสร้าง project ดังนี้
[gist id="e66cc62647c5da5a99d2a4c0381cd24f" file="2.txt"]ทำการสร้างไฟล์ /src/Main.elm
[gist id="e66cc62647c5da5a99d2a4c0381cd24f" file="Main.elm"]เมื่อทุกอย่างเรียบร้อย ทำการ run ดูดังนี้เพื่อเปิด app ตัวอย่างใน browser
[gist id="e66cc62647c5da5a99d2a4c0381cd24f" file="3.txt"]แสดงผลดังนี้
เปิดไฟล์ src/Main.elm
มาเริ่มเรียนรู้ Elm กันต่อไปลองมาศึกษากันต่อ ตามรูปนี้
