[Beginner] เลิกเหนื่อยกับโครงสร้างยากๆหันมาใช้ Riot.js

ทุกวันนี้หากเราต้องพัฒนาเว็บแอพพลิเคชั่น ขึ้นมาปัจจัยที่ต้องคำนึงถึงในมุมมองของผู้ใช้งานคือความไหลลื่นของตัวแอพพลิเคชั่น การทำให้แอพพลิเคชั่นทำงานได้อย่างสมบูรณ์อย่างเดียวคงไม่เพียงพออีกต่อไป แต่การสร้างความประทับใจ ทั้งความเร็วในการโหลด และการแสดงผลในทุกๆอุปกรณ์ได้อย่างสมบูรณ์ เป็นเรื่องที่นักพัฒนาจำเป็นต้องให้ความสำคัญเป็นอย่างมาก

การพัฒนาเว็บแอพพลิเคชั่นให้สามารถโต้ตอบกับผู้ใช้งานได้จำเป็นต้องใช้ Javascript เข้ามาช่วยทำให้ทราบว่าผู้ใช้งาน คลิ๊กบริเวณไหน เพื่อที่จะเขียนโปรแกรมตอบสนองในส่วนนั้นๆต่อไป

เมื่อมีการเขียนคำสั่งต่างๆขึ้นมาเพื่อตอบสนองผู้ใช้งาน ทำให้จำเป็นต้องเขียน Javascript มากมายหลายร้อยหลายพันบรรทัด มีการนำ Javascript Library เช่น jQuery เข้ามาช่วยให้การเขียนนั้นสั่นลงและดูง่ายมากยิ่งขึ้น แต่ก็พบปัญหาในการจัดการ Event ที่ตอบสนองต่อส่วนต่างๆของเว็บ เช่นการตอบสนองซ้ำซ้อน หรือการจัดลำดับการเกิดและความต่อเนื่องของ Event ก็เป็นปัญหาอย่างมาก

https://jquery.com/

การจัดการกับ Event ใน Javascript เป็นเรื่องลำบาก เนื่องจากวิธีคิดแตกต่างกับพื้นฐานการเขียนโปรแกรมแบบดังเดิมที่เป็นแบบ Synchronous ทำงานที่ละงานต่อไปเรื่อยๆ แต่แบบ Asynchronous ทำงานพร้อมกันหลายๆงานโดยไม่จำเป็นต้องรอให้งานก่อนหน้าเสร็จก่อน ทำให้โปรแกรมเมอร์ที่ชินกับการประมวลผลแบบเดิมสับสนกันไปตามๆกัน

จากปัญหาที่พบทำให้นักพัฒนาหาทางปรับปรุงและควบคุมการตอบสนอง ในแต่ละส่วนให้มีประสิทธิภาพมากขึ้น ทำให้เกิด Javascript Framework ที่ถูกผลิตใช้ภายในบริษัทใหญ่ๆและนำมาให้คนทั่วไปสามารถนำไปใช้งานได้ เช่น AngularJS โดย Google , React โดย Facebook และ น้องเล็กอย่าง Riot.js ซึ่งแต่ละตัวมีความสามารถที่ตอบสนองต่อการสร้างเว็บแอพพลิเคชั่นได้ดีเยี่ยม แต่! ติดอยู่อย่างเดียวทำไมการเรียนรู้แต่ละตัวมันชั่งยากเย็นจริงๆ

ตัวอย่างการเขียน Basic Function Todo-List ในแต่ละ Framework

1. เริ่มต้นกันด้วย Angular JS ผู้ที่เกิดก่อนใครเพื่อนเลยปี 2010

Angular Todo

2. React JS พัฒนากันอย่างต่อเนื่องไม่หยุดยัง เริ่มทำมาตั้งแต่ มีนาคม 2013
อยากใช้ React ต้องทำใจเรียนรู้ภาษาใหม่เพิ่มอีกสัก 2 ภาษา jsx และ es6

React Todo

3. น้องใหม่ใสๆ Riot.js สวยใส ไฉไล กว่าใคร ตามมาติดๆ กันยายน 2013

Todo Riot.js

มีมากมายหลายรูปแบบการเขียน ทั้ง Angular JS ในรูปแบบของ Module และ ใหม่มากๆแบบ React มาจบลงกับความพอดีที่ Riot ไม่ต้องเรียนรู้อะไรใหม่เพราะมันใช้ความรู้เดิมได้ทันที! HTML, CSS, Javascript

