Sơ lược về Expo và CRNA

Expo là gì

Expo được coi như một framework được xây dựng dựa trên React Native và tuyển chọn các thư viện React Native khác để tạo ra một bộ công cụ xây dựng ứng dụng một cách nhanh chóng, với các ưu điểm sau đây:

• Hoàn toàn sử dụng javascript
• Không cần cài đặt bất kì công cụ nào khác của Apple(XCode) hoặc của Google(Android Studio), hoặc các công cụ dùng để build
• Ngoài các thư viện mặc định của React Native, được bổ sung thêm các thư viện chất lượng khác từ cộng đồng, và rất phong phú, hầu như đáp ứng các như cầu của một ứng dụng.
• Cập nhật mã nguồn không cần thông qua sự kiểm duyệt của Apple Store hoặc Google Play, vì chỉ cập nhật tập tin tĩnh như javascript, css, image…
• Push Notification, Facebook login được đơn giản hóa

Expo tập hợp những thứ mà họ cho là cần thiết cho ứng dụng, giúp cho bạn tập trung vào việc xây dựng sản phẩm, mọi thứ còn lại đã có Expo lo. Điểm yếu của Expo chính là bạn không thể sử dụng các thư viện khác mà đòi hỏi phải cần tới native code (java, object-c, swift) đòi phải phải dùng lệnh react-native link hoặc rnpm link, tuy nhiên khi cần thiết bạn hoàn toàn có thể tách riêng expo ra và tiếp tục sử dụng các thư viên của Expo thông qua ExpoKit, nghĩa là những gì bạn đã viết trên Expo sẽ tiếp tục hoạt động bình thường và có thể sử dụng các thư viện dùng native code khác.

Expo sử dụng React Native, nên bạn cần phải React Js, xem thêm bài React Js là gì.

CRNA là gì

CRNA phát triển dựa trên tinh thần của Create React App (CRA), nghĩa là bạn cũng không cần phải biết nhiều về quá trình build, thiết lập môi trường, và CRNA sử dụng client Expo để phát triển, như vậy về cơ bản thì CRNA và Expo giống nhau, CRNA có những tính năng của client Expo. Tuy nhiên, CRNA lại không có những tính năng mà Expo mang lại (tất nhiên :D) ví dụ:

• Instant Update (cập nhật không thông qua Google Store hoặc Apple Play, tương tự CodePush),
• Push Notification: bạn phải tự tạo chứng thực certificate với Google và Apple, với bạn nào đã từng phải tạo chứng thực này thì cũng khá dài dòng, với Apple thì chứng thực này hết hạn sau mỗi 1 năm và phải gia hạn, việc quên gia hạn là chuyện có thể xảy ra. Trong khi với Expo thì bạn không cần phải quan tâm điều này!
• Facebook login: nếu đã từng làm chức năng này, ở cả server và client thì bạn sẽ biết rằng khá rắc rối, trong khi với Expo thì dưới 10 phút là xong.

Chọn Expo hay CRNA ra sao

Khi bạn xây dựng ứng dụng cho khách hàng, hoặc của công ty, thì cần phải xác định rõ yêu cầu của dự án, xem có chức năng nào mà Expo không hỗ trợ không, có nghĩa là bạn không cần phải sử dụng thư viên ngoài mà có sử dụng Native Code. Hoặc là bạn có khả năng, quyền hạn để quyết định thay thế 1 chức năng mà Expo có tương đương, dù bạn chọn Expo hay CRNA đều bị hạn chế này, vì CRNA sử dụng client Expo.

Bạn có thể tham khảo một số ý theo bảng đánh giá dưới đây:

Dưới đây là biểu đồ so sánh giữa 2 từ khoá “expo react native” và “create react native app” chứng tỏ phần nào ưu thế của Expo. Đừng tìm kiếm bằng từ khoá “crna” vì nó sẽ bị nhầm lẫn bởi Certified Registered Nurse Anesthetists (CRNAs) thì không đúng.

Biểu đồ trên cho thấy rằng CRNA ban đầu được tìm kiếm cao, hoặc là được quan tâm, sử dụng nhiều, nhưng vì sử dụng client Expo nên gián tiếp quảng cáo cho Expo :D, nên việc Expo được biết nhiều hơn là điều tất yếu.

Fullstack Station Tips

