Gatsby Js là gì?

Gastby JS là nền tảng dùng để xây dựng website và web app để hoạt động ở hiệu suất rất cao. Gatsby JS sử dụng React và Graphql là thành phần chính, trái tim của nền tảng. GatsbyJS được sử dụng khá rộng rãi và trở thành tên tuổi khá được chú ý hơn sau khi gọi vốn được 15 triệu đô ở vòng gọi vốn Series A.

Tương lai của web chính là mobile dựa trên Progressive Web App (PWA), vì vậy với sự phát triển của Javascript tạo ra xu hướng JAM stack (Javascript + API + Mockup), giúp cho việc phát triển website ngày càng thú vị và đơn giản với Gatsby Js.

Web tĩnh và sự khác biệt của GatsbyJs

Tại sao lại cần web tĩnh?

Trong bài giới thiệu Kỹ thuật lập trình website tĩnh thì mình có nói cũng khá đầy đủ rồi. Web tĩnh thật ra không hề xa lạ., về cơ bản bất kỳ 1 website “động” nào cũng đều có cơ chế cache. Website có lượng truy cập càng lớn thì càng phải có cache. Vậy cache ở đây được xem như là dữ liệu tĩnh tồn tại trên 1 khoảng đơn vị thời gian nhất định.

Cache thì có nhiều cấp độ, từ cơ sở dữ liệu, đến object cache, fragment cache (cache từng phần trên 1 trang), và cấp cuối thường là HTML cache (bỏ qua các lớp cache ở cấp độ hardware). Thì ở cấp cuối “HTML cache” cũng chính là thứ mà sản phẩm cuối cùng của Gatsby JS tạo ra. Và thông thường, thì thư mục cache này được đồng bộ ra các máy chủ khác nhau, giúp tốc độ truy cập nhanh vì bỏ qua hàng ngàn dòng code xử lý và thời gian thao tác I/O.

Một điều khá khôi hài nằm ở chỗ này, chúng ta thường thuê những máy chủ khá khủng để chạy các website mà phần lớn tài nguyên trong đó không phục vụ nhu cầu cuối cùng. Không những lãng phí mà hiệu quả về tốc độ cũng không được cao.

Sự khác biệt của Gatsby JS

Khác biệt so với web động có cache

Web động tạo cache ở thời điểm run-time, điều này đòi hỏi luôn luôn phải duy trì 1 hệ thống máy chủ có đầy đủ cơ sở dữ liệu, các công cụ hỗ trợ đi kèm. Trong khi Gatsby Js build xong ra tập tin tĩnh, thì máy chủ dùng để build có thể tắt đi, có thể giúp tiết kiệm chi phí rất tốt.

Khác biệt so với web tĩnh thuần túy

Web tĩnh thuần túy sẽ tạo ra tập tin HTML hoàn toàn cho mọi liên kết. Vì vậy nếu người dùng truy cập liên kết A, sau đó nhấn vào liên kết B, sẽ tải toàn bộ tập tin HTML của trang B. Gatsby cũng tạo ra HTML cho toàn bộ liên kết, tuy nhiên đồng thời tạo thêm tâp tin JSON nội dung của tất cả các trang. Sự khác biệt là với Gatsby, khi truy cập vào trang A và nhấn vào liên kết B, sẽ tải tập tin JSON nội dung mà trang B hiển thị. Và thông thường tập tin JSON và các tập tin JS liên quan này chỉ chiếm 30% so với 1 trang html hoàn chỉnh.

Ví dụ ở website reactjs.org, từ trang chủ đến trang Docs (Getting Started), thì các tài nguyên cần tải chiếm 12KB, trong khi đó nếu truy cập trực tiếp thì trang HTML này tải cần ~24KB (không tính các request phụ trợ khác), xét tương đối thì tối ưu được 50%.

Ưu và khuyết điểm của Gatsby Js

Hãy cùng Fullstack Station tìm hiểu về ưu và khuyết điểm của Gatsby Js là gì nhé.

Ưu điểm

Triển khai với chi phí thấp và dễ dàng

Việc tách biệt cơ sở dữ liệu và chỉ phục vụ hoàn toàn trên dữ liệu tĩnh giúp việc triển khai rất dễ dàng, có thể dùng bất kỳ máy chủ nào với chi phí rất thấp. Ví dụ với Amazon S3: 0.005$/1000 requests (PUT, COPY, POST, LIST) thì với website có 100k pages, thì mất 100*2 *0.005 = 1$ cho việc quản lý cập nhật mỗi ngày. Với 1 site có 100k pages thì chi phí cập nhật như vậy là quá rẻ. (2 ở đây được xem là mỗi trang có 2 tập tin HTML+JSON). Xem thêm Escalade Sports: From $5000 to $5/month in Hosting With Gatsby.

Tốc độ cao:

