7 ข้อแนะนำเบื้องต้น ในการเขียน React Naive

ในการสร้าง Application สักตัว ณ ปัจจุบันมีหลายทางเลือกในการที่ทำให้เกิดขึ้นได้จริง ซึ่งส่วนมากจะอยู่บน Language หรือ Framework อย่าง Swift, Kotlin, Xamarin(C#) หรืออื่นๆ แต่สำหรับคนที่มาทาง web developer มาก่อน ส่วนใหญ่น่าจะคุ้นชินกับ Html, CSS, Javascript โดยพื้นฐาน ซึ่งในที่นี้ผมจะแนะนำ Framework สำหรับ สร้าง Application โดย Javacript อย่าง React Native โดยจะมี 7 หัวข้อคร่าวๆที่ผมจะแนะนำในการสร้าง Application

LifeCycle — React 16.3 +

เริ่มแรกเลย เราจำเป็นต้องรู้เกี่ยวกับการทำงานของ React สำหรับเวอร์ชั่น 16.3 ขึ้นไปก่อนว่ามันทำงานยังไง จะต้อง fetch api ในช่วงไหน หรือจะ render ยังไงบ้าง หรือ จะควร mount data ขั้นตอนไหนบ้างใน Lifecycle

https://twitter.com/dan_abramov/status/981712092611989509

StyleSheet and Mobile UI

การปรับแต่ง Style ของ Application ใน React Native นั้น เราสามารถที่จะใช้ความรู้เกี่ยวกับ CSS มาใช้งานได้ใกล้เคียงกับ syntax ที่ใช้งานกับ website ปกติ เช่น ถ้าต้องการปรับตัว text สักตัวให้หนา และ สีแดง

// Website (CSS)
text-style: {
 color: 'red';
 font-weight: 'bold';
}
// React Naive
text-style: {
 color: 'red',
 fontWeight: 'bold'
}

และถ้าปกติหากขึ้นโครงสร้างโดย UI Framework อย่าง Bootstrap แล้ว ใน React Native ก็จะมีให้เลือกใช้งานเช่นกันอย่าง Ant Design Mobile, React Native Elements, NativeBase, React Native Material Design

JavaScript Style Guide

สำหรับการสร้าง Application สิ่งขาดไม่ได้คือ การกำหนดสไตล์การเขียนโค้ดเพื่อความเป็นระเบียบ อ่านง่าย และเหมาะสำหรับ maintenance ในระยะยาว ยิ่งในโปรเจ็คนั้นมี developer มากกว่า 1 คนในการ development จึงจำเป็นอย่างยิ่งที่ต้องมีสำหรับ JavaScript จะมีสไตล์การเขียนที่เป็นมาตราฐานที่คนส่วนใหญ่ยอมรับ อาทิเช่น Airbnb, Google, Idiomatic, Standard โดยเราจะสามารถเช็คได้ผ่าน Eslint

Folder Structure

อาจจะกล่าวได้ว่า การวางโครงสร้างนั้นเป็นหัวใจหลักของการ maintenance โปรเจ็คในระยะยาวหรือย่อเวลาในการเพิ่ม feature ใหม่ๆ ก็ว่าได้ หากว่าโครงสร้างไม่ดี หรือ วางโครงที่ไม่เหมาะสมกับขนาดของโปรเจ็ค ถ้ามีการแก้ไขหรือปรับปรุงจะเสียเวลาในการ refactor code อยู่เป็นนิจ ดังนั้น ผมจึงจะอยากเสนอแนวคิดว่าในการวางโครง โดยอ้างอิงจากให้ทำทุกอย่างให้เป็น Component และ Scenes ไปเพื่อให้ง่ายสำหรับจัดการและเปลี่ยนแปลงได้ง่าย

/src
 /common
 /components 
    index.js
    /dashboard
      /index.js
      /dashboardContainer.js
      /dashboardAction.js
      /dashboardReducer.js
 /scenes
   /dashboard
    /dashboardScene.js
    /index.js
   /index.js
 /utils
/index.js

Form

หากต้องการสร้างแบบฟอร์มสำหรับต้องการให้ user กรอกข้อมูลต่างๆใน application แล้วในตามปกติ เราสามารถที่จะ handle validate ในส่วนของ form ผ่าน state เพื่อเช็คความถูกต้องได้ แต่หากถ้ามีจำนวนแบบฟอร์มที่เยอะหรือซับซ้อนแล้วมันเป็นยากที่เราจะสามารถ handle ได้หมดอย่างง่ายดาย หรืออาจจะเสียเวลาในการ maintenance มากเกินไป ดังนั้นจึงขอแนะนำ Redux Form หรือ Tcomb Form Native ในการลดเวลาและเป็นมาตรฐานเดียวกันเวลาแก้ไขเปลี่ยนแปลง

Router

หากเป็น Application ใหญ่ๆ ที่มี flow ที่ซับซ้อนและหลายหน้า จะขาดไม่ได้เลยในส่วนของการจัดการเส้นทางที่ต้องการที่ต้องการให้ user ได้ไหลไปและรวมถึงส่วนของ drawer และ tab bars ด้วยที่จำเป็นสำหรับ mobile application ดังนั้นหากต้องการจัดการเองสามารถกระทำแต่มันอาจจะแลกมาด้วยความปวดเศียรเวียนเกล้าไม่น้อยเลยรวมถึง maintenance ยากมาก ดังนั้นจึงมีตัวช่วยจัดการอย่าง React Native Navigation, React Native Router Flux, React Navigation เพื่อแก้ปัญหานี้

Basic Knowledge About Mobile Application

หากต้องการ deploy ขึ้น store ต่างๆ หรือเพิ่ม library พิเศษที่เกี่ยวข้องกับ native ในฝั่งของ iOS หรือ Android จำเป็นต้องรู้เกี่ยวกับความรู้พื้นฐานว่าต้องรู้ config ยังไงได้บ้างหรือหาปัญหาได้ว่าเกิดจากส่วนไหนได้ อาทิเช่น หากต้องการให้มี feature สำหรับตรวจจับใบหน้า หรือ บาร์โค๊ด ในที่นี้สามารถที่ เพิ่ม library react-native-camera เพื่อช่วยลดเวลาลงได้ แต่หากเกิดปัญหาขึ้น เราจำเป็นต้อง manual install ในการแก้ไขไฟล์ MainApplication.java สำหรับเพิ่ม library สำหรับ Android หรือ ใช้งาน CocoaPods สำหรับ iOS แทนที่สามารถใช้ react-native link ชิลๆได้

สุดท้ายนี้ อยากจะแนะนำว่า React Naive นั้นเป็นเพียง Framework ตัวหนึ่ง มิใช่ทุกอย่าง ฉะนั้น จงตีโจทย์ให้ดีว่าโปรเจ็คของเราเหมาะสมที่จะใช้ React Native หรือไม่

ปล.เขียน blog จริงๆจังๆครั้งแรก อาจจะ งงๆ หรือมึนๆ หน่อยนะครับ :D

อ้างอิง :
https://medium.com/@ste.grider/component-kits-for-react-native-84eff4b321b9
https://medium.com/@alexmngn/how-to-better-organize-your-react-applications-2fd3ea1920f1
http://www.somkiat.cc/native-and-hybrid-app/
https://reactjs.org/docs/react-component.html
https://codeburst.io/5-javascript-style-guides-including-airbnb-github-google-88cbc6b2b7aa