รู้จักและเปรียบเทียบ React Native กับ Expo สำหรับ “Write Once use Everywhere” Mobile Framework

เมื่อวันอังคารที่แล้วไปพูดเรื่อง React Native กับ Expo ที่เป็น Mobile Development Platform ทั้งคู่ที่ Pronto มา เลยจะมาขอสรุปคู่กับ slide รวมถึงใส่รายละเอียดเพิ่มเติมไว้สักหน่อย

อ่านคู่กับดูวิดิโอย้อนหลังได้จาก https://goo.gl/2rhAFG เริ่มประมาณนาทีที่ 4

ที่ Cleverse เราค่อนค้างจะทำธุรกิจที่หลากหลายแนว เราเชื่อว่า ถ้าเราเลือกใช้ Technology ที่เหมาะสมได้แล้ว มันจะช่วย ลดเวลาที่เรียนรู้ เวลาที่ดูแล หรือลดเวลาที่ใช้ในการสร้าง Feature นึงๆได้เยอะทีเดียว

แต่การเขียนแอพมือถือในปัจจุบัน นั้นสามารถสร้างได้หลากหลายวิธีมาก ตั้งแต่

• เขียนด้วยภาษา Native อย่าง Objective C/Swift สำหรับ iOS Java/Kotlin สำหรับ Android ซึ่งเป็นแนวทางมาตรฐานนั่นแหละ
• Hybrid HTML5 พวก Cordova, Phonegap, Ionic ที่ให้เราใช้ Component จากเว็บได้โดยตรงเลย แต่ผลที่ได้ออกมาจะออกมาห่างจาก Native Feeling พอสมควรเลย (ด้านความลื่นไหล, ความคมชัด, ความรู้สึก)
• Hybrid Native ก็คือกลุ่มพวก React Native และ Expo ที่จะพูดถึงนี่แหละ พวกนี้ให้เราเขียนภาษาอื่นมา Wrap ตัว Native Component อีกทีนึง ข้อดีคือทั้งเรื่อง Performance เรื่อง Cross Platform และยังใช้ความเชี่ยวชาญด้าน React มาช่วยได้ด้วย ส่วนข้อเสียต้องลองตามอ่านเอา

เนื่องจากในทีม หลักๆ เราก็ใช้ React กันมาหลายปีแล้ว ทำให้ทีมเราเลือกใช้งาน React Native มาตั้งแต่ต้นๆ แต่กระนั้น React Native มันก็ไม่ได้ดีเลิศสมบูรณ์แบบ

ประกอบกับต้นปีมี Hybrid Platform ตัวใหม่ ที่ชื่อว่า Expo ออกมา โดยแนวทางคือหุ้ม React Native อีกต่อ เพื่อช่วยแก้ปัญหาจุกจิกของ React Native ได้และใช้เวลาแค่ 5 นาที ก็สามารถเริ่มพัฒนา App ได้แล้ว จึงเป็นที่มาของบทความเปรียบเทียบนี้ ว่าเราควรไปใช้ Expo แทน React Native เลยรึเปล่า

1. รู้จัก React Native ข้อดีและข้อเสีย

มันเริ่มมาจากต้นปี 2015 ที่ Facebook ได้ปล่อย React Native ออกมา โดยเริ่มจาก Android/iOS Developer ภายในนี่แหละ มีความต้องการที่จะทำให้ Mobile Development นั้นทำงานได้ Productivity ดีกว่านี้ เลยนำ React และ Web Technology ต่างๆ ที่มีประโยชน์มาใช้

React Native นั่นเริ่มจาก Native Developer https://www.reddit.com/r/IAmA/comments/3wyb3m/we_are_the_team_working_on_react_native_ask_us/

ประโยชน์หลักๆ ที่ได้

• ไม่ต้องรอ Compile App แค่ reload JS Package ก็เห็นผลลัพธ์แล้ว
• Dev tools, Debugging tools เครื่องมือที่ช่วยให้เรา dev ได้ productive มากขึ้น รวมถึง tools ที่ช่วยให้หาปัญหาได้เร็วขึ้น
• Instant Update หรือการ Update Over The Air คือการ update ที่ทำแล้ว user ได้ใช้ทันทีเลย ไม่ต้องรอ submit ขึ้น store
• ใช้ React ที่เป็น Declarative ui library ของ facebook เอง ที่มี Architecture หลากหลายอย่างเช่น Redux หรือจะ GraphQL ที่ถูก prove โดยหลายๆ บริษัทแล้ว
• ได้ Native Performance เพราะใช้ Javascript ในการจัดการ Native Component อีกที
• มี 3rd Party Module มากมายให้ใช้ http://native.directory/
• สุดท้ายคือเขียนทีเดียวใช้ได้หลาย Platform

“Write once use Everywhere” จุดขายของ React Native

แต่ก็มีจุดอ่อนอยู่คือ