Là một framework để tạo web tĩnh (tương tự như Jekyll), tối ưu tốc độ và bảo mật cho website. Việc chuyển qua lại giữa các trang trong website cũng rất nhanh do tất cả các style, html và javascript sẽ được tải trong lần tải đầu tiên, khi người dùng ấn vào một bài viết trong trang web của bạn, nội dung mới sẽ được tải về dưới dạng JSON và hiển thị lên, không cần tải lại toàn bộ trang. Việc cấu hình các plugin cho phép tối ưu việc tải ảnh (progressive) và preload (tải trước nội dung của các liên kết người dùng có thể ghé qua) sẽ cho trang web có tốc độ cực cao.

Tối ưu SEO

Gatsby JS thân thiện với các công cụ tìm kiếm vì các truy cập lần đầu đối với mọi trang đều là HTML. Gatsby kết hợp cả 2 cơ chế Client rendering và Server rendering nên luôn đảm bảo SEO tốt.

Hỗ trợ Progressive Web Apps:

Thêm website của bạn vào màn hình home của di động và người dùng có thể dùng nó như một app di động luôn.

An toàn

Với toàn bộ tập tin là html và json, toàn bộ hệ thống sẽ an toàn trước các kiểu tấn công. Hơn nữa, sẽ không còn phải lo lắng gây ảnh hưởng người dùng khi cập nhật hệ thống (framework, app, database…).

Đơn giản

Thực sự bắt đầu Gatsby rất đơn giản dành cho ai đã quen với React, Graphql, Markdown… Gatsby thừa hưởng các tính năng hay của React và Graphql.

Nhược điểm

• Gatsby.js chuyên dùng để tạo website tĩnh, nên việc triển khai hệ thống bình luận và tìm kiếm thường phải dựa vào các dịch vụ bên thứ 3 như: Disqus, Algolia, Facebook…Mặc dù bạn hoàn toàn có thể tự phát triển dạng hybrid để tạo web động trong Gatsby Js.
• Hơi khó khăn để sử dụng đối với những người chưa quen React, Graphql
• Thời gian build lâu: với cái starter default mà đã build gần 2s, với những site lớn khoảng 100k ~ 1M trang, thì thời gian build tầm 10~30 phút, chưa kể thời gian triển khai và đồng bộ hoàn toàn đến tất cả các edge (các node trong CDN). Tuy nhiên vẫn có những cách khắc phục ở mục Fullstack Station Tips
• Tốn kém để chuyển đổi hệ thống hiện tại: để chuyển hệ thống sang sử dụng Gatsby JS sẽ tốn chi phí không hề nhỏ. Chúng ta cần phải cân nhắc kỹ lưỡng giữa lợi ích mà web tĩnh mang lại trong tương lai với chi phí chuyển đổi.
• Với wordpress, hay 1 nguồn nội dung khác, thì phần “hình ảnh trong bài viết” có thể không tận dụng được khả năng xử lý hình ảnh của Gatsby Js.
• Mất đi một số tính năng hay của các nền tảng khác cung cấp. Ví dụ với WordPress mình kết hợp với OneSignal, khi mỗi bài viết được xuất bản thì sẽ tự động gởi thông báo đến tất cả các người dùng đang theo dõi (subscribers).
• Triển khai cho người dùng bình thường còn phức tạp. Thật khó để sử dụng chức năng hẹn giờ xuất bản, hoặc chỉ là những cập nhật nho nhỏ.

Gatsby JS phù hợp với dự án web nào?

Dựa trên những ưu điểm của Gatsby, FS nhận thấy phù hợp với các dự án web ít thay đổi về nội dung, số lượng trang không quá lớn, tầm 10000 trang đổ lại. Các trang về tin tức có rủi ro khi cần xoá bài khẩn cấp, vì thời gian build, cache, deploy cũng không thể nhanh được. Tuy nhiên nếu có các phương án chặn link khẩn cấp từ lớp Network thì về cơ bản không vấn đề gì.

Phương thức hoạt động

Khi chạy ở mode “develop” thì bản chất Gatsby Js là một create-react-app (CRA), thừa hưởng toàn bộ tính năng của CRA như HOT RELOAD.

Sau khi build ra, thì bao gồm các file json và html, css, js, image…Chúng ta chỉ cần đưa thư mục chứa các tập tin này lên máy chủ là xong.

Một số CMS tương thích tốt với Gatsby

Đa phần các CMS đều có thể hoạt động với Gatsby thông qua API (Restful hoặc Graphql), do vậy việc sử dụng CMS nào phụ thuộc vào việc bạn sử dụng quen CMS nào nhất. Hoặc CMS nào tiện lợi nhất, hoặc là CMS bất kỳ tự phát triển. Miễn sao có API lấy nội dung là được.

Tuy nhiên, các CMS sau thì khá nổi tiếng và có plugin để lấy nội dung (từ API chuyển về dữ liệu graphql trong Gatsby)

• Netlify CMS 
• Buttercms
• Ghost
• Contentful
• WordPress
• Strapi
• Prismic

Trước khi bạn muốn sử dụng gatsby, hãy kiểm tra xem đã có plugin hỗ trợ chưa, ví dụ tìm kiếm với từ khóa “wordpress” https://www.gatsbyjs.org/plugins/?=wordpress

Fullstack Station Tips

• Gatsby tạo cho website hoạt động tốt và bền vững

