Angular.js thì sao?

Mình không muốn nhắc tới Angular.js nữa, mình nghĩ Angular.js sẽ bái bai chúng ta trong thời gian không lâu nữa. Cuộc đua đã ngã mũ với Angular.js khi hiện tại chỉ đạt gần 50k sao ở Github và đà tăng trưởng về sao cũng chậm lại khá rõ khi cách đây 2 năm đã ở ngưỡng ~35k.

Thử nhìn đoạn mã sau trong “Getting Started” của Angular 8:

<h2>Products</h2>
 <div *ngfor="let product of products">
  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>
  <p *ngif="product.description">
    Description: {{ product.description }}
  </p>
   <button (click)="share()">
    Share
  </button>
</div>

Đoạn mã này trình bày 5 ý:

• *ngFor
• *ngIf
• Interpolation {{ }}
• Property binding [ ]
• Event binding ( )

Vừa thay đổi cấu trúc nhận event lại còn thuộc tính của thẻ html, lại còn thêm *. Nói thiệt ai chê mình ngu thì mình chịu, chứ từ lúc làm cái dự án với Angular 1 là mình tởn, tới tận giờ phiên bản 8 vẫn còn thấy ngu :(.

So… when was the last time you used #Angular (any version) to start a NEW project?

— Scotch.io (@scotch_io) April 23, 2019

Với kết quả thăm dò của Scotch.io cho câu hỏi “Lần cuối bạn sử dụng Angular (bất kể phiên bản nào) để tạo 1 dự án mới là khi nào?”, hơn 50% trả lời là hơn 1 năm. Mình nghĩ kết quả này đã quá rõ ràng cho kết cục của Angular.

Vậy nhé, nếu sếp bắt làm dự án với Angular thì thành thật chia buồn.

So sánh Vue.js và React.js qua các con số thống kê

Tần suất phát hành phiên bản mới

Với sự hình thành đã lâu không khó để hiểu React.js vượt trội về số lượng commit và pull request. Tuy nhiên cũng nhìn nhận 1 điều là số lần release của Vue.js lại gấp đôi React.js, có thể kết luận về tính stable của dự án thì React.js hơn hẳn. Vì sao? Vì commit code ít nhưng lại release nhiều, mình nghi ngờ về chất lượng release, không tin à, nhìn hình sau nhé:

Trong 1 ngày mà release xong fix bug muối mặt luôn, còn React.js thì bản nào release mình thấy rất an tâm mà cập nhật ngay, còn với Vue.js thì chắc là không.

Winner: React.js

Mức độ thịnh hành

Mục này mình xét các thông số: được sử dụng, fork, và số người đóng góp.

React.js rõ ràng được sử dụng rộng rãi hơn khi được sử dụng ở 2 triệu dự án, so với khoảng gần 900k với Vue.js. Mặc dù vậy, cũng có thể do React.js được ra đời sớm nên được sử dụng nhiều hơn? Còn Vue.js ra đời sau nhưng đã đạt 900k thì quả thực rất ấn tượng.

Fork về có kết quả tương đương, React.js nhỉnh hơn 1 chút với 24k, so với 20k của Vue.js, nhưng số người đóng góp lại khá chênh lệch 1297/276 ~ gấp 5 lần. Có thể suy ra fork vue.js về cho vui :D. Tính tương quan về số lượng pull requests/forks và người đóng góp/forks thì lần lượt React.js đạt 33% và 5%, còn Vue.js đạt 7.5% và1.4%. Đây là tỉ lệ khá chênh lệch, và có thể nói rằng người dùng React.js giỏi hơn (?), có khả năng đóng góp, chịu khó đóng góp hơn người dùng Vue.js.

Kết quả về tỉ lệ pull requests/forks và contributes/forks này, mình không cho là vì React.js có trước Vue.js có sau, vì rõ ràng số lượng forks của Vue.js rất cao. Ý nghĩa về việc forks của mỗi người thì cũng khó biết, tuy nhiên chỉ gói gọn trong 2 mục đích:

• Lưu giữ làm của riêng (sợ mất, mình cũng có khi có suy nghĩ đó :D)
• Đóng góp cho cộng đồng, kết quả này cho thấy cộng đồng React.js phát triển hơn, có khả năng đóng góp và phát triển nền tảng hơn hẳn Vue.js.

Winner: React.js

So sánh Vue.js và React.js trong lĩnh vực phát triển ứng dụng di động, native

Đối thủ lớn Flutter

Việc được sử dụng rộng rãi hơn cũng do React Native sử dụng React, còn Vue.js thì không có nền tảng di động chính thức mà chỉ có đối tác là Weex hoặc Vue-Native, sự tồn tại và phát triển của Weex sẽ gặp thách thức khá lớn khi Flutter đã chứng tỏ được khả năng và sự thống trị của React Native.

So sánh Vue.js và React.js thì không thể bỏ qua Flutter. Mình thấy Flutter rất tuyệt (xem thêm Flutter là gì), tuy rằng theo mình sẽ rất khó ăn hiếp được Reat Native, nhưng với Weex thì khả năng cạnh tranh được với Flutter là cực khó. Bằng chứng là số sao của Flutter gấp 5 lần Weex, mặc dù Flutter cũng mới ra mắt cách đây không lâu.

Hơn nữa, Flutter là nền tảng được hỗ trợ chính thức bởi Google (Google I/O), và hỗ trợ đa nền tảng. Có thể dùng Flutter để tạo Web, Mobile, Desktop và cả hệ thống nhúng. Thực sự là Flutter rất khủng, điểm khó của Flutter là dùng ngôn ngữ Dart.

Một điều cần lưu tâm là động thái Alibaba chuyển giao Weex cho tổ chức Apache, và đồng thời tạo ra ứng dụng “Xianyu” bằng Flutter, với 50M download (showcase của Flutter ngay trên trang chủ của Flutter). Không chắc là Alibaba chuyển qua sử dụng Flutter hẳn luôn hay không, nhưng rõ ràng họ không mặn mà gì với Weex cả.

Weex hoàn toàn bị lép vế so với Flutter!

React Native Windows

React Native có thể được sử dụng cho việc phát triển ứng dụng trên Windows với React Native Windows được hỗ trợ chính thức bởi Microsoft. Bạn có thể sử dụng React Native Windows để phát triển cho toàn bộ hệ sinh thái của Microsoft: desktop, tablet, xbox. Còn gì tuyệt vời hơn?

Ngoài ra, Microsoft còn có nền tảng Xamarin cũng mạnh mẽ không kém. Việc hỗ trợ React Native cho Windows trong khi đã có Xamarin là bước đi thông minh của Microsoft, vì hiện tại Javascript đang rất nóng và có nhiều lập trình viên theo đuổi hơn bao giờ hết.

Nền tảng di động của Vue.js bị phân tán

Không hỗ trợ chính thức nền tảng phát triển ứng dụng di động mà còn có sự phân mảnh. Bản thân trong chính Weex cũng hỗ trợ cả Vue.js và Rax (React.js), nghĩa rằng Vue.js được hỗ trợ để trong Weex, không có Vue.js thì Weex vẫn sống. Đây thực sự là điều đáng lưu ý, khi một nền tảng bị phân mảnh thì rõ ràng cộng đồng phát triển không mạnh, không tập trung.

Ngoài Weex thì còn có Vue-Native, được tạo ra bởi nhóm GeekyAnts, nhóm đã tạo ra NativeBase cho React Native cũng khá nổi tiếng. Nhưng có lẽ Vue-Native cũng còn khá nhỏ, để có thể tạo nên đột phá, hay làm được gì. Và bản chất Vue-Native là dựa trên React Native và dùng Vue.js để viết codekết nối. Theo mình đây là cách cực kỳ nguy hiểm, không nên đi theo. Vì trong khi phát triển chắc chắn sẽ có vấn đề với React Native mà dựa trên đó là React, như vậy bạn có thể sẽ phải học cả 3 thứ: Vue, React, React Native.

NativeScript cũng là hình thái lai, khi dùng được cả Vue.js và Angular.js, cũng không phải bắt buộc dùng Vue.js nên nhận định cũng như Weex, không có Vue.js thì NativeScript vẫn sống.

Hơn nữa, như đã phân tích ở trên về tính stable của Vue.js, cái gốc đã không thực sự ngon, thì các nền tảng cho di động hay native cũng khó có thể có cuộc cách mạng được. Với lý do phân mảnh thì việc củng cố và phát triển nền tảng di động với Vue.js không khả quan cho lắm.

Rủi ro từ quan hệ Mỹ – Trung

Không thể không nói điều này, vì các đóng góp cho Vue.js cũng có phần lớn đến từ Alibaba với Weex do Alibaba tạo ra. Và các sản phẩm dùng Weex đa phần là của Trung Quốc, xem Ai đang sử dụng Weex.

Mặc dù Weex đã chuyển giao sang cho tổ chức Apache, tuy nhiên chắc chắn sự đóng góp vào Weex sẽ đến phần lớn từ Trung Quốc, và tất nhiên cũng sẽ được sử dụng phần lớn từ Trung Quốc. Với quan hệ của Mỹ Trung xấu đi, các vấn đề liên quan đến công nghệ, học thuật của Trung Quốc đều bị hạn chế. Nó có thể là việc sử dụng Weex trên thế giới, cũng như sự đóng góp của cộng đồng trên toàn thế giới vào Weex có khả năng bị ảnh hưởng. Flutter cũng được lập trình viên Trung Quốc quan tâm và đóng góp, ví dụ là https://github.com/alibaba/flutter-go. Tuy nhiên, vị thế của Flutter khác hoàn toàn do Google chống lưng.

So sánh Vue.js và React.js trong mảng phát triển ứng dụng di động và native có kết quả quá khập khiễng khi kết quả nghiên hoàn toàn về React.js.

Winner: React.js

Khi nào nên sử dụng Vue.js

Nếu theo phân tích ở trên thì phần thắng nghiên hẳn về React.js với tỉ số 3-0. Tất nhiên, đây là góc nhìn có thể khác với nhiều người khác, nhưng mình nghĩ các con số thống kê không hề nói dối. Tuy nhiên, Vue.js có những điểm mạnh riêng mà mình cũng rất thích. Hãy cùng phân tích xem Vue.js phù hợp như thế nào nhé.

Như mình đã phân tích khá kỹ ở phần di động, native ở trên bạn không nên sử dụng Vue.js cho mục đích phát triển ứng dụng di động. Do vậy nhiệm vụ còn lại khả dĩ cho Vue.js là mảng web mà thôi.

Khi so sánh Vue.js và React.js, dễ dàng nhận ra điểm mạnh của Vue.js hơn React.js là có thể sử dụng template và cả JSX. JSX có một điểm yếu khá lớn là phải biết javascript, rồi cách build khá phức tạp. Như vậy đã hạn chế 1 lượng lớn frontend developer, nhất là các bạn chỉ chuyên cắt html từ photoshop và làm template. Team mình từng thất bại 1 dự án sử dụng React.js vì vấn đề này. Từ design, cắt ra html, rồi import vào react là một quá trình phức tạp, tình huống là bạn code react.js không giỏi trong việc cắt html, hoặc trong dự án tách biệt giữa bạn mockup html và bạn code javascript:

• Có 1 khoảng cách khá lớn về việc kỹ năng cắt html và kỹ năng code javascript, nó có vẻ là có điểm chung nhưng thực tế không như kỳ vọng. Bạn cắt html không biết nhiều về javascript, cũng như ngược lại.
• Mất tài nguyên con người với việc thay đổi html/css trong JSX, phải sử dụng 2 người. Vì với Styled-component thì mỗi component nắm giữ style riêng. Nên khi thay đổi html, css thì cũng phải sửa lại component.

Việc sử dụng Vue.js khá dễ dàng vì có thể tách biệt được phần template và phần logic, sử dụng Vue.js ở cách này không khác gì cách dùng jQuery cả. Với vue.js thì template mockup và code javascript sẽ nằm chung trên 1 repo chứ không cần phải tách ra, và có thể 2 phía html mockup và javascript developer có thể làm chung trên cùng tập tin.

Bỏ qua sự so sánh về tốc độ, mình thực sự không quan tâm lắm, trừ khi quá chênh lệch. Và các vấn đề về kỹ thuật chi tiết giữa 2 nền tảng, thì có thể sử dụng Vue.js tốt nếu:

• Bạn không hề có ý định làm ứng dụng di động, ứng dụng native với Vue.js
• Team bạn thiên về graphics design và phụ thuộc khá nhiều vào html mockup.
• Làm phần dashboard, web application

Fullstack Station Tips

React từ 16.8 có Reack Hooks rất lợi hại, có thể thay đổi về cách viết React nhiều trong tương lai gần. React Hooks sẽ giúp cho dự án không phụ thuộc vào Component Class mà vẫn có các tính năng hay, tiện lợi của component class. Dù Vue.js cũng rất tuyệt để làm sản phẩm, nhưng với những ưu điểm của React, độ phổ biến của hệ sinh thái kết hợp với React Hooks sẽ tạo ra sức mạnh đáng kể cho React.js

Sự so sánh Vue.js và React.js, hay chọn lựa chỉ có giá trị trong dự án nhất định, còn về con đường lập trình thì mình nghiêng hẳn hoàn toàn về React.js.

Hi vọng bài viết có ích cho những bạn đang còn lăn tăn giữa việc chọn React.js hay Vue.js, và mong có ý kiến phản biện từ các bạn đã sử dụng Vue.js.

The post So sánh Vue.js và React.js: một cái nhìn toàn diện appeared first on Fullstack Station.

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.

Time traveling là gì

Time traveling là “du hành thời gian” ngay trong nghĩa đen của nó, như cái cỗ máy vượt thời gian của Đôrêmon vậy đó. Khái niệm này thường được hiểu theo khái niệm về vật lý không gian, thời gian, ánh sáng nhiều hơn là liên quan đến lập trình. Trong lập trình ứng dụng phần mềm, Time traveling là kỹ thuật giúp cho ứng dụng có tính Undo/Redo, hay Replay (tưởng tượng như bàn cờ có ghi lại các nước đi nên dễ dàng replay), kỹ thuật này chính là mục tiêu hướng tới của Redux (Xem Redux js là gì) do Dan Abramov giới thiệu tại React Conf Euro 2015 và nhanh chóng lan toả trong giới lập trình.

Kỹ thuật này chỉ có được, khi ta áp dụng thư viện Redux, hoặc các thư viện khác mà đi theo hướng của Flux (các thư viện khác thì mình không chắc là có Time traveling hay không). Trong lập trình ứng dụng giao tiếp với người sử dụng hay cả với server thì trạng thái của phần mềm là rất quan trọng, nhất là các ứng dụng có giao tiếp với người dùng, và đặc biệt là ứng dụng web với các điều kiện có thể xảy ra làm thay đổi trạng thái như sau:

• Dữ liệu trực tuyến được cập nhật từ máy chủ một cách tự động
• Dữ liệu sự kiện từ thao tác của người dùng: nhấn chuột, di chuyển con trỏ, nhập dữ liệu..
• Dữ liệu từ bộ định tuyến URL (Router) nếu người dùng nhấn vào 1 liên kết
• Dữ liệu từ thời gian
• Dữ liệu có được từ lời gọi API bất đồng bộ

Như vậy, trong một ứng dụng SPA (Single Page Application) có tính chất trực tuyến, thì tất cả các loại dữ liệu có thể đều có thể xảy ra bất kỳ lúc nào. Vấn đề đặt ra là: tại mỗi thời điểm đó (giả sử như thời gian ngưng lại), làm sao biết được trạng thái của ứng dụng đang như thế nào, và làm sao để quay lại 1 số sự kiện trước đó – tức là áp dụng khái niệm rollback, undo.

Với các kỹ thuật lập trình hiện tại, hầu như không thể có giải pháp, nên việc ra đời thư viện Redux được xem như một bước đột phá của ngành lập trình ứng dụng. Với ứng dụng web không phải là SPA, thường đơn giản hơn 1 bước do URL được lược giản đi rồi, bản chất URL cũng là 1 trạng thái (state) của ứng dụng.

Bạn có thể xem ví dụ trên, toàn bộ thao tác của người dùng, đều được lưu vào cây bên phải (Redux Dev Tool – xem phần tiếp theo bên dưới), khi ta click vào cột bên phải, ở 1 dòng nào đó và bị gạch đi, có nghĩa là bỏ sự kiện đó ra khỏi trạng thái của ứng dụng.

Nhờ có tính năng này, giả sử code bị lỗi – đây là điều đau khổ nhất khi debug – thì vì cây sự kiện vẫn còn, nên khi bạn thay đổi code thành code đúng, thì Redux sẽ apply toàn bộ sự kiện đó với code mới và giúp chúng ta không cần phải thực hiện lại hàng loạt thao tác phức tạp để reprodure lại các dữ liệu cũ để xem code đúng chưa. Hoặc là thay đổi một giá trị tính toán nào đó, ví dụ như ở trên, thay vì click là +-1, thì sửa giá trị thành +-2 chẳng hạn, thì trạng thái mới sẽ được cập nhật dựa trên “sự kiện đã thao tác”.

Time traveling – Redux có lợi gì

Đoạn trên giải thích hơi dài một chút, nói tóm lại với Time traveling của Redux thì có các điểm:

• Dễ dàng debug
• Dễ dàng phát triển nhanh ứng dụng vì không phải mất thời gian nhập sự kiện lại
• Dòng chảy của chương trình dễ hiểu – giúp cho việc cộng tác nhóm dễ dàng
• Dòng sự kiện giúp cho chương trình tuân theo một logic chặt chẽ, chỉ cần nhìn vào cây sự kiện là bạn có thể đoán được hoạt động của chương trình, vì vậy còn được gọi là Predict container

Bạn chỉ cần áp dụng Redux là có thể đạt được những lợi ích này rồi. Redux được xem là dành cho ReactJs nhưng bạn hoàn toàn có thể kết hợp với những framework,thư viện bất kỳ như React Native, AngularJs, BackboneJs…

Mặc dù bạn có thể học ReactJs mà không cần quan tâm đến Redux, nhưng mình khuyên là nên xem chung Redux vì nó giúp cho việc lập trình dễ hiểu hơn. Có thể nói React hay ở vòng đời component thì có thể xem Redux hay ở vòng đời “sự kiện” của ứng dụng.

Redux Dev Tool

Công cụ này do chính tác giả của Redux viết, giúp bạn hiểu hơn về dòng sự kiện của ứng dụng, cũng như debug dễ dàng hơn, bao gồm cả tính năng Time traveling nữa.

Kết

Redux rất là tuyệt, bản chất hoạt động một cách độc lập nên bạn có thể áp dụng cho bất kỳ dự án nào, sử dụng bất kỳ nền tảng, thư viện javascript nào. Nếu bạn vẫn chưa áp dụng Redux, lời khuyên thật tình là phải áp dụng sớm nhất có thể, có 2 nguồn để học tốt:

• http://learnredux.com
• https://egghead.io/courses/building-react-applications-with-idiomatic-redux

The post Kỹ thuật lập trình Time traveling là gì 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.

Trước khi đọc bài viết, mình xin khẳng định một điều: Javascript là ngôn ngữ lập trình full stack duy nhất cho đến thời điểm hiện nay, Javascript làm được nhiều thứ hơn bạn tưởng từ web client đến server, từ desktop đến mobile ….và vì có lẽ cũng không ai rãnh rỗi để tạo ra ngôn ngữ lập trình đã thống trị thế giới web (phần máy khách), do vậy hiển nhiên Javascript là vua của ngôn ngữ lập trình full stack, vì không có đối thủ :). Ngôn ngữ lập trình full-stack hoàn toàn khác với lập trình viên full-stack, tuy có phần giao nhau nhưng phía cạnh đề cập khác nhau, ngôn ngữ lập trình full-stack là…ngôn ngữ mà như tiếng Anh thôi, rất phổ dụng trên thế giới, rất nhiều người có thể giao tiếp với bạn, nhưng không phải tất cả họ đều chào đón bạn, vì mỗi quốc gia, dân tộc, bộ tộc, khu vực… đều tự hào về hệ thống ngôn ngữ của họ. Javascript là độc tôn của thế giới web phần máy khách thì đã rõ, còn ở các mảng khác như máy chủ, ứng dụng máy tính, điện thoại di động thì hãy nhường những ngôi vị cao nhất cho những anh chàng tương ứng, còn Javascript chỉ có mặt và có mặt khắp nơi!

