แทนที่เราจะต้องลงโปรแกรมต่างๆ เพื่อให้เครื่องคอมสุดที่รักของเราสามารถรัน Web ได้ /me ก็ได้แนะนำให้ทุกคนเปลี่ยนมาทำงานบน VMs ใน EP.1 ไปแล้ว ซึ่งมีเครื่องมืออย่าง Vagrant มาช่วยเราจัดการความวุ่นวายบน VMs

แต่ แต่ แต่ ปัญหามันไม่ได้จบแค่นี้

เพราะปัจจุบันจะพบว่า web ไม่ใช้แค่ static content อีกต่อไป

เรามาอยู่ในจุดที่ทุกคนต้องการเวปที่มีความ dynamic

  • กดตรงนั้น จะมี popup ขึ้นมา
  • กดตรงนี้ จะต้องซ่อนเมนู
  • ถ้าเน็ตหลุดจะทำ offline mode ได้
  • มีคนทักมา จะต้องมี noti เด้งขึ้นมา
  • สามารถกดแชร์ลงเฟสบุ๊คได้
  • ผู้ใช้เพิ่มเนื้อหาของตัวเองได้
  • และ ต้องเปิดได้ในทุกๆขนาดหน้าจอ
  • บลาๆ

บางเวปไซท์สามารถแสดงผลเป็น 3D Ex หรืออาจจะทำเป็นเรื่องราว Ex หรือไม่ก็สามารถ interact กับผู้ใช้ได้ Ex #โลกหมุนไปไวจนฉันตามไม่ทันแล้วพี่บัวลอย

ซึ่งเวปเหล่านี้ก็จะกลายเป็นงานที่ Web developer อย่างเราๆต้องทำ และนั้นหมายถึงการต้องใช้ภาษาเดิมๆ อย่าง javascript, css และ html ที่ไม่ได้ออกแบบมาให้สามารถทำได้ขนาดนี้ ถึงจะสามารถทำได้จริงๆ แต่ก็ต้องใช้โค้ดที่ยาก ซับซ้อนและวุ่นวาย

ดังนั้นการเขียนเวปจึงเริ่มเปลี่ยนไป เราเริ่มต้องภาษาใหม่ๆ เครื่องมือใหม่ๆเอามาทดแทนเอาไปทดแทนของเดิมที่มีอยู่แล้ว เช่น ES6, JSX, Typescript, Plug(ชื่อเดิมว่า Jade), Sass, Elm, Flow และอีกมากมาย

ซึ่งแต่ละเครื่องมือก็เข้ามาแก้ปัญหาที่แตกต่างกันออกไป เช่น

  • ES6 เป็นการมาตรฐานโค้ดแบบใหม่ของ Javascript ทำให้เราสามารถจัดการ OOP ได้ง่ายขึ้น, สามารถต่อสู้กับการฟังก์ชัน Asynchronous ได้ง่ายขึ้น และ จุดเพิ่มเติมอีกมากมาย
  • JSX รวมการสร้าง HTML มาอยู่บน Javascipt ทำให้เราสามารถจัดการทั้ง Model-View-Controller ได้โดยใช้แค่ .js ไม่กี่ไฟล์
  • Typescript เพิ่ม variable type ให้กับ Javascript ทำให้เราสามารถตรวจสอบความผิดปกติของโค้ดได้ดีขึ้น ไม่ต้องรอให้ไปอยู่บนหน้าเวป
  • Plug เปลี่ยน html ทำให้เราไม่จำเป็นต้องมี tag เปิด-ปิด อีกต่อไป โค้ด html ก็จะง่ายขึ้นมากมาย
  • Sass ทำให้สามารถประกาศตัวแปรได้ใน css หรือ จะประกาศเป็น function ก็ได้เหมือนกัน
  • และอื่นๆอีกเยอะแยะ

ไม่เพียงแค่นั้นเครื่องมือเหล่านี้ก็มาพร้อมกับ concept การเขียนโค้ดแบบใหม่ๆให้เราใช้ อย่าง flux architure, 2-way binding, reactive programming, singlepage application, …