The post Gatsby Js là gì appeared first on Fullstack Station.

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.

Mình đánh giá cao bộ NativeBase, ngoài việc UI tách biệt cho iOS và android chỉ dựa trên 1 mã nguồn ra, thì NativeBase còn cả 1 hệ thống giao diện (trả phí) khác, mặc dù không miễn phí, nhưng việc đầu tư một sản phẩm có mức hoàn thiện cao thì vẫn có thể chấp nhận được. Nếu bạn có thể khám phá NativeBase, sau này bạn có thể tạo theme và bán nó thông quan NativeBase, cũng là một hướng kiếm thêm thu nhập không tồi.

The post Tổng hợp các bộ công cụ bắt đầu lập trình React Native dễ dàng appeared first on Fullstack Station.

Universal Javascript App là gì

Universal Javascript App là ứng dụng web được viết bằng javascript (trước đây còn được gọi là isomorphic), chạy được cả server và phía browser chung một mã nguồn. Tất nhiên có một số chỉ cần chạy phía browser như các hiệu ứng chuyển trang, chuyển động, hiệu ứng của các phần tử, hoặc có sử dụng local storage của browser, còn một số mã nguồn liên quan đến lớp xử lý (business logic) hoặc các hoạt động đặc thù của server như phiên làm việc (session), xác thực (authentication),…

Điểm đặc biệt của Universal Javascript App ở phía server thường là cấu trúc tách biệt hoàn toàn:

• Với dữ liệu, ta sẽ dùng API chứ không kết nối trực tiếp đến database
• Với phiên làm việc và xác thực cũng sẽ dùng server riêng chẳng hạn với giao thức OAuth hoặc JWT

Với kiến trúc này, mọi công việc sẽ được chia nhỏ và không bị ảnh hưởng nhiều khi một thành phần bị thay đổi (Microservices).

Next.js là gì

Next.js là một framework nhỏ gọn được xây dựng từ React, Babel và Wepack được tạo ra để giúp lập trình viên tạo ứng dụng web React có tính năng SSR (Server Side Render). Như các bạn đã biết với React.js, thì chúng ta đang xây dựng ứng dụng front-end với UI được quản lý bởi React, điểm yếu là chỉ client-side-render, nên việc SEO sẽ gặp khó khăn (có thể khắc phục bằng hệ thống ở server có khả năng xử lý javascript như Prerender.io), Next.js giúp chúng ta có tính năng SSR rất dễ dàng, ngoài ra còn có các tính năng đặc trưng (thừa kế Babel và Webpack) như:

• Hot Module Replacement (HMR) – Webpack
• Đóng gói bundle (có code split) và chuyển mã nguồn (Babel ví dụ từ ES6 -> ES5 cho trình duyệt web hiểu)
• Tạo chỉ mục (indexing) cho các tập tin trong thư mục pages
• Phục vụ static files, với Next.js thì không cần webserver khác (Có thể dùng Nginx làm reversed proxy)

Xây dựng ứng dụng web Universal Javascript App với Next.js

Mục tiêu

Đây là kết quả của chúng ta sẽ làm, liệt kê thẻ bài có pagination, sau lần tải đầu tiên do server render thì tất cả từ giờ các link đều chạy bằng ajax:

Cài đặt

Trên trang chủ của Next.js hướng dẫn sử dụng bằng npm, tuy nhiên như bài viết YARN sẽ thay NPM  quản lý thư viện Javascript đã nói thì YARN nhanh hơn npm nhiều, nên chúng ta sẽ sử dụng yarn để thiết lập dự án.

mkdir demo-nextjs
cd demo-nextjs
yarn init #điền các thông tin tùy bạn
yarn add next #thêm next.js vào dự án

Sau khi yarn tải và cài đặt các gói thư viện cần thiết, chúng ta cần thêm đoạn sau vào file package.json:

{
  //... # các dòng đã có thì giữ nguyên
  "scripts": {
    "dev": "next"
  }
}

Tập tin package.json sẽ như hình sau:

Tiếp theo sẽ tạo thư mục có tên là pages

mkdir pages

Tiếp tục tạo tập tin index.js trong thư mục pages, với nội dung như sau:

import React from 'react'
export default () => <div> Hello World!</div>

Một component rất đơn giản cho sự khởi đầu hoàn hảo:

yarn run dev

Bây giờ mở http://localhost:3000 bạn sẽ thấy “Hello world”

Điểm khác biệt với khi bạn sử dụng React.js thường với Next.js là SSR là mã nguồn được render từ server, do vậy, trong HTML trả về khi view-source sẽ có như sau:

...<body><div id="__next"><div data-reactroot="" data-reactid="1" data-react-checksum="1574179767"> Hello World!</div></div>...

Đây là điểm đặc biệt sẽ giúp cho SEO của bạn tốt hơn, mặc dù Google đã có thể chạy javascript trên trang web của bạn để index, nhưng các các hệ thống tìm kiếm khác như Bing, Yahoo thì không.

Trước khi tiếp tục, chúng ta sẽ tìm hiểu sơ qua cấu trúc thư mục bên trong dự án sử dụng Next.js