• ใช้เวลา Setup นาน คือต้อง setup ตั้งแต่พวก JS tools รวมถึงทุกอย่างที่ iOS/Android Native Developer ใช้งาน เช่น XCode, Android SDK, Android Emulator เป็นต้น ซึ่งใช้เวลาถึง 2–3 ชั่วโมงในการติดตั้งครั้งแรก
• Cross platform แต่ต้องการเครื่องที่ Compile ภาษาที่ต้องการได้ หรือก็คือต้องการ Mac เพื่อที่จะได้สร้าง iOS Application ได้นั่นเอง
• ต้องรู้ต้องเข้าใจ การตั้งค่าเฉพาะของแต่ละ platform เยอะมากๆ (Native configuration) ตั้งแต่ตอน setup เพื่อรันครั้งแรก การลง Native Module เพิ่มเติม การแก้ไขปัญหาต่างๆ จนไปถึงการ Deploy application ขึ้น App Store/ Play Store เลยทีเดียว
• ถ้าอยากได้ Performance ที่ดี ต้องเข้าใจเรื่อง JS Thread ที่จะทำให้เราไม่ได้ความลื่นไหลเท่า Native ทุกกรณี แต่ถ้าเข้าใจก็จะสามารถออกแบบหรือเขียนให้ลื่นไหลได้อยู่ (แต่ต้อง trade-off บางอย่างไป)
• 3rd Party Native Library หลายตัว ยังไม่ Mature

ปัญหาเยอะมากเมื่อเราใช้ React Native รูปจาก https://computer.howstuffworks.com/is-your-computer-built-to-break.htm

2. มารู้จัก Expo Platform ที่จะช่วยให้เราพัฒนา React Native App ได้ง่ายขึ้น

https://expo.io/

Expo หรือ Exponent นั่นเห็นปัญหาเรื่องการ setup และเรื่องจุกจิกที่ต้องทำของ React Native เค้าเลยสร้าง Expo ขึ้นมา ซึ่งจะคอยมาทำเรื่องจุกจิกต่างๆ แทนเราให้ ทำให้เราสามารถไป Focus ที่ Application และรู้แค่ Javascript/React ก็สามารถทำ Mobile Native App ได้เลย

Expo Client ที่ Bundle ทุก Module ของ React Native และอื่นๆ ที่จำเป็นไว้แล้ว มีทั้ง iOS และ Android

โดยแนวทางคือ Expo จะให้เราโดยโหลด Expo Client ลงมือของเราที่มีทั้ง Android และ iOS โดยมันจะ bundle ทุก Module ของ React Native และอื่นๆ ที่เราต้องใช้ใส่ไว้หมดแล้วให้ แล้วทำตัวเสมือน Web browser ให้เราส่ง url ที่ให้เราพัฒนาด้วยภาษา Javascript เข้าไปทำงาน ทำให้เราไม่ต้องแตะ Native Code หรือใช้เครื่องเพื่อ Compile Native เลยทีเดียว

เปิด Server Expo ที่เป็น JS Server ที่เครื่องเรา แล้วเรียกผ่าน Expo Client ที่เราโหลดมาได้เลย

ข้อดี

• สามารถเริ่มพัฒนาแอพ จนถึงขั้นสร้างแอพแยกออกมาและ Deploy ขึ้น App Store, Play Store ได้ง่ายๆ โดยไม่จำเป็นต้องรู้ Native เลย ซึ่งทำให้คนที่มาจากสายเว็บเขียน App ได้ทันที
• ไม่ต้องใช้ Mac ก็สร้าง iOS App ได้นะ ขอแค่มี iphone หรือ ipad เพื่อทดสอบก็พอ
• ยังได้ Native Performance และใช้ JS Library ต่างๆ ได้อยู่
• Update Over The Air (OTA) หรือการ update ให้ลูกค้าใช้ โดยไม่ต้องรอขึ้น App Store/Play Store และไม่ต้องตั้งค่าอะไรเพิ่มเลย
• มีบริการมากมายที่แถมให้มา เช่น Facebook SDK(โดยไม่ต้อง register FB App ตอน dev), OTA Update, Notification, Deploy App เป็นต้น

Flow การพัฒนาด้วย Expo

ข้อเสีย

• Library หลายตัวไม่ Support ดูได้จาก http://native.directory/ เพราะไม่สามารถเพิ่ม Native Module ได้ เพราะเราไม่ได้ Compile App เอง
• และการที่มากับ Module มากมายก็ทำให้ขนาดเริ่มต้นของ Bundle อยู่ที่ 25MB แล้ว รวมถึงการเปิดใช้ครั้งแรกหรือทุกครั้งที่มีอัพเดท จะต้องโหลด JS และ Asset ใหม่ทุกครั้งด้วย ทำให้การเปิดแอพดูช้า
• Reliability เราจะทำอะไร Publish/Deploy ขึ้น Expo server, Notification รวมถึงเวลา User เปิด App ต้องผ่าน Server ของ Expo เราจะมั่นใจได้ไงว่ามันจะทำงานได้ตลอด 100%
• Security เพราะ Expo คอยจัดการให้ทุกอย่าง เราเลยต้องส่งข้อมูลหลายๆ อย่างให้ โดยเฉพาะ ที่เราให้มัน build เป็น app ให้นี่แหละ ที่น่ากลัว

