มาดูกันครับ กับงาน Flutter Forward 2023 @ Nairobi, Kenya

เมื่อเช้าวันที่ 25 มกราคม 2023 เพิ่งผ่านมาสดๆ ร้อนๆ กับงาน Flutter Forward ที่จัดขึ้น ณ เมืองไนรูบี ประเทศเคนยา โดยในงานก็ได้มีการเผยโฉม Flutter 3.7 เวอร์ชันใหม่ล่าสุดที่พร้อมซัพพอร์ต Dart 2.19.0 แล้ว!

ก่อนที่เราจะพูดถึง Flutter 3.7 กัน สำหรับนักพัฒนา Flutter ที่ยังมี Dart เวอร์ชันเก่าๆ แล้วยังต้องเขียน //@dart=2.9 ที่อยู่บนสุดของไฟล์ Dart อย่าลืมว่ากลางปีนี้ เมื่อขึ้น Dart 3.0 ทาง Flutter Team จะเลิกซัพพอร์ตแล้วนะครับ

อ้างอิงจากบทความนี้โดย Flutter Team ครับ

The road to Dart 3: A fully sound, null safe language

ถ้าไม่อัพเดตจะเกิดอะไรขึ้น? เราก็จะไม่สามารถใช้ Flutter ใหม่ๆ ได้เลย เพราะจะ Build แล้ว Error ครับ ฉะนั้นใครยังทำโปรเจคที่ซัพพอร์ตแบบ Non-null Safety อยู่ อย่าลืมวางแผนกันด้วยนะครับ อย่าหาว่าไม่เตือน 😙

ย้อนกลับมาที่ Flutter 3.7 ผมขอไปแบบเร็วๆ ว่ามีอะไรใหม่บ้าง สำหรับใครที่อยากดูรายละเอียดตัวเต็ม สามารถคลิกที่บทความด้านล่างได้ครับ

What’s new in Flutter 3.7

Highlight

• Material 3 Support จะมี Widget หลายๆ ตัวเริ่มมาใช้ Material 3 กันละ
• Impeller Preview for iOS ซึ่ง Flutter Team บอกว่าตั้งแต่ Flutter เวอร์ชันหน้าจะเป็น Default Renderer แทน Skia แล้ว ซึ่งจะลด Jank Issues ลง ดังนั้นเราไม่ต้องทำ Cache Skia ทุกครั้งที่อัพเกรด Flutter อีกต่อไป 👏
• Background Isolates Platform Channel หรือ Lib ที่เราใช้นั้นสามารถไปทำงานที่ Background ได้แล้ว ถ้า Lib ไหน นำ Isolate ไปใช้ เราจะเห็นความลื่นของการทำงานมากขึ้นครับ เพราะปกติต้องทำบน Main Isolate เท่านั้น ยกตัวอย่างที่ผมเคยเจอคือการโหลดรูปจาก Gallery เวลาที่เลือกรูปใหญ่ จะเจออาการกระตุกเล็กน้อย นั่นเป็นเพราะการโหลดรูปไปเรียก Platform Channel บน Main Isolate ทำให้ไปแย่งการทำงานกับ UI ครับ

หลักๆ ที่ผมสนใจจะเป็น 3 ส่วนนี้ครับ ที่เหลือยังไม่ค่อยได้มีโอกาสได้ใช้ส่วนอื่นเท่าไรครับ

เรียบร้อยกับน้ำจิ้มแล้ว มาดูงานหลักกันครับว่า Flutter Forward มีประกาศอะไรที่ทำให้สาวก Flutter Dev อย่างเราตื่นเต้นบ้าง มาดูกันเลย…

#AskFlutter