• pages/index.js tương đương route là /
• pages/about.js tương đương route /about
• pages/account.js tương đương route /account

Cứ như vậy đơn giản là tạo file là bạn có thể tạo route, với cấp con thì sẽ tạo thư mục, ví dụ:

• pages/account/manager.js tương đương /account/manager
• pages/account/admin.js tương đương /account/admin

Khi bạn tạo thư mục account thì cần xóa tập tin account.js (mặc dù /account và /account/ là khác nhau, nhưng đây là quy định mặc định của Next.js)

Chú ý: khi bạn tạo thêm tập tin hay thư mục mới thì phải restart lại (Ctrl+C & yarn run dev)

Kết nối dữ liệu

Do đặc tính của Universal Javascript App là kể từ khi server đã render một lần, thì sau đó, toàn bộ đều thực thi dưới client, nên sẽ sử dụng API riêng biệt với app, sửa file index.js như sau:

import React from 'react';
import 'isomorphic-fetch'

export default class App extends React.Component {
    static async getInitialProps () {
        const res = await fetch('https://api.pokemontcg.io/v1/cards?pages=1&pageSize=10')
        const data = await res.json()
        return data;
    }
    render(){
        return (
            <div>
            {this.props.cards.map((card, i) => (
                <div key={i} style={{width: 200, float: 'left'}}>
                <div  style={{margin: 10}}>
                        <img src={card.imageUrl} style={{width: 160}}/>
                    </div>
                </div>
            ))}
            </div>
        )
    }
}

Chúng ta sẽ được kết quả như sau:

Trong đó, hàm getInitialProps sẽ được thực hiện đầu tiên và lấy dữ liệu từ một API khác, thông thường nếu dùng theo cấu trúc database, bạn sẽ kết nối máy chủ dữ liệu và lấy dữ liệu ở bước này. Nhưng với Universal Javascript App, thì ở đây nên được dùng là API, để hình dung rõ hơn chúng ta sẽ đi tiếp và mình sẽ giải thích kỹ hơn.

Để giao diện đẹp hơn chút, mình dùng spectre.css: thêm component Head để gắn spectre.css, với component này thì Next.js sẽ tự động di chuyển phần trong <Head> vào thẻ head của html

import React from 'react';
import 'isomorphic-fetch'

import Head from 'next/head'
import Link from 'next/link'
export default class App extends React.Component {
    static async getInitialProps () {
        const res = await fetch('https://api.pokemontcg.io/v1/cards?pages=1&pageSize=12')
        const data = await res.json()
        return data;
    }
    render(){
        return (
            <div className="container">
            <Head>
                <meta name="viewport" content="width=device-width, initial-scale=1" />
                <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.1/build/pure-min.css" />
            </Head>
            <div className="columns">
            {this.props.cards.map((card, i) => (
                <div className="column col-3" key={i}>
                <div  style={{margin: 10}}>
                    <Link href={`/cards?id=${card.id}`} >
                        <img src={card.imageUrl} className="img-responsive"/>
                    </Link>
                    </div>
                </div>
            ))}
                
            </div>
            </div>
        )
    }
}

Ở đây, mình thêm vào component Link cho thẻ bài, để tiếp tục phần tiếp theo là xem chi tiết thẻ bài.

Trang chi tiết

Tạo thư mục pages/cards và file index.js như sau:

import React from 'react'
import 'isomorphic-fetch'

import Head from 'next/head'
import Link from 'next/link'
export default class App extends React.Component {
    static async getInitialProps({query}) {
        const res = await fetch('https://api.pokemontcg.io/v1/cards/' + query.id)
        const data = await res.json()
        return data
    }
    render() {
        return (
            <div className="container">
                <Head>
                    <meta name="viewport" content="width=device-width, initial-scale=1"/>
                    <link
                        rel="stylesheet"
                        href="//cdn.bootcss.com/spectre.css/0.1.29/spectre.min.css"/>
                </Head>
                <ul className="breadcrumb">
                    <li className="breadcrumb-item">
                        <Link href="/">Home</Link>
                    </li>
                    <li className="breadcrumb-item">
                        {this.props.card.name}
                    </li>
                </ul>
                <div className="columns">
                    <div className="column col-4">
                        <p><img src={this.props.card.imageUrl}/></p>
                    </div>
                    <div className="column col-8 empty">
                        <div className="form-horizontal">
                            <div className="form-group">
                                <div className="col-3">
                                    <label className="form-label">Name</label>
                                </div>
                                <div className="col-9">
                                    <span>{this.props.card.name}</span>
                                </div>
                            </div>
                            <div className="form-group">
                                <div className="col-3">
                                    <label className="form-label">HP</label>
                                </div>
                                <div className="col-9">
                                    <span>{this.props.card.hp}</span>
                                </div>
                            </div>
                            <div className="form-group">
                                <div className="col-3">
                                    <label className="form-label">Series</label>
                                </div>
                                <div className="col-9">
                                    <span>{this.props.card.series}</span>
                                </div>
                            </div>
                            <div className="form-group">
                                <div className="col-3">
                                    <label className="form-label">Set</label>
                                </div>
                                <div className="col-9">
                                    <span>{this.props.card.set}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        )
    }
}

