สรุปงาน Bkk.js#16 The Bangkok Tech Week

Note: Session สุดท้ายแนะนำว่าเข้าไปดูใน Live ดีกว่านะ

- Flutter on the Web in 2022 By Kajornsak Peerapathananont

Flutter เป็น Framework ที่ช่วยพัฒนา App โดยเริ่มจาก Mobile (Android / IoS) > Web > Desktop ตามลำดับ และได้ทุก Platform
How it work from web
- Flutter พัฒนาโดยใช้ภาษา Dart ที่มาจาก Google เสนอ
- เมื่อทำเสร็จจะได้ App บนเว็บ แต่ถ้าลอง F12 (Debug) เวอร์ชั่นแรกตัว Dart มันจะแปลง Generate Dom ผ่าน Dart.js ถ้าเป็นพวกปุ่มๆ จะทำเป็น Canvas แทน
- เบื่องหลังไม่ได้แปลงภาษา (Transpire) นะ มันมี Tech ซ้อนอยู่
  - WebGL - render Canvas
  - PWA
  - Manifest
  - Service Worker
  - Houdini - Testing

แต่เวลาผ่านไปมี Render Engine มาเป็น Canvas Kit ที่จะช่วยให้ Code ดู Clear มากขึ้น แต่มันจะใช้ Performance มากขึ้นด้วยเหมือนกัน และตัว Bundle ที่มาด้วยจะเพิ่มมากขึ้น (ผมนึึกถึงภาพของ NodeJS พาอะไรก็ไม่รู้มาด้วย บวมด้วย)
แต่เราไม่จำเป็นต้องมาเลือก Render Engine ตอน Build กำหนดได้เลยนะว่าจะแบบไหน Auto (ดูจากผู้ใช้เปิดด้วยอะไร) / Html / CanvasKit

Performance - ตอนใช้งานจริงๆ ถ้าไปดู Performance ใน dev ดู สังเกตุว่ามัน Render 8.3 ms flutter ที commitment ว่า 60 fps ทุก Canvas Engine เรียกว่าไม่กระตุก

Responsive - Flutter มี Media Query เหมือนกันที่ทำบน Web เหมือนกัน

Accessibility - ตัว Flutter เหมือนกัน ใน Framework ว่าใช้ Screen Reader / Talkback (Android) โดยหลักการทำงานมันจะสร้าง Dom อีกชุด ที่เป้น Sematic Tree เพื่อให้ Accessibility Tool มาอ่าน
Testing - รองรับ Unit Test จาก Dart / Widget Test รวมถึงพวก UI Test ที่ใช้ Web Driver (Chrome) ทำได้เหมือนกัน
ที่นี้ อาจจะไม่มีคนเอา Flutter มาใช้งานจริงไหม มีนะ เช่น
- World's first Design-System-as-a-Service platform | Supernova.io -
- Slide ของวันนี้ทำจาก Flutter นะเป็น App ขึ้นมา แต่ควรเลือกว่าอะไรควรใช้รูป / Widget
Should I user Flutter for Web ตาม Flow Chart นี้เลย ง่ายดี 55

Slide ของวันนี้ทำจาก Flutter นะเป็น App ขึ้นมา
- แต่ควรเลือกว่าอะไรควรใช้รูป / Widget อย่าง Widget พวก Device ต่างๆก็ดีสำหรับ Dev นะ เอามาขึ้น Prototype ได้ไวเลย
- Slide - App + JSON (เนื้อ Data / Config)
- จาก Slide นี้แสดงข้อจำกัดของ
  - Platform ด้วยนะ อย่าง Web จะยุ่งกับ Local File ไม่ได้ ต้องไป Build Desktop App ให้มี File Watcher
  - พวก Specific Platform สำหรับ Android / IoS / Web / Desktop ถ้ามีเยอะๆ ควรพิจารณาเหมือนกัน ถ้ามีเยอะๆ Maintain ลำบาก

Q&A
- Q: Flutter กับ SEO มีผลไหม
  A: มีผลครับ จาก doc มีให้ดูเรื่องนี้เหมือนกัน
- Q: ควรขึ้นอะไรก่อน Web / Mobile
  A: ตาม business ก่อน แต่ถ้าพอๆกับ Mobile First เพราะง่ายกับการ Scale ไป Web แต่เรื่อง Optimize อาจจะปรับได้ยาก เพราะ Flutter มันไปแปลง Canvas เราไปแต่งยากเหมือนกัน ถ้า Requirement เป็น Web หนักๆ อาจจะไปทางเดิมดีกว่า
