ReactJS Path#1: พื้นฐานการสร้าง Web Component

กระแสดีฉุดไม่อยู่จริงๆกับ ReactJS จาวาสคริปต์เฟรมเวิร์กจาก Facebook ที่เน้นการสร้าง Web Compoent การเขียน Java Script ES6 ทั้งฝั่ง Client และ Server (Isomorphic Web) แถมต่อยอดไป React Native สำหรับทำ Mobile App เจ้าใหญ่หลายๆเจ้าใช้งานกันมาซักระยะหนึ่งแล้ว นับว่าอนาคตค่อนข้างสดใส เลยต้องเขียนเป็นองค์ความรู้เก็บไว้ ในมุมมองของคนทำ Hybrid App ใครสนใจก็ตามๆ มากันครับ

ReactJS อะไร? ยังไง? และ ทำไม?

React JS จัดเป็น Java Script Framework ตัวแรกๆ ที่เริ่มมาพร้อมกับการเปลี่ยนแปลงของ Java Script ES6 (Java Script ECMA 6 เป็นมาตรฐานใหม่ ที่ช่วยเพิ่มขีดความสามารถของ Java Script เดิมที่เราใช้ๆ กันอยู่ ปัจจุบัน Browser ยังไม่ค่อยรองรับ ต้องรันผ่านตัว Java Script Compiler อย่าง Barbel ไปก่อน แต่อีกไม่นานทุก Browser จะสามารถรันได้โดยไม่ต้องพึ่ง Pre-Compiler ครับ)

React ทำหน้าที่เฉพาะส่วน View (จาก M-V-C : Model-View-Controller) เหมาะกับงาน Web Front-End ที่สามารถแบ่งออกเป็น Web Component ย่อยๆ โดยหลักการวิเคราะห์ควรแยกให้ย่อยที่สุดเท่าที่จะทำได้ ซึ่งสามารถแบ่ง component ออกเป็น 2 รูปแบบใหญ่ๆคือ

  • Container สำหรับบรรจุ component ย่อยอื่นๆ ไม่ควรมีการเก็บค่าใดๆ (สามารถทำหน้าที่เป็นตัวกลางในการส่งผ่านค่าได้) เน้นไปที่การจัด Layout และบรรจุตัวลูก
  • Web Component คือตัวที่ต้อง interact กับผู้ใช้จริงๆ เช่น ช่องกรอกข้อมูล ลิสต์แสดงข้อมูล ลาเบล ปุ่ม เป็นต้น ซึ่งอาจมีการเก็บค่าบางค่าเอาไว้ (State) เพื่อนำมาแสดงผล

ทางเลือกสำหรับนักพัฒนา

