สรุปงาน 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 มาใช้งานจริงไหม มีนะ เช่น
  • 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
- 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

Reference

Discover more from naiwaen@DebuggingSoft

Subscribe to get the latest posts to your email.

Tags

Related Posts