Nếu học cơ bản ban đầu chỉ cần sử dụng Snack (https://snack.expo.io). Bạn không cần phải cài đặt gì ở máy mình cả, cũng như không bận tâm việc cài đặt IDE hay Text Editor nào. Nhiều bạn hay nhắn tin hỏi mình về vấn đề lỗi khi học React Native mà đa phần lỗi đến từ môi trường lập trình, vậy nên hãy tập trung học React Native ở Snack trước, khi bạn thấy hiểu cách hoặc động của React Native, hoặc thêm 1 số thứ liên quan như Redux, React Navigation, Firebase… sau đó hãy chọn Expo hoặc CRNA, hoặc với react-native init.

Thật ra, so sánh Expo hay CRNA cũng không phải là điều cần thiết, bởi vì đều đi theo hướng chung và cũng đều có sự giới hạn nhất định. Phải so sánh bộ “Expo hoặc CRNA” với cách khởi tạo React native thuần react-native init mới là điều chúng ta cần cân nhắc, còn Expo hay CRNA đều được, nó không ảnh hưởng quá nhiều đến sự phát triển của ứng dụng. Mình thì thiên về Expo hơn, bởi vì được cung cấp nhiều tính năng cần thiết, và tính hoạt động tích cực của cộng đồng Expo, hàng tháng đều được phát hành bản cập nhật, tương ứng với bản cập nhật mới nhất của React Native.

Hơn nữa, CRNA có những hạn chế của Expo, nhưng Expo lại có nhiều ưu điểm hơn, vậy tại sao phải chọn CRNA? Nếu bạn có những ý kiến khác, vui lòng comment bên dưới nhé!

The post React Native: chọn Expo hay CRNA? appeared first on Fullstack Station.

Nhận thấy các cấu hình, cài đặt môi trường mới cho dự án sử dụng React quá phức tạp, đội ngũ Facebook cùng cộng đồng mã nguồn mở đã cùng nhau tạo ra dự án hạt giống “Create React App” đã bao gồm:

• Webpack
• ESLint
• Babel

Những công cụ trên giúp cho bạn tập trung vào việc lập trình, phát triển dự án thay vì phải mất công sức nghiên cứu. Giờ đây bạn có được những tính năng như: Hot Module Replacement, Code checking, Transform ES6 -> ES5… mà không cần phải làm bất cứ thao tác gì. Không những vậy, dự án hạt giống này đã thu gọn tinh giản các thông báo từ các công cụ đi kèm, làm sao đơn giản nhất có thể, chỉ hiển thị những thứ gì cần thiết.

Có thể nói, đây là dự án mầm tốt, mặc dù cũng sẽ khó để phù hợp với tất cả mọi người, nhưng đa phần sẽ giúp cho bạn tập trung vào việc học react, cũng như lập trình hoàn thành dự án đơn giản và nhanh chóng hơn. Sau đó, nếu có thời gian hãy nghiên cứu thêm webpack và babel.

Nếu quay lại thời gian bắt đầu học react, mình ước có được cái này ngay lúc đó, khỏi cần suy nghĩ đến Webpack là khỉ khô gì. Mặc dù nghiên cứu webpack cũng mang lại nhiều thú vị, nhưng nó không phải là yếu tố quan trọng để sử dụng Reactjs.

The post Hướng dẫn bắt đầu với React cách đơn giản nhất appeared first on Fullstack Station.

Các bài viết khác liên quan nền tảng nên đọc:

• ES6 là gì?
• ReactJs là gì?
• Vòng đời của 1 component ReactJs trong ES6
• Hướng dẫn cấu trúc thư mục và cách viết ReactJs chuẩn

Cũng có bài viết hướng dẫn cài đặt Webpack cho React + Meteor, nhưng do phụ thuộc nhiều Meteor nên cũng hạn chế người dùng.

Những điểm lợi của ES6

Có thể nói sau 1 thời gian sử dụng ES6, viết code nhanh hơn và cấu trúc tập tin nhìn cũng gọn gàng hơn, sau đây là điểm qua một số điểm lợi mà mình trải nghiệm thực sự:

• Hàm Arrow (=>): đây có lẽ là cách viết được sử dụng nhiều của ES6. Gọi là cách viết tắt hàm, nhưng bản chất giữa hàm Arrow và hàm bình thường có sự khác nhau về ngữ cảnh hàm this. Có thể nói đơn giản thì hàm bình thường có this còn hàm Arrow thì không có this, this bên trong hàm Arrow là this của nơi khai báo hàm Arrow.
• Xử lý chuỗi dễ dàng hơn:

  `Bạn không thể
  xuống hàng 
  như vậy với "ES5" được.`
  

• Giá trị mặc định cho tham số: function(a = 12, b =”chuỗi”)
• Truyền tham số không xác định số lượng: cái này dùng nhiều khi gọi component <ChildComponent {…this.props} /> hoặc function(x, …y)
• let và const: được sử dụng thay thế hoàn toàn cho var, vì nó kiểm tra biến đã được khai báo chưa.
• class: cái này quan trọng nhé, trong ES6 bạn có thể kế thừa từ class khác: ví dụ “MyComponent extends React.Component”
• module: sử dụng từ khoá import và export để khai báo và sử dụng module

Việc sử dụng ES6 đặc biệt là cho React là rất thích hợp, về phía AngularJs đã chọn TypeScript để viết chính cho dự án dùng AngularJs, TypeScript có nhiều điểm tương đồng với ES6, và đều là cách để nâng hiệu quả của dự án, tốc độ lập trình lên cả nên bạn nên sử dụng cho dù tốn chút thời gian để làm quen.

Webpack là gì

Hiện tại cũng có một số bài viết giới thiệu webpack rồi nên mình không đi vào chi tiết, đơn giản là nó đóng gói, biến code viết bằng A (js, jade, coffee, less, sass, png) thành B(js, css,png) , và cộng thêm nhiều tính năng hữu ích khác. Trong bài này thì là sử dụng Babel Compiler để biến ES6 => ES5, cụ thể hơn là React ES6 => React ES5 !!!

Tự nhiên phải mất công viết bằng ES6 rồi chuyển thành ES5 chi vậy? Chắc có bạn cũng sẽ thắc mắc chỗ này: đó là bởi vì ES6 sẽ xu thế tất yếu nhưng các trình duyệt lại không hỗ trợ hết các tính năng của ES6, sẽ cần một khoảng thời gian nữa để các trình duyệt web hỗ trợ hết các tính năng ES6, khi đó thì không cần phải chuyển nữa. Nói như vậy không có nghĩa là không dùng Webpack đâu nha, Webpack cũng là công nghệ hay giúp cho việc lập trình nhanh hơn, sử dụng trong bài viết này đây cũng chưa tới 1/10 tính năng của webpack nữa.

Phần 1: cài đặt webpack

Đơn giản là bạn cần cài đặt Nodejs và NPM trước khi tiến hành, tuy nhiên nếu bạn đã đọc đến đây chắc không cần nhắc tới nó nữa

Bước 1

mkdir react-hello-world
cd react-hello-world
npm init

Rất đơn giản, tạo thư mục mới và khởi tạo dự án, điền vài thông tin liên quan là xong.

Bước 2

npm i webpack -S

Cài đặt webpack với tham số -S để lưu vào trong package.json

Bước 3

Tạo file webpack.config.js như bên dưới

var webpack = require('webpack');
var path = require('path');
//Thư mục sẽ chứa tập tin được biên dịch
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
//Thư mục chứa dự án - các component React
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  }
};

