จาก React Developer สู่การทำ Flutter Developer | Skooldio Blog
Technology

จาก React Developer สู่การทำ Flutter Developer

ในช่วง 2 – 3 ปีมานี้นักพัฒนาหรือผู้ที่มีความสนใจในเทคโนโลยีหลายๆ คนคงจะเคยได้ยินหรือได้รู้จักสิ่งที่เรียกว่า Flutter มาบ้างแล้ว ผมเองก็เป็นหนึ่งในนั้นที่ได้รู้จักกับ Flutter มาซักพักแล้วแต่ไม่ได้มีโอกาสศึกษาและทำความเข้าใจมันสักที จนเมื่อไม่นานมานี้ ได้มีโอกาสได้ศึกษาเจ้า Flutter และนำมาใช้ในการพัฒนาแอปพลิเคชันๆ นึงขึ้นมา เลยอยากจะเอาประสบการณ์การเริ่มเรียนรู้และใช้งาน Flutter จากมุมมองของคนที่ใช้งาน React มาก่อนคร่าวๆ มาเล่าให้ฟังกันครับ

ทำไมต้อง Flutter?

ก่อนหน้านี้ที่ใช้ React พัฒนาแอปพลิเคชันอยู่ก็ไม่ได้เป็นแอปพลิเคชันสำหรับใช้งานบน web อย่างเดียว มีหลายๆ แอปพลิเคชันที่ต้องทำเป็น hybrid application เพื่อใช้งานทั้งบนมือถือและคอมพิวเตอร์อีกด้วย โดย framework ที่ใช้คู่กับ React ในการสร้างแอปพลิเคชันแบบ hybrid ที่ใช้อยู่ก่อนหน้านี้คือ Ionic แล้วทำไมถึงอยากมาใช้ Flutter ล่ะ? หนึ่งในเหตุผลหลักๆ คือด้วยความที่เป็นมนุษย์ในสายเทคโนโลยี เชื่อว่าทุกๆคนก็เป็นเหมือนกันคือ มีความอยากลองของใหม่ๆ ตลอดเวลาอยู่แล้ว บวกกับ Flutter กำลังได้รับความนิยมอย่างมากในกลุ่มนักพัฒนาด้วยกัน รวมทั้งยังมีบางอย่างที่ Flutter สามารถทำได้ง่ายกว่า หรือทำได้ดีกว่าเมื่อเทียบกับ Ionic ที่เคยใช้อยู่ ส่วนถ้าใครอยากรู้ข้อดีของการใช้งาน Flutter หลักๆมีอะไรบ้างสามารถดูที่นี่ได้เลย

เริ่มต้นด้วยภาษา Dart

จาก React Developer สู่การทำ Flutter Developer - Skooldio Blog | 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 ได้ด้วยการลงมือทำจริงๆ 

จาก React Developer สู่การทำ Flutter Developer | Skooldio Blog

หากใครอ่านมาถึงตรงนี้แล้วอยากลองเริ่มต้นเรียนรู้วิธีใช้งานภาษา Dart เบื้องต้นก็สามารถเริ่มต้นที่นี่ได้เลย ส่วนใครที่อยากลองเล่นกับภาษา Dart ดูเลย ก็ไปลองเล่นดูได้ที่นี่

มาต่อกันที่ Flutter

จาก React Developer สู่การทำ Flutter Developer - Skooldio Blog | 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 หลักๆที่นักพัฒนาจะต้องการไว้ให้เกือบหมดแล้ว 

Widgets คืออะไร?

มาต่อกันที่เรื่อง widgets – เจ้า widgets เนี่ยเป็นสิ่งสำคัญเลยที่ทำให้การพัฒนาแอปพลิเคชันด้วย Flutter ทำได้อย่างรวดเร็วมากๆ ด้วยความที่ concept ของการใช้งาน widgets นั้นแทบจะเรียกได้ว่าเหมือนกับการใช้ React component เลย การทำความเข้าใจ หรือใช้งาน widgets จึงไม่ใช่อะไรที่ต้องทำความเข้าใจอะไรเท่าไหร่ แต่มีส่วนที่ต่างจาก component และ HTML ชัดๆอย่างหนึ่งเลยคือ widget แต่ละอันส่วนมากแล้วจะมี child หรือ widget ข้างในตัวมันแค่อันเดียวเท่านั้น ทำให้ตอนมาเริ่มใช้ widgets แรกๆจะมีติดการอยากให้ widget นึงมี wigets อยู่ด้านในหลายๆเหมือนที่เคยทำกับ React component และ HTML ซึ่งจริงๆ Flutter ก็มี widgets ที่สามารถมี children หรือ widgets หลายอันอยู่ด้านในได้แหละ แต่ก็ไม่ได้เหมือน HTML เลยซะทีเดียว 

