Skip to main content

Flutter คำนี้ในช่วงหลังๆ ผมได้ยินคำนี้บ่อยมากๆ และยิ่งเยอะขึ้นเรื่อยๆ ทั้งจากสื่อ social network อย่าง programmer ใน facebook หรือแม้กระทั้งจากคนใกล้ตัว ผมก็ได้แต่ฟัง แต่ไม่ได้ศึกษามันจริงๆจังซักที ว่า Fultter มันคืออะไร แล้วทำไมมัน เอามาทำ Mobile App Development ได้ ทำ Mobile App ได้ไม่พอ มันยังทำ Mobile App Cross Platform ได้อีก สบโอกาสช่วงนี้มีเวลา พอได้ศึกษา เลยอยากจะเอามาแชร์ และทำเป็นบันทึกของตัวไว้ครับผม

Flutter จริงๆแล้วเจ้าคืออะไรกันแน่

ตามที่ผมเข้าใจคือ Flutter มันคือ Mobile SDK (Software Development Kit) ตัวหนึ่ง ที่ถูกสร้าง และทำเป็นโปรเจค Open Sourced แขร์ให้คนทั่วโลกสามารถใช้งานได้ โดยเริ่มจากทีมภายในของ Google เจ้าตัว Flutter เองเนี่ยมีความตั้งใจที่อยากจะให้เหล่า Software Developers ทั้งหลาย สามารถสร้าง Mobile Application ได้อย่างสวยงาม (สวยงามยังไงน้อ เดี๋ยวไปไปลองดูในบทความหน้าๆนะครับ) นอกจากสวยงามแล้ว ตัว Flutter ยังอวดตัวเองอีกว่าไม่ว่าคุณจะมาจากโลกของ Web Development หรือโลกของ Native Mobile Development ไม่ต้องกลัว Flutter สามารถทำให้คุณสร้าง Mobile App ได้อย่างง่ายดายแน่นอน จะขิงแบบสั้นๆว่า “Write once, and deploy everywhere”  ไม่ว่าจะเป็น Android, iOS หรือ ChromeOS สามารถใช้ Flutter ทำเป็น application ได้หมด รวมไปถึงในอนาคต Desktop App ก็จะทำได้ด้วย (อะไรจะขนาดนั้นๆๆ)

ตัว Flutter มันเป็น platform ที่เตรียมพร้อมทุกอย่างให้เรา สำหรับสร้าง application แล้ว ไม่ว่าจะเป็น Rendering Engine, UI Components, Testing Frameworks, Tooling, Router, และอื่นๆ เยอะแยะจนบอกไม่หมด พอรู้มาถึงตรงนี้ บอกตรงๆว่า ต้องคันไม้คันมือ อยากเขียนมากๆ แล้วก็เอะใจ “มันใช้ภาษาอะไรเขียน Fultter” อ่ะ

Flutter ใช้ Dart แล้วทำไมต้อง Dart ด้วยเนี่ย

ตัว Flutter platform ใช้ภาษาในการเขียนโปรแกรมที่เรียกว่า Dart (ได้ยินมานานหละ วันนี้รู้จักกันเสียทีนะ) เจ้าภาษา Dart ก็ไม่ใช่คนอื่นคนไกลที่ไหน ถูกสร้างและดูแลโดยทีมภายในของ Google อีกแล้ว (พี่ท่านสุดยอดจริงๆ) แต่เจ้าภาษา Dart ก็ยังไม่เป็นที่นิยมแพร่หลายๆ ขนาดนั้น ในองค์กรใหญ่ ก็แทบไม่ได้ใช้ แล้วทำไม Google ถึงเลือกภาษานี้ หรือเพราะสร้างเอง ใช้เองก็ได้วะ ฮ่าๆๆ ทุกอย่างมีเหตุมีผลของมัน ลองมาดูเหตุผลกันที่ทีม Flutter บอกกันครับ

  • ภาษา Dart สนับสนุนการ compile ในรูปแบบ Just-in-Time (JIT) และรองรับรูปแบบ Ahead-of-Time (AOT)
    • ตัว AOT compiler จะ compiled ภาษา Dart ของเราให้เป็น native code เพื่อประสิทธิภาพมากขึ้นในการทำงานของโปรแกรม ซึ่งแน่นอนว่ามันทำให้การทำงานของ Flutter เราเร็วขึ้นไปด้วย
    • อีกทั้ง Dart ยังสามารถใช้ JIT compiler เพื่อให้เราสามารถใช้งาน Hot Reloading ได้ด้วยอีก ซึ่งมันจะช่วยเพิ่มประสิทธิภาพในการพัฒนา Flutter ของเรา ไม่งั้นแก้โค้ดที่หนึ่ง ต้องมานั่ง build ใหม่เอง คงเขียนโค้ดไม่สนุกแน่ๆ
  • ภาษา Dart รองรับการทำงานแบบ Object-oriented (OOP) ปวดหัวน้อยลงจากการเขียน Markup Language หละครับ
  • Dart เป็นภาษาที่คาดการณ์ได้ เรียนรู้ได้ง่าย ไม่ว่าคุณจะมาจาก Dynamic หรือ Static programming language คุณสามารถทำงานกับ Dart ได้ง่ายอย่างแน่นอน (ยังไม่ได้ลองเลย แต่ claim ขนาดนี้บอกเลยว่าสนใจมาก)

