1 ปี ReactJS กับ Developer อยากรู้อยากเห็น

เล่าประวัติ FrontEnd ที่เคยทำแป๊บนึง

…ณ รั้วมหาลัย

สิ่งที่ได้เขียนเป็นอย่างแรกคือ jQuery + JSP (Java Server Page เป็นภาษาเมื่อประมาณ 10 ปีที่แล้ว) เพราะอยู่ในวิชาเลือกเรียนหนึ่ง ตอนนั้นทำหน้า Form เล็กๆมาอันนึง Passing Parameter ไปมา เก็บค่าใน Session ได้ โอ้โหเยี่ยมไปเลย…

อายุ 22 หน้าไป 30 ละ

…เริ่มทำงานที่แรกกับ AngularJS

ก็เริ่มต้นศึกษาเพิ่มเติมว่ามันเขียนยังไง ซึ่งเห็นความต่างจาก jQuery คือมันเป็น Single page application คือเป็นการ Render Web page แบบหน้าเดียว ถ้ามี Component อะไร ก็สามารถนำมาแทรกเพิ่มได้ใน 1 หน้านั้น ข้อดีคือ เขียนที่เดียว แต่ใช้ได้หลายที่ ไม่ต้อง Define component ซ้ำๆกันหลายๆไฟล์ มีการจัดการ Route เพื่อส่งไปยัง Controller ต่างๆ แต่ก็เคยได้ยินว่า React ของ Facebook ก็ทำได้

เข้าเรื่องเถ๊อะ เกิน 7 บรรทัดแล้ว

ที่ทำงานปัจจุบันใช้ React เป็น Single page เช่นกัน Render ภายใต้ dom อันเดียว แล้วมี virtual dom (Tree Object ที่อยู่ภายใต้ Real dom จะถูกเก็บอยู่ใน Memory ซึ่งมันจะ ref หากันเอง แล้ว render สิ่งที่ถูกต้องออกมา) มี State และ Props เข้ามาเกี่ยวข้อง ซึ่งจะไม่มีการ Access Dom (document.getบลาๆ…) เพื่อเปลี่ยนค่าตรงๆอีกต่อไปแล้ว

Learning curve ก็สูงลิ่ว

• ตัว React เอง ที่มี Life cycle ของแต่ละ Component เป็นของตัวเอง, Component Based, Component API (State), HOC ที่เอาไปครอบ Component อื่นใดๆ จะสามารถ access props ของตัว High order นั้นได้
• Webpack เช่น babel สำหรับ Complie JSX ให้เป็น JS ที่ Browser เข้าใจ
• React/Redux เป็นตัวจัดการ State กลาง ที่มี Concept ว่ามี Store อยู่ตรงกลางคอยทำหน้าที่จัดการ State ของ UI จะเปลี่ยนค่าได้ก็ต่อเมื่อมีคนมา dispatch event แล้วทุกๆ Component ก็ยังสามารถดึงค่า State นี้ไปใช้ได้อีกด้วยการ Subscription Store

แต่ปัจจุบันใช้ mobx ใช้งานง่ายมากๆ และล่าสุด React ก็ Release HookAPI version stable ซึ่งเป็นตัวจัดการ State ของทาง React เองเลย ส่วนตัวเคยได้ลอง useState และ Context (Provider, Consumer) ก็สะดวกดี คาดว่าถ้ามี Project ใหม่ๆ มาจะ Move ไปใช้ Hook แทน

• ES6 และเป็น Typescript ตอน Dev อ่าน .ts แต่ใน Production ต้อง complie แล้วรันผ่าน .js

Typescript นี่จุดพีค เพราะจะต้อง Define Datatype ให้ถูกต้อง
แรกๆก็แอบใช้ any อยู่หลายครั้ง เนื่องด้วยความขี้เกียจล้วนๆ แต่เดี๋ยวนี้ต้องหา Type มาใส่ให้ตัวแปรให้ได้้ เพราะเคยกลับมาอ่าน Code อีกทีแล้วงงเป็นไก่ตาแตก

• ถ้าจะทำ SSR (Server side rendering) ต้องรู้จักกับ NextJS หรือค่ายอื่นอย่าง Razzle
• CSS จะเขียนธรรมดาก็ได้ จริงๆก็มี Tools อื่นเพิ่มเติมอย่าง SCSS, Styled Component, Bootstrap, Emotion, JSS
• กรณี Call Service BackEnd หละ??? ถ้าเป็น RestAPI ก็ใช้ Fetch ธรรมดา ประกอบ body แล้วยิงหรือใช้ Lib axios ก็ได้ (มีอีกหลายตัวให้เลือกใช้) แต่ที่ทำงานใช้ GraphQL เป็น API เหมือนกันซึ่งจะถูก Define Schema เอาไว้ที่หลังบ้านแล้ว หน้าบ้านจะสามารถขอ Data ได้ตามที่หลังบ้านถูกสร้างไว้เท่านั้น (แค่นี้พอ เดี๋ยวยาว)

รู้สึกยังไง ?

แรกๆก็ไม่ชอบหรอก ต้องรู้นั่นรู้นี่ โอ้โหโคโดโมะเต็มไปหมด แต่พอได้เขียนไปเรื่อยๆ ก็รู้สึกว่าตัวเองเขียน Code เป็นระเบียบขึ้น และ…

• Reuse ได้ แยก Component ชัดเจน
• Community เยี่ยม ไม่ใช่เราที่ติดปัญหานั้นๆคนแรกแน่นอน
• Hot reload is very good.
• Test Component UI ได้ง่ายๆด้วย react-test-renderer หรือ storybook/react (https://storybook.js.org/docs/guides/guide-react/) ใช้คู่กับ Jest ก็ได้สบายๆ
• แต่ด้วยความเป็น SPA แล้ว ปัญหาที่เจอคือ Ads ของ Providers บางเจ้า Render แค่ครั้งเดียว ถ้ามีการเปลี่ยนหน้าจะไม่ถูก Render ต้อง Refresh ใหม่ วิธีแก้ก็คือให้ Providers เพิ่ม Feature ให้สามารถ Reload Dom นั้นๆได้
• ส่วนเรื่อง Performance นี่เฉยๆ (ถ้าไม่ SSR ก็แทบไม่ต่างกันเลย) ยิ่งสมัยนี้ Ram ก็ถูกลงแล้ว
• React Native สำหรับ Mobile ยังไม่เคยลอง

ส่วนใครอยากลองเริ่มต้น React หละก็ ลองเริ่มต้นจาก create react app ได้ (https://github.com/facebook/create-react-app) ตัวนี้จะ Setup โปรเจคมาไว้ระดับนึงแล้ว ให้เราสามารถนำไป Implement ต่อ [Typescript ก็มีเด้อ~]

Blog นี้เป็น Blog แรกในชีวิต หากผิดพลาดประการใดก็ขออภัยไว้ ณ ที่นี้ด้วย…

ขอบคุณที่อ่านจนจบครับ ^_^ #DevOps 💚🐸💚 อ๊บๆ