1. เราควรจะเริ่มใช้ Material 3 เมื่อไหร่ดีนะ? ควรใช้กันเลยตั้งแต่วันนี้ Widget พร้อมแล้ว ใส่ Flag Material 3 แล้ว สีจะเปลี่ยนทันที!!
2. มีแอปที่ทำด้วย Material 3 ไหม? ส่วนนี้ฟังไม่ทันครับ ไม่แน่ใจว่าชื่อแอปอะไร
3. ถ้าจะ Migrate ไป Material 3 ต้องทำเมื่อไหร่? เขาจะให้ Migration Guide มาครับ แต่ไม่ได้ตอบชัดๆ ว่าจะเลิกซัพพอร์ต Material 2 เมื่อไหร่ บอกแค่ว่าใช้ Dart Fix เพื่อช่วยลดปัญหาได้นะ
4. ถ้าอยากเรียน Flutter ควรทำยังไง? สามารถดู flutter.dev ได้ มี Documentation ที่ค่อนข้างดีมาก แล้วก็มี CodeLab ที่สามารถไปศึกษาเพิ่มเติมได้
5. ถ้าอยากจะ Contribute ให้ Flutter ต้องทำยังไง? ลองไปดู Issue ที่ Github หาที่เรารู้สึกว่าคล่องและเก่งส่วนนั้น จากนั้นให้เขียน Unit Test และเปิด PR มาได้เลย ทางนั้นได้เล่าว่า Unit Test หลักๆ คือการไป Copy ของเก่าที่คนอื่นเขียนมา เอามาแก้ แล้วเขียน Test เพิ่มเติม 😆 ถ้าเพื่อนๆ อยาก Contribute สามารถทำตามนี้ได้เลยนะครับ อันนี้คำแนะนำจาก Main Contributor ลองศึกษาจาก Contributor ท่านอื่นๆ ว่าเขียน Test ยังไงได้ครับ ฟังเขาเล่าแล้วอยากลอง Contribute บ้างเลย
6. Widget ทุกอันจะซัพพอร์ต Material 3 ไหม? จะไม่ใช่ทุก Widget ที่จะซัพพอร์ตครับ เพราะหลายๆ Widget จะไม่เหมาะกับ Material 3 แล้ว ดังนั้นต้องหาใช้ Widget ตัวใหม่แทนนะครับ

เหมือนคำถามหลักๆ จะเป็นการพูดคุยเกี่ยวกับ Material 3 เป็นหลักมากกว่า ส่วนตัวก็ยังไม่เคยได้ลองใช้เลย

Keynote

เปิดตัวด้วย Dash Bird แบบ Animation ครับ พร้อมกับไข่ 1 ฟองที่ทิ้งไว้เป็นปริศนา พอฟักออกมา ก็กลายเป็นนก Flutter อีกแบบนึงนอกจาก Dash ซึ่งจนจบงานก็ไม่ได้อธิบายอะไรเพิ่มเติมครับ เลยไม่แน่ใจว่าเป็น Easter Egg ให้หรือเปล่า

ซึ่งช่วงแรกงานได้พูดถึงทวีป Africa ว่าเป็นตลาดที่น่าสนใจ และ Google ก็ได้ลงทุนก้อนใหญ่กับ Google Africa เช่นกัน