Điểm đặc biệt ở component này là chúng ta sử dụng query từ URL để lấy id, sau đó thực hiện fetch lấy dữ liệu như ở trang liệt kê. Ở đây mình có thêm cái breadcrumbs để quay về trang chủ, thì khi quay lại trang chủ, bạn sẽ thấy tốc độ nhanh như khi xem 1 thẻ bài vậy, vì component chỉ load API và render lại trang hoàn toàn ở client, và không liên quan gì đến server đã render trang trước đó.

Phân trang

Để trang chủ hoặc là trang liệt kê lá bài có thể phân trang, chúng ta sẽ sửa lại pages/index.js để nhận tham số page và thêm đoạn mã phân trang, để ví dụ được đơn giản thì mình để tạm 3 trang:

import React from 'react';
import 'isomorphic-fetch'

import Head from 'next/head'
import Link from 'next/link'
export default class App extends React.Component {
  static async getInitialProps({query}) {
    let page = 1
    if (query.page != undefined && parseInt(query.page)) {
      page = query.page
    }
        const res = await fetch(`https://api.pokemontcg.io/v1/cards?page=${page}&pageSize=12`)
        const data = await res.json()
        return data;
    }
  render() {
        return (
            <div className="container">
            <Head>
                <meta name="viewport" content="width=device-width, initial-scale=1" />
                <link rel="stylesheet" href="//cdn.bootcss.com/spectre.css/0.1.29/spectre.min.css" />
            </Head>
            <div className="columns">
            {this.props.cards.map((card, i) => (
                <div className="col-md-3" key={i}>
                <div  style={{margin: 10}}>
                    <Link href={`/cards?id=${card.id}`} >
                    
                    {<img src={card.imageUrl} className="img-responsive"/>}
                    </Link>
                    </div>
                </div>
            ))}
                
            </div>
            <div className="divider"></div>
            <div className="container">
              <div className="float-right">
              <ul className="pagination">
                  <li className="page-item">
                      <Link href={`/?page=1`} >1</Link>
                  </li>
                  <li className="page-item">
                      <Link href={`/?page=2`} >2</Link>
                  </li>
                  <li className="page-item">
                      <Link href={`/?page=3`} >3</Link>
                  </li>
                </ul>
              </div>  
              </div>  
            </div>
        )
    }
}

Như vậy là chúng ta đã hoàn thành xong ứng dụng web đơn giản, với mục tiêu là giới thiệu khái niệm kỹ thuật Universal Javascript App với Next.js

Fullstack Station’s Tips

• Mặc dù khi sử dụng component Link, Next.js sẽ tạo ra mã html, nhưng nếu bạn sử dụng mã html trực tiếp hay vì dùng component Link, thì tính năng Universal sẽ mất đi, có nghĩa là browser sẽ tải lại trang mới được tạo ra từ server.
• Sử dụng Next.js vẫn có khuyết điểm lớn về vấn đề router, vì router được sử dụng là của Next.js nhưng bạn lại không sử dụng React Router để thay thế được. Trong khi tính năng “params matching” lại là điều bất khả thi tại thời điểm này, ví dụ “/cards/:cardSlug” là không được (ảnh hưởng SEO nếu bạn làm website).

Code sample & Demo

https://github.com/virusvn/demo-nextjs

Demo: http://fullstackstation.com:3333/

Có nên sử dụng Next.js không?

Theo mình thì Next.js khá tốt, ngoại trừ vấn đề router sẽ được khắc phục trong thời gian tới thì Next.js phù hợp cho bạn muốn xây dựng ứng dụng nhanh, có tốc độ nhanh mà không phải mất nhiều thời gian để thiết lập, cấu hình và lập trình phía server. Khi sử dụng Next.js, thì bạn thỏa sức làm việc với React, tách biệt phần API mà vẫn có tính năng SSR – đây là ưu điểm rất lớn cho các ứng dụng Javascript.

Như đã nói ở phần giới thiệu Universal Javascript là gì ở trên, thì với kiến trúc microservices, nếu bạn tách được phần dữ liệu, xác thực ra ở một ứng dụng riêng, thì Next.js rất phù hợp, và dù sau này bạn không thích Next.js nữa, thì vẫn có thể tái sử dụng React components – chiếm phần lớn thời gian lập trình.

Cập nhật: Next.js đã có bản beta version 2, cho tùy chỉnh route và khả năng tích hợp với nhiều thứ khác.

The post Hướng dẫn xây dựng Universal Javascript App với Next.js (Fullstack React) appeared first on Fullstack Station.

YARN là công cụ quản lý thư viện javascript mã nguồn mở tốc độ cao, tin cậy và bảo mật nhằm thay thế NPM (Node Package Management). Được hình thành bởi các kỹ sư Facebook, Google, Exponent và Tilde, và đã được sử dụng thực tế mức Production tại các công ty trên.

Trang chủ: https://yarnpkg.com/

