รู้จัก Polymer-Project : Web Application Framework พร้อมเริ่มต้น แบบ Basic

Polymer เปิดตัวต่อโลกครั้งแรกในงาน Google I/O 2013 แต่ช่วงนั้นยังไม่มีข้อมูลออกมาเยอะมากนัก แต่ผมก็ไม่ได้เริ่มต้นศึกษาตั้งแต่ปี 2013 หรอกนะครับ ผมพึ่งจะรู้จักกับเจ้า Polymer นี้ ในงาน Google I/O Extended Bangkok 2016 โดยสถานที่จัดที่ Siam Paragon งานนี้ฟรีครับ ต้องขอบคุณ สปอนเซอร์ ที่จัดงานดี ๆ ให้แบบนี้

หลังจากน้ำลายมามากพอแล้ว เรามาดูกันก่อนว่า Polymer คืออะไร

Polymer คือ UI library ที่อิงอยู่บนแนวคิดของ Web Components ดังนั้นมันจึงแตกต่างจาก UI library ตัวอื่นๆ ในปัจจุบันอย่าง Bootstrap, jQuery Mobile, Sencha Touch, Adobe Topcoat พอสมควรในแง่เทคนิคที่ระดับฐานรากอยู่พอสมควร (ในแง่เป้าหมายสุดท้ายที่ระดับบนคงไม่ต่างกันนัก)

UI library ในปัจจุบันอิงอยู่บนแท็ก <div> เป็นหลัก แล้วค่อยแปลงกาย <div> ด้วย JavaScript/CSS ในภายหลัง แต่กรณีของ Polymer มองว่าวัตถุทุกอย่างคือ HTML element ที่แตกต่างกันไป ปฏิสัมพันธ์ระหว่างเบราว์เซอร์กับ element จึงต่างออกไปด้วย

แนวคิดที่สำคัญของ Web Components คือการ encapsulation หรือการผนวกเอาหน้าตาและ คุณสมบัติของวัตถุมารวมอยู่ภายใต้แท็กอันเดียว (อ่านได้ในบทความเก่าเรื่อง Web Components) ทำให้หน้าตาหรือพฤติกรรมของมันไม่ถูกดัดแปลงโดย JavaScript/CSS ของเว็บเพจ และสามารถนำไปใช้ต่อได้ง่ายด้วย HTML imports

องค์ประกอบของ Polymer

Polymer แบ่งออกเป็น 3 ส่วนใหญ่ๆ ตามภาพ (ภาพจากทีมงาน Polymer ไปตอบคำถามบน StackOverflow)

  1. Foundation (สีแดง) ส่วนนี้มีหน้าที่ทำให้เว็บเบราว์เซอร์รู้จักและสามารถเรียกใช้งาน Web Components ได้ (polyfill) เพราะปัจจุบันยังมีแค่ Chrome/Firefox รุ่นใหม่ๆ เท่านั้นที่รู้จัก Web Components โดยส่วนสีแดงนี้จะถูกหั่นออกไปตามกาลเวลา เมื่อเบราว์เซอร์รองรับมาตรฐาน Web Components มากขึ้น
  2. Core (สีเหลือง) ส่วนเสริมที่ช่วยให้การใช้งาน Polymer สะดวกมากขึ้น เช่น data-binding
  3. Elements (สีเขียว) ส่วนนี้คือ Web Components หรือ UI สำเร็จรูปที่ Polymer สร้างเตรียมไว้ให้เราใช้งานได้ทันที โดยส่วนใหญ่ใช้การออกแบบตามแนวทาง Material Design

ในแง่ของนักพัฒนาเว็บ-แอพ ส่วนที่สำคัญที่สุดคงเป็นสีเขียวคือ Elements ที่สร้างมาให้เรานำไปใช้ต่อได้นั่นเองครับ

หลังจากได้รู้จักเจ้า Polymer ไปบ้างแล้ว เราไปลองของจริงกันบ้างดีกว่าครับ 
ตอนนี้ Polymer ได้พัฒนาถึง Version 1.0 แล้วนะเออ รู้ยัง และมี Polymer Starter Kit 2.0.1 ที่ช่วยในการ build Project ของเราให้ง่ายขึ้น

แต่ผมจะยังไม่ใช้มันนะ เอาแบบ Basic Basic ก่อน (ทำไมคนไทยชอบพูดซ้ำ)

ขั้นตอนแรก ต้องติดตั้งเจ้า Polymer CLI ให้เครื่องเรารู้จักเสียก่อน โดยความต้องการของ Polymer CLI เนียย มีดังนี้
  1. Install Git.
  2. Install the current LTS version (4.x) of Node.js or newer.
  3. Install the latest version of Bower.
    npm install -g bower
  4. Install Polymer CLI.
    npm install -g polymer-cli

เมื่อติดตั้ง Polymer CLI เรียบร้อยแล้ว

ขั้นตอนที่สอง เริ่ม Create Project Polymer ของเราได้เลยโดยมีขั้นตอนง่ายมาก
  1. สร้าง Folder ขึ้นมา สำหรับเก็บ Project ของเรา
     mkdir my-app
     cd my-app
  2. หลังจากเข้ามาอยู่ใน Project ของเราแล้ว ใช้คำสั่ง Build Project ของเราได้เลย
    polymer init

โดยจะถามให้เราเลือกว่าจะ Build template แบบไหน โดยขั้นตอนนี้ผมเลือก elemet ไปก่อน

ต่อมาให้เราตั้งค่า Project ของเรา โดยจะเป็น bower.json สามารถไปแก้ไขภายหลังได้หลังจาก Build เสร็จ

หลังจากรอโหลดแป๊บนึง ก็จะได้ประมาณนี้

แสดงว่า Project ของเรา Build เสร็จแล้ว พร้อมจะลุยกันเลย

จะได้ไฟล์ประมาณนี้

bower_components จะเก็บไฟล์พวก Element ของเรา สามารถโหลดเพิ่มเติมได้ที่ Element-Polymer

bower.json จะเป็นไฟล์ config ของ Project เรา เช่น name, dependencies ต่าง ๆ สามารถมาจัดการได้ที่นี้

index.html คือไฟล์ เริ่มต้นของ web เราเมื่อตอนรัน

เมื่อได้ Project มาแล้ว ทดสอบสั่งรันโดย
 polymer serve

หรือถ้าอยากสั่งรันแล้ว เปิด browser มาอัตโนมัติ ให้เพิ่ม — — open เข้าไป โดยจะรัน default browser ของเครื่องเราให้เลย

สรุป

Polymer คือ UI library ที่อิงอยู่บนแนวคิดของ Web Components ส่วนตัวที่ผมชอบก็คือ ง่ายต่อการใช้งานมาก สามารถออกแบบให้ใช้งานเหมาะกับเว็บและมือถือ บางท่านมองว่า ปุ่มต่าง ๆ ถอดแบบมาจาก Andorid L เลย แล้วยังมี elemet ให้ใช้งานได้สะดวกมากครับ(blong หน้า) แทบไม่ต้องพึ่ง css, js เลย และยังมี Service Worker รองรับการทำงานเต็ม ๆ ด้วย เพราะค่ายเดียวกันมั้งงงง ถ้าใครไม่รู้จัก service worker แนะนำให้ไปอ่าน เรื่อง Progressive web App ของพี่ warat wongmaneekit ผมว่าเขาเขียนได้ดีมากครับ

เจอกันใหม่คราวหน้าครับ ผิดพลาดประการใดขออภัยมา ณ ที่นี้ด้วยนะครับ

ผมก็ไม่ได้เก่ง แต่อยากให้มือใหม่เหมือนผมเดินไปด้วยกัน

#มือใหม่หัดเขียน #Polymer-Project