module.exports = config;

Qua mấy dòng code trên, bạn cũng dễ dàng nhận thấy cấu trúc thư mục sẽ là:

src/
src/client
src/client/public
src/client/app

Nếu cấu trúc thư mục của bạn muốn thì vẫn thay đổi bình thường, chỉ cần sửa lại cho phù hợp trên webpack.config.js là được.

Bước 4

// ./src/client/app/index.jsx
console.log("Hello world")

Sau đó, tại thư mục react-hello-world, chạy lệnh sau:

./node_modules/.bin/webpack -d

Sau khi chạy xong, trong thư mục ./src/client/public sẽ xuất hiện file bundle.js, nghĩa là phần cài đặt đã hoạt động bình thường. Chỉ với dòng code đơn giản, bạn sẽ chưa thấy hứng thú gì đúng không? Hãy kiên nhẫn xem tiếp nhé!

Bước 5

Tạo file ./src/client/index.html với nội dung như bên dưới:

<!-- ./src/client/index.html -->
<html>
  <head>
    <meta charset="utf-8">
    <title>React.js using NPM, Babel6 and Webpack</title>
  </head>
  <body>
    <div id="app" />
    <script src="public/bundle.js" type="text/javascript"></script>
  </body>
</html>

Trong file index.html này không hề sử dụng các file trong thư mục app là index.jsx, đây chính là điểm quan trọng của webpack.

Bạn mở file index.html bằng trình duyệt, và mở Developer Tools -> Console, sẽ thấy “Hello world”.

Phần 2: cài đặt Babel Loader

Như phần đã nói ở trên, ES6 không được hỗ trợ đầy đủ từ các trình duyệt hiện nay, nên mã phải được biên dịch ra ES5 thì mới chạy được. Do vậy cần chuyển đổi từ ES6 => ES5, tương ứng React ES6 => React ES5, và Babel Loader là công cụ để chúng ta thực hiện điều đó.

Webpack sử dụng Babel Loader để thực hiện việc chuyển đổi, sau đó đóng gói lại như bình thường. Babel Loader sẽ chuyển đổi code sử dụng ES6 như class, let, const, arrow, … thành React.CreateClass(…), hay React.CreateElenement(‘a’, …), được diễn tả như mô hình sau:

Cài đặt Babel Loader và các preset: react và es6

npm i babel-loader babel-preset-es2015 babel-preset-react babel-core -S

Tạo file ./.babelrc với nội dung như bên dưới

{
  "presets" : ["es2015", "react"]
}

Và sửa lại file webpack.config.js như sau:

var webpack = require('webpack');
var path = require('path');
//Thư mục sẽ chứa tập tin được biên dịch
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
//Thư mục chứa dự án - các component React
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
//Thêm 
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ]
  }
//Kết thúc Thêm
};

module.exports = config;

Cài đặt React

npm i react react-dom -S

Mở tập tin, index.jsx, xóa hết và viết 1 component đơn giản như sau:

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
  render () {
    return <p> Hello React!</p>;
  }
}

render(<App/>, document.getElementById('app'));

Chạy lại lệnh để build

./node_modules/.bin/webpack -d

Phần 3: tối ưu

Ở phần trên, cứ mỗi lần có thay đổi, chúng ta phải gõ lệnh để cho webpack build lại, như vậy không chuyên nghiệp chút nào, mà cũng không có được tính năng HMR tuyệt vời nữa. Vậy nên phần này sẽ là phần tối ưu các thiết lập cho webpack, chỉ cần gõ lệnh thêm tham số như sau là xong:

./node_modules/.bin/webpack -d --watch

Chỉ đơn giản vậy thôi, nhưng chúng ta cần làm thêm 1 chút nữa để hoàn thiện, bạn mở file package.json, và thêm đoạn mã sau:

{
  // ...phần đã có, nhớ thêm dấu ,
  "scripts": {
    "dev": "webpack -d --watch",
    "build" : "webpack -p"
  },
  // ...phần đã tồn tại khác
}

