สวัสดีครับ บล็อกนี้จะเป็นสรุป Keynote ในงาน Flutter Engage 2021 ที่มีขึ้นในวันที่ 4 มี.ค. 2021 เป็นงาน Live นำเสนอของใหม่ ใน Flutter ว่ามีอะไรบ้าง

แนะนำว่าหากมีเวลา สามารถดูวิดีโอใน youtube ได้ โดยส่วนของ keynote จะประมาณ 1 ชั่วโมง

เริ่มต้น

คุณ Tim Sneatch (Director Flutter & Dart , Google) ประกาศว่านี่คือก้าวที่สำคัญของ Flutter ที่จะนำแอปไปสู่ Platform ใหม่ๆ คุณ Tim ยังอธิบายเป้าหมายของ Flutter ว่าต้องการให้ Developer เน้นไปที่ความต้องการว่าจะสร้างอะไรมากกว่า สนใจว่า สำหรับ Platform ไหน นอกจากนี้คุณ Tim ยังพูดเกี่ยวกับแนวทางของ Flutter ว่ายังคงให้ความสำคัญใน 5 เรื่องเหมือนเดิม คือ สวยงาม รวดเร็ว มีประสิทธิภาพ เปิดกว้าง และ ใช้ง่าย

ปัจจุบันมีแอปพลิเคชันที่พัฒนาด้วย Flutter กว่า 150,000 แอป เพิ่มจากฤดูร้อนปีก่อนกว่า 2 เท่าตัว

Flutter 2.0

วันนี้เป็นวันเปิดตัว Flutter เข้าสู่ Major Update คุณ Tim เล่าถึง Flutter 2.0 ที่เปิดตัวในวันนี้ หากเราทำแอปจาก Flutter 1.x เดิมเราจะโฟกัสไปที่ Android , iOS แต่ว่าใน 2.0 จะสามารถโฟกัสไปที่ Platform อื่นๆ คือ Windows MacOS Linux และ Web เพิ่มเติมได้แล้ว

นอกจากนี้ Flutter 2.0 ยังเพิ่มฟีเจอร์กว่า 100 อย่าง ทั้งปรับปรุงประสิทธิภาพ เพิ่มความเสถียร เพิ่ม UI Widget ใหม่ๆ เพิ่มความสามารถเกี่ยวกับผู้พิการ รองรับ chip ของ Apple Silicon เพิ่มการรองรับ Null safety และปิด issue ไปกว่า 6,000 รายการ

Flutter Folio

จากนั้นจะเป็นการสาธิตแอปพลิเคชันที่ชื่อว่า Flutter Folio เป็นแอปพลิเคชันอัลบั้มภาพ (Scrapbooking App) ที่ทาง gskinner พัฒนาด้วย Flutter เพื่อสาธิตการพัฒนาแอปที่รองรับ Platform ต่างๆ ทั้ง Web , Mobile และ Desktop ใน codebase เดียว ซึ่งนอกจากจะมีการนำเสนอ UX/UI ที่เหมาะสมในแต่ Device Factor แล้ว จะเห็นว่ารองรับการใช้งาน Gesture ต่างๆ ทั้ง cursor , mouse คลิกขวา , hover , scroll รวมทั้ง keyboard shortcut ใน Desktop และ Web ได้อีกด้วย

โดย gskinner บอกว่าแอปนี้ที่พัฒนาด้วย Flutter รองรับถึง 5 Platform ใช้ code base ร่วมกันถึง 95% นั่นหมายความว่า มีเพียง 5% ที่อาจต้องเขียน custom สำหรับแต่ละ platform นั่นเอง

ลองเล่น ตัวอย่าง Web Flutter Folio
https://www.flutterfolio.com/carl

สามารถดูตัวอย่างและ source code ได้ที่
https://flutter.gskinner.com

Google Pay