• Tim Sneath บิดาแห่ง Flutter ได้ขึ้นมาพูดเกี่ยวกับ Africa ว่าด้วย Growth และ Developers ที่กำลังมี Demand เพิ่มขึ้น
• Goal ของ Flutter คือ Open Source UI Framework สำหรับ Cross Platform ที่ใช้จาก Single Code Base
• Key ของ Flutter คือ สวย เร็ว พัฒนาได้ไว ลงได้หลายแพลตฟอร์ม และฟรี!! เป็น Open Source ที่เราสามารถตรวจสอบได้
• ณ ปัจจุบัน Flutter ซัพพอร์ตทั้งหมด 6 แพลตฟอร์ม คือ iOS, Android, Web, MacOS, Windows และ Linux (แต่ไม่พูดถึง Fuchsia แฮะ -_-)
• เป็น Open Source ที่มีคน Contribute เป็นอันดับ 3 ของโลก มี Flutter Developers กว่า 5 ล้านคน และ Flutter App กว่า 700,000 แอปบน App Store และ Play Store
• ถึงคิว Ander Dobo ขึ้นมาประกาศ Flutter 3.7 พร้อมกล่าวคร่าวๆ ว่า มี Widget ใหม่ๆ สำหรับ Material 3, Impeller Preview และ DevTools ที่เขียนขึ้นมาใหม่ รวมถึงฟีเจอร์ใหม่สำหรับ Inspect Memory
• Flutter + Firebase เป็นเพื่อนรักกัน เป็น Package คู่กัน โดยกว่า 60% ของผู้พัฒนา App จะเลือกใช้ Firebase
• Eric Windmill ขึ้นมาพูดเกี่ยวกับการใช้ Flutter คู่กับ Firebase และโชว์การใช้ Authentication ผ่าน Flutter ไปที่ firebase_auth ว่าง่ายเพียงใด
• Alex และ Abel ขึ้นมาพูดเกี่ยวกับ Flutter Flow ใครที่ยังไม่เคยเล่นไปลองได้ที่นี่เลยครับ
• Flutter Flow เป็น WYSIWYG Editor สำหรับ Designer ที่สามารถออกแบบ App และให้ Editor แปลงออกมาเป็น Dart Code ให้ Developer สามารถนำมาใส่ในแอปได้เลย แถม State Management เข้ามาให้ด้วย Developer สามารถนำโค้ดมาปรับให้เข้ากับโปรเจคได้ ส่วนตัวแล้วอยากลองนำมาใช้แต่ยังไม่มีโอกาสครับ น่าจะช่วยให้ Designer สามารถลองเล่นอะไรได้อีกเยอะ โดยที่ไม่ต้องเสียเวลามารอ Developer
• ในงานแอบมีโฆษณา CodeMagic นิดนึง เป็น CI/CD สำหรับในการ Deploy เหมือนพวก Github Action, Jenkins แต่ ผมคุ้นๆ ว่า CodeMagic เป็นเจ้าแรกที่ซัพพอร์ตการ Deploy Flutter
• Figma สามารถ Export ออกมาเป็น Flutter ได้ด้วยนะ
• Widget Catalog — Widgetbook เป็นการนำ Widget ใน App ของเรามาสร้างออกมาในรูปแบบ Web ให้ Designer มาดูได้
• Widgetbook Cloud!! ส่วนตัวแล้วปัจจุบันผมก็ใช้ Widget Book อยู่ แต่ Host ที่ Git ของตัวเอง ถ้ามีเคสแบบนี้ น่าสนใจที่เรามี Widgetbook Cloud เพื่อส่ง UI ล่าสุดให้ Designer อนุมัติ
• Flutter ช่วย PUBG Mobile Team ในการพัฒนาแอป?!?! ยังไงนะ??
• PUBG ใช้ Flutter add-in-app เข้าไปกับเกม ในส่วน Module ของ Community

• ไม่ใช่แค่ทำมาให้คนอื่นใช้อย่างเดียวนะ Google ก็ใช้ Flutter เช่นกัน เช่น Google Classroom และเล่าว่า Flutter ช่วยลด Cost ลดเวลาพัฒนา และลดความวุ่นวายในการพัฒนา
• Tim Sneath กลับมาอีกรอบเพื่อเล่าว่าอะไรคือ Future และอะไรคือ Forward ที่ Flutter กำลังจะไป
• Dart ภาษาที่ใช้ใน Flutter Framework ได้ประกาศ Dart 3 Alpha
• Records and Patterns ซึ่งซัพพอร์ต Records สำหรับ Swift เรียกว่า Tuple ที่คุณสามารถ Return ค่ามากกว่า 1 โดยไม่ต้องทำ Class ใหม่!! ในที่สุด Dart ก็จะมีแล้วววว

ตัวอย่าง Records ของ Dart

(double x, double y) geoLocation(String name) {
  if (name == 'Nairobi') {
    return (-1.2921, 36.8219);
  } else {
    ...
  }
}

final (lat, long) = geoLocation('Nairobi');

• Null Safety พูดการพัฒนาการ Dart ตั้งแต่สมัย 7 ปีที่แล้วจนมาถึงปัจจุบัน และจะเลิกซัพพอร์ต Non-null Safety อย่างที่กล่าวไปข้างต้นว่ากลางปีนี้จะไม่สามารถรัน Flutter เวอร์ชันใหม่ๆ ได้อีกต่อไป อย่าลืมเริ่มทยอย Migrate กันนะครับ ซึ่งที่ยกเลิกเพราะจะช่วยในเรื่อง Performance ของตัว Flutter ที่ไม่ต้องมาซัพพอร์ตโค้ดแบบเก่าๆ

