By ในช่วง 2 – 3 ปีมานี้นักพัฒนาหรือผู้ที่มีความสนใจในเทคโนโลยีหลายๆ คนคงจะเคยได้ยินหรือได้รู้จักสิ่งที่เรียกว่า Flutter มาบ้างแล้ว ผมเองก็เป็นหนึ่งในนั้นที่ได้รู้จักกับ Flutter มาซักพักแล้วแต่ไม่ได้มีโอกาสศึกษาและทำความเข้าใจมันสักที จนเมื่อไม่นานมานี้ ได้มีโอกาสได้ศึกษาเจ้า Flutter และนำมาใช้ในการพัฒนาแอปพลิเคชันๆ นึงขึ้นมา เลยอยากจะเอาประสบการณ์การเริ่มเรียนรู้และใช้งาน Flutter จากมุมมองของคนที่ใช้งาน React มาก่อนคร่าวๆ มาเล่าให้ฟังกันครับ
Table of Contents
ทำไมถึงเลือกใช้ Flutter ?
ก่อนหน้านี้ที่ใช้ React พัฒนาแอปพลิเคชันอยู่ก็ไม่ได้เป็นแอปพลิเคชันสำหรับใช้งานบน web อย่างเดียว มีหลายๆ แอปพลิเคชันที่ต้องทำเป็น Hybrid Application เพื่อใช้งานทั้งบนมือถือและคอมพิวเตอร์อีกด้วย โดย Framework ที่ใช้คู่กับ React ในการสร้างแอปพลิเคชันแบบ hybrid ที่ใช้อยู่ก่อนหน้านี้คือ Ionic แล้วทำไมถึงอยากมาใช้ Flutter ล่ะ? หนึ่งในเหตุผลหลักๆ คือด้วยความที่เป็นมนุษย์ในสายเทคโนโลยี เชื่อว่าทุกๆคนก็เป็นเหมือนกันคือ มีความอยากลองของใหม่ๆ ตลอดเวลาอยู่แล้ว บวกกับ Flutter กำลังได้รับความนิยมอย่างมากในกลุ่มนักพัฒนาด้วยกัน รวมทั้งยังมีบางอย่างที่ Flutter สามารถทำได้ง่ายกว่า หรือทำได้ดีกว่าเมื่อเทียบกับ Ionic ที่เคยใช้อยู่ ส่วนใครที่ยังไม่รู้จัก Flutter เท่าไรนัก แต่อยู่ระหว่างการตัดสินใจหา Framework สามารถอ่านบทความที่เล่าถึงข้อดีของการใช้งาน Flutter ควบคู่ไปด้วย เผื่อจะช่วยให้ตัดสินใจได้ง่ายขึ้นครับ
เริ่มต้นด้วยภาษา Dart
ภาษา Dart เป็นอย่างแรกที่นักพัฒนาที่สนใจจะเริ่มใช้งาน Flutter ควรจะต้องศึกษา โดย Dart ถูกออกแบบมาให้ใช้งานและเรียนรู้ได้ง่าย ส่วนตัวด้วยความที่ปกติใช้งาน React กับภาษาอย่าง TypeScript ที่เป็น typed langauge อยู่แล้ว การทำความเข้าใจ Dart เลยไม่ใช่สิ่งที่ยากหรือท้าทายอะไรมากนัก และสำหรับนักพัฒนาที่มีความคุ้นเคยกับ Modern JavaScript อย่าง ES6 นั้น หากมาลองใช้ Dart ดูจะพบว่ามี syntax หลายๆอย่างของ Dart ที่คล้ายหรือเหมือนกันกับของ ES6 เลย คิดว่าสำหรับนักพัฒนาที่เคยเขียนโปรแกรมด้วยภาษาที่เป็น object-oriented อยู่แล้ว การทำความเข้าใจภาษา Dart จะเป็นเรื่องง่าย ส่วนคนที่ไม่คุ้นเคย หรือไม่แม่นเรื่อง object-oriented programming ก็ควรจะต้องศึกษา ทบทวนกันนิดหน่อย เพื่อให้เขียนภาษา Dart ได้อย่างราบรื่นยิ่งขึ้น
ตัวช่วยในการเรียนรู้ในภาษา Dart ที่มีประโยชน์มากๆอันนึงเลยคือตัว Documentation ของ Dart เอง คิดว่านักพัฒนาหลายๆคนถ้าได้มาลองดู Documentation ของ Dart แล้วน่าจะพูดเป็นเสียงเดียวกันว่ามันค่อนข้างที่จะดี เข้าใจง่ายและมีครบถ้วนมากๆ อีกทั้งยังมี cheatsheet ต่างๆ และ online codelabs เพื่อให้นักพัฒนาได้เริ่มต้นเรียนรู้ และทดลองใช้ภาษา Dart ได้ด้วยการลงมือทำจริงๆ
หากใครอ่านมาถึงตรงนี้แล้วอยากลองเริ่มต้นเรียนรู้วิธีใช้งานภาษา Dart เบื้องต้นก็สามารถเริ่มต้นที่นี่ได้เลย ส่วนใครที่อยากลองเล่นกับภาษา Dart ดูเลย ก็ไปลองเล่นดูได้ที่นี่
ความเหมือน และความแตกต่างระหว่าง React กับ Flutter
การใช้งาน Flutter เพื่อสร้าง user interface นั้นมีความคล้ายกันกับการใช้ React อยู่หลายส่วน เช่น การที่เราสร้างและใช้ component ต่างๆในการประกอบกันเป็น user interface ที่ในส่วน Flutter ก็ใช้ widgets หลายๆอันมาประกอบเหมือนกัน เรื่อง lifecycle หรือ state และ state management ต่างๆ ก็แทบที่จะมีความเหมือนกันเลย โดยที่บางอันจะแตกต่างกันแค่ชื่อ หรือวิธีเรียกใช้งานเท่านั้น
เมื่อเทียบกับ React หรือ web ทั่วไปที่มีการใช้งาน HTML และ CSS เพื่อจัด layout ต่างๆ แล้ว Flutter ก็มีอะไรคล้ายกันที่อาจจะเรียกรวมได้ว่า Flutter layout
โดยเจ้า Flutter layout เนี่ยมีความแตกต่างกับการจัด layout ด้วย HTML และ CSS อยู่พอสมควรเลย ส่วนตัวคิดว่าการจัด layout ต่างๆด้วย Flutter นี่แหละเป็นสิ่งที่ต้องทำความเข้าใจมากที่สุด สำหรับคนที่ทำ web application มาก่อน Flutter layout ก็ยังเป็นสิ่งที่ทำให้การพัฒนาแอปพลิเคชันด้วย Flutter ทำได้ไวและง่ายกว่ามากเมื่อเทียบกับการใช้ framework อื่นๆ โดยเฉพาะการทำ layout หรือ UI สำหรับใช้งานบนมือถือ เพราะ Flutter ได้เตรียม layout หลักๆที่นักพัฒนาจะต้องการไว้ให้เกือบหมดแล้ว
Flutter Widgets คืออะไร?
มาต่อกันที่เรื่อง Widgets – เจ้า Widgets เนี่ยเป็นสิ่งสำคัญเลยที่ทำให้การพัฒนาแอปพลิเคชันด้วย Flutter ทำได้อย่างรวดเร็วมากๆ ด้วยความที่ concept ของการใช้งาน Widgets นั้นแทบจะเรียกได้ว่าเหมือนกับการใช้ React Component เลย การทำความเข้าใจ หรือใช้งาน Widgets จึงไม่ใช่อะไรที่ต้องทำความเข้าใจอะไรเท่าไหร่ แต่มีส่วนที่ต่างจาก component และ HTML ชัดๆอย่างหนึ่งเลยคือ Widget แต่ละอันส่วนมากแล้วจะมี child หรือ widget ข้างในตัวมันแค่อันเดียวเท่านั้น ทำให้ตอนมาเริ่มใช้ Widgets แรกๆจะมีติดการอยากให้ widget นึงมี Widgets อยู่ด้านในหลายๆเหมือนที่เคยทำกับ React component และ HTML ซึ่งจริงๆ Flutter ก็มี Widgets ที่สามารถมี children หรือ Widgets หลายอันอยู่ด้านในได้แหละ แต่ก็ไม่ได้เหมือน HTML เลยซะทีเดียว
ส่วนที่คิดว่าเป็นอีกจุดเด่นนึงของ Flutter เลยคือ library ของ Widgets ที่ติดมากับเจ้าตัว Flutter เอง ซึ่งมีหลักๆสองอันคือ Material และ Cupertino จากชื่อแล้วก็น่าจะพอเดาออกกันแล้วว่า Material จะเป็น UI library ที่โดยทั่วไปจะใช้กับ Android ส่วน Cupertino จะเป็นของ iOS สำหรับการใช้งานแอปพลิเคชันพื้นฐานต่างๆ ไม่ว่านักพัฒนาจะต้องการ Widget อะไรอย่างเช่น ปุ่ม, navigation bar, หรือแม้กระทั่ง list view ต่างๆ ทั้งสอง library นี้ก็มีเตรียมให้พร้อมสำหรับการใช้งานแล้ว โดยที่นักพัฒนาสามารถนำมาใช้หรือปรับแต่งเพิ่มได้เลย
Widgets ของ Flutter มีจำนวนเยอะมากจริงๆ จึงทำให้เป็นเรื่องค่อนข้างยากที่จะสามารถรู้จัก หรือเข้าใจการทำงานของ widget แต่ละอันได้ ช่วงแรกๆที่ได้มาลองใช้ Flutter ก็มีติดเรื่องการเอา widgets ที่มี Flutter มีอยู่แล้วมาใช้นี่แหละ เพราะยังไม่ค่อยรู้ว่า Flutter มีอะไรให้ใช้บ้าง แต่จากที่ลองทำมา Flutter แทบจะมีทุกอย่างที่ต้องการจนไม่ต้องสร้าง widget อะไรยากๆเพิ่มเองเลย คิดว่า widgets ที่หลากหลายของ Flutter พวกนี้ ทำให้การพัฒนาแอปพลิเคชัน โดยเฉพาะสำหรับมือถือ ทำได้รวดเร็วกว่าตอนใช้ React มากๆ
หากใครอยากเรียนรู้เพิ่มเติมเกี่ยวกับ widgets จำนวนมหาศาลของ Flutter นั้นทีม Flutter ได้มีสร้าง playlist ใน Youtube ที่ชื่อว่า Flutter Widget of the Week ที่เป็นการแนะนำ widgets ของ Flutter อาทิตย์ละ 1 อย่าง ใน 1 วิดีโอให้นักพัฒนาได้ชมกัน
โดยรวมประสบการณ์การใช้งาน Flutter คิดว่าเป็นอะไรที่สนุก อีกทั้งช่วยให้การพัฒนาแอปพลิเคชันสำหรับมือถือทำได้รวดเร็วและมีประสิทธิภาพมากขึ้น โดย Flutter เพิ่งจะเปิดตัวมาได้เพียงไม่กี่ปีเท่านั้น ทั้งจำนวนผู้ใช้งานและ community ของ Flutter มีการเติบโตที่เร็วมากหากเทียบกับ framework อื่นๆ
มาถึงตรงนี้ใครที่รู้สึกสนใจอยากจะเริ่มทำ Flutter แล้ว ตัวแพ็กเกจ “Flutter Pack From Basic to Advanced” จะเหมาะมากกับ Developer ที่อาจจะไม่ได้มีเวลาเยอะขนาดนั้น แต่ก็ยังไม่อยากหลุดเทรนด์ ทาง Skooldio รวม 2 คอร์สที่จะสอนตั้งแต่ให้คุณเริ่มต้นพัฒนา Flutter ไปจนถึงให้คุณสามารถดูแล Flutter Application ได้แบบเชี่ยวชาญ ไม่ต้องตามงมหาดู Tutorials หลาย ๆ อันเอง จะตามทันเทรนด์ที่กำลังมาแรงแบบครบ จบ ตั้งแต่ Set up จน Deploy ได้อย่างแน่นอน
อย่างไรก็ตามหากสมัครในนามองค์กรได้ในราคาพิเศษ หรือหากต้องการสมัครมากกว่า 5 คอร์ส สามารถติดต่อเราได้ที่ hello@skooldio.com สำหรับราคาพิเศษ
ยิ่งซื้อมากยิ่งลดมาก !
สุดท้ายนี้ ใครสนใจอยากได้รับบทความดี ๆ แบบนี้ส่งตรงถึงอีเมลคุณ ลงทะเบียนรับ Skooldio Newsletter ไว้ได้เลยวันนี้! เราจะส่งทุกสาระที่น่าสนใจ ไม่ว่าจะเป็น เครื่องมือที่กำลังฮิต หรือ เทรนด์ที่กำลังเป็นที่นิยม รวมไปถึง คอร์สใหม่ ๆ ที่จะช่วยอัพสกิลคุณในด้านต่าง ๆ ทั้ง Soft Skills และ Hard Skills ตลอดจนโปรโมชั่นต่าง ๆ ที่ไม่ควรพลาด คัดสรรมาเป็นอย่างดี โดยทีมงาน Skooldio!