ส่วนตัวผมคิดว่าการที่ Google เป็นเจ้าของภาษา Dart นี่เป็นเรื่องที่ดีข้อหนี่ง เพราะในช่วงเวลาไม่กี่ปี Dart ถูกพัฒนาให้เป็นภาษาที่ดีภาษาหนึ่งในการสร้าง Modern UIs เลยทีเดียว ด้วยการรองรับการทำงานแบบ Type sytem และ Object Orientation ทำให้การเขียนเพื่อ reuseable สำหรับ component นั้นง่ายขึ้นเลยทีเดียว (อย่าลืมศึกษาเรื่อง OOP best practices กันด้วยนะครับ) แต่ Dart ไม่ได้มีดีแค่นั้น นอกจากที่กล่าวมาแล้ว มันยังสนับสนุน features อื่นๆ ที่น่าสนใจอีกเช่น Functional Programming, Asynchronous และ Stream-based programming ซึ่งพวก features ที่ Dart สนับสนุนเหล่านี้ ถือเป็น features สำคัญในการเขียน Reactive Programming กันเลยทีเดียว

แล้วไม่ใช้ Flutter พัฒนา Mobile App ได้มั้ย

ต้องบอกตรงๆว่าได้สิครับ มีอะไรเป็นทางเลือกอื่นๆได้บ้าง ถ้าไม่ใช้ Flutter มาดูกันครับ

Native Development (iOS and Android)

ทางเลือกที่ง่ายที่รองรับทุกอย่างอยู่แล้วคือ เขียนด้วย Native ไปเลยครับ รับรองว่าทำได้ทุกอย่างที่ต้องการ แต่อย่าลืมนะครับว่าต้องตามมาด้วยกับเขียนโปรแกรม 2 รอบสำหรับ iOS และ Android ซึ่งรวมถึงอาจจะต้องมี developers 2 ตำแหน่งที่มี skill sets ของ Android และ iOS

Cross-platform JavaScript

อีกทางเลือกที่มาแรงไม่แพ้ Navtive คือ ทำแบบ Cross-platfrom ไปเลย โดยใช้ภาษา JavaScript ในการเขียน เช่นทำพวก Web View หรือ React Native ด้วยทางเลือกนี้คุณสามารถใช้ทีม Frontend Web Developer เข้ามาพัฒนา และช่วยกันได้ทันที ซึ่งจะแตกต่างจาก Native ที่ต้องมี skill sets ของ iOS และ Android แยกจากกัน ซึ่งทางเลือกนี้อ่านแล้วดูจะเป็นทางเลือกที่ดี แต่ว่ามันก็มีข้อเสียใหญ่ที่เรียกว่า JavaScript Bridge ที่คุณต้องกังวลแทนนะครับ

ในช่วงแรกของการพัฒนา Mobile App แบบ Cross-platform เราใช้ตัว Web View ทำงานบน WebKit engine​ (a browser rendering engine) หรือจะเรียกง่ายๆว่าเราทำการฝังตัว Web Pages ลงไปในแอปมือถือตรงๆเลยครับ ด้วยวิธีการทำงานที่ดูง่ายแบบนี้ มันกลับทำเราให้ต้องจ่ายสิ่งตอบแทนที่แสนแพงกลับไปคือ เราจะเจอปัญหาในเรื่องการจัดการ DOM ของ Browser engine ซึ่งมันจะทำให้ Mobile App ของเรามีประสิทธิภาพที่แย่ และประสบการณ์สำหรับลูกค้าเรายิ่งแย่กว่า (ผมเคยใช้ Ionic Framework ทำมาก่อน ต้องบอกว่ากระตุกสุดๆๆ)

ด้วยปัญหาที่ว่ามา บาง platform ก็เลยทำการแก้ปัญหานี้ด้วยการสร้าง JavaScript Bridge ซึ่งมันคือการทำให้ JavaScript สามารถทำงานได้โดยตรงกับ native code วิธีแก้นี้เป็นวิธีที่สำคัญที่ทำให้เราไม่ต้องปวดหัวกับ DOM manipulation อีกต่อไป แต่ว่ามันก็ยังไม่ใช้วิธีที่ดีที่สุดเพราะว่า ทุกๆครั้งที่เราจะทำการคุยกับ native code มันคือการแปลง JavaScript ไปเป็น native code พอ native code ทำงานเสร็จ มันก็ต้องแปลงกับมาที่ JavaScript อีกที นั่นทำให้ในแต่ละ action ที่เกิดขึ้นใน mobile app ของเรา มันต้องมีการแปลง “ไป-มา” ถึง “2” รอบกันเลยทีเดียว มาดูภาพประกอบเพื่อความเข้าใจง่ายขึ้นกันครับ

