สอนวิธีใช้ Google Web Starter Kit

ทุกวันนี้เรามี framework ในการทำเว็บไซต์มากมาย ไม่ว่าจะเป็น Foundation ของ Zurb หรือ Bootstrap ของ Twitter แต่ในเวลานี้ ตัวที่คนกำลังพูดถึงมากที่สุดคงหนีไม่พ้น Web Starter Kit ของ Google

Web Starter Kit คืออะไร ?

จริงๆ แล้ว Web Starter Kit ก็เป็นเครื่องมืออำนวยความสะดวกในการพัฒนาเว็บไซต์เหมือนๆ กับ Foundation และ Bootstrap แต่สิ่งที่ทำให้มันน่าสนใจเป็นพิเศษก็เพราะว่ามันพัฒนาโดยบริษัทที่เต็มไปด้วยวิศวกรที่เก่งมากๆ อย่าง Google และนั่นก็พอที่จะทำให้นักพัฒนาก็มีความเชื่อมั่นใน framework ตัวนี้อยู่พอสมควร

ลักษณะเด่น

• Multi-device responsive boilerplateเตรียมโค้ดสำหรับพัฒนา responsive web ขั้นพื้นฐานมาให้
• Living component style guideเตรียมสไตล์สำหรับ UI ต่างๆ มาให้
• Cross-device SynchronizationSync ไปยัง device อื่นๆ ที่เปิดหน้าเดียวกันนี้อยู่ได้(สะดวกมาก เวลา test หลาย device พร้อมๆ กัน)
• Live Browser Reloadingโหลดหน้าเว็บใหม่ให้เองเวลามีการแก้ไข html, css หรือ js(เหมาะมากสำหรับคนที่มี 2 จอ เพราะจะสามารถเขียนโค้ดจอนึง แล้วดูผลลัพธ์อีกจอนึงได้เลยโดยที่ไม่ต้องละมือจากคีย์บอร์ด)
• Performance optimizationบีบอัดและรวมไฟล์ html, css และ js ให้ทันทีที่มีการแก้ไฟล์ ส่วน image ก็จะ optimize ให้มีขนาดเล็กลงโดยที่คุณภาพยังเหมือนเดิม
• Built in HTTP Serverมี web server มาให้เลย(ไม่ต้องลง apache หรือ nginx)
• PageSpeed Insights Reportingวิเคราะห์ความเร็วในการโหลดหน้าจากแง่มุมต่างๆ ทั้งใน mobile และ desktop(มีคะแนนให้ดูด้วย)
• Sass supportใช้ Sass(compile ให้ทันทีที่มีการแก้ไขไฟล์)

ขั้นตอนการติดตั้ง

1. ดาวน์โหลด Web Starter Kit

ก่อนอื่นให้เราไปดาวน์โหลด Web Starter Kit มาก่อน หรือจะ clone มาจาก GitHub ก็ได้

2. ติดตั้ง Tools

จะว่าไปแล้ว Web Starter Kit ก็คือการนำ tool ต่างๆ ที่มีอยู่แล้ว มาใช้งานร่วมกันอย่างลงตัว ในการจะใช้ Web Starter Kit เราจึงต้องติดตั้ง tool ต่อไปนี้

• node.jsดาวน์โหลดได้ที่ nodejs.org
• rubyดาวน์โหลดได้ที่ ruby-lang.org
• sassสามารถ install ผ่าน gem ได้เลย gem install sass
• gulp.jsสามารถ install ผ่าน npm ได้เลย npm install --global gulp

3. Install & Build

หลังจากที่ติดตั้ง tool ทั้งหมดเรียบร้อยแล้ว ให้เราติดตั้ง dependencies ต่างๆ ที่ Web Starter Kit จำเป็นต้องใช้

npm install

เมื่อ dependencies ต่างๆ พร้อมแล้ว(ส่วนใหญ่จะเป็น plugins ของ gulp.js) ขั้นตอนสุดท้าย จะเป็นการ build ให้เราเข้าไปที่ web-starter-kit/app แล้วรันคำสั่งนี้

gulp

หลังจากที่ build แล้ว เราจะได้ web-starter-kit/dist เพิ่มเข้ามา โดย folder นี้ จะเป็น folder สำหรับ production ส่วนการ develop เราจะทำที่ web-starter-kit/app เสมอ

4. Test

ให้เราถอยกลับไปที่ web-starter-kit แล้วรันคำสั่งนี้

gulp serve

เราก็จะได้เห็นหน้าตาพื้นฐานของ Web Starter Kit หากเราลองเข้าไปดูที่ web-starter-kit/app เราก็จะเห็นไฟล์ html, css และ js ต่างๆ ที่ Web Starter Kit เตรียมไว้ให้(เหมือนกับ Foundation และ Bootstrap) ให้เราลองเข้าไปแก้ไฟล์ต่างๆ เหล่านี้ แล้วลอง save ดู เราก็จะพบว่าหน้าเว็บเปลี่ยนไปตามที่เราแก้แบบ real-time เลย

บทสรุป

จะเห็นว่า Web Starter Kit พยายามสร้างสภาพแวดล้อมที่เหมาะสมในการพัฒนาเว็บไซต์ขึ้นมา ซึ่งจริงๆ แล้วสภาพแวดล้อมเหล่านี้ เราสามารถสร้างขึ้นมาได้เอง เพียงแต่ Web Starter Kit นั้นทำให้มันเป็นระบบมากขึ้น เพื่อที่จะให้การพัฒนาเป็นไปในทางเดียวกัน แต่หากจะนำไปเทียบกับ Foundation หรือ Bootstrap ในเวลานี้ ก็คงจะยังไม่สามารถมาแทนที่ได้(Web Starter Kit ยังเป็น beta อยู่เลย) การตัดสินใจว่าจะใช้ framework ตัวไหน สุดท้ายคงจะต้องมาวัดกันที่ css และ js ว่าใครทำออกมาได้ดีกว่ากัน