Như vậy, kể từ giờ, mỗi lần bắt đầu mỗi ngày làm việc, bạn chỉ cần gõ `npm run dev` để thực hiện lập trình, và `npm run build` để build thành file bundle.js.

Kết

Mình biết các bạn đa phần tiếp cận React bằng ES5 vì theo tài liệu chính thức trên trang chủ là sử dụng ES5, nhưng đó là bởi vì ReactJs ra đời trước khi ES6/ES2015 được chính thức ra mắt, nên họ vẫn còn sử dụng ES5 trong tài liệu vì cộng đồng. Còn trên thực tế, đa phần các dự án đều sử dụng ES6 sau đó biên dịch lại thành ES5, cách làm này vừa giúp lập trình nhanh (ES6), vừa giúp cho dự án có tính thành phẩm có chất lượng cao (webpack).

Chú ý là một số function stateless thì nên sử dụng function bình thường sẽ tốt hơn là class với component lifecycle. Nếu component có lifecycle thì nên sử dụng ES6 và đa số trường hợp khác.

The post Hướng dẫn cài đặt Webpack để viết Reactjs/ES6 appeared first on Fullstack Station.

Trạng thái (state) của ứng dụng là gì

Cùng lướt qua các ví dụ cho dễ:

Ví dụ 1: Để hình dung đơn giản nhất, trạng thái của ứng dụng tương tự như cái nút Lui (Back)/Tới (Forward) lịch sử của trình duyệt của trình duyệt web. Bạn mở web nhấn vào vòng vòng một hồi, rồi nhấn quay lại các trang trước, mỗi trang như vậy còn được gọi là trạng thái. Nhưng, với các ứng dụng SPA (Single Page Application) thì chuyện Lui/Tới cũng là cả vấn đề rồi.

Ví dụ 2: Không liên quan đến web nhưng rất điển hình đó là trạng thái của bàn cờ tướng hay cờ vua chẳng hạn. Mỗi khi người chơi đi một nước – trong thi đấu – họ phải ghi lại từng nước đi, bằng cách này sau khi chơi xong người ta có thể tái hiện lại bàn cờ một cách dễ dàng. Ứng với mỗi nước đi, đó chính là trạng thái của bàn cờ.

Vậy thì nó liên quan gì đến trạng thái của ứng dụng?

Một ứng dụng web hoạt động cần dữ liệu từ phía máy chủ, thao tác của người dùng,…tổng hợp các thứ này lại ta được trạng thái của ứng dụng. Nếu biết trạng thái này, có nghĩa là tại thời điểm X ta biết được máy chủ đã trả về dữ liệu gì, người dùng đã thao tác những gì, nhập vào dữ liệu gì.

Việc biết trạng thái này có quan trọng không?

Các ứng dụng web hiện nay ngày càng phức tạp, việc biết được trạng thái này giúp cho công việc kiểm soát lỗi dễ dàng hơn, nhất là nó làm cho cách chúng ta lập trình cũng đơn giản hơn. Ví dụ, nếu bạn có một biểu mẫu mua hàng, giả sử có 5 bước: xác nhận đơn hàng, áp dụng mã khuyến mãi, điền thông tin giao hàng, thanh toán, hoàn tất. Với một ứng dụng web thông thường, nếu xảy ra lỗi ở bước 4, lập trình viên sẽ kiểm tra lại và nhập dữ liệu từ 1->4, tìm lỗi sau đó sửa lỗi, công đoạn này lặp đi lặp lại n lần!!! Nếu sử dụng Redux, mỗi công đoạn xem như một trạng thái và bạn không cần phải lặp lại bước 1->4 nữa.

Các nguyên tắc cơ bản của Redux

Nguồn dữ liệu tin cậy duy nhất

Như mình đã giới thiệu cơ bản ở trên, trong quá trình hoạt động của ứng dụng, bị phụ thuộc khá nhiều yếu tố: dữ liệu từ máy chủ ban đầu, thao tác của người dùng (nhập dữ liệu, click menu, button…), dữ liệu cập nhật từ máy chủ, dữ liệu được tính toán trong ứng dụng (Ví dụ: tính toán số dư tài khoản dựa trên biến động của tỉ giá)…những yếu tố này còn gọi là nguồn dữ liệu. Những nguồn dữ liệu này đến từ những nơi khác nhau, bất kỳ khi nào, khiến cho ứng dụng của chúng ta rất khó kiểm soát, chúng tác động đến những thành phần đơn lẻ, hoặc nhiều thành phần trên ứng dụng, hoặc hiệu ứng dây chuyền. Chính vì sự phức tạp đó, là vấn đề mà Redux muốn giải quyết, tất cả các nguồn dữ liệu cần phải được quản lý và tạo thành một nguồn duy nhất, tin cậy.

Trạng thái là chỉ được phép đọc (read-only)

Trạng thái của ứng dụng không được phép thay đổi “trực tiếp”, trạng thái cũng chỉ là một đối tượng thôi mà, nên việc thay đổi là được. Tuy nhiên, với Redux hay Flux thì trạng thái chỉ thay đổi khi và chỉ khi có một sự kiện xảy ra, giống như ra trận thì chỉ được phép nghe lời từ chỉ huy, mọi tin tức tình báo đều được gởi tới chỉ huy, nếu không có lệnh từ chỉ huy thì tất cả không được phép manh động.

