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.

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.