ES6

Hướng dẫn thiết lập môi trường cho Meteor + React + Webpack

Nguyễn Nhân

Apr 22, 2016 — 9 min read

Cập nhật: do meteor-webpack không còn được duy trì phát triển, nên meteor-webpack không tương thích với Meteor đã cập nhật lên phiên bản 1.4 (chỉ tương thích 1.2 và 1.3)

Nội dung chính

Giới thiệu

Trước khi bắt đầu xây dựng web app realtime với Meteor, React, Webpack chúng ta sẽ lần lượt lướt qua các công nghệ này và tìm hiểu xem là công nghệ fullstack đã thay đổi như thế nào!

Trong bài viết này, Meteor là chính, tiếp theo là React, còn Webpack là để biến chúng trở nên hoàn hảo với nhau! Tuy nhiên, nếu bạn chưa biết gì về webpack, bạn nên đọc Những rủi ro khi sử dụng Webpack với Meteor ở cuối bài.

Meteor

Trang chủ: www.meteor.com

Nên đọc: Điều gì khiến Meteor 1.3 trở nên đặc biệt

Đây là một fullstack framework dùng để viết App (Web/Mobile) realtime rất mạnh, dễ dàng. Mặc dù mặc định để build cho mobile là hybrid (sử dụng Phonegap), tuy nhiên bạn hoàn toàn có thể sử dụng React Native để kết nối với Meteor.

React

Trang chủ: https://facebook.github.io/react/

Nên đọc: React Js là gì

Nên đọc: Hướng dẫn học React Js

Webpack

Webpack là một cách đơn giản để cấu trúc mã nguồn của dự án, đồng thời cung cấp khả năng Hot Load (Hot Module Replacement – HMR) mà mình rất thích, và đưa vào Meteor để nâng cao khả năng tốc độ làm việc.

Nên đọc: Webpack là gì

Nên đọc: Giới thiệu webpack

Gói thư viện sẽ sử dụng: Meteor Webpack

Vấn đề của Meteor

Ưu điểm

Cơ chế Xuất bản (Publications) và Đăng ký (Subscription)
- Bảo vệ xuất bản dữ liệu một cách đơn giản
- Giao thức DDP giúp đồng bộ client dễ dàng và nhanh chóng (Hỗ trợ React Native)
Cơ chế xác thực: sử dụng tài khoản với mật khẩu hay sử dụng OAuth dễ dàng
Từ 1.2 đã hỗ trợ ReactJs và Angular Js
Từ 1.3
- Đã sử dụng hoàn toàn ES6/ES2015
- Đã sử dụng NPM

Còn nhiều ưu điểm khác để sử dụng Meteor để xây dựng ứng dụng realtime, tuy nhiên bài viết này mình không tập trung nói về Meteor.

Khuyết điểm

Bài viết này mình tập trung vào khuyết điểm nặng nhất của Meteor đó là chính công cụ build của Meteor: nó chậm kinh khủng! Bất kỳ mỗi động tác Save file nào, Meteor sẽ build lại “toàn bộ mã nguồn”, mặc dù sau đó nó tự động kích hoạt Client để refresh với mã nguồn mới, tuy nhiên mình mất quá nhiều thời gian cho lập trình, trong khi Webpack lại có cơ chế HMR quá hay!

Một số bài viết nói về khuyết điểm của Meteor liên quan đến NPM và ES6/ES2015 là đã cũ, từ Meteor 1.3 đã khắc phục các vấn đề này rồi.

Giải quyết vấn đề khuyết điểm

Hot Module Replacing – HMR

Như đã nói ở trên, mình muốn giải quyết vấn đề build lâu của Meteor, nhưng HMR là gì? Bạn lập trình web thì biết mỗi lần sửa file gì, mình phải refresh lại trang, để cho trình duyệt nạp lại các tập tin mới.

