create-react-app 2.0 vs Next.js 7

Posted byHappio Team Posted onNovember 22, 2018 Comments0
Tags: , , , , ,

ในช่วงเดือนที่ผ่านมานี้ create-react-app และ next.js ก็ได้ออก major change มาทั้งคู่ เรามาดูกันดีกว่าว่ามีอะไรใหม่ๆที่น่าสนใจบ้าง 🙂

React เป็น Javascript Library ที่เป็นที่นิยมมากๆในยุคปัจจุบันตัวหนึ่งที่มีความยุ่งยากเล็กๆในการตั้งโปรเจคขึ้นมา จนบางทีมันเป็นกำแพงให้เราไม่สามารถจะเริ่มต้นเรียนรู้ได้ง่ายๆ จนกระทั่งการมาถึงของ create-react-app และเหล่าบรรดา Boilerplate ทั้งหลาย (Boilerplate หรือ Scaffolding จะเรียกง่ายๆก็ Starter kit นั่นละครับ เป็น project ที่ set ค่าต่างๆรวมถึง dependencies ให้เรียกใช้ได้ง่ายๆนั่นเอง)

create-react-app

ณ ตอนนี้ create-react-app ก็ผ่านร้อนผ่านหนาวมาจนถึง create-react-app 2.0 แล้วนะครับ (จริงๆ ตอนนี้ก็มี hotfix มาบ้างแล้วล่ะนะ 55) ปรับปรุง เปลี่ยนแปลง dependencies ไปมากมาย ยกตัวอย่างเช่น

Babel 7

ก็ตามคาดครับ ในเมื่อ Babel 7 ได้ relase เพราะฉะนั้นนี่ก็เป็นหนึ่งใน  dependency นึงที่ต้องขยับตามแน่นอน สิ่งที่น่าสนุกคือตอนนี้ support  Short React fragment syntax แล้วนะ แบบนี้ครับ

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </> <--- ตรงนี้ละครับ
    );
  }
}

ซึ่ง ณ ปัจจุบันก็เหมือน tools หลายๆตัวอาจจะยังไม่ support มันอยู่ดี ก็ใช้แบบเดิมก่อนเนาะ

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}
webpack 4

แน่นอนว่าถ้ามี babel 7 เนี่ย webpack 4 ก็ไม่ตกรถเหมือนกันครับ webpack 4 ข้อดีคือ ไวขึ้น โดยเคลมว่าอาจจะไวขึ้นถึง 98% เลยทีเดียว และตอนนี้ก็ support Module Type JS (.mjs) แล้วนะครับ หลักๆก็คือก่อนหน้านี้ javascript เนี่ยเรียกว่าเป็น first-class module type ใน webpack ทำให้หลายๆครั้งไม่สามารถ bundle อะไรที่นอกเหนือจากนี้ได้ โดยตอนนี้ webpack 4 ได้ support Module Type 5 แบบตามนี้ครับ

  • javascript/auto: (The default one in webpack 3) JavaScript module with all module systems enabled: CommonJS, AMD, ESM
  • javascript/esm: EcmaScript modules, all other module system are not available (the default for .mjs files)
  • javascript/dynamic: Only CommonJS & AMD; EcmaScript modules are not available
  • json: JSON data, it’s available via require and import (the default for .json files)
  • webassembly/experimental: WebAssembly modules (currently experimental and the default for .wasm files)
Jest 23

จากที่คุณนัทแห่ง babelcoder ได้อธิบาย เกี่ยวกับ Jest 23 ที่มี interactive snapshot mode นี่น่าสนใจนะครับ ทำให้การเทสดูง่ายขึ้นและมองภาพจุดที่ผิดได้ไวขึ้นเยอะเลย

Sass (!!!)

แน่นอนครับว่าในที่สุด create-react-app ก็ support Sass Stylesheet แล้วนะ อยากรู้ว่า Sass คืออะไรก็ลองไป google ดูครับ.. แฮ่

CSS Module

ในที่สุดเราก็ทำ CSS Module กันได้แล้วครับ อธิบายง่ายๆคือเราสามารถใช้ module name ในการใช้งาน css ได้แล้วครับ เช่น

ถ้า Button.module.css มี css class ดังนี้

.error {
  background-color: red;
}

และถ้าเรามี css อีกไฟล์ที่ดั้นนนมี class ชื่อเดียวกันเด๊ะๆ

.error {
  color: red;
}

ถ้าเราจะใช้ css ทั้ง 2ไฟล์นี้ใน component ตัวเดียวกันก็คงจะเจอปัญหาว่าชื่อมันจะชนกัน แย่จริงเชียว.. ซึ่งการมาของ css module ก็จะช่วยตรงนี้ได้ แบบนี้ครับ

import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
import './another-stylesheet.css'; // Import regular stylesheet

class Button extends Component {
  render() {
    // reference as a js object
    return <button className={styles.error}>Error Button</button>;
  }
}

เห็นตรง styles.error ใช่มั้ยครับ นี่ละครับการใช้ module name มาเป็น prefix ทำให้ชีวิตง่ายขึ้นเยอะเลย

Yarn Plug’n’Play mode

ฮัดช่าอันนี้เป็นลูกเล่นใหม่ คุณเคยสงสัยมั้ยว่าไหนๆ yarn เนี่ยก็เก็บ package ไว้ใน cache อยู่แล้ว แล้วทำไมเราต้องก๊อปไฟล์ package พวกนั้นมาใส่โปรเจคเราให้หนักเล่นด้วย เพียงแค่คุณใส่