จากที่เคยใช้งานเครื่องมือและเฟรมเวิร์คมาหลายๆ ตัวทั้งฝั่ง server, client และ mobile ผมสรุปเปรียบเทียบเป็นทางเลือกให้ด้านล่างละกันนะครับ บางอย่างเลือกใช้เดี่ยวๆก็ได้ บางอย่างสามารถใช้ร่วมกันได้ ตามศักยภาพของทีมพัฒนา (บุญเก่า) และความต้องการของลูกค้า (งานที่งอก)

  • HTML5 + Java Script + CSS3  คือเขียนแบบเพียวๆ ถ้าคนเขียนมีประสบการณ์จะได้ประสิทธิภาพค่อนข้างดี เหมาะกับงาน Mobile Web และ Project ไม่ใหญ่มาก
  • Bootstrap + Java Script  + CSS3 (หรือ SASS) ใช้ Bootstrap เป็นส่วนจัดการการแสดงผลแบบ Responsive เน้นไปที่ Grid Layout มี component สำเร็จรูปให้ใช้พอประมาณ เหมาะกับงานเว็บ
    ** หมายเหตุ:  เราสามารถใช้ Bootstrap ร่วมกับ Framework อื่นๆได้ตามความต้องการ **
  • jQuery Mobile + Custom CSS3  มี  Mobile UI Component มาให้ใช้ค่อนข้างเยอะ เหมาะกับ App ขนาดไม่ใหญ่ เพราะถ้าเริ่มซับซ้อนจะเริ่มมีปัญหากับ callback ปริมาณมาก การเขียนใช้ได้ทั้ง Java Script และ jQuery
  • Angular JS ตอนนี้ขยับจาก 1.x  มาเป็น  2.x เหมาะกับงาน Mobile Web หรือ Web ที่เน้นการเปลี่ยนแปลงข้อมูลบ่อยๆ เพราะมี concept ของ two-way binding ทำให้สะดวกในการเปลี่ยนแปลงค่าไม่ต้องมานั่งเซ็ตให้เมื่อย (ซึ่งตรงข้ามกับ React ที่เป็น unidirection)
  • Ionic Framework  เบื้องหลังใช้ AngularJS ในการพัฒนา แถมมาด้วย Component อีกเพียบทำให้ได้ข้อดีของ AngularJS และรองรับการแสดงผลแบบ cross-platform (แปลงการแสดงผลให้เหมาะกับ iOS หรือ Android ให้เลย) เบื้องหลังการแปลงเป็น Native ใช้ Cordova
  • ตัวอื่นๆ ที่่ลักษณะคล้ายกัน เช่น OnsenUI, Framework7 พื้นฐานการใช้งานควรมีความรู้ HTML5, Java Script (+JS ES6) และ CSS3 จะทำให้พัฒนาได้เร็ว
  • ReactJS และ ReactNative เป็นการพัฒนาในรูปแบบใหม่ที่เน้นการสร้าง Web Component และใช้ซ้ำได้ เหมาะกับเว็บ หรือ Mobile App ที่มีการเปลี่ยนแปลงบ่อยๆ หรือต้องการการตอบสนองใกล้เคียง real-time ถ้า scale ใหญ่ขึ้นมักใช้งานร่วมกับ Flux หรือ Redux การพัฒนาใช้ภาษา JavaScipt ES6 โดยใช้ Babel เป็นตัว compile code ให้ใช้ได้กับ browser ปัจจุบัน ส่วนของ React-Native เป็นการแปลงเป็น code native จริงๆ โดยไม่ได้พึ่งพา PhoneGap หรือ Cordova เลย (ของ Ionic, Framework7 ต้องใช้ Cordova ถึงจะแปลงเป็น Native ได้)

 

ReactJS กับ Front-End Development

การเขียนเว็บด้วย ReactJS ขึ้นอยู่กับความต้องการและสภาพแวดล้อมในการพัฒนา (Environment) สามารถทำได้ 2 แบบคือ

  • Browser Rendering คือให้ Browser เป็นคนประมวลผล Java Script ตอนนี้ยังต้องใช้ Babel ช่วย สิ่งที่ต้องมีใช้ lib แค่ 3 ตัวก็สามารถทำงานได้แล้วคือ react.js , react-dom.js, babel.js เหมาะกับงานที่เน้นการแสดงผล ไม่ซับซ้อนมากนัก อาจมีการใช้งานร่วมกับ web framework อื่นๆเช่น Bootstrap เป็นต้น
  • Isomorphic Web เป็นการเขียนโดยใช้ JavaScript ฝั่ง Server ซึ่งจะประมวลผลได้เร็วกว่าแบบแรก โดยมากจะติดตั้งผ่าน Node.js และใช้ webpack ในการเตรียม environment ทำให้ไม่จำเป็นต้องมีตัว pre-compiler สำหรับ browser (ตัว babel ที่ฝั่ง server มันจะทำการแปลงให้เลย คล้ายๆกับเวลาที่เราเขียน JSP, PHP, หรือ ASP.NET นั่นเอง) เหมาะสำหรับงานขนาดใหญ่ที่ต้องการเน้นประสิทธิภาพ และต้องการการทำงานในลักษณะเรียลไทมน์ ตัวอย่างเช่น facebook เป็นต้น

ตัวอย่างโครงการเขียนแบบ Browser Rendering (แนะนำให้เขียนแบบ Isomorphic Web จะทำงานเร็วกว่าเยอะครับ)

