ก่อนหน้านี้ในเว็บเราก็ได้ทำบทความเกี่ยวกับ Framework ที่ช่วยให้การเขียนเว็บแอปพลิเคชั่นเป็นเรื่องง่ายขึ้นได้อย่าง Vue.js และ React ซึ่งทั้งสองตัวก็ต้องการเวลาในการเรียนรู้ใช้งาน วันนี้เรามี Framework อีกหนึ่งตัวมานำเสนอ

คุณกำลังมองหา JavaScript  Framework ที่เขียนง่ายๆ อยู่ใช่หรือไม่?

คุณกำลังกังวลว่า Framework ที่คุณจะใช้นั้นทำให้เว็บของคุณหนักขึ้นหรือเปล่า?

คุณกำลังต้องการ Framework ที่เว็บไซต์ชื่อดังทั่วโลกต่างใช้กันอย่างแพร่หลายใช่มั้ย?

ถ้าคุณกำลังหาสิ่งที่ตอบโจทย์เหล่านี้เราขอบอกว่าคุณมาถูกที่แล้ว!!!

เราขอแนะนำให้รู้จัก VanillaJS !!!!

VanillaJS นั้นมีความสามารถหลักๆต้องการ ทั้งเร็ว ขนาดเล็ก และรองรับการทำงานข้ามแพลตฟอร์ม ให้เราเอาไปใช้สร้าง JavaScript Application ที่สุดยอดออกมาได้

( “VanillaJS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications.” )

น้ำหนักที่เบาจนเหมือนไม่ได้ import อะไรเลย !!!!

จุดที่โดดเด่นของ Framework ตัวนี้เลยคือน้ำหนักที่เบามาก การใช้ความสามารถทั้งหมดของเจ้าสิ่งนี้นั้นถึงแม้จะมีความสามารถมากมาย แต่ว่าขนาดของมันเพียงแค่ 0.02 KBytes เท่านั้นเอง !

เมื่อดาวน์โลดจะได้ไฟล์ชื่อ vanilla.js มาไว้ใช้งาน

ของเค้าดีจริงใครๆ ก็ใช้ !!!

หากคุณกำลังสงสัยว่าน้ำหนักมันเบาขนาดนี้ แล้วมันจะสู้ Framework ตัวอื่นๆ ได้มั้ย การอธิบายความสุดยอดของมันนั้นคงอธิบายได้ดีไม่เท่าให้ดูว่าใครใช้มันบ้าง

ลองใช้งานกันเลย

หลังจากได้ไฟล์ Vanilla.js ที่เลือกเฉพาะส่วนที่ต้องการมาแล้ว ก็มาเริ่มใช้งานกันเลยดีกว่า

import file

จากการที่เป็น JavaScript ที่เน้นการใช้งานง่าย เราจึงสามารถ import เข้ามาใช้ในไฟล์ .html ได้ทันทีโดยสามารถใส่ไว้ในส่วนไหนก็ได้

<script src="path/to/vanilla.js"></script>

แต่ถ้าต้องการจะใช้ในงานจริงเราต้องเปลี่ยนวิธีการ import นิดหน่อยเป็นแบบนี้

ทำไมถึงไม่มีโค้ดอะไร ก็เพราะมันไม่ต้องมีก็ยังได้ยังไงล่ะ เพราะว่า framework ตัวนี้เป็นที่นิยมมากๆ เบราเซอร์หลักๆก็เลยรองรับมาตั้งต้นต้นแล้ว เพียงแต่เราไม่ค่อยจะรู้กันเท่านั้นเอง

ถ้าสงสัยว่า import กับไม่ import vanila.js จะมีความแตกต่างกันยังไงบ้างคำตอบอยู่ในไฟล์อยู่แล้ว ลองเปิดดูได้เลย

โค้ดในไฟล์ vanilla.js

ดูตัวอย่างการใช้งานกัน

ยังเน้นเรื่องเดิมอยู่ที่ว่า VanillaJS เป็น JavaScript Framework ที่ใช้ง่ายมากกกกก

Get DOM Element

เรื่องพื้นฐานของการสร้างเว็บแอปพลิเคชันก็คือต้องจัดการกับ Element ในหน้าเว็บได้ โดยเราสามารถเข้าถึง Element ต่างๆได้หลายวิธีเช่น

id

var elem = document.getElementById("myElem");

class name

var elem = document.getElementsByClassName("myClass");

tag name

var elem = document.getElementsByTagName("input");

เปลี่ยน Style

เปลี่ยนสีพื้นหลัง

var elem = document.getElementById("myElem");
elem.style.backgroundColor = "yellow";

ใส่ขอบ

var someDiv = document.getElementById("myDiv");
someDiv.style.border = "thick solid red";

แล้วมันต่างกับ JavaScript ปกติยังไง?

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

แถม Vanilla เป็นศัพท์แสลงที่หมายถึง ธรรมดาๆ โล้นๆ เหมือนเราสั่งไอศกรีมแล้วไม่สั่งอะไรก็ได้รสวานิลลามานั่นแหละ

http://vanilla-js.com/ เว็ปไซต์ที่คนทำ tutorial ขึ้นมาแนะนำเป็นเรื่องเป็นราว

ผู้คนที่คุยกันเกี่ยวกับ VanillaJS https://stackoverflow.com/questions/20435653/what-is-vanillajs

//บางคนถึงขนาดทำออกมาเป็น Library ที่ไฟล์มีขนาดพอสมควรแต่ข้างในมีแต่ comment ด้วยนะ