http://riotjs.com/

Riot.js เกิดมาเพื่อจัดการ User Interface โดยเฉพาะมันจึงเล็กกว่า Framework ตัวอื่นๆ โดยวางจุดขายว่าตนเองเป็น micro-library นะ ถ้าต้องการใช้งานเพียงเพื่อจัดการกับส่วนต่างๆของหน้าเว็บหนะมันเหมาะมากเลย แต่ก็ใช่ว่าจะใช้งานกับเว็บแอพพลิเคชั่นที่ซับซ้อนไม่ได้นะครับ มันทำได้อยู่ที่คุณจะวางโครงสร้างยังไงให้พัฒนาต่อยอดได้

https://github.com/riot/riot

จากตารางเปรียบเทียบแล้ว Riot เล็กกว่าชาวบ้านมากจ้า พกพาสดวกแทบไม่ต้องคิดเลยที่จะเปลี่ยนมาใช้ micro library ตัวนี้ ในเมื่อเราเจอของดีแล้วอย่ารอช้าลองเลย

โดยปกติส่วนประกอบของเว็บพื้นฐานประกอบด้วย HTML, CSS และ Javascript แต่ละส่วนแยกกันเพื่อทำงานของตนเอง แต่ Riot ร่วม 3 อย่างนี้ไว้ใน 1 ไฟล์ จบปิ้ง
มาทำความรู้จักหน้าตาของ Custom Tags กันเลย

sample tag style

1. <like> </like> คือ Tag ที่เราสร้างขึ้นมาเพื่อใช้งานครับ ภายในประกอบไปด้วย html ปกติ พิมพ์ลงไปได้เลย หรือใครที่ใช้ Pre-Compiler HTML เช่น Jade ก็สามารถนำมาใช้งานได้ครับ
2. <script></script> หรือ Javascript นั้นเอง จะใส่ Tag script หรือไม่ก็ได้ตามแต่ความชอบครับ โดยเราสามารถเขียนด้วย Syntax ของ Pre-Compiler ได้ด้วย เช่น CoffeeScript, Babel, TypeScript
3. <style></style> คือ CSS ใช่ครับ เราสามารถใส่ css ลงไปในไฟล์เดียวกันได้เลย

ตัวอย่างวิธีเรียกใช้งาน Tag ด้วย riot.mount

riot + compiler

รูปแบบของการวาง tag เพื่อใช้งาน จะมี 2 แบบ

1. Custom tags ใส่เป็นชื่อ tag นั้นๆได้เลย
2. HTML elements as tags ใส่ attribute ลงไปใน HTML

insert tag style

รูปแบบของการ mount จะมี 3 แบบ

1. mount ทุกๆ tag ที่ปรากฏอยู่
2. mount เฉพาะ tag ที่อยู่ใน id=my-element
3. mount เฉพาะ custom tags ที่ระบุ

riot.mount style

เท่านี้คุณก็สามารถใช้งาน Riot ได้ในโปรเจคของคุณแล้วครับ ปรบมือ เฮ้ๆๆๆ

หากคุณต้องการ ดักการกระทำต่างๆ กับ DOM ของเราทำได้ดังนี้

Event handlers

เพียงสร้าง Function ไว้ในส่วนของ Script และ วางไว้ส่วนของ Attribute ประเภท Event ทั้งหลาย เช่น onclick, onmouseover, onmouseout, onchange ก็สามารถจัดการกับ Event ที่เกิดขึ้นกับ DOM ตัวนั้นๆได้แล้วครับ

บทความนี้ก็เป็นบทความแรกของผม ด้วยความตั้งใจมานานมากว่าอยากเขียน Blog ให้ได้แบบ Geek ท่านอื่นๆบ้าง > < หากมีข้อแนะนำติชมขอได้อย่าเกรงใจ จัดเต็มเพื่อให้ผมได้พัฒนาตัวเองด้วยครับ :)

หัวข้อบทความที่จะเขียนต่อไป

• เจาะวิธีการใช้งานคุณสมบัติต่างๆของ Riot ให้เต็มประสิทธิภาพ
• สร้าง Components ของคุณเองแบบครบเครื่อง
• Setup Workflow Front-end Theme Riot + Gulp
• การสร้างเว็บแอพพลิเคชั่นโดยใช้ Riot, RiotControl, PostCSS, Webpack
• ทำ TDD ด้วย Riot, Mocha, Chai

รอติดตามกันนะครับ :)