Chốt lại, muốn đi du lịch nhiều nơi một cách dễ dàng thì học tiếng Anh, muốn viết được nhiều thể loại ứng dụng, web thì học Javascript, chúng ta cùng bắt đầu xem Javascript có thể làm được gì nhé! Ít nhất là trong năm 2016 này: Xu hướng lập trình 2016!

Tôi muốn lập trình web phía máy khách

Không những riêng bạn mà tất cả lập trình viên web đều có sử dụng Javascript ở một mức độ nào đó, không hoàn toàn 100% các website trên thế giới có sử dụng Javascript, tuy nhiên mình cá là bạn đọc bài viết này không phải để viết ra các trang web đó, mà nếu có thì cũng không nên đọc bài này :). Cũng có thể là bạn đã biết, hoặc nghe các nền tảng như: JQuery, AngularJS, ReactJS, BackboneJS, EmberJS, …hoặc các front-end framework như Bootstrap, Foundation, UIKit…đều có sử dụng Javascript. Tất cả những phần liên quan đến người dùng như tạo hiệu ứng, phần hiển thị đến tương tác với người dùng đều cần đến Javascript, tất cả những gì liên quan đến web nói chung, và frontend nói riêng đều dùng Javascript.

Tôi muốn lập trình trò chơi 3D