คุณ Peeyush Ranjan (VP Engineering, Google Pay, Google) เล่าว่า Google Pay มีผู้ใช้กว่า 150 ล้านคน รองรับมากกว่า 30 ประเทศ โดยปัญหาที่เคยเผชิญ คือ ปัญหา Scaling กล่าวคือ แอปใหญ่มาก ดูแลยาก เพราะเดิมเขียนแบบ Native ที่มี code base 2 ชุด เป็น Android และ iOS มี code กว่า 1.7 ล้านบรรทัด

ทีม Google Pay จึงศึกษาข้อดีข้อเสีย Flutter จนตัดสินใจเขียนแอปใหม่ ด้วย Flutter ผลลัพธ์ คือ ช่วยลด code ลงเหลือ 1.1 ล้านบรรทัด และลดงานของวิศวกร ทำให้ productivity เพิ่มขึ้น 20% สามารถไปทดลองทำอะไรใหม่ๆ หรือเพิ่มเรื่อง security review ได้มากขึ้น

Dual Screen

คุณ Guy Merin (Sr. Director Surface Developer Experience, Microsoft) อธิบายเกี่ยวกับ อุปกรณ์ 2 จอที่พับได้ หรือเรียกว่า Foldable Factor ซึ่งถูกใช้ใน Surface Duo

เผื่อใครไม่รู้ Surface Duo รัน Android นะ

แน่นอนว่า Hardware ที่มีจอแบบพับแบบนี้ ต้องมี Software ที่รองรับการใช้งานด้วย ดังนั้น Microsoft จึงเป็นหนึ่งในผู้พัฒนา APIs ของ Dual screen สำหรับ Flutter โดยพัฒนาร่วมกับ Google

ตัว APIs รองรับการใช้งาน Dual Screen ใน 5 รูปแบบ สามารถดาวน์โหลด Surface Duo Emulator มาลองเล่นได้แล้ววันนี้

รายละเอียดของ Surface Duo Emulator
https://docs.microsoft.com/en-us/dual-screen/android/emulator/get-started

การวิธีเพิ่มให้ Flutter รองรับ Dual Screen
https://docs.microsoft.com/en-us/dual-screen/flutter/

ก่อนหน้านี้ผมเคยลองเล่น Surface Duo Emulator (ตอนนั้นยัง Preview อยู่)

Flutter Web

คุณ Tim ประกาศว่า Flutter Web เข้าสู่สถานะ Stable แล้ว แต่ไม่ใช่ Web ทุกแบบ จะเหมาะกับ Flutter โดย Flutter Web จะเหมาะกับเว็บที่เน้นในเรื่องเดียวเป็นหลัก (App-centric experience) และเหมาะกับ 3 รูปแบบดังนี้

1. Progressive Web App (PWA) เว็บที่ทำงานคล้ายๆแอป รองรับ Offline ได้
2. Single Page Web App (SPAs) เว็บที่มีหน้าเดียว
3. Flutter App แอปที่มีอยู่แล้วใน Mobile และต้องการแปลงมาใช้ใน Web browser

คุณ Dion Almaer (Director, Web Developer Ecosystem, Google) ได้อธิบายเพิ่มเติมว่า Flutter Web ได้ปรับปรุงประสิทธิภาพ ทั้งความเร็ว และความลื่นใหล โดย Flutter ได้ลองใช้งาน Render engine หลายๆตัว และเลือกตัวที่เหมาะสมที่สุดตามสถานการณ์ ทั้งนี้ Flutter Team ยังทำงานร่วมกับ Chrome Team เพื่อที่จะช่วยให้ Chrome ทำงานกับ Flutter Web ได้ดีที่สุด สามารถใช้ฟีเจอร์ของ chrome ได้ และพยายามให้เรื่องทางเทคนิคของ browser ไม่เป็นข้อกังวลของ developer พยายามให้ developer focus แค่ตัวแอปก็พอ

ดังนั้น ในวันนี้ Flutter ได้กลายเป็นหนึ่งในทางเลือก ของ Stack สายเว็บในปัจจุบันเรียบร้อยแล้ว พร้อมสู้ในสงครามกับคู่แข่งที่เป็นที่นิยมอย่าง Vue.js และ React

Flutter Plasma

จากนั้นมีการโชว์ demo ของ Web ที่พัฒนาด้วย Flutter เพื่อแสดงศักยภาพของ Flutter Web ว่ามีประสิทธิภาพแค่ไหน โดยจะเป็นเว็บที่แสดง animation ที่การทำเว็บแบบที่ผ่านมาจะเป็นเรื่องที่ทำได้ยากมากๆ แต่ Flutter ทำให้มันเป็นจริงได้ง่ายๆ

อยากให้ลองเข้าไปดูครับ มันเจ๋งมากจริงๆ ย้ำว่าไม่ใช่วิดีโอ แต่เป็น Animation ที่เกิดจากการวาดด้วยการเขียนโปรแกรม และแสดงบนเว็บจริงๆ มันใหลลื่นมากด้วยนะ แถมยังรองรับในทุก browser อีกด้วย
https://flutterplasma.dev/

iRobit education

อีกตัวอย่างหนึ่งของ Flutter Web คือ iRobot education เป็นเว็บไซต์สำหรับการศึกษา สาธิตเว็บแอปที่สามารถลากวางชุดคำสั่ง แล้วหุ่นยนต์จะเคลื่อนที่ ทำงานตามคำสั่ง เป็นตัวอย่างการใช้ Drag & drop และการแสดง Animation ของหุ่นยนต์ โดย code เดียวกันนี้ยังสามารถทำงานใน iOS Android ได้อีกด้วย เพราะมันคือ Flutter ยังไงล่ะ

ลองเล่นโปรเจคนี้ได้ที่
https://code.irobot.com/

Flutter Desktop

นอกจาก Web แล้ว Flutter Desktop ก็เข้าสู่ Stable Channel เช่นกัน โดยรองรับทั้ง MacOS, Windows, Linux สามารถ Build แบบ standalone ได้

แต่ว่า Flutter Desktop ก็ยังไม่รองรับความสามารถหลายอย่าง เช่น Multi-Windows และการรองรับ plugin ที่นิยมกัน เช่น Firebase แน่นอนว่าความสามารถนี้ น่าจะเพิ่มมาในอนาคต

Flutter for Linux

คุณ Ken VanDine (Engineering Manager, Ubuntu Desktop, Canonical) เล่าเกี่ยวกับการทำงานร่วมกับ Flutter Team เพื่อนำ Flutter มาใช้สำหรับ Linux เขาเล่าว่าเขาสนใจ Flutter ตั้งแต่ Google ประกาศว่า Flutter จะรองรับ Desktop เพราะ Flutter จะช่วยให้นักพัฒนาสามารถพัฒนาแอปแบบ Cross Platform และการพัฒนาแอปใน Linux จะเป็นเรื่องง่ายมากขึ้น

เขายังทำงานร่วมกับ Flutter เพื่อเพิ่มฟีเจอร์ให้กับ Flutter Linux รองรับความสามารถใหม่ๆ เช่น Multi-windows และช่วยทำให้ plugin ที่นิยมต่างๆ เช่น Firebase สามารถใช้งานได้ใน Linux อีกด้วย

อีกทั้ง ทีมของเขายังพัฒนา UI Style สำหรับ Linux ที่ชื่อว่า Yaru เป็น UI ที่เป็นมาตรฐานของ Linux ให้สามารถเลือกใช้ใน Flutter Linux ได้

นอกจากนี้ คุณ Ken ยังบอกว่าเขากำลังทำตัว Ubuntu Installer ของ App ต่างๆ ที่พัฒนาด้วย Flutter (Build-in Flutter)

Toyota

ไม่ใช่แค่ Desktop แต่ Flutter ยังรันในอุปกรณ์ Embedder อย่าง IoT ได้เช่นกัน คุณ Daniel Hall (Chief Engineer, Toyota Motor North America) ประกาศว่า Toyota เป็น Partner กับ Flutter และกำลังจะนำ Flutter มาใช้กับระบบของ Toyota แน่นอนว่า Flutter จะเป็นส่วนหนึ่งในกลไกของรถยนต์ของ Toyota

Dart & Null Safety

คุณ Bob Nystrom (Software Engineering, Dart language Team, Google) กล่าวว่า ตอนนี้สามารถใช้งาน ฟีเจอร์ใหม่ของ Dart ที่เรียกว่า Null safety ความสามารถนี้เป็นการเปลี่ยนแปลงที่ใหญ่มากของ Dart จะช่วยตรวจสอบปัญหา Null Exception ให้การเขียนโปรแกรมจัดการเรื่อง null ง่ายขึ้น คุณ Bob อธิบายเพิ่มเติมว่า Null safety ยังช่วยให้ Compiler ทำงานเร็วขึ้นด้วย เพราะชุดคำสั่งลดลงจากเดิม

ต่อมาคุณ Kenzie Schmoll (Software Engineer, Flutter Developer Experience, Google) อธิบายเพิ่มเติมเกี่ยวกับการ ย้าย (Migrate) ตัว code ของเราใน Flutter เดิม มาเป็น Null safety

เพียงใช้คำสั่งนี้

$ dart migrate

จากนั้นตัว Dev Tool จะปรากฏหน้าจอ code ที่ถูกเพิ่มส่วน Null safety แล้ว เมื่อเรากดปุ่ม APPLY การ migrate ก็เรียบร้อย

นอกจากนี้ยังมีส่วนเสริม ที่เรียกว่า Flutter Fix ที่อยู่ใน IntelliJ ช่วยให้เราสามารถ fix code ที่ Deprecated แล้วแนะนำ code ตัวใหม่แทน จะได้ไม่ต้องเข้าไปอ่าน defination หรือเปิด doc ให้วุ่นวายอีกต่อไป

อีกฟีเจอร์ใน Dev Tool ที่น่าสนใจ คือการแสดงขนาดของแอป หากแอปของเรามีขนาดใหญ่ เราจะสามารถดูได้ว่ามีอะไรผิดปกติได้จาก Dev Tool เลย

Firebase

แน่นอนว่า Firebaase Plugin สำหรับ Flutter ก็อัพเดทรองรับ Flutter 2 และ Null safety เรียบร้อยแล้ว

Google Ads SDK

นอกจาก Firebase อัพเดทแล้ว Flutter ยังเปิดตัว Ads SDK (Official) ที่รองรับ Admob สำหรับการนำโฆษณามาติดในแอปเพื่อหารายได้อีกด้วย รองรับทั้ง In-line Ads และ Native Ads โดยตอนนี้จะอยู่ในสถานะ Beta

จบแล้ว

ขอบคุณผู้อ่านทุกท่านนะครับ ที่อ่านจนจบ สำหรับผมแล้ว Keynote นี้ ในงาน Flutter Engage 2021 นั้น สุดยอดมากจริงๆ เราได้เห็นเลยว่า การพัฒนาของ Flutter ทำได้เร็วมากๆ อาจจะเปลี่ยนโลกของการพัฒนาแอปไปเลย เพราะ Flutter สามารถทำสิ่งที่ โลกของการพัฒนาแอพขาดมาโดยตลอด คือ Cross-Platform ได้ทั้ง Mobile – Web – Desktop ด้วย codebase เดียว สิ่งนี้หากย้อนไปเมื่อ 3-5 ปีก่อน เราคงยังนึกภาพไม่ออกว่าจะมาถึงวันนี้ได้อย่างไร วันนี้เราสามารถสร้างสรรทำมันได้ง่ายๆ ด้วย Flutter