• Platform Support ได้โชว์ว่าซัพพอร์ตทุกแพลตฟอร์มเป็นแบบ Stable แล้ว และซัพพอร์ต WebAssembly ด้วย ซึ่งก็ไม่มี Fuchsia อีกแล้ว 😢
• โชว์ Demo รัน Flutter บน Linux แบบเครื่องเก่าๆ
• พูดถึง Flutter on Web ที่มี WebAssembly ขึ้นมา
• จากนั้นก็มีการพูดถึง Rive โดย Rive เป็น Animation ที่ Interactive ได้ ตัวนี้ผมได้ลอง Explore คร่าวๆ แม้จะยังไม่ได้เอามาใช้จริง แต่ดูแล้วน่าสนุกนะครับ อย่าง Lottie เราจะไม่สามารถรับ Input ได้ เราทำได้เพียงแค่กด Lottie แล้วไป Animation A เท่านั้น ผิดกับ Rive ที่สามารถเช็คได้ว่า Input ที่เราให้ไปตรงกับเงื่อนไขไหน แล้วเล่น Animation ตามนั้นได้เลย ยกตัวอย่างเช่น ให้ Rive animation สามารถมองตามนิ้วที่เรากดไปได้ ซึ่ง Lottie จะทำแบบนั้นไม่ได้
• Element Embedding ใช้ Dart และ Flutter Compile ออกมาเป็น div tag แบบ HTML Style ทำให้ Flutter สามารถ Communicate มาที่ Javascript ได้ ดังนั้น Flutter จะมีลูกเล่นต่างๆ บน Web ได้มากขึ้น แถมยังสามารถเพิ่มเติมด้วย CSS ได้อีก ลองไปเล่นได้ที่ https://flutter-forward-demos.web.app/#/
• Pixel Shaders https://flutter-web-size-compare.web.app/v3_8_shaders/#/ แต่อันนี้จะยังไม่ใช่ตัวจริงๆ ที่จะมานะครับ เป็นแค่ Proof of Concept ว่าทำอะไรได้บ้าง

Mobile

• Vertical Toolkits Flutter News Toolkits คือชุดพัฒนาที่เอาไว้โชว์ข่าวสาร ทาง Flutter ทำให้เสร็จแล้ว เอาไป Implement ได้เลย!! ลดเวลาในการพัฒนาเข้าไปอีก ใครจะทำแอปเกี่ยวกับข่าวสาร งานของคุณตอนนี้เหลือแค่ปรับดีไซน์เท่านั้นเอง https://flutter.dev/news
• Wonderous GSkinner เทพ Animation จากสมัย Action Script และเป็นคนพัฒนา TweenJS ผมแนะนำเลยครับคนนี้ และเขาได้พัฒนา Lib ตัวนี้ https://pub.dev/packages/flutter_animate

• FFigen & JNIgen สามารถเรียก Native API ผ่าน Dart ได้ โดยส่วนตัวยังไม่แน่ใจว่าถ้าเทียบกับ Method Channel แล้ว Performance ต่างกันหรือดียังไง ดูแล้วน่าจะ Setup ยุ่งยากกว่า Method Channel ค่อนข้างเยอะ หวังว่ามันต้องดีกว่า Method Channel แน่นอน ไม่งั้นคงไม่น่าออกมาให้ใช้กัน
• Impeller เป็น Graphic Engine ตัวใหม่ที่จะมาแทน Skia ที่ทำให้เกิด Jank มานานแสนนาน ซึ่ง iOS มาเป็นตัว Preview แล้ว ส่วน Android ยังไม่เปิดให้เป็น Preview
• เนื่องจากเป็น Graphic Engine ตัวใหม่ เลยสามารถทำ 3D ได้ ใช้ฟอร์แมท GLB File โดยสามารถสร้าง file จาก Blender ได้
• นอกเหนือจากดู 3D ได้แล้ว ยังสามารถ Add Animation 3D ได้อีกด้วย!!
• เอ๊ะ แล้วเรื่อง Performance จะรอดไหมนะ ทาง Flutter Team ก็เลยโชว์ให้ดูว่าถ้าใช้ 3D สร้าง Dash ขนาด 7x7x7 Dash รวมทั้งหมดเป็น 343 Dash ก็ยังสามารถ Render บน Flutter ได้อย่างลื่นไหล เพราะ Impeller!!
• ถ้า Impeller มา สงสัย Flutter Flame จะต้องทำ Flutter Flame 3D ซะแล้ว และยิ่งไปกว่านั้น Demo ที่โชว์คือ iPhone 6 นะคร้าบบบบ
• ให้เดา Impeller iOS น่าจะมากลางปีนี้พร้อม Flutter 4 ส่วน Android คงไม่เกินสิ้นปี เตรียมฝึกวิชา 3D รอไว้เลยนะครับทุกคน