3D trên nền tảng web

Bạn nhìn 3D sau: 

Hình 3D trên được dựng bởi ThreeJS, và việc tạo ra ứng dụng webgame không còn quá phức tạp. Kết hợp giữa HTML5, CSS3 và Javascript để tạo ra ứng dụng 3D chỉ giới hạn bằng trí tưởng tượng và khả năng của bạn.

Ngôn ngữ kịch bản cho Unity3D

Unity3D dùng Javascript để viết kịch bản còn được gọi là UnityScript. Với Unity3D, bản chất làm game sẽ thiên về kịch bản là chính, còn phần hiển thị, và các model đã có sẵn (miễn phí hoặc trả tiền), vậy nên nếu bạn biết Javascript thì có thể làm game 3D là vậy. Như vậy là bạn có thể làm game có tính độ hoạ phức tạp cao, điều mà webgame khó đạt được, cũng như khó có độ mượt mà trên điện thoại di động cũng như máy tính.

Tôi muốn lập trình web phía máy chủ

Javascript cho máy chủ khá mới so với các ngôn ngữ lập trình web cũng như lập trình ở máy chủ khác. Với Nodejs rất mạnh trong sản phẩm có tính chất trực tuyến như ứng dụng trò chuyện trực tiếp, trò chơi trực tuyến hay làm việc nhóm. So với các ngôn ngữ khác để làm được ứng dụng trực tuyến thì khá là khó khăn. Đồng thời Nodejs cung cấp khả năng kết nối cho hàng chục ngàn user cùng lúc, nếu cùng cấu hình máy chủ tương tự thì điều đó là không thể đối với PHP, Java, Python, .Net.