<!DOCTYPE html>
<html>
 <head>
   <title>React JS by AjBee.Me </title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="js/react.min.js" type="text/javascript"></script>
   <script src="js/react-dom.min.js" type="text/javascript"></script>
   <script src="js/babel.min.js" type="text/javascript"></script>
 </head>
 <body>
   <div id="content"></div>
   <script type="text/babel">
     // React JS Component Code
     // วางโค้ดตัวอย่างที่นี่
  </script>
 </body>
</html>

 

พื้นฐานการออกแบบ Web Component

ยกตัวอย่าง เราต้องการสร้างนามบัตรขึ้นมาใบหนึ่ง (HelloCard) โดยใช้หลักการออกแบบเชิง Web Component สามารถแยกองค์ประกอบอย่างง่ายได้ดังนี้

 HelloCard
   + HelloTitle
   + HelloAddress

ซึ่งหากนำเอาไปใช้ในลักษณะของ ReactJS ก็จะมองเป็น Tag หรือ Web Component ได้เลย

  • HelloCard  มองเป็น container ที่ใช้เก็บ component อื่นๆ
  • HelloTitle และ HelloAddress เป็น UI Component ที่ใช้แสดงผลข้อมูลจริงๆ

ตัวอย่างโค้ด ReactJS ส่วนของ Component

//Hello Title สำหรับแสดงส่วนหัว  
var HelloTitle = React.createClass({
     render: function(){
           return(<h1>AjBee.Me</h1>);
     }
 });

 //Hello Address สำหรับแสดงชือและที่อยู่
 var HelloAddress = React.createClass({
     render: function(){
      return(
       <div>
        <div>Vittayask Rujivorakul</div>
        <div>http://ajbee.me</div>
       </div>
      );
    }
 });

 // Hello Card เป็น Container รวมกลุ่มของ HelloTitle กับ HelloAddress
 var HelloCard = React.createClass({
     render: function(){
       return(
        <div>
         <HelloTitle/>
         <HelloAddress/>
       </div>
      );
    }
 });

 // การนำมาใช้ เรียกใช้ HelloCard **จะเรียกกี่ครั้งก็ได้
 var HelloList = React.createClass({
     render: function(){
       return(
         <div className="helloList">
          <HelloCard/>
          <HelloCard/>
          <HelloCard/>
         </div>
      );
     }
 });

 ReactDOM.render(<HelloList/>, document.getElementById("content"));

แรกๆ อาจจะยังไม่คุ้นเคยกับการเขียนแนวนี้ เพราต้องปรับตั้งแต่วิธีคิด ไปจนถึงวิธีเขียน แต่พอคล่องแล้วรับรองคุณจะหลงรัก ReactJS แบบถอนตัวไม่ขึ้นเลยทีเดียว

ไฟล์ตัวอย่างผมวางไว้ใน GitHub นะครับตาม [ Link ] นี้เลย สามารถคลิ๊กขวา แล้วเปิดด้วย Chrome หรือเอาไปวางใน Web Server โดยให้เอาโฟลเดอร์ js ไปด้วย

ใครที่อยากศึกษาจากแหล่งกำเนิด ReactJS  แนะนำให้เข้าไปที่ https://facebook.github.io/react/ หรือเข้าไปลองเขียน Code แบบเห็นผล Online ผ่าน JFeedle ได้ที่ https://jsfiddle.net/reactjs/69z2wepo/

 

ตอนต่อไป

การเขียน Isomophic Web และ React-Native โดยใช้ Node.js และ WebPack เข้ามาช่วยในฝั่ง Server

ปล.ของ ReactJS , ReactNative และ Node.JS ผมพยายามจะเขียนเป็น Series ยาวนะครับ เน้นๆให้ได้ตั้งแต่พื้นฐานจนถึงเอาไปประยุกต์ใช้เป็น ใครใจร้อนคงต้องอดทนหน่อย ไม่งั้นคงต้องให้รออ่านจาก ebook ทีเดียวเลย

ติดตามข้อมูลผ่าน FanPage เข้าไปกด Like ที่: https://www.facebook.com/AjBeeMePage