Thay đổi chỉ bằng hàm thuần tuý

Điều may mắn là việc sử dụng Redux js là không quá khó, việc thay đổi trạng thái của ứng dụng, được thực hiện thông qua các hàm thuần tuý. Đưa vào giá trị sự kiện, trạng thái hiện tại và hàm trả về trạng thái tiếp theo. Dù tương lai ứng dụng của bạn có thể rất lớn, nhưng các hàm reducer này thì chỉ cần nhỏ gọn thay đổi trên từng lá của cây trạng thái, và chúng hoàn toàn có thể kết hợp với nhau tạo thành chuỗi sự kiện. Ví dụ: người click vào menu (một sự kiện => thay đổi trạng thái), sau đó router cũng cần thay đổi để phù hợp với ngữ cảnh.

Tính ứng dụng của Redux js là gì

Theo mình thấy Redux có 3 ứng dụng quan trọng nhất:

• Quản lý trạng thái: như một bản replay có thể undo/redo trạng thái của ứng dụng, phải nói là “Không thể tin được”, cá nhân mình rất thích tính tin cậy của ứng dụng mà Redux mang lại.
• Tăng tốc phát triển: với webpack đã có Hot Module Replacement, khi kết hợp với Redux, tạo thành sự kết hợp ăn ý, bạn có thể viết code và debug rất dễ dàng, hãy quay lại ví dụ về biểu mẫu mua hàng 5 bước ở trên, nếu bạn không áp dụng Redux, đồng nghĩa bạn phải debug lặp đi lặp lại việc nhập dữ liệu, mà chưa chắc lỗi do code gây ra mà do dữ liệu nhập vào.
• Ứng dụng offline: tất cả các thao tác của người dùng được lưu vào một cây trạng thái, khi có kết nối Internet, cây này sẽ được đồng bộ lên server bởi một loạt các sự kiện.

Sự khác biệt giữa Redux và Flux

Redux phát triển dựa trên Flux, nhưng đã lượt bỏ phần Dispatcher, và chỉ có duy nhất 1 store, …blah …blah, thôi nói nghe này: “Quên Flux đi“.
Nếu bạn chưa bao giờ nghe đến Flux hay Redux, thì đừng mất thời gian để tìm hiểu: Flux là gì, Flux khác Redux như thế nào, điểm yếu của Redux js là gì? Mình cũng đã từng mất thời gian như vậy, nhưng bây giờ mình tin chỉ cần nghiên cứu Redux là đủ. Đây là các lý do để chỉ nghiên cứu “Redux js là gì“:

• Hiện tại Redux đã đạt ~20k stars Github khi chưa đầy 1 năm
• Ứng dụng F8 của Facebook không sử dụng Flux mà sử dụng Redux:
• Dan Abramov, người tạo ra Redux đã gia nhập Facebook từ tháng 11/2015

Kết

Mình hi vọng qua bài “Redux js là gì” này, mình đã truyền tình yêu của mình dành cho Redux đến bạn. Cái hay của Redux là nó không phụ thuộc vào việc bạn sử dụng framework nào, nó là kiến trúc giúp cho ứng dụng phát triển nhanh, đáng tin cậy, và dễ hiểu khi làm việc nhóm. Cách người ta ghi lại nước cờ, làm cho tất cả mọi người đều dễ dàng hiểu và trình bày lại bàn cờ ra sao, thì Redux cũng như vậy!

The post Redux js là gì appeared first on Fullstack Station.

Một dự án web app đơn giản nếu muốn đạt mức độ thành phẩm thì sẽ có từ 20-30 components, và theo tiêu chí component càng nhỏ càng tốt vì nó có tính tái sử dụng cao, với cấu trúc thư mục bên dưới webapp có thể chứa khoảng 200-300 components. Đối với mức 20,000 React components thì phải hỏi chính đội ngũ của Facebook mới được, chứ mình thì chịu! (trích dẫn “the Facebook codebase has over 20,000 React components, and that’s not even counting React Native”)

Cấu trúc thư mục của một dự án React

/actions/...
/components/common/Link.js
/components/common/...
/components/forms/TextBox.js
/components/forms/TextBox.container.js /* Container component */
/components/forms/TextBox.res/style.css
/components/forms/TextBox.locale/vi-VN/...
/components/forms/...
/components/layout/App.js - The top-level React component
/components/layout/App.res/style.css
/components/layout/App.locale/en-US/...
/components/layout/Navigation.js
/components/layout/Navigation.res/style.css
/components/layout/Navigation.res/data.json
/components/layout/Navigation.locale/en-US/...
/components/layout/...
/components/pages/Home.js
/components/pages/Home.css
/components/pages/Account/index.js
/components/pages/Account/index.css
/components/pages/...
/core/...
/constants/...
/helpers/...
/reducers/...
/stores/...

Về Component có nhận dữ liệu từ máy chủ hoặc từ store và nhận dữ liệu từ thao tác người dùng, mình chia làm 2 component với 2 chức năng riêng biệt:

• Container: nhận dữ liệu từ server, component này không render và cũng không nhận bất kỳ thao tác nào của người dùng
• Presentation: chỉ đảm nhiệm việc render, chỉ nhận dữ liệu thông qua props, không có state