Những framework chạy trên Nodejs nổi tiếng trong lĩnh vực này là: Meteor, SailsJS, Hapi.JS, Socket.IO, Express.JS, Mojito, Derby, Mean.JS, Koa.JS, Total.JS. Trong đó mình có cái nhìn thiện cảm với Meteor vì cung cấp sẵn nhiều tiện ích, học dễ và cộng đồng lớn, việc viết ứng dụng tính bằng ngày. Đơn cử tính dễ học là bạn có thể làm theo ứng dụng To Do hoàn thành trong vòng 2~3h đồng hồ với khả năng tính hợp dễ dàng với Cordova/Phonegap để tạo ra ứng dụng trên điện thoại di động, Meteor hướng tới tính hoàn thiện đơn nhất chỉ với Javascript. Tiếp đó là SailsJS có điểm mạnh là khả năng tạo code giúp cho thời gian phát triển ứng dụng cũng rất nhanh, Hapi thì có thế mạnh về API, Socket.IO thì cái tên cũng đủ nói lên về điểm mạnh về kết nối bằng socket. ExpressJS và KoaJS thì khá là gọn nhẹ nhưng cung cấp đủ mạnh các thành phần để tạo ra ứng dụng web, nếu đã nắm rõ thì có thể ra các framework khác dễ dàng, vì đa phần các framework khác cũng đều có sử dụng 2 anh chàng này.