Meteor thực hiện việc refresh này một cách tự động, nhưng do cơ chế của Meteor, bất kỳ 1 thay đổi nào của file cũng sẽ kích hoạt quy trình build phức tạp của Meteor, việc xử lý này mất khá nhiều thời gian từ 20-30s đối với dự án lớn (Khi bắt đầu thì thấy thay đổi rất nhanh, nhưng với cấu trúc dự án lớn thì khá chậm), sau khi build xong Meteor sẽ gởi tín hiệu xuống client và kích hoạt refresh để lấy code mới. Với cách này thì Meteor làm cũng khá ổn rồi, nhưng vẫn chậm!

Webpack -sử dụng cơ chế HMR cũng quan sát toàn bộ mã nguồn, nhưng khi thay đổi file nào, nó chỉ build lại file đó, và gởi xuống trình duyệt chỉ những thành phần/module thay đổi, việc này giúp cho quá trình lập trình tăng lên. Chỉ cần thay đổi code, Save và liếc qua màn hình có chứa trình duyệt, hoặc thêm mobile web bạn sẽ thấy code thay đổi gần như ngay lập tức (1-3s)

Những cách giải quyết phức tạp – không hay cho người mới

Cũng có một vài repo dùng để kickstart dự án:

https://github.com/thereactivestack/kickstart by@benoit_tremblay

https://github.com/jedwards1211/meteor-webpack-react by jedwards

Tuy nhiên, những repo này lại có những vấn đề khác:

Thiết lập cấu trúc code theo cách của họ, vì vậy khi bạn sử dụng các hướng dẫn từ trang chủ của Meteor nó rất khác, gây khó hiểu.
Đưa vào những thành phần, công nghệ không/chưa cần thiết như: Redux, ReactRouter, FlowRouter…

Cách giải quyết vấn đề đơn giản nhất

Theo quan điểm của mình, sử dụng bài viết hướng dẫn của Meteor ngay tại trang chủ là tốt nhất, bởi vì nó dành cho người mới bắt đầu, còn những bài viết khác đa phần là dành cho người đã có kinh nghiệm.

Do vậy, chúng ta chỉ cần sử dụng: Build Todo App with Meteor + React

Hướng dẫn ở trên do chính Meteor soạn thảo đã rất đơn giản và dễ hiểu về Meteor + React, chúng ta không nên đi lung tung. Mình chỉ thêm 1 bước 2a, một bước rất nhỏ để cài Webpack, sau đó bạn có thể tiếp tục với các bước hướng dẫn khác của Meteor.

Bắt đầu

Yêu cầu

NodeJs 0.12 hoặc 4.0+, NPM

Chú ý: ở mục này các bạn có thể theo phần hướng dẫn viết TODO App với React của www.meteor.com, mình chỉ viết lại để tiện theo dõi hơn, chỉ cần chú ý bước cài Webpack là được.

Cài đặt Meteor

MacOS:

curl https://install.meteor.com/ | sh

Window:

https://install.meteor.com/windows

Khởi tạo dự án (Bước 1 – Create an app)

meteor create simple-todos

Sau khi chạy lệnh trên, bạn sẽ có được cấu trúc thư mục như sau:

client/main.js        # a JavaScript entry point loaded on the client
client/main.html      # an HTML file that defines view templates
client/main.css       # a CSS file to define your app's styles
server/main.js        # a JavaScript entry point loaded on the server
package.json          # a control file for installing NPM packages
.meteor               # internal Meteor files
.gitignore            # a control file for git

Chạy Meteor

cd simple-todos
meteor npm install
meteor

Như vậy là bạn đã chạy được webapp bằng Meteor

Khởi tạo React (Bước 2 – Components)

meteor npm install --save react react-dom

….

Bạn vui lòng sử dụng bước 2 tại đây, chỉ cần copy code lại sửa đúng file là được:

https://www.meteor.com/tutorials/react/components

Cài đặt Webpack (Bước 2a – Webpack)

Ở thư mục gốc của dự án simple-todos bạn chạy các dòng lệnh sau:

// Xoá gói build emacscript mặc định của Meteor
meteor remove ecmascript
// Cài đặt webpack - chú ý là webpack của meteor, không phải webpack từ npm
meteor add webpack:webpack
meteor add webpack:react
meteor add webpack:less
meteor