การ Detach จาก Expo ไปสู่ React Native

Expo นั้น ให้ทางเลือกเราในการแปลง Project ไปสู่ React Native เต็มๆ อยู่ด้วยคำสั่ง exp detach จากนั้นระบบจะทำการสร้าง React Native Project ที่ประกอบด้วย Native iOS และ Native Android project ย่อยให้ โดยสามารถอ่านขั้นตอนการ Detach ได้จาก https://docs.expo.io/versions/latest/guides/detach.html

ทำให้เราสามารถเลือกที่จะใช้งาน Expo ไปก่อนได้ และ Detach เมื่อรู้ว่าแค่สิ่งที่ Expo ให้มามันไม่พอหรือไม่ตอบโจทย์

แต่กระนั้น การ Detach ออกมา React Native ทีหลัง นั่นมันก็มีสิ่งจุกจิกต่างๆ ดังนี้

• เมื่อ Detach ออกมา เราจะใช้ Expo-Kit ที่เป็น JS และ Native Package ของ Expo เพื่อให้เรายังสามารถทำงานกับ Expo module ได้เหมือนเดิมอยู่
• แต่เมื่อเป็นอย่างนั้นทำให้เรายังต้อง bundle module อื่นๆ ที่เรายังไม่ใช้อยู่อีกด้วย และไม่สามารถเลือกเอาออกได้
• ต้องรัน Expo packager แทน React Native Package ซึ่งเพิ่ม Flow จากปกติ อีกทั้งยังต้องคอย Publish ขึ้น Expo server ทุกครั้งที่เอาแอพขึ้น Store ด้วย
• เพราะงั้นการจะ Detach อย่างสมบูรณ์นั้น เราต้องทำการ Refractor code ทั้งหมดที่ใช้งานผ่าน module expo ออก เปลี่ยนเป็น module เองให้หมด

สรุป

โดยรวมแล้วทั้ง React Native และ Expo ต่างก็ให้คำตอบต่างกัน จะบอกว่าตัวไหนดีที่สุด ก็คงบอกได้แค่ว่า It’s depends

• Expo จะเหมาะกับคนที่เคยเขียน web มาก่อน แล้วเริ่มต้นอยากเขียน mobile บ้าง เพราะไม่ต้องเรียนรู้อะไรเพิ่มเลย
• Expo ยังเหมาะกับงานที่ต้องการใช้คนน้อยๆ หรือพวกโปรเจ็คระยะสั้นเช่น พวกทำ MVP ทำ Hackathon รวมถึงโปรเจ็คที่ไม่ได้เน้น Native Feature แปลกๆ นอกเหนือจากที่ Expo ให้มา
• React Native จะเหมาะกว่า ถ้าเราต้องใช้ Native Module ที่ Expo ไม่มีจริงๆ หรือ ถ้าเราอยากได้ Control อยากดึงขีดความสามารถออกมาให้สุด
• ถ้าจะใช้ React Native เราต้องเตรียมตัวเรียนรู้ Native Configuration ต่างๆ ด้วย จะไม่ได้เขียนแค่ JS อย่างเดียวแน่
• มีตัวเลือกอื่นๆ อีกเช่น Native Mobile ไปเลยหรือเขียน Progressive Web App ดีละ

ทุก Technology ต่างก็มีข้อดีข้อเสีย โดยเฉพาะ Technology ที่ใหม่สุดๆ แต่กระนั้นหากเราสามารถเลือกได้เหมาะสม จะทำให้เราทำงานได้ง่ายขึ้น และได้เปรียบคนอื่นมากขึ้น

ในโลกนี้ โดยเฉพาะ Technology ที่โตไวมากเนี่ย มันไม่มีสิ่งที่สมบูรณ์แบบหรอก และส่วนใหญ่ถ้าเราเลือกแล้ว เราจะอยู่กับมันนาน ผมไม่อยากให้เราเลือกมาใช้ แค่เพราะมันใหม่กว่า มันดังกว่า ใช้แล้วเท่ แล้วนำมาใช้

เลยอยากจะฝากให้ทุกคนศึกษา Technology ให้หลากหลาย และรู้ถึง Trade-off ของแต่ละ Technology ไว้ก่อน ถึงเวลาที่ต้องเลือก เราจะได้สามารถเลือกได้อย่างเหมาะสมที่สุด ขอบคุณครับ