Tôi muốn lập trình ứng dụng điện thoại di động – Hybrid

Ứng dụng hybrid giúp cho lập trình viên web dễ dàng tạo ra ứng dụng cho điện thoại di động hoàn toàn trên nền tảng web: Javascript, HTML và CSS, được đóng gói bởi Cordova/Phonegap tạo ra ứng dụng chạy trên trên các nền tảng iOS, Android và Window, Blackberry…cho cả diện thoại di động, máy tính bảng, website, ứng dụng máy tính (xem phần tiếp) chỉ với một mã nguồn duy nhất.

Những nền tảng nổi tiếng cho thể loại này là IonicFramework dựa trên Angular, Mobile Angular UI cũng dựa trên Angular, Intel XDK dựa trên JQuery Mobile, Appcelerator Titanium, Sencha Touch, KendoUI .

Trong phân khúc này, Ionic Framework có vẻ trội nhất vì dựa trên AngularJS một cách chặt chẽ, đồng thời cũng cung cấp nhiều khả năng, công cụ để phát triển ứng dụng di động một cách dễ dàng, bên cạnh đó là Sencha Touch cũng rất mạnh, nếu bạn theo hướng AngularJS thì nên chọn Ionic Framework.

Javacript làm được gì – Phần 1 đến đây tạm ngưng, phần 2 sẽ nói về ứng dụng cho điện thoại di động Native (React Native là tương lai của ứng dụng di động?), về ứng dụng trên máy tính đa nền tảng, phần mở rộng cho trình duyệt web, soạn thảo văn bản (Text editor) và vạn vật kết nối (Internet of things), các bạn đăng ký nhận tin để đọc bài mới nhất nhé.

The post Javascript làm được 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.