จาก React Developer สู่การทำ Flutter Developer - Skooldio Blog | Mobile applications

ส่วนที่คิดว่าเป็นอีกจุดเด่นนึงของ 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 อื่นๆ 

You may also like

Progressive Web App คืออะไร
Technology

Progressive Web Apps คืออะไร?

แค่เขียน Apps อย่างเดียวคงไม่พอ! เมื่อ Users เลือกดาวน์โหลด Apps เท่าที่จำเป็นเพื่อประหยัดพื้นที่ใช้งาน จากสถิติการใช้งานของ Users ที่ “ไม่ตัดสินใจติดตั้ง Apps” เพราะขั้นตอนที่ยุ่งยากและเลือกติดตั้งเฉพาะ Apps ...
Data

Apache Airflow คืออะไร แล้วทำไมองค์กรชั้นนำส่วนใหญ่ถึงเลือกใช้

Apache Airflow คือ 1 ใน Workflow Management ที่ได้รับความนิยม และองค์กรชั้นนำระดับโลกหลายๆ องค์กรเลือกใช้ โดยเฉพาะอย่างยิ่งในการสร้าง Data Pipelines เพื่อจัดการกับข้อมูลจำนวนมหาศาล ส่วนหนึ่งเพราะองค์กรต่าง ...

More in:Technology

8 เหตุผลทำไมควรเขียน Scala Technology

8 เหตุผลที่ Dev ควรลองเขียนภาษา Scala ตั้งแต่ตอนนี้

เราเคยเกริ่นถึงภาษา Scala ไปบ้างแล้วจากบทความ ภาษา Scala มีจุดเด่นอะไร? ทำไมกำลังมาแรงในสาย Developer และ Data Engineer แต่ในกลุ่มนักพัฒนาหลายคนยังสงสัยว่าภาษา Scala มีความเหมาะไปใช้ในงานแบบไหน? ทำไมถึงต้องหันมาศึกษา ...
ภาษา Scala คืออะไร Technology

ภาษา Scala มีจุดเด่นอะไร? ทำไมกำลังมาแรงในสาย Developer และ Data Engineer

Scala คือ ภาษา Programming ที่กำลังมาแรงและเริ่มมีความนิยมใช้กันขึ้นเรื่อย ๆ จุดเริ่มต้นภาษา Scala เรียกได้ว่าเป็นลูกอีกคนหนึ่งของภาษา Java เช่นเดียวกับภาษา Kotlin ที่พัฒนาต่อยอดมาเพื่อแก้ไขข้อบกพร่องบางอย่างของภาษา Java ในจุดประสงค์ที่แตกต่างกัน ...
Software Architecture Technology

3 Software Architecture Design ที่นิยมใช้พัฒนาระบบซอฟต์แวร์ขนาดใหญ่

ในการออกแบบซอฟต์แวร์ขนาดใหญ่ในองค์กร มักจะมีการทำงานร่วมกันโดยคนจำนวนมาก หากเราต่างคนต่างเขียนซอฟต์แวร์ไปในทางที่ตัวเองเห็นว่าดี ซอฟต์แวร์ที่แต่ละคนทำก็อาจจะทำงานร่วมกันไม่ได้หรือมีปัญหาตอนที่ Integrate เป็น Solution ใหญ่ ดังนั้น การทำซอฟต์แวร์ในระดับนั้นจึงจำเป็นต้องมีการแบ่งสันปันส่วน และมีการออกแบบ Software Architecture เพื่อให้ทำงานร่วมกันได้ดีและมองเห็นภาพรวมไปในทางเดียวกัน ทั้งระหว่างนักพัฒนาในทีมพัฒนากันเอง ...
Technology

สรุปเรื่อง Activity Lifecycle ของการพัฒนา Android app

Android Activity Lifecycle คืออะไร? ในการทำงานของแอปพลิเคชันจริง ๆ แล้วไม่ได้ทำงานเพียงแค่เฉพาะเวลาที่ผู้ใช้งานเปิดขึ้นมาบนหน้าจอเท่านั้น แต่ยังคงทำงานบางอย่างในขณะที่แอปพลิเคชันถูกย่อ หรือแม้กระทั่งตอนที่ผู้ใช้เปลี่ยนไปใช้แอปพลิเคชันอื่นอยู่ ซึ่งจริง ๆ แล้ว Android สามารถออกแบบกำหนดให้แอปพลิเคชันทำงานในสถานะต่าง ๆ ...

Comments are closed.