Từng Bước Trở Thành Dev Front End Xịn (Phần 1)
Bạn là dân chuyên Back End, bạn chưa bao giờ làm Front End hay bạn đã từng làm Front End nhưng chỉ cho những dự án nhỏ chỉ chạy vài tháng, team size 5 đến 10 người …
Bạn đã bao giờ đặt câu hỏi là: làm Front End ở một đội tầm 50+ người, dự án chạy trong vài năm thì người ta làm như thế nào chưa? phải chăng họ chỉ dùng các tools được cung cấp sẵn để generate ra project rồi code và code, …
Trong loạt bài viết này mình sẽ trình bày, thảo luận về quy trình phát triển phần mềm, các skills, cách tư duy mà một Dev Front End nên có để làm tốt công việc của mình.
Chúng ta sẽ đi qua từng nội dung sau:
- Khởi tạo dự án
ReactJSvớiWebpack. - Unit Test ở Front End với
Karma - Code coverage với
Istanbul - Ứng dụng mẫu
User Management, Build và Deploy vớiFirebase Hosting - Automation Test (AUT) với Puppeteer.
Một số khái niệm bạn nên có trước khi đọc tiếp bài viết:
- Single Page Application: hay còn gọi là SPA, đây là một khái niệm mới về phát triển ứng dụng web, khác biệt cơ bản với cách truyền thống trước đây là ở trang web SPA bạn sẽ không thấy trang bị load lại khi thực hiện một thao tác nào đó như trước kia. Thực chất mọi thao tác của người dùng được thực hiện ở phía sau, nội dung mới sẽ được hiển thị khi có kết quả trả về từ phía server.
- NodeJS: là môi trường chạy code Javascript ở phía server.
- ReactJS: là một thư viện để làm ứng dụng web dạng SPA được phát triển bởi Facebook.
- Create React App: là một tool để khởi tạo ứng dụng SPA với ReactJS cho những bạn mới làm quen với ReactJS.
- Webpack: là một thư viện để đóng gói mã nguồn, nén mã nguồn, mã hóa mã nguồn, lazy loading, ….
- Babel: là một trình chuyển đổi code từ định dạng cao ES6+ về định dạng thấp hơn để cho các trình duyệt có thể hiểu và thực thi tốt nhất.
Khởi tạo dự án với ReactJS và Webpack
Thông thường khi bắt đầu một dự án ReactJS thì bạn nghĩ ngay đến các tools hỗ trợ bạn tạo dự án ngay những bước đầu tiên như:
create-react-app,… việc sử dụng công cụ nó thuận lợi cho người bắt đầu nhưng không thực sự cần cho các dự án lớn.Ưu điểm: Nó giúp bạn tạo 1 dự án ReactJS rất nhanh, chỉ một dòng lệnh là xong, nó sẽ đóng gói tất cả những thư viện mà tool đó cho là cần thiết để giúp bạn bắt đầu dự án, cũng như cung cấp các scripts để dev, build dự án.
Nhược điểm: Rất khó tùy biến, phức tạp và cần nhiều thời gian để tùy biến. Tool chỉ tạo code cho cấu hình chung, không cho 1 trường hợp cụ thể nào đó, nên để làm cho dự án chạy được với môi trường công ty, khách hàng thì chúng ta cần tùy biến nhiều thứ nữa.
Do đó trong các dự án lớn người ta thường xây dựng từ đầu tất cả những gì họ cần thay vì dựa vào một tool nào đó. Phần này mình sẽ trình bày cách dựng dự án ReactJS từ đầu với Webpack, một trong những thư viện đình đám trong việc đóng gói mã nguồn ở thời điểm viết bài này. Ngoài Webpack ra thì bạn cũng có nhiều lựa chọn khác như Browserify, Gulp, Grunt, … bạn tìm hiểu thêm nếu muốn.
Khởi tạo và cài đặt thư viện
# Tạo thư mục dự án, khởi tạo dự án
cd $PROJECT_HOME
mkdir FE-UserManagement
npm init
# Cài đặt thư viện webpack
# Thư viện này giúp bạn đóng gói, mã hóa, nén toàn bộ ứng dụng thành 1 / nhiều file nhỏ để deploy lên môi trường thực.
# --save-dev: có nghĩa là các thư viện này chỉ cài đặt ở môi trường phát triển, môi trường thực không dùng đến, các build tool sẽ dựa
# vào đó để biết cần đóng gói những thư viện nào.
npm i webpack webpack-cli --save-dev
# Cài đặt Babel, bạn cần thư viện này để chuyển các mã code ở các phiên bản cao về ES5 và biên dịch code ReactJS sang Javascript thuần túy.
# Lý do chúng ta cần chuyển về phiên bản ES5 là các trình duyệt chưa hỗ trợ đầy đủ tính năng của các phiên bản cao hơn.
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
# Cài đặt thư viện ReactJS
# --save: có nghĩa là bạn cần thư viện này khi chạy thực, yêu cầu các thư viện đóng gói kèm theo thư viện này.
npm i react react-dom -save
# Cài plugins cho webpack, webpack có rất nhiều plugins đi cùng, đây chỉ là một trong những thứ đó
npm i html-webpack-plugin --save-dev
# Thư viện này dùng để khởi tạo server ở local. Server ở phía môi trường DEV là bắt buộc trong quá trình phát triển dự án,
# nó sẽ giúp chúng ta tạo 1 server tạm như môi trường thực, deploy code và giúp chúng ta có thể xem được code của mình hoạt
# động như thế nào
npm i webpack-dev-server --save-dev
# Cài các bộ loader khác cho webpack để đọc file css, scss, img, html, ... bạn cần gì thì cứ thêm vào
npm i style-loader css-loader sass-loader node-sass --save-devTips: Ở đây mình tách ra từng lệnh để tiện giải thích, bạn có thể gom các thư viện vào cùng một câu lệnh install cho đỡ mất thời gian.
OK việc cài đặt như vậy là tạm đủ rồi bây giờ mình cấu hình cho nó chạy nhé:
Cấu hình Babel
Việc cấu hình Babel khá đơn giản, bạn tạo 1 file .babelrc ở thư mục gốc của dự án $PROJECT_HOME với nội dung sau
{
"presets": [
"@babel/env",
"@babel/react"
]
}Cấu hình webpack
File cấu hình chính của webpack là webpack.config.js, bạn tạo ra file này và đặt ngay thư mục $PROJECT_HOME của dự án với nội dung sau:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
module.exports = {
// Điểm bắt đầu để webpack phân tích thư viện, code, ... của dự án
entry: "./src/index.js",
// Cài đặt đầu ra của dự án khi chạy build
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
// test hỗ trợ regex để bạn viết query
module: {
rules: [
// Cài đặt này nghĩa là sẽ dùng thư viện babel-loader để đọc các file js và jsx
{
test: /\.(js|jsx)$/i,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
// Các file css và scss thì dùng css-loader và sass-loader
{
test: /\.(css|s[ac]ss)$/i,
use: [
'style-loader',
{
loader: "css-loader",
options: {
modules: true
}
},
{
loader: 'sass-loader',
options: {
implementation: require('node-sass'),
},
}
]
},
// Các file html thì dùng html-loader
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
// Khai báo các plugins cho webpack biết
plugins: [
new CleanWebpackPlugin(),
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};Thêm scripts vào package.json
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "webpack --mode production"
}start: Dùng để chạy server phía local, nó sẽ tự động biên dịch, deploy mã nguồn và server tạm cho bạn kiểm thửbuild: Dùng để đóng gói dự án chạy ở môi trường thực, các file sẽ được mã hóa, nén, … bởi webpack
OK về cấu hình bạn cần vậy là đủ, bạn thử tạo ra một file src/index.js rồi chạy thử xem nó hoạt động thế nào nhé, hoặc bạn có thể clone bài mẫu ở đây:
cd $PROJECT_HOME
# Lệnh này sẽ checkout duy nhất branch InitWebpack
git clone --single-branch --branch InitWebpack https://github.com/lapth/FE-User-Management.git
cd FE-User-ManagementChạy thử ở local
npm run startSau khi chạy server xong bạn bật browser ở địa chỉ localhost:8080 để xem kết quả, nó như thế này
Tips
Nếu bạn muốn tự bật Browser thì thêm tham số
--openNếu bạn muốn chỉ rebuild những module được thay đổi thôi thì thêm tham số
--hot
Build ứng dụng
npm run buildCác file output sẽ được tạo ra trong thư mục dist, nó như thế này:
Tạm kết
Vậy là quá trình khởi tạo dự án với webpack tạm thời hoàn thành. Chúc các bạn thành công! Nhớ đón đọc các bài tiếp theo và có vấn đề chưa rõ hãy để lại comment mình sẽ giải thích. Hãy chia sẻ bài viết để nhiều người được đọc kiến thức này.
Hẹn gặp các bạn trong phần 2.
Post Comment