//Sau khi chạy xong lệnh trên, meteor sẽ yêu cầu chạy npm install các gói
npm install

Sau khi chạy xong, bạn sửa file package.json, thêm các dòng sau:

{
  "name": "simple-todos",
   ...
  "main": "server/entry.js", => Dòng 1
  "browser": "client/entry.js" => Dong 2
   ...
}

Như vậy là đã xong rồi, rất đơn giản phải không?

meteor

Chạy lệnh trên, bạn sẽ nhìn thấy webpack và meteor hoạt động cùng nhau, đây là kết quả từ màn hình console:

=> Started proxy.
=> Started MongoDB.
webpack built c439f6a9efa3849e1c17 in 8174ms \
=> Started your app.

=> App running at: http://localhost:3000/
webpack building...lication                  /
webpack built a9141ae180f4e253c8e1 in 1684ms /
=> Meteor server restarted

Bạn hãy thử mở file import/ui/App.jsx hoặc import/ui/Task.jsx để sửa một cái gì đó bất kỳ rồi save lại, ví dụ sửa “Todo List” => “Simple Todo List”, bạn sẽ thấy console log chạy như sau:

webpack building...ing packages              \
webpack built 2a3c1684ae68400daecc in 1059ms |
=> Meteor server restarted
webpack building...lication                  |
webpack built e6e7c13e3e84258156fc in 536ms  /

Và ngay lập tức, trình duyệt sẽ thay đổi theo ngay, một số thay đổi chỉ mất dưới 1s. Ngay từ ban đầu, nếu bạn làm theo hướng dẫn của Meteor – không dùng Webpack, kết quả không khác nhau nhiều. Nhưng khi số file của dự án tăng lên thì sự khác biệt ngày càng lớn, trường hợp của mình gặp phải là khoảng thời gian build của Meteor mất từ 20s :(. Việc Meteor từ phiên bản 1.3 chuyển qua viết theo dạng module cũng có thể là sự chuẩn bị cho việc dùng Webpack.

Bước 3 đến 12

Như vậy là bạn đã xong bước 2a, bạn hãy tiếp tục sử dụng Bước 3 – Collection trong loạt hướng dẫn của Meteor để tiếp tục vọc Meteor. Mình hi vọng qua bài viết này, những bạn mới bắt đầu học Meteor kết hợp React sẽ dễ dàng phát triển hơn, sẽ rất tốt nếu bạn làm theo hướng dẫn của Meteor rồi sau đó tham khảo bài viết này một cách sớm nhất có thể. Sẽ khó cho bạn nếu bạn sử dụng Meteor + React sau một thời gian rồi mới bắt đầu sử dụng Webpack, vì khi đó việc cài đặt Webpack sẽ gặp nhiều khó khăn hơn.

Rủi ro khi sử dụng Webpack trong dự án Meteor

Việc sử dụng thêm Webpack khiến dự án của bạn gặp nhiều rủi ro hơn vì phải học cả 3 thứ: Meteor, React, Webpack. Bạn có thể hi sinh thời gian để học thêm được Webpack – thay vì mất thời gian cho việc chờ Meteor build, tuỳ thuộc vào bạn!
Webpack không được hỗ trợ chính thức từ Meteor Core team (MDG) vì lời hứa backwards compatibility, hơn nữa nó mất thời gian cho việc hỗ trợ cộng đồng Webpack + Meteor mà đó không phải là mục đích của họ khi tạo ra Meteor
Webpack không đơn giản, bạn sẽ mất thời gian để nghiên cứu, nhiều hay không còn tuỳ thuộc vào vấn đề bạn gặp phải là gì. Tuy nhiên, việc sử dụng bộ thêm Webpack có điểm lợi là sau này nếu bạn sử dụng React cho dự án khác mà không cần sử dụng Meteor, bạn sẽ thấy bộ đôi React + Webpack sẽ rất lợi hại.