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

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

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

ในช่วง 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 เป็นอย่างแรกที่นักพัฒนาที่สนใจจะเริ่มใช้งาน 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 เพื่อสร้าง 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

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

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

สำหรับใครที่อยากเรียนรู้ Flutter แบบ Best Practice ทาง skooldio ก็มีเปิดสอน Building Cross-Platform Applications with Flutter ตั้งแต่พื้นฐาน เรียนเพียง 1 วันได้ App กลับบ้านไปถึง 4 App สอนโดยพี่เบน iOS Engineer at raksa และ Ex-agoda Mobile Develope (ตอนนี้ลด 50% ด้วยนะ)

You may also like

Kotlin จะมาแทนที่ Java หรือไม่ ทำไม Google เลือก Kotlin เป็นภาษาหลักในการพัฒนา Android - Skooldio Blog | รูปหน้าปก
Technology

ทำไมภาษา Kotlin ถึงเป็นภาษาหลักในการพัฒนา Android? และ Kotlin จะมาแทนที่ Java หรือไม่?

ทำไมภาษา Kotlin ถึงเป็นภาษาแห่งอนาคตของนักพัฒนา Android อะไรคือเหตุผลที่ Google ประกาศรับรองให้ Kotlin เป็นภาษาหลักในการพัฒนา Android และ Kotlin จะมาแทนที่ Java หรือไม่.. ...
Business

อยากเป็นสาย Data เก่ง ๆ ต้องฝึก! 6 ทักษะช่วย Data Scientist ทำงานปัง

บทความจาก Harvard Business Review ชวนเราขบคิดถึงปัญหาของ Data Scientist ในองค์กรใหญ่ เมื่อถึงเวลาที่ต้องนำเสนอข้อมูล บ่อยครั้งที่ Data Scientist ต้องกุมขมับ เพราะไม่รู้จะพูดอย่างไรให้ผู้บริหารเข้าใจ บางครั้งเห็นข้อมูลสำคัญมากอยู่ตรงหน้า ...

More in:Technology

Technology

Kotlin ภาษาแห่งอนาคตของนักพัฒนา Android

Kotlin เป็นหนึ่งในภาษา Programming ที่กำลังได้รับความนิยมอย่างมากในวงการ ซึ่งผลสำรวจจาก JetBrains ในเดือนธันวาคม ปี 2019 พบว่ามีนักพัฒนาจำนวน 4 ล้านคนกำลังใช้ Kotlin จากผลสำรวจของ 2020 ...
6 Apps using Flutter Technology

6 บริษัทยักษ์ใหญ่ที่เลือกใช้ Flutter พัฒนาแอปฯ

เทคโนโลยีทีก้าวหน้าไปอย่างรวดเร็ว การพัฒนาแอปพลิเคชั่นที่เริ่มจากแบบ native คือพัฒนาไปทีละแพลตฟอร์ม หรือต้องมีหลายทีมในการพัฒนาแอปพลิเคชันเพียงตัวเดียว ก็ถูกพัฒนามาอย่างต่อเนื่อง โดยเฉพาะ framework สำหรับพัฒนาแอปฯ ที่เริ่มก้าวกระโดดมากขึ้น ด้วยการมีสิ่งที่เรียนกว่า Cross-Platform Application Framework มานั่นเอง ...
4 ข้อดีของการพัฒนาแอปพลิเคชันด้วย Flutter | Skooldio Blog Technology

4 ข้อดีของการพัฒนาแอปพลิเคชันด้วย Flutter

ปัจจุบันนี้ Application เป็นส่วนหนึ่งที่มีผลต่อการทำธุรกิจ เนื่องจากการที่เรามี Application นั้นจะช่วยเพิ่มความสะดวกสบายให้กับลูกค้าในการใช้บริการต่างๆ และยังเพิ่มช่องทางในการติดต่อลูกค้าสำหรับแบรนด์ของเราอีกด้วย ซึ่งส่งผลให้ลูกค้านั้นสามารถจดจำเราได้มกายิ่งขึ้น แต่ว่าธุรกิจในยุคนี้จำเป็นที่จะต้องแข่งกับความเร็ว เนื่องจาก Requirement (ความต้องการ) ของ User เปลี่ยนไปในทุกๆวัน  ...
OOP คืออะไร? ทำไมองค์กรใหญ่ๆ ถึงควรใช้ OOP | Skooldio Blog - OOP คืออะไร? ทำไมองค์กรใหญ่ๆ ถึงควรใช้ OOP Technology

OOP คืออะไร? ทำไมองค์กรใหญ่ๆ ถึงควรใช้ OOP

ในปัจจุบันหลายๆ องค์กรจำเป็นที่จะต้อง Transform ตัวเองเพื่อเข้าสู่โลก Technology ก่อนที่จะช้าเกินไป ทำให้หลายๆ บริษัทจำเป็นจะต้องสร้างทีม Developer ภายในองค์กรขึ้นมาใหม่ ซึ่งสิ่งสำคัญสำหรับการสร้างทีม Developer ขึ้นมาคือการสร้างระบบการทำงานที่ดี เพื่อช่วยลดปัญหาและทำให้สามารถส่งมอบ Software ...

Comments are closed.