Cách tiếp cận này (Container component và Presentation) được Dan Abramov (tác giả Redux và đang là thành viên của React) giới thiệu qua bài viết: Smart and Dump components, và cấu trúc thư mục thì dựa theo Gist này.

Mình sử dụng component stateful và stateless độc lập như trên để dễ quản lý luồng dữ liệu. Trong cấu trúc trên có sử dụng Redux, tuy nhiên chỉ để tham khảo là chính, nếu bạn có sử dụng Redux thì có thêm các thư mục reducers, stores, actions. Còn thư mục core thì có thể chứa business logic, helpers dùng để chứa các hàm hỗ trợ, constants để chứa các biến hằng số.

Thật ra, nếu bạn không sử dụng Redux, có thể chia làm 3 components – đã áp dụng thấy rất ổn:

• Container: như trên
• Presentation: như trên
• Interactive: nhận các thao tác từ người dùng, component này sẽ khai báo các hàm handleClick, handleChange,…và truyền cho presentation component thông qua props.

Với cách tổ chức 3 components như trên thì ưu điểm là phân rõ rạch ròi nhiệm vụ cho từng component: lấy dữ liệu, xuất dữ liệu và tương tác người dùng. Khuyết điểm của cách tiếp cận này là dữ liệu có thể bị trùng lặp ở component Interactive, vì bản thân nó không sử dụng mà truyền xuống cho Presentation, tuy nhiên đây không phải quá tệ để cho cách tổ chức component dễ hiểu và quản lý luồng dữ liệu, cách này được xem là tương tự actions -> store <=> reduce.

Trong thư mục chính components, được chia làm các thư mục con, các thư mục con này cũng là các react component, tuy nhiên được phân loại theo từng cấp độ lớn nhỏ: pages chứa các component theo phân loại chức năng trang, trong một trang (page component) chứa rất nhiều component nhỏ khác và được bọc trong layout component (layouts)

Cách viết một component React đúng chuẩn ….Airbnb

Tham khảo tại đây: https://github.com/airbnb/javascript/tree/master/react

Học theo những kinh nghiệm của các đàn anh là cách tiếp cận thông minh nhất :), bạn hãy đọc sơ lược, nếu chưa nhớ rõ áp dụng hết những thứ trong đó thì cứ làm theo từng cái thôi. Nhưng tốt hơn hết là đọc 1 lượt kỹ càng, sau đó viết 2-3 components, cái này quên quen bay qua coi lại, chừng 5-6 components là bạn sẽ quen cách tổ chức và viết component đúng chuẩn rồi.

Nói chung, chuẩn Airbnb là ngon rồi, nhưng nếu bạn đã áp dụng một chuẩn nào khác thì không nên chuyển qua làm gì, vì có thể nó cũng giống nhau gần 90%.

The post Hướng dẫn cấu trúc thư mục và cách viết component chuẩn trong React appeared first on Fullstack Station.

Phần 1: Bài toán

Nếu bạn chưa sử dụng Flux cho dự án của mình, và có một vài vấn đề khó khăn liên quan đến việc giao tiếp giữa các components có quan hệ cha – con: component con muốn cập nhật dữ liệu cho component cha hoặc ông nội, ông cố… hoặc truyền dữ liệu thông qua props từ components ông cố -> ông nội -> cha -> con …thì bạn có thể sử dụng context để khắc phục vấn đề trên.

Context là một khái niệm thuộc phần nâng cao và đang trong quá trình thử nghiệm của React Js. Mặc dù API được khuyến cáo là có thể thay đổi, tuy nhiên với những xử lý Form phức tạp (có nhiều component con lồng nhau) thì mình nhận thấy dùng context khá dễ dàng và tiện lợi hơn so với Flux.

Context: https://facebook.github.io/react/docs/context.html

Ở tài liệu trên của Facebook, đã nói đến khía cạnh truyền dữ liệu từ Cha -> Con không thông qua props, bài viết này, mình giới thiệu với các bạn cách cập nhật dữ liệu cho component ông cố từ component con

Nếu bạn đã có khái niệm hiểu Flux là gì rồi, thì có thể tưởng tượng thay vì Store nằm ở một đối tượng khác – một nơi nào đó thì context tương tự store nằm trong Component ông cố, và khi khởi tạo component con sẽ lấy được dữ liệu từ Component ông cố thông qua Props, và mọi Action từ component con sẽ cập nhật component cố nội.

Giao diện

Xét Form sau: Để đơn giản, mình chỉ vẽ 3 cấp (ông nội – cha – con), còn component level 4, 5 sử dụng modal, xử lý dữ liệu và trả về cho component level 3 không hiển thị ở đây.

Cơ sở dữ liệu

Tương ứng dữ liệu trong MongoDB có thể như sau:

{
  "title": "Good places near your house",
  "description": "Hospital, Supermarket, Kindergarden, Stadium...",
  "places": [
      { 
          "location": {
              "type": "Point",
              "coordinates": [1234, 4567]
           },
           "imageId": "feYddeqw12jx",
           "recommends": [
              "Open 10:00 - 19:00", "Good services"
           ]
      },
      {...},
      ....
   ]
  
}