npx create-react-app --use-pnp

ป.ล. จริงๆมันเป็น experimental นะ

Next.js

มุมน้ำเงิน Next.js นั้นก็แน่นอนครับ ชูจุดเด่นเป็น SSR (ไม่ใช่ Specially Super Rare นะครับไม่ได้เปิดกาชา แปลว่า Server-side Rendering) ข้อดีแน่ๆของมันคือ SEO friendly อย่างที่รู้กันนั่นแหละ ซึ่งปัจจุบัน Next.js 7 ก็ได้ปรับปรุงเพิ่มเติมขึ้นมาหลายเรื่องเลยครับ โดยมี features เด่นๆก็คือ

Compilation Speed

แน่นอนว่าการที่โค้ดเรา compile ไวขึ้นย่อมจะทำให้การพัฒนานั้นเป็นไปได้ไวขึ้น(มีผลนะเอ้อ) ซึ่งด้วยพลังแห่ง Babel 7 และ Webpack 4 นั่นย่อมทำให้ Next.js 7 นี้ไวกว่าเดิมพอสมควรเลยล่ะในตอนพัฒนา ตัวเลขคร่าวคือ Bootup time ไวขึ้น ~57% และ Code Change time ไวขึ้น ~ 42% ถ้าใช้ webpackbar ก็จะออกมาคูลๆแบบนี้ครับ

React Error Overlay

ก่อนหน้านี้ Next.js จะแสดง error ให้เราปวดตาเล่นด้วยรูปแบบ stacktrace แบบทางซ้ายล่างนะครับ ซึ่งด้วย react-error-overlay ที่เพิ่มเข้ามาเนี่ยทำให้หน้าตาการแจ้ง error ออกมาดูคลีนๆสบายตา แต่ก็ยังมี stacktrace ด้านล่างให้ดูอีกทีถ้าจะไล่โค้ดละนะครับ 🙂

Babel 7

ในเมือง Babel 7 ได้ release อย่างเป็นทางการก็เป็นเวลาเหมาะสมที่มันควรจะอยู่ใน Next.js 7 เช่นกัน จุดเด่นคือ คุณสามารถใช้ Typescript ได้แล้วนะ (ใช้ @zeit/next-typescript ได้เลย ชิคๆ) ส่วนที่เหลือก็คล้ายๆที่พูดไปแล้ว เช่น babel.config.js หรือการ overrrides นั่นเอง

Webpack 4

แน่นอนว่าต้องใช้ webpack 4 ตามเทรนด์ไปกับเค้าด้วย ก็มี improvement คล้ายๆกับทาง create-react-app นั่นละครับ เช่นพวก .mjs , code splitting หรือ WebAssembly

CSS Import (!!)

ใส่เครื่องหลายตกใจสองตัว จริงๆก็เกิดขึ้นด้วยพลานุภาพของ webpack 4 นี่ละครับที่ทำให้ Next.js 7 ของเราสามารถแกะ CSS จาก bundle ด้วย mini-extract-css-plugin ได้แล้ว

และที่สำคัญ ด้วย Next.js 7 เราสามารถทำ dynamic CSS import ได้แล้วด้วย เช่นตัวอย่างข้างล่างนี่ครับ

// components/my-dynamic-component.js
import './my-dynamic-component.css'
export default () => <h1>My dynamic component</h1>
// pages/index.js
import dynamic from 'next/dynamic'
const MyDynamicComponent = dynamic(import('../components/my-dynamic-component'))
export default () => <div>
  <MyDynamicComponent/>
</div>
Styled JSX v3

การเขียน style ของคุณก็จะง่ายกว่าเดิมด้วยใน Next.js 7 ด้วย Styled JSX v3 โดยเฉพาะการที่สามารถใช้ API css.resolve นี่ยิ่งจะทำให้คุณเขียนโค้ดงามๆแบบนี้ได้ด้วย

import css from 'styled-jsx/css'

const ChildComponent = ({className}) => <div>
  <p className={className}>some text</p>
</div>

const { className, styles } = css.resolve`p { color: black }`

export default () => <div>
  <ChildComponent className={className} />
  {styles}
</div>

สรุป

แนวทางทั้งคู่ก็คล้ายๆ กัน ตรงการ support stylesheet หลากหลายขึ้น รวมถึงการช่วยให้ development ดีขึ้นด้วย webpack และ babel เวอร์ชั่นใหม่ สำหรับคนที่พึงพอใจในการใช้งาน version เก่าก็อาจจะยังไม่ต้องรีบเปลี่ยนไปใช้ version ใหม่นี้ ศึกษาและลองเล่นซักพักให้มันอยู่ตัวก่อนก็เป็นเรื่องที่ดีครับ 🙂

https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

https://nextjs.org/blog/next-7

https://github.com/facebook/create-react-app/issues/5024

https://hackernoon.com/next-js-react-server-side-rendering-done-right-f9700078a3b6

https://medium.freecodecamp.org/whats-boilerplate-and-why-do-we-use-it-let-s-check-out-the-coding-style-guide-ac2b6c814ee7

https://menubar.io/nextjs-vs-create-react-app

So there are a ton of react boilerplates out there… do you recommend any?
byu/hotsaucetogo inreactjs

Facebook Comments
Category