Github: https://github.com/yarnpkg/yarn

Đây là dự án bắt đầu được viết từ tháng 1/2016, sau quãng thời gian thử nghiệm và hoàn thiện đã được mở ra thành mã nguồn mở, và thật không có gì ngạc nhiên khi với những tính năng nổi trội vượt bậc đã có 10.000 stars chỉ trong 1 ngày tại Github. Chứng tỏ sự thành công và là tín hiệu thay thế rõ ràng NPM.

Đặc trưng của YARN

Tốc độ: YARN sẽ tạo cache cho tất cả các gói đã được tải về, và tải đồng thời nhiều gói cùng lúc nên tốc độ download rất nhanh.

Tin cậy: sử dụng tập tin lock (tương tự composer) với format chi tiết nhưng ngắn gọn, đảm bảo tính nhất quán khi cài đặt các gói giữa các hệ thống (ví dụ máy dev và máy chủ)

Bảo mật: sử dụng checksum để đảm bảo tính nguyên vẹn của code trước khi nó được thực thi.

Sau khi thử nghiệm thì mình thấy quả thật tốc độ quá tốt, nhất là đối với những bạn sử dụng React Native mà bị lỗi 4968 (lỗi này thường phải xóa thư mục node_modules và cài lại) thì giống như địa ngục vậy, thường mất hơn 5 phút :((. Thật ra thì npm cũng có cache, nhưng kiến trúc, cách thức của 2 bên khác nhau và YARN nổi trội hơn.

Tính năng của YARN

Offline mode: khi đã tải về, YARN sẽ cache lại và khi có thể cài đặt lại không cần internet.

Deterministic: các gói thư viện sẽ được cài đặt nhất quán cho dù thứ tự cài đặt khác nhau cho tất cả các máy

Network Performance: sử dụng hiệu quả hàng đợi các request và tránh waterfall các request để tối ưu tốc độ mạng.

Multiple Registries: cài đặt các gói từ các registries như Bower hay NPM đều đảm bảo workflow giống nhau.

Network Resilience: nếu một request bị fail thì nó không làm cho tiến trình bị dừng lại, khác với npm là nếu npm bị lỗi thì bị dừng lại., không những vậy mà còn có khả năng cố gắng thử lại.

Flat Mode: giải quyết việc không đồng nhất phiên bản của các gói thành 1 gói để tránh tạo trùng lặp

Cài đặt

Cài đặt thì các bạn xem ở đây, được ghi rõ cho từng dòng MacOS, Window, Linux.

Hướng dẫn sử dụng

Cách sử dụng tương đối đơn giản như npm

yarn init

yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]

yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]

yarn remove [package]

yarn

yarn install

Do YARN cũng sử dụng package.json nên nếu dự án đã có thì việc sử dụng YARN cũng không khác mấy, chỉ cần bạn xóa tất cả các thư mục trong node_modules, sau đó dùng yarn để cài lại.

The post Công cụ quản lý thư viện YARN sẽ thay thế NPM appeared first on Fullstack Station.

Câu trả lời ngắn gọn: tùy thuộc vào bạn, làm sao viết code thoải mái để Application State tối giản nhất có thể mà không làm mất tính tin tưởng vào ứng dụng.

(Bài viết này sử dụng cho cả React Js và React Native)

Một số khái niệm

Application State: hay còn gọi là Redux Store chứa trạng thái của ứng dụng bao gồm dữ liệu từ máy chủ, kết quả tương tác/hành động của người dùng, dữ liệu từ thiết bị (GPS, Clock, Accelerometer…)
Local State: là trạng thái nội tại của  component, sự thay đổi bất kỳ trong Local State không làm ảnh hưởng đến Application State

Presentation Component: là component chỉ có nhiệm vụ hiển thị, nhận tương tác từ người dùng.
Container Component: là component bao bọc Stateless/Presentation component và truyền dữ liệu cho các component này bằng props.

Stateless Component: đây là một phiên bản của Presentation Component nhưng không chứa state, thông thường được viết bằng hàm đơn thuần, mọi thứ đều được truyền thông qua function’s arguments (props).

Khi nào nên sử dụng Redux

Trước tiên, xin trích dẫn những câu trả lời từ những người tạo ra React và Redux:

Pete Hunt (Cựu thành viên tạo ra React):

You’ll know when you need Flux. If you aren’t sure if you need it, you don’t need it.

Dan Abramov (Tác giả Redux):

I would like to amend this: don’t use Redux until you have problems with vanilla React.

Như vậy, chỉ sử dụng Redux/Flux khi và chỉ khi bạn gặp vấn đề với React. Lý thuyết là vậy, nhưng để biết được tình huống nào gọi là “vấn đề” quả thật không hề dễ dàng, và khi đã gặp vấn đề thì lượng code đã viết cũng đã trở nên kha khá, và việc tích hợp Redux sẽ trở nên khó khăn hơn – tất nhiên không phải là quá khó, nhưng thay vì business logic  bạn đặt ở 1 chỗ (có thể chia nhiệm vụ cho từng thành viên trong nhóm khác nhau, có thể test dễ dàng hơn) thì business logic được đặt ngay trong chính React’s component => việc tái cấu trúc luồng hoạt động của dự án ước chừng sẽ khó khăn là vì vậy.