แต่การเครื่องมือใหม่ๆเหล่านี้ไม่สามารถใช้ได้ใน browser ปัจจุบัน แปลว่าทุกครั้งที่เราต้่องการให้โค้ดเหล่านี้แสดงผล เราต้องทำการ compile/transpile ให้มันอยู่ในรูปแบบเดิมๆ javascript, css และ html แบบเดิมๆ

และแน่นอนว่า สิ่งที่เราต้องเขียน ไม่ได้มีแค่ js ง่ายๆแค่ไฟล์เดียว อย่างโปรเจคปัจจุบัน /me เขียนไปแล้วกว่า 50 ไฟล์ และก็ต้องเป็นหน้าที่เราที่ต้อง merge ไฟล์ทั้งหมดมารวมกัน

นอกจากนี้แล้ว เพื่อการเป็น “developer ที่ดี” #ทำตัวหนา เราอาจจะต้องเขียนเทสเคส, รันเทส, ลดขนาดรูป, ย่อขนาด js และ รีเฟรชบราวเซอร์

สรุปรายการที่ /me ต้องทำหลังจากแก้โค้ด 1 ครั้ง

  • compile
  • merge
  • test
  • minify js/css
  • compress image
  • reload browser
It’s 2016. No one transpiles JS/CSS/HTML directly anymore.

เหตุนี้จึงเป็นที่มาของเครื่องมือที่ชื่อว่า Gulp //ความจริงมี Grant อีกตัว แต่ไม่เคยใช้ 555

Gulp เป็น task runner ซึ่งทำหน้าที่คอยสอดส่องไฟล์ต่างๆ และทำงานบางอย่างเมื่อเกิดการเปลี่ยนแปลงในไฟล์ที่เราต้องการ

เดิมทีแล้ว Gulp เป็นแค่ node module เล็กๆ ถ้าเราต้องการจะทำอะไร ก็ลง gulp plugin ปลั๊กเข้าไป
ทำให้ Gulp มีความยืดหยุ่น และ หลากหลาย และ โครงสร้างของ Gulp ก็ง่ายมากๆ เพราะมันใช้รูปแบบ pipline หรือ streaming โดยจะรับ input เข้ามา แล้วพ่น output ต่อๆไปเรื่อยๆ ต้องการทำอะไร ก็ส่งต่อๆกันไป เหมือน “|” ใน ubuntu

และการเริ่มใช้ Gulp ก็แค่ เริ่มต้นจากการหา gulp plugin ที่เราต้องการ อาจจะเป็น gulp-sass, gulp-minify-css, gulp-uglify, gulp-typescript และอิีกมากมาย เอาเป็นว่า น่าจะมีทุกอย่างที่ต้องการ

หลัังจากนั้น ก็นิยาม task, watch และ default
โดย task คืองานที่ต้องการให้ gulp ทำ, watch คือ การกำหนดให้ gulp จับตาดูไฟล์ที่กำหนดไว้ เมื่อมีการเปลี่ยนแปลงก็จะให้ทำ task ที่เราต้องการ และ default คือ task ที่จะเร่ิมทำทุกครั้งที่รัน gulp

และสุดท้าย ก็ gulp ซะ

แค่นี้ ก็ไม่ต้องไปคิดเรื่อง compile หรือ reload browser อีกต่อไป #ชีวิตดี๊ดี

และทั้งหมดนี้ ก็คือสรุปหัวข้อบรรยาย “Set Environment for Web Developer” โดย /me ยังไงก็ขอขอบคุณที่อ่านมาถึงจุดนี้ เย้ๆๆ แล้วมาแบ่งปันความรู้กันอีกนะ

อย่าเอาคำว่า “ไม่มีเวลา” มาเป็นข้ออ้างที่จะหยุดเรียนรู้ เทคโนโลยีพัฒนาไปทุกวัน เราไม่สามารถบังคับให้คนอื่นก้าวช้าๆรอเราได้ เราต้องพัฒนาตัวเองแล้วพาตัวเองให้ทันคนอื่นๆ
Tell your friend about thisShare on Facebook
Facebook
0Tweet about this on Twitter
Twitter