จากรูปภาพจะเห็นได้ชัดว่า ภาษา JavaScript ไม่ได้ถูก complied ไปเป็น ​native code ตั้งแต่แรกนะครับ แต่จะแปลงไปและมา ทุกๆครั้งที่ action เกิดขึ้นบน mobile app ของเรา ซึ่งก็ถือว่าเป็น bottleneck ตัวนึงที่น่ากังวลเกี่ยวกับเรื่อง performance เลยทีเดียวครับ

อีกเรื่องนึงที่จะเกิดขึ้นแน่เมื่อเราใช้ Javascript Bride คือเรื่องของการ debugging เวลาที่มัน error ตอน runtime ของโปรแกรม มันจะ track กับมายากมาครับ ว่ามัน error ตรงไหน(วะ)ใน JavaScript code ของเรา

ตอนนั่งศึกษาเรื่อง Cross-platform Mobile App แล้วเจอปัญหาพวกนี้ผมก็คิดในใจนะครับว่า Flutter มันจะรอดหรอวะ มันก็ Cross-platform เหมือนกัน จะไปเรียนรู้ใหม่ทำมั้ยให้เสียเวลา แต่พอผมลองเปิดใจไปศึกษามันดู กับพบว่าปัญหาพวกนี้ ทีมพัฒนา Flutter เขาเข้าใจครับ และเขาก็ทำการแก้ปัญหาเหล่านี้ให้ด้วย มาอ่านกันต่อครับ

ประโยชน์ที่เราจะได้ทันทีที่เลือกใช้ Flutter

มาอ่านกันต่อครับว่า Flutter แก้ปัญหาที่ Cross-platform Mobile App ตัวอื่นเจอกันได้ยังไง

No Javascript bridge

Flutter จะทำการ complied ภาษา Dart ไปเป็น native code ได้เลย ไม่ต้องมาแปลงภาษา Dart ไปมาตอน runtime ของโปรแกรมเลยครับ ซึ่งแน่นอนว่า performance ที่ได้เรียกว่าแทบจะไม่แตกต่างจาก native กันเลยทีเดียว

Compile time

ถ้าใครได้เขียน native mobile development มาก่อนจะเข้าใจเรื่อง compile time เป็นอย่างดีเลยครับ ทุกๆครั้งที่เกิดการเปลี่ยนแปลงของโค้ด เราต้องนั่งรอให้มัน compile ให้เสร็จ ซึ่งเวลา compile ก็จะมากขึ้นไปตามความใหญ่ของ mobile app เราด้วย แต่ตัว Flutter ได้ optimize เรื่องนี้มาเป็นอย่างดีครับ นอกจากนี้ยังมี Hot Reloading ช่วย compile เฉพาะโค้ดที่มีการเปลี่ยนแปลงอีกด้วย

Write once, test once, deploy everywhere

ตามหัวข้อเลยครับ การพัฒนาด้วย Flutter platform สามารถทำให้เรา deploy app ของเราไปที่ iOS, Android, Web และในอนาคตยังได้ Desktop ด้วยครับ

Productivity and collaboration

ประโยชน์ข้อนี้ก็เป็นอีกหัวข้อสำคัญครับ ที่ผมเลือกใช้ Flutter การที่เราสามารถทำให้ทีมทำงานได้อย่างมีประสิทธิภาพมากขึ้น ร่วมไปถึงการทำงานร่วมกันที่ง่ายขึ้นด้วย เป็นสิ่งที่เราต้องเอามาคิดทุกครั้งที่จะเลือกใช้เทคโนโลยีใหม่ๆครับ

ผมคิดว่าประโยชน์ทั้ง 4 หัวข้อ น่าจะทำให้เพื่อนๆพี่เริ่มสนใจอยากจะมาทดลองพัฒนาด้วย Flutter กันบ้างนะครับ

สุดท้ายนี้ ถ้าเพื่อนๆพี่ๆ ได้เข้ามาอ่าน อยากให้ช่วยแชร์ความคิดเห็นกันด้วยนะครับ ทั้งในเรื่องของ Flutter หรือจะเป็นเรื่องการเขียนบทความของผมก็ดีครับ หรือเรื่องอื่นๆก็ได้ครับ ผมจะได้นำคำแนะนำต่างๆไปพัฒนา และจะสร้าง content ดีๆมีประโยชน์มาแชร์กันอีกเรื่อยๆครับผม 🙂

Maris Kheawsaad

Maris Kheawsaad

let's technology make the world a better place

Leave a Reply