Như hình mô tả dưới đây, mỗi node là 1 component, việc tách ra trạng thái tổng, giúp chúng ta dễ bảo trì phần Model (business logic) và phần View (component) trong mô hình MVC, cũng như dễ dàng sử dụng SSR (Server Side Rendering):

Theo điều kiện nguồn lực, dần dà việc tái cấu trúc dự án để sử dụng Redux dần trở nên bất khả thi, nhất là đối với những dự án không biết tách “Container Component” và “Presentation Component” ra riêng biệt:

Do vậy, yếu tố quyết định là phải phân biệt được “Container Component” và “Presentation Component”, khi đó Container Component sẽ làm việc với Application State, còn Presentation Componnent sẽ có Local State.

Một điều dễ nhận ra là khi áp dụng Redux, mặc dù nó tốt thiệt – giúp cho ứng dụng dễ hiểu, dễ bảo trì, nhưng lượng code phải viết sẽ nhiều lên kha khá. Cứ mỗi chức năng, ta cần phải viết Actions/Events -> Reducers -> Container Component -> Presentation Component, tương ứng bạn cũng sẽ viết Test cho chừng đó bước, vì vậy việc sử dụng Application State một cách hợp lý là điều cực kỳ quan trọng, giúp cho ứng dụng gọn nhẹ về mặt cấu trúc, code, và tài nguyên (bộ nhớ để lưu trữ Store)
Muốn tìm cách cải thiện ứng dụng sao cho dễ hiểu, dễ bảo trì thì đọc tiếp :). Mình cũng từng như bạn, cũng như rất nhiều lập trình viên khác sử dụng Redux bị rối khi thắc mắc không biết là khi nào nên dùng Application State (trạng thái của ứng dụng) khi nào nên dùng Local State (trạng thái của component) để làm sao đạt được mục đích là:

• Application State tối giản nhất có thể
• Sử dụng Local State để viết code ngắn gọn nhất có thể

Nếu bạn đọc xong mà vẫn không thích Redux, thì khi có vấn đề về việc trao đổi dữ liệu giữa component cha-con thì đọc ở bài: “Sử dụng context để giao tiếp giữa các component cha-con trong React”

Sử dụng Redux với React sao cho hiệu quả

Nếu bạn có sử dụng React Native thì cũng có biết là từ phiên bản 0.25 trở đi, thì cách viết import, creatClass có khác đôi chút:
0.24 trở về trước

import React, { Component, View } from 'react-native';

0.25+

import React, { Component } from 'react';
import { View } from 'react-native';

Qua đó để thấy rằng, React Native quay trở về đúng bản chất của nó khi hệ sinh thái React ra đời, đó là React Native chỉ đóng vai trò phần View, còn React sẽ đóng vai trò xương sống khởi tạo hệ sinh thái React. Mình đưa ra ý này là để nhấn mạnh tầm quan trọng của sự tách biệt giữa các thành phần, càng nhỏ thì càng dễ bảo trì, do vậy nếu vẫn chưa thông ở phần “Khi nào nên sử dụng Redux” thì bạn hãy nghiên cứu thêm rồi đọc tiếp nhé.

Làm sao để sử dụng Redux hiệu quả, thì câu trả lời đơn giản là một Câu hỏi: Có các “thành phần” bất kỳ nào của ứng dụng sử dụng “kết quả” của hành động thay đổi trạng thái hay không?
“Thành phần” ở đây có thể là UI components, hoặc lưu trữ vào local store, hoặc lưu trữ ở server. Chỉ cần mỗi khi bạn bắt đầu viết 1 chức năng, component hãy đặt câu hỏi trên cho những tương tác vào ứng dụng (có thể sự kiện từ nhiều phía khác nhau), thông thường Local State sẽ được sử dụng để quản lý sự tương tác của người dùng, ví dụ những sự kiện sau thì không cần thiết phải sử dụng Application State:

• Toggle một menu, hoặc accordion
• Input text, radio, select..: bình thường sẽ sử dụng Local State
  • Nếu các loại input là dạng search realtime, hoặc freeze search, filter cho mỗi ký tự nhập vào thì dùng Application State, bởi vì nó có tác động đến component khác
• Những tương tác của người dùng đối với ứng dụng chỉ là tạm thời mà có thể khi refresh ứng dụng, bạn không còn quan tâm. Vì nếu quan tâm, nghĩa là cần lưu trữ ở đâu đó, có nghĩa là nó đã tác động đến “thành phần” khác thì nên sử dụng Application State.

Fullstack Station’s Tips

Có nhiều lập trình viên khuyên nên viết Stateless Component bằng hàm thông thường, ví dụ:

import React, { PropTypes } from 'react'

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)

Bạn thường cũng sẽ viết theo, nhưng do lười biếng nên thiếu đoạn code sau:

Todo.propTypes = {
  onClick: PropTypes.func.isRequired,
  completed: PropTypes.bool.isRequired,
  text: PropTypes.string.isRequired
}