ขั้นรายการด้วย #AskFlutter อีกรอบ

• เมื่อไหร่จะมี Full Support Firebase สำหรับ Desktop? คำตอบคือยากกกก เพราะว่า Firebase ถูกดีไซน์มาสำหรับ Mobile เขาพยายามใช้ Federated Plugins ในการแบ่ง Lib แต่ละแพลตฟอร์มอยู่ และยังให้คำตอบไม่ได้ครับว่าจะพร้อมเมื่อไหร่
• Scrollview มี Callback ไหม ว่า List ตัวไหนโหลดเสร็จแล้ว? ให้ไปดูตัว ScrollMetricsNotification และมีอีกตัวที่แนะนำคือ ScrollNotificationObserver
• ทำไมโค้ด firebase.flutter.dev ไม่ยอมอัพเดตนะ? เขาพยายามจะ Sync Documentation กับ Web แล้ว แต่ยังไม่สำเร็จ ทั้งนี้ในนั้นจะมีลิงก์ไปที่ Documentation ฉบับ Up to Date ให้แล้วครับ ให้ใช้แบบนั้นไปก่อน
• Offline Support สำหรับ Flutter ทำได้ไหม? ใช้ Firebase Firestore ได้สำหรับ Flutter
• ทำไม Firebase Synchronous Call ใน Flutter เยอะจัง ทั้งๆ ที่ iOS กับ Android ไม่มีขนาดนั้น? ใช้ Await ใน Main ได้ ไม่ถึงกับต้องใช้ FutureBuilder เพราะทำงานในระดับ Nano Seconds อยู่แล้ว

แล้วก็จบเรียบร้อยครับ กับงาน Flutter Forward 2022 สำหรับ On Demand Session หรือคนที่อยากศึกษาเพิ่มเติม สามารถไปติดตามชมได้ที่นี่นะครับ

ส่วนคนอื่นๆ ที่ตื่นเต้นมากเลยกับงาน อยากไปอยู่ที่งานตรงนั้นจริงๆ ไม่ต้องกลัวครับ เพราะกำลังจะมีการจัดงาน Flutter Forward Extended 2022 in Bangkok เหมือนกัน จัดเต็มทั้ง Firebase และ Flutter ในงานนั้น ยังไงรอประกาศจากทาง GDG Bangkok นะครับว่างานจะเป็นยังไง

และยิ่งไปกว่านั้น เรายังมี Flutter Meetup #2 ที่จะจัดขึ้นในวันพฤหัสบดีที่ 16 กุมภาพันธ์ 2023 นี้ที่ K+ Building ให้ชาว Flutter ได้มาทำความรู้จักกัน แลกเปลี่ยนความรู้ในการพัฒนา และจัดของมาโชว์กันเต็มที่ ในบรรยากาศแบบเป็นกันเอง ถ้าสนใจ สามารถลงทะเบียนในแบบฟอร์มนี้ได้เลยครับ

แล้วมาเจอกันนะครับ

สำหรับชาวเทคคนไหนที่สนใจเรื่องราวดีๆแบบนี้ หรืออยากเรียนรู้เกี่ยวกับ Product ใหม่ๆ ของ KBTG สามารถติดตามรายละเอียดกันได้ที่เว็บไซต์ www.kbtg.tech