Sử dụng MongoDB với embedded document thường sẽ làm cho React có cấu trúc component như trên – khá phức tạp đúng không? Nếu bạn sử dụng chung nguyên bộ React – Relay – GraphQL thì vấn đề trên chắc sẽ giải quyết gọn hơn, hoặc Flux/Redux.

Tuy nhiên, mình đã áp dụng Context trong dự án thực tế để giải quyết vấn đề trên, với form khá phức tạp ở các components, nhất là trong component level 2:

• Map (component level 3): sử dụng Component Modal level 4 để chọn location
• Image (component level 3) sử dụng Component Modal level 4 để dùng Google Custom Search chọn hình ảnh
• Recommends (component level 3): mỗi component đều có nút xoá

Tất cả các dữ liệu component đều lưu trong 1 state thuộc component level 1, các component con ứng với mỗi action sẽ cập nhật state này (setState), state thay đổi kích hoạt render lại toàn bộ component con (chỉ những phần thay đổi).

Sơ đồ trao đổi dữ liệu

(Làm biếng vẽ hình quá, xem thô tạm nha)

———–Database (API)

————–↑          ↓

(Autosave)  ↑          ↓   (Reactive)

————–↑          ↓

(State) Component Cha → Props→(Render) Component con →Action

↑                                                                                                                        ↓

↑                                                                                                                        ↓

←———————-Context——————————————–←

Mô hình sử dụng context này, không những giúp cho component con có tính tái sử dụng, mà còn giúp cho ta tạo ra một ánh xạ document của MongoDB, việc Save document này sau đó khá là dễ dàng. Component Root có nhiệm vụ giao tiếp với Database và truyền props xuống các component con, mỗi khi có action từ component, ta cập nhật state cho component ông và có thể kích hoạt autosave lưu vào database. Nếu trong ứng dụng realtime, 2-n người tương tác với nhau thì Database sẽ reactive dữ liệu xuống, trong ứng dụng thực tế, mình sử dụng React – Meteor đã có sẵn tính năng reactive từ database.

Phần 1 đến đây là kết thúc, phần 2 mình sẽ trình bày cách lập trình để sử dụng context xử lý component con cấp n cập nhật dữ liệu cho component root.

The post Sử dụng context để giao tiếp giữa component cha – con trong ReactJs appeared first on Fullstack Station.

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)

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.

Tham khảo

Meteor with Webpack, React and Redux in Practice

BulletProof Meteor by Kadira

React & ES6/ES2015

React with Webpack and Meteor as a Backend (Cám ơn bạn Khanh đã bổ sung)

The post Hướng dẫn thiết lập môi trường cho Meteor + React + Webpack appeared first on Fullstack Station.

Yêu cầu

• Mac OS X: để biên dịch iOS, nếu bạn chỉ xây dựng ứng dụng cho Android thì có thể dùng Win hoặc Linux
• XCode 7.0+
• Android Studio
• JDK 1.8
• Node.js 4.0+
• Khác:
  • watchman: brew install watchman
  • flow: brew install flow

Cài đặt

Bước 1: Cài đặt command line

Cài đặt react native cli dùng để thao tác command line

$ npm install -g react-native-cli

Bước 2: Khởi tạo dự án

Khởi tạo dự án

$ react-native init AwesomeProject

Đợi 1 lúc cho npm tải các gói cần thiết.

Bước 3: Chạy ứng dụng

iOS

$ cd AwesomeProject
$ react-native run-ios

Bạn cũng có thể mở ios/AwesomeProject.xcodeproj từ XCode và thực hiện build

Android

$ cd AwesomeProject
$ react-native run-android

Rất đơn giản, bạn đã khởi chạy được ứng dụng di động trong vòng 15 phút.

Lập trình

Sau khi bạn khởi chạy được ứng dụng từ bước cài đặt trên, bạn hãy mở file index.ios.js đối với iOS hoặc index.android.js thử thay đổi các chữ phía trong <Text></Text>

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var AwesomeProject = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
 //...
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var AwesomeProject = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  //...
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

Sau đó, với iOS nhấn ⌘-R, bạn sẽ thấy kết quả thay đổi ngay, tương tự với Android bạn nhấn F2 và chọn “Reload JS”. Đối với bạn nào đã từng lập trình iOS hay Android, việc thay đổi chỉ đơn giản là Refresh là một sự kinh ngạc! Bởi vì khi xây dựng ứng dụng bằng ObjectiveC hay Java bạn phải build lại bất kể chỉ thay đổi 1 chữ nào đó trong ứng dụng, và điều này là không cần thiết đối khi xây dựng bằng React Native.

Tham khảo

React Native là gì?

ES6/ES2015 là gì? Đây là bài viết hướng dẫn về ES6/ES2015, mặc dù bạn có thể dùng Javascript thuần, tuy nhiên sẽ rất “hợp thời” nếu bạn làm quen với ES2015 ngay từ đầu.

https://facebook.github.io/react-native/docs/getting-started.html

The post Hướng dẫn React Native – Phần 1: Cài đặt môi trường appeared first on Fullstack Station.

Meteor Js là nền tảng phát triển ứng dụng web thời gian thực fullstack, được viết cho cả client và server chỉ bằng ngôn ngữ Javascript. Được ra mắt từ năm 2012 và hiện tại đã đạt 33k stars trên Github, quá đỉnh đó chứ!