Và nếu tốt hơn nữa thì có thêm defaultProps cho những props không bắt buộc truyền vào. Việc thêm propTypes vào các component là cần thiết, để React sẽ kiểm tra cho bạn tính đúng đắn của component khi thực thi, sẽ báo cho bạn biết nếu props bị thiếu, từ đó giúp cho chất lượng sản phẩm được nâng lên, ít lỗi hơn. Rõ ràng với đoạn mã trên, nếu không ràng buộc bắt  buộc thì sự kiện onClick sẽ bị lỗi nếu truyền props bị thiếu!

Lời kết

Khi bạn áp dụng Redux vào React, những vấn đề về việc khi nào nên sử dụng Application State hay Local State đã được giải đáp phần nào trong bài viết này. Tùy trường hợp vào mỗi dự án có tính chất khác nhau mà việc áp dụng cũng sẽ linh động khác nhau, chứ không nhất thiết phải theo một mô hình nào, bởi vì ngay cả người tạo ra cũng không thể dự tính được hết các tình huống sử dụng thực tế của sản phẩm được. Nếu bạn có ý kiến để hỗ trợ bài viết tốt hơn, vui lòng comment nhé!

Bài viết tới, mình sẽ bàn luận tới 1 vấn đề cũng không có cách giải quyết hoàn hảo, đó là: nên đặt business logic vào actions hay reducers trong Redux?

The post Hướng dẫn sử dụng Redux hiệu quả trong ứng dụng React appeared first on Fullstack Station.

Không gì dễ hơn việc học bằng các ví dụ thực tế, nhất là đối với việc lập trình React Native. Giới thiệu với các bạn một nơi để học React Native qua ví dụ trong 30 ngày, sau khi hoàn thành xong các ví dụ này đảm bảo bạn sẽ trở nên chuyên nghiệp với React Native. Tuy nhiên, nếu bạn không có thời gian, chỉ cần nhìn lướt qua các ví dụ của từng ngày, sẽ gợi cho bạn những chức năng của ứng dụng mà bạn phát triển.

Bắt đầu 30 ngày

Ngày 1

Đồng hồ bấm giờ iOS, chức năng đầy đủ như ứng dụng gốc

Ngày 2

Ứng dụng thời tiết

Ngày 3

The Twitter app entrance animation.

Ngày 4

Using CocoaPods with React Native.

An example with JTSImageViewController.

Reference: https://shift.infinite.red/beginner-s-guide-to-using-cocoapods-with-react-native-46cb4d372995#.z6ooi3o0t

Ngày 5

MapView and find Geo location.

Ngày 6

Spotify welcome screen/

Ngày 7

Pan gesture basic. Move a baseball around.

Ngày 8

Google map style swipe menu

Ngày 9

Layout of Twitter user page

Ngày 10

Tumblr menu animation

Ngày 11

Using OpenGL with React native

Reference: https://github.com/ProjectSeptemberInc/gl-react-native

Ngày 12

Charts with React native

Reference: https://github.com/tomauty/react-native-chart

Ngày 13

A tweet UI

Ngày 14

A tinder swipe

Reference:https://github.com/meteor-factory/react-native-tinder-swipe-cards

Ngày 15

A time picker

Ngày 16

Unlock with gesture

Reference:https://github.com/spikef/react-native-gesture-password

Ngày 17

Native search bar and Fuzzy search

Reference:https://github.com/umhan35/react-native-search-bar

Ngày 18

Sortable. drag and reorder the blocks.

Ngày 19

Unlock app with touchID

Reference:https://github.com/naoufal/react-native-touch-id

Ngày 20

Sigle page Reminder

Ngày 21

Multi page Reminder

Ngày 22

Google Now

Ngày 23

Local WebView An example using D3.js

Ngày 24

Youtube scrollable tab

Reference: https://github.com/brentvatne/react-native-scrollable-tab-view

Ngày 25

Custome in-app browser

Reference: https://github.com/d-a-n/react-native-webbrowser

Ngày 26

Swipe and Switch

Ngày 27

iMessage Gradient. The chat bubble changes its gradient color with its pageY.

Reference: https://github.com/brentvatne/react-native-linear-gradient

Ngày 28

iMessage Image Picker.

Ngày 29

Quick action with 3D Touch. Quick action on launching days.

Ngày 30

Push Notification.

Thực hiện

Bước 1

Repo: https://github.com/fangwei716/30-days-of-react-native
Fork repo

Bước 2

Pull về và chạy cài đặt các gói cần thiết “npm install”

Bước 3

Android

Chạy lệnh
react-native run-android

iOS

Dùng XCode mở ios/ThirtyDaysOfReactNative.xcworkspace

Các công đoạn này khá đơn giản nên không cần nói nhiều. Điều quan trọng qua bài viết này mình nghĩ chỉ cần nhìn hình demo, và mở mã nguồn ra tham khảo, việc build cái ứng dụng này cũng không cần thiết lắm

The post Học React Native trong 30 ngày qua ví dụ thực tế 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.