- Q: Fuchsia ตอนนี้เป็นยังไงบ้าง
  A: นิ่งๆอยู่ ถ้าตามข่าวช่วงนี้

- Building your first PWA with Azure Static Web Apps and beyond By Jirachai Chansivanon

Recap PWA คือ อะไร - เว็บที่ทำงานได้เหมือน Native App เช่น ทำงาน Offline ได้ พยายามลดการ Request ไปยัง Server ได้
Note: ถ้ามี Web อยู่แล้วสามารถใช้ Tool PWABuilder มาช่วยแปลงตาม Platform ต่างๆ ได้

Azure Static Web App
- เป็นที่เอา Static Web Deploy / Host ได้ทั่วโลก (ผมว่าจริงๆมันมาชนกับ Firebase Hosting ปะ ?)
- Dev Environment support ทั้ง Tool + Emulator เยอะ + CI/CD
- ไม่จำเป็นต้องทำ Web ทั้ง Flow มีหน้าจอ + Serverless (Azure Function) ได้เลย
ต่อจากนี้จะเป็น Demo สดๆกันครับ
- ใช้ VSCode + Extension PWA Studio ที่ช่วยทำ PWA ได้สะดวก โดยมีเทคโนโลยีเบิ้องหลังใช้ lit frontend library / web component มาสร้าง Demo Desktop App
- Build Demo มันจะโผล่มาใน dist
- แล้วเอา Demo Deploy ขึ้นไป Azure Static Web App
- ลองเอาไปลงบน Windows 11 ตอนลงจะมี Script PowerShell มาช่วย (ต้อง Run with PowerShell นะ) คุณสมบัติของ Desktop App มาครบเลย
- ถ้าทำผ่าน VSCode หมดลง Extension Azure Static Web App / Azure Function มาช่วยได้
- ปล. เป็น Session ที่ลุ้นจริงๆ ครับ 555 เพลงเปิดตัวอันสุดท้ายผมว่าไปทำลง tiktok น่าจะด
Resource
- What is Azure Static Web Apps? | Microsoft Docs
- Announcing PWA Studio, the VS Code extension for building Progressive Web Apps! | PWA Builder Blog

- Say goodbye to password...permanently By Phumrapee Limpianchop

มีเว็บ มีอะไรมากขึ้น เรามี Password ให้จำมาขึ้น ใครที่รู้ Tech นิดนึงใช้ Password Manager
ตอนนี้ Password มันซับซ้อนมากขึ้นเราใช้ซ้ำไปทุกที่ ถ้าหลุดก็หลุดหมด
Solution ที่ช่วยลดปัญหาตอนนี้มีอะไรบ้าง
- Single-Sign On (SSO) อย่าง FB Login / google Auth บราๆ
- WebAuthn - Password-Less Auth
WebAuthn คือ อะไร ง่ายๆ Login ด้วย user และสแกนนิ้ว หรือสแกน QR เพื่อยืนยัน

How it works แนะนำให้ดูใน Live ย้อนหลัง เพิ่มนะ

ทุกชั้นตอนมี Encode / Decode เข้ารหัสนะ
register
- [Get] ส่ง user ให้ได้ uid + challenge ตอนนี้ยังเป็น Temp อยู่นะ
  rp = relying party สำหรับใช้ข้าม Domain
- Authenticate โดย Public key Authentication ตอนนี้ uid + challenge มา
- และยืนยันตัวตน นิ้ว หรือสแกน QR เพื่อเอา Public Key ออกมา (ตรงนี้ไม่มีการแตะ Private key อย่ Browser) โดยตัว attestationObject (PublicKey) / ClientDateJSON (Solution ของ challenge - ฝั่ง Server ให้ Verify ได้)
- ทุกอย่างเก็บใน CBOR สนใจ AuthData เราสนใจ CredId + COSEPublishKey เอามาเก็บลง DB ใช้เป็น Auth จบการ register
Login คล้ายกัย Register
- ใส่ username + login
- Server จะส่ง challenge มาให้หา Solution + AllowedCredential (CredId)
- ถ้าผ่านก็จบ
How Secure it
- ถ้าแบบเดิมตัว Hash อยูที่ Server ถ้าหลุดเอาไปชนหา Password จริงได้
- WebAuthn จะเก็บ Private Key ที่เครื่องเรา
- ถ้าใช้เครื่องอื่นต้องมาเพิ่ม ใช้ FIDO Protocol ผ่าน Bluetooth (End2End Communication) จากนั้น Flow เดิมและ challenge มาให้หา Solution
จากนั้น Demo และว่าใช้ทั้ง App + Web ได้
Resource