Giá mà…

Mình viết bài viết này chỉ dựa sau khi có kinh nghiệm nghiên cứu Meteor 1 thời gian, và đã quyết định chọn Meteor bắt đầu dự án lớn chỉ sau 1/2 ngày làm Todo app theo hướng dẫn! Giá mà mình có thể biết Meteor sớm hơn, đây là câu nói mình thốt ra sau khi biết Meteor :). Vậy Meteor 1.3 có gì thú vị?

Meteor Js 1.3 và những điều thú vị

Được viết hoàn toàn bằng ES2015(ES6)

ES2015 giúp cho việc viết code Javascript trở nên rõ ràng, có cấu trúc (class, let, const, arrow function, object destructing…), mặc dù chỉ mới ra mắt từ giữa 2015, nhưng với những tính năng mạnh mẽ khiến Meteor viết toàn bộ code lại qua ES2015, mang đến một hệ thống rõ ràng, uyển chuyển hơn. (Xem thêm ES2015 là gì)

Sử dụng NPM để cài đặt các thư viện

Meteor sử dụng hệ thống quản lý thư viện, thành phần mở rộng riêng của Meteor. Thật ra bản chất bên trong cũng đã có sử dụng NPM rồi, nhưng cần bọc thêm một lớp của Meteor bên ngoài để cài đặt phù hợp với cấu trúc của Meteor. Việc Meteor hỗ trợ cài NPM một cách riêng lẻ không phải mục đích để thay thế hệ thống quản lý gói này. Tuy nhiên, việc hỗ trợ NPM một cách riêng lẻ khiến cho việc viết code trở nên linh hoạt hơn vì NPM có số lượng package vô cùng phong phú. Nhưng bạn cũng cần chú ý là việc sử dụng NPM khiến việc bảo trì tính tương thích với các gói của Meteor cũng trở nên vất vả hơn nhé.

React

Thật ra điều này không mới, Meteor hỗ trợ AngularJs và ReactJs thì có từ 1.2 rồi nhưng từ 1.3 sẽ khác, một cách không chính thức bộ template engine Blaze sẽ bị thay thế bằng ReactJs. Rõ ràng ReactJs sẽ có ngôi vương cho việc thay thế phần View trong mọi framework, nên việc sử dụng chính React sẽ giúp cho ứng dụng của bạn linh hoạt hơn vì có tính tái sử dụng rất cao, sau này bạn có thể dùng component React cho một dự án khác một cách độc lập không phụ thuộc vào Meteor, đó là một ý tưởng rất tốt đúng không nào? (Blaze nay đã trở thành 1 gói riêng chứ không còn gắn kèm chung với Meteor nữa)

Application testing

Không phải tới 1.3 mới có test đâu, nhưng bản 1.3 hỗ trợ cả unit test và integration. Unit test (meteor test) thì test cho từng thành phần riêng lẻ, còn integration test (meteor test –full-app) sẽ nạp toàn bộ code của ứng dụng và giúp cho bạn test từng tiến trình để chắc chắn các thành phần (đã test unit) tích hợp ngon lành với nhau.

Cải thiện Cordova

Cập nhật các gói Cordova lên phiên bản mới nhất (Cordova 6.0.0, Cordova iOS 4.1.0, Android 5.1.1). Meteor đã viết lại lớp Cordova giúp dễ dàng kiểm soát lỗi trong ứng dụng iOS và Android hơn, hơn nữa còn có chế độ Hot Code Push có thể quay lại phiên bản trước nếu phiên bản hiện tại bị lỗi (Việc này không cần thông qua App Store hoặc PlayStore, bạn có thể xem thêm Microsoft CodePush)

Cải thiện minimongo

Do tính năng cần đồng bộ dữ liệu giữa server và client nên việc cải thiện minimongo sẽ giúp cho tốc độ của ứng dụng tăng lên đáng kể.

Kết luận

Để viết ứng dụng có tính chất Realtime thì React + Meteor Js 1.3 quả là một sự kết hợp hoàn hảo hơn bất kỳ bộ nào khác khi React quản lý phần view và phần còn lại là Meteor đảm bảo fullstack! Ngoài ra, vì AngularJs là một framework hoàn chỉnh nên việc sử dụng chung với Meteor cũng là một framework sẽ khiến một lượng code không cần thiết cùng tồn tại. Nếu bạn vẫn chưa biết tí gì về Meteor, hãy bỏ ra 2 giờ để ngâm cứu cái Todo Example (React) bạn sẽ thấy thích thú với tốc độ viết ra ứng dụng web realtime.

Cập nhật 2017: sau một số dự án sử dụng Meteor + React, mình nhận thấy Meteor không còn phù hợp vì quá trình phát triển gặp vấn đề về tốc độ build, thiếu hỗ trợ HMR (Hot module replacement). Mặc dù một số tính năng tuyệt vời của Meteor là không thể bàn cãi, nhưng đối với những dự án lớn, tốc độ build làm cho lập trình viên cảm thấy mệt mỏi, mình khuyến nghị sử dụng hệ sinh thái mới dựa trên Graphql và Next.js để đạt nhiều mục đích, hiệu quả hơn.

The post Điều gì khiến Meteor Js 1.3 trở nên đặc biệt? appeared first on Fullstack Station.