Kusumoto Blog

[ช่วงบ่าย] สรุปสิ่งที่น่าสนใจในงาน Google I/O 2016 Extended Bangkok

Weerayut Hongsa -

หลังที่พักทานอาหารเตรียมความพร้อมเพื่อลุย Codelab กันต่อในช่วงบ่ายเป็นที่เรียบร้อยแล้ว โดย Section ในช่วงบ่าย เริ่มต้นด้วย Codelab ของ Angular & Progressive Web Apps ครับ

Angular 2 & Progressive Web Apps & Firebase

Section นี้บรรยายโดยคุณ Thye Yeow Bok โดยเป็นการแนะนำในเรื่องของ Progressive Web Apps และการประยุกต์ในส่วนของ Angular 2 โดยใช้ Angular Mobile Toolkit สามารถทำได้อย่างไร และได้ขยายความในเรื่องของ App Shell Concept ครับ

ในส่วนของ App Shell Concept เป็นส่วนสำคัญมากๆครับ ในการทำ Progressive Web Apps เพราะเป็นการแบ่งในส่วนของ Application Shell (เข้าใจง่ายๆ ก็คือตัว UI นั้นแหละครับ) กับ Content ออกจากกันครับ

สาเหตุที่ต้องแยกออกจากกัน เพราะด้วยเห็นผลของการ Cache ครับ Progressive Web Apps จำเป็นต้อง Cache ไฟล์บางไฟล์เอาไว้ในเครื่อง เพื่อใช้ในการเรียกดูเนื้อหาแบบ Offline โดยการ Cache หลักๆจะ Cache ในส่วน Application Shell (UI นั้นและพวก Assets ทั้งหลาย) เอาไว้ในเครื่อง แล้วดึง Content จาก Internet หรือจาก Cache อันนี้ก็อยู่ที่การตั้งค่าครับ

แน่นอน การทำ Progressive Web Apps โดยใช้ App Shell Concept จะต้องทำให้ Client (Browser) เป็นคนสร้าง UI เอง ไม่ใช่รับมาจาก Server ครับ ส่วน Server นั้นก็จะมีหน้าที่ในการยิง Content มายัง UI เพื่อให้ Browser นำข้อมูลที่ได้มาใส่ UI ครับ

และใน Section นี้ ได้มีการกล่าวในเรื่องของ Service Worker เพิ่มเติมขึ้นมาด้วยครับ โดยได้กล่าวถึงกระบวนการทำงานของ Service Worker แบบคร่าวๆ

พร้อมทั้งมี Code ตัวอย่างให้ดู ในเรื่องของการใช้ Angular 2 ในการเชื่อมต่อไปยัง Firebase ให้ดูกันครับ

Polymer & Progressive Web Apps


สำหรับอันนี้เป็นอะไรที่ตื่นเต้นมากครับ เพราะเป็นของใหม่ (สำหรับผมคนเดียวหรือเปล่าเนี่ยย) มากๆครับ โดย Section นี้บรรยายโดยคุณ Supachai Laparparat และคุณ Tanitphon Paniwan ครับ

สำหรับ Section นี้ เป็นการทำความรู้จักเจ้าตัว Polymer กันก่อนครับ ก่อนจะไปทำ Progressive Web Apps กันครับ

ตัว Polymer เป็น UI Library ครับ เกินขึ้นโดยแนวคิด Web Component ซึ่งต่างจาก Javascript UI Library หลายๆตัว แนวคิดของตัว Polymer คือการผนวกเอาคุณลักษณะและหน้าตามาไว้ใน HTML Element ใน Tag เดียว ซึ่งง่ายมากๆ ยกตัวอย่างเช่น

คุณอยากได้ Tab แบบเลือก Page ได้สักอัน เราจะมาเปรียบเทียบการ Implement ระหว่าง Bootstrap กับ Polymer กันครับ

Bootstrap

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Ref : http://getbootstrap.com/javascript/#tabs

Polymer

<paper-tabs selected="{{selected}}">
  <paper-tab>Tab 1</paper-tab>
  <paper-tab>Tab 2</paper-tab>
  <paper-tab>Tab 3</paper-tab>
</paper-tabs>

<iron-pages selected="{{selected}}">
  <div>Page 1</div>
  <div>Page 2</div>
  <div>Page 3</div>
</iron-pages>

Ref : https://elements.polymer-project.org/elements/paper-tabs

ผมจะไม่ขอพูดว่าอะไรดีกว่าไม่ดีกว่านะครับ ไม่เข้าข้างใครนะๆ ฮ่าๆ เอาหล่ะ เข้าเรื่องต่อๆ หลังจากนี้ก็จะอธิบายการทำ Progressive Web Apps บน Polymer ต่อครับ โดยตัว Polymer เนี่ย ตัวมันเองนั้นทำ Progressive Web Apps นั้นยากมากๆ เลยมีการออกเครื่องมือที่ใช้ในการทำ ที่ชื่อว่า Polymer App Toolbox

โดยตัว Polymer App Toolbox นั้น ประกอบไปด้วย

  • Layout
  • Routing
  • Localization
  • Storage
  • CLI

อย่างที่บอกในตอนแรกครับ Polymer นั้น ทำ Progressive Web Apps ได้ยากมาก ทาง Polymer เลยออก Pattern ที่ทำให้ Polymer ทำ Progressive Web Apps ได้ มันชื่อ PRPT Pattern

หลังจากนั้น ก็มี Codelab ตัวอย่างการ Implement Polymer ให้สามารถทำ Progressive Web Apps ได้ด้วย Polymer App Toolbox ครับ

Service Worker

ไอตัวนี้แหละครับ หัวใจสำคัญในการทำ Progressive Web Apps เลยทีเดียว โดย Section นี้พูดโดย คุณ Warat Wongmaneekit ครับ โดย Section นี้ จะเจาะลึกการทำงานของ Service Worker ครับ พร้อมกับทดลองใช้ JavaScript Tools ที่ใช้ในการทำ Progressive Web Apps จากทีมพัฒนา Chrome กันครับ

เรามารู้จัก Service Worker Lifecycle ก่อนก่อนครับ ดังรูปด้านบน จะเป็นการอธิบาย Lifecycle เอาไว้ เป็นกระบวนการคร่าวๆที่ตัว Service Worker จะทำงานครับ

โดยหลักๆแล้ว ตัว Service Worker ถ้าจะให้เข้าใจง่ายๆ มันคือตัวที่ใช้ในการควบคุมการทำงานตัวเว็บไซต์ ไม่ว่าจะเป็นการ Cache, Push Notification ถึงแม้เราจะปิดเว็บนั้นไปแล้ว ตัว Service Worker จะยังคงทำงานอยู่เบื้องหลังอยู่ ทำให้เว็บนั้น สามารถเข้าใช้งานในรูปแบบ Offline ได้ เป็นต้น

หลังจากนั้น ก็มีการยกตัวอย่างการ Implement ตัว Service Worker ในแบบต่างๆกันครับ

  1. Demo for Cache assets with native way
    https://github.com/Google-IO-extended-bangkok/pwa-workshop/tree/master/demo2-cache
  2. Cache assets with sw-precache
    https://github.com/Google-IO-extended-bangkok/pwa-workshop/tree/master/demo3-cache-pre-cache
  3. Cache assets with sw-toolboxs
    https://github.com/Google-IO-extended-bangkok/pwa-workshop/tree/master/demo4-sw-toolsbox

ยังมีตัวอย่างในการ Implement ตัว Service Worker ในรูปแบบอื่นนอกจาก Cache อีกครับ

  1. Push notification
    https://github.com/Google-IO-extended-bangkok/pwa-workshop/tree/master/demo5-notification
  2. Background Sync
    https://github.com/Google-IO-extended-bangkok/pwa-workshop/tree/master/demo6-sync

Firebase for Web

Section ต่อไปเป็นของ Firebase ครับ โดย Section นี้ จะเป็นการพูดถึง Firebase ในส่วนของ Web เป็นหลักนะครับ บรรยายโดยคุณ Warat Wongmaneekit ครับ

Firebase มี Component หลักๆที่เกี่ยวข้องกับการพัฒนา Web Application ดังนี้

  • Realtime Database (มีตัว Javascript SDK และ REST Web Service)
  • Authentication (มีทั้ง Google, Facebook, Twitter, Github หรือจะกำหนดเองก็ได้)
  • Storage (เก็บไฟล์ได้ โดย Google Cloud Storage)
  • Hosting (มีเว็บโฮสติ้งไว้ให้ใช้ด้วย)

โดยใน Section ได้อธิบายถึงการใช้งาน Firebase Console เบื้องต้น พร้อมทั้งทำ Codelab เกี่ยวกับการทำ Chatroom โดยใช้ Firebase ภายใน 20 นาที

ใครอยากลองเล่นหรือดูตัวอย่าง ดูได้ที่ลิงค์ของ Google ได้เลยครับ : https://codelabs.developers.google.com/codelabs/firebase-web/#0

ที่จริงแล้วงานไม่ได้หมดแค่นี้ครับ แต่พอดีผมติดธุระพอดี เลยต้องขอออกมมาก่อน (ตอนหลังคิดเลยว่า ตัวเองพลาดมากๆ เสียใจ TT)