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.

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.

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.

GraphQL3R là gì?

GraphQL3R là cách mình đặt tên cho thể thống nhất các công nghệ của Facebook: GraphQL, React Native, Redux và Relay để lập trình ứng dụng di động đa nền tảng bao gồm iOS và Android, từ client đến server.

Tất cả những công nghệ này mình đã có các bài viết giới thiệu nên sẽ không nói lại nữa:

• GraphQL là gì?
• React Native là tương lai của ứng dụng di động?
• Redux là gì?
• FlowType là gì?

FlowType tuy không được coi là nền tảng chính, nhưng đây là nền tảng hỗ trợ xuyên suốt quá trình lập trình rất quan trọng, và chắc chắn là rất hiệu quả khi phát triển với React Native.

Ngoài ra còn có Parse Server (BaaS) mình chưa có cơ hội để viết bài giới thiệu, đây là nền tảng đã được mã nguồn mở tuơng tự Firebase (không hướng đến tính Realtime bằng Firebase) nhưng bao gồm rất nhiều tính năng mạnh mẽ Push Notification, REST API, Social servive…

Do Relay đi chung với GraphQL, React, không được hoặc ít sử dụng độc lập với các nền tảng khác, nên có thể xem như là 1 phần phụ của bộ GraphQL3R này.

Những công nghệ này được dùng để viết ứng dụng F8 (Facebook Conference 2016) vừa qua, Facebook cũng cố gắng đưa bộ công nghệ này đến với mọi người với trang web MakeItOpen. Bao gồm các bước, tài liệu:

• Kế hoạch viết ứng dụng
• Phân tích thiết kế ứng dụng đa nền tảng
• Luồng dữ liệu
• Kiểm thử

Tại sao nên sử dụng GraphQL3R

Thứ nhất, đây là bộ nền tảng mã nguồn mở từ A->Z duy nhất tính đến thời điểm hiện nay dành cho ứng dụng di động Native (sức mạnh của React Native thì bạn xem thêm ở bài React Native là tương lai của lập trình ứng dụng di động). Tổng lượng stars của tổ hợp công nghệ này khoảng hơn 100k, đây là con số cực kỳ ấn tượng mà không có một tổ hợp nào có thể đạt được!

Thứ hai, những công nghệ này đều được sử dụng trong môi trường sản phẩm (Production) bởi các công ty, sản phẩm công nghệ hàng đầu như: Facebook, Instagram, Airbnb, Uber

Thứ ba, mang những tinh tuý của lập trình hiện đại như Time travel (từ redux), Hot Module Replacement (Webpack) giúp cho thời gian lập trình ứng dụng di động giảm đi rất nhiều, bạn không còn phải build khi lập trình ứng dụng di động native cho iOS và Android nữa. Cũng như việc debug, test ứng dụng sẽ đơn giản hơn, tiết kiệm thời gian. Ứng dụng cũng trở nên đáng tin cậy hơn với Redux: Single source of true!

Thứ tư, tổ hợp này khá linh hoạt, bạn có thể tách phần client từ React Native ra, dùng phần còn lại với Angular 2 (hoặc Ionic Framework), hoặc tất nhiên với ReactJs. Phần GraphQL có thể dùng với nhiều nguồn dữ liệu khác nhau, nên có thể thay thế Parse.

Thứ năm, ….n, thật sự 4 điểm trên có thể bao quát gần hết các đặc điểm để chọn nền tảng rồi, nên nói thêm nữa cũng thừa

GraphQL3R không dành cho tất cả

Đúng là tổ hợp GraphQL3R rất rất mạnh, nhưng chính vì vậy chính là điểm yếu của nó khi bạn phải có quá nhiều thứ để học. Để hoàn thành lập trình ứng dụng di động mà học hết mấy thứ này bao gồm lập trình cho tới quản lý server, phân tích thiết kế … thì quả là không thể!

Vì vậy, để áp dụng tổ hợp này, bạn cần có một nhóm khoảng 3 người trở lên, rất thích hợp cho start-up, mình chưa thấy điểm yếu của tổ hợp này dành cho viết bất cứ loại ứng dụng nào – ngoại trừ game do phải dùng đồ hoạ nhiều, nên nếu thay phần client thì các phần sau cũng không còn giá trị mấy.

Nếu bạn là cá nhân lập trình ứng dụng di động, theo mình thì nên sử dụng React Native thôi, còn phần backend thì nên sử dụng Firebase, hoặc Meteor (Xem thêm bài Điều gì khiến Meteor 1.3 trở nên đặc biệt), hoặc nếu bạn thích Meteor và GraphQL thì có thể nghiên cứu Apollo Stack.

Bí kíp lập trình ứng dụng di động trong tay bạn!

Nhiều lúc nghiên cứu cái hệ sinh thái của Facebook làm cho mình hứng thú một cách điên cuồng, mình yêu cái cách mà React/React Native hoạt động, cách mà Redux hoạt động, kết hợp với cái cách mà Webpack (không liên quan FB) giúp cho công việc lập trình nhanh chóng, module hoá mọi thứ. Tuy nhiên, cái gì cũng có giá của nó, những công nghệ đó được áp dụng bởi những ông lớn vì họ có nguồn lực để thực hiện, trong khi start-up thì không 1 xu dính túi, nhưng cũng đừng vì vậy mà nản chí, ngày xưa chưa ai cũng tranh giành bí kíp “Tịch tà kiếm phổ”, còn ngày nay tổ hợp GraphQL3R chính là bí kíp ngay trong tay bạn, mã nguồn mở, luyện tổ hợp này không có lo mất bản năng đàn ông đâu!

The post Lập trình ứng dụng di dộng từ công nghệ của Facebook appeared first on Fullstack Station.

Danh sách phần mở rộng – Phần 1

App Intro

Đây là phần quan trọng cho ứng dụng của bạn lấy cảm tình của người dùng khi bắt đầu ứng dụng, giới thiệu các chức năng đặc biệt của ứng dụng:

Trang chủ: https://github.com/FuYaoDe/react-native-app-intro

Hỗ trợ: iOS & Android

Swipe 2

Swipe 2 thích hợp làm gallery ảnh, hoặc cũng làm dạng slideshow, hoặc cũng có thể dùng như App Intro, nhưng theo mình thì App Intro ở trên vẫn đẹp hơn.

Trang chủ: https://github.com/sunnylqm/react-native-swiper2

Hỗ trợ: iOS & Android

Grid View

Grid view giúp cho bạn dễ dàng tạo lưới, tuy nhiên phần mở rộng này cũng khá đơn giản, nên nếu bạn muốn làm ứng dụng có nhiều cấp, trong mỗi lưới sử dụng giao diện phức tạp, thì theo mình nên sử dụng cấu trúc Flex CSS, vì bạn phải sử dụng rất nhiều để tinh chỉnh layout.

Custom Navigation

Custom Navigation dùng để thay thế Navigator với tùy chỉnh background

Trang chủ: https://github.com/superdami/react-native-custom-navigation

Hỗ trợ: iOS & Android

Gifted Listview

Với phần mở rộng này, bạn có các tính năng như: Pull To Refresh, Load more với tính năng gom nhóm

Trang chủ: https://github.com/FaridSafi/react-native-gifted-listview

Hỗ trợ: iOS & Android

Với các phần mở rộng này hi vọng sẽ giúp bạn tiết kiệm được thời gian khi phát triển ứng dụng di động.

The post Danh sách các phần mở rộng hay cho React Native – Phần 1 appeared first on Fullstack Station.

Cái nhìn đầu tiên

Cho dù bạn là lập trình viên di động hay lập trình viên web, hay ứng dụng máy tính thì cái nhìn đầu tiên một cách tổng quát về môi trường mà mình muốn dấn thân vào có khả quan không, có tiến xa được không? Đó là điều rất quan trọng mà mình muốn chia sẽ với bạn trong bài viết này.

Qua phần 1, hi vọng bạn cũng có cảm giác phấn khích như mình khi xây dựng ứng dụng Native dễ dàng, nhưng nếu bạn chưa đọc bài “React Native là tương lai của ứng dụng di động?” thì hãy dành thời gian để đọc trước nhé, chỉ mất 5 phút thôi, rồi hãy đọc tiếp bài này nhé.

Như vậy là bạn đã có cái nhìn sơ bộ về React Native rồi, bản thân React Native tồn tại một số vấn đề nhưng dần dần đang được khắc phục, nên mình tin là những khuyết điểm trên không là gì cả nếu bạn tiếp tục phát triển ứng dụng bằng React Native. Tuy nhiên, nếu bạn muốn lập trình trò chơi 2D, 3D thì React Native không phù hợp, hoàn toàn không phù hợp, nên bạn hãy dừng lại tại đây!

Hướng dẫn lập trình ứng dụng di động Smartnews

Trên đây là hình ảnh của ứng dụng mà mình sẽ hướng dẫn lập trình ứng dụng di động đọc tin Smartnews. Smartnews là ứng dụng đọc tin rất tuyệt hiện nay, được dùng phổ biến ở Nhật, đi tàu điện cứ thấy người ta dùng Smartnews không ah.

Ứng dụng có các chức năng sau:

• Đọc file xml và chuyển đổi ra json từ chuẩn Smartnews
• Hiển thị các bài viết theo các layout: block 4 tin, block 3 tin, block 2 tin và 1 tin
• Đọc file json và hiển thị nội dung web bằng webview
• Sử dụng Tab, Navigation

Mặc dù ứng dụng đọc xml chuẩn Smarnews, tuy nhiên phần parser chỉ là phần phụ, bạn có thể sử dụng phần hiển thị từ bất kỳ nguồn json, xml. Sau loạt bài này, bạn có thể xây dựng ứng dụng tương tự Smartnews, có thể đọc tin bằng webview, hoặc chỉ bằng nội dung cơ bản của một bài viết.

Thời gian để đọc loạt bài viết này chắc lâu hơn thời gian bạn lập trình ứng dụng này đó, mình sẽ public mã nguồn của toàn bộ source code sau khi hoàn thành seri này, ứng dụng sẽ giúp cho bạn hiểu rõ ràng về React Native.

The post Hướng dẫn React Native – Phần 2: Xây dựng ứng dụng đọc tin Smartnews appeared first on Fullstack Station.

Yêu cầu

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

Cài đặt

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

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

$ npm install -g react-native-cli

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

Khởi tạo dự án

$ react-native init AwesomeProject

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

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

iOS

$ cd AwesomeProject
$ react-native run-ios

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

Android

$ cd AwesomeProject
$ react-native run-android

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

Lập trình

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

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

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

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

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

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

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

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

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

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

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

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

Tham khảo

React Native là gì?

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

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

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

React Native là framework xây dựng ứng dụng di động native sử dụng Javascript do Facebook phát hành. Sử dụng React Native để xây dựng ứng dụng iOS và AndroidAndroid chỉ cần 1 ngôn ngữ javascript duy nhất. Để hiểu rõ về React Native là gì, chúng ta cần phân biệt sự khác nhau giữa ứng dụng Native và Hybrid.

Trang chủ của React Native: https://facebook.github.io/react-native/

Phân biệt ứng dụng hybrid và native

Ứng dụng Hybrid là gì

Ứng dung hybrid là chương trình phần mềm  trên điện thoại di động được viết dựa trên nền tảng web (html5, css3, javascript), bản chất hoàn toàn là ứng dụng web nhưng có thêm được các tính năng thao tác phần hệ điều hành như tập tin, truy cập máy ảnh, GPS hoặc các cảm biến như con quay hồi chuyển, gia tốc kế…Toàn bộ những thứ này đều được bao bọc bởi một lớp ứng dụng Native mà nổi bật là Phonegap/Cordova.

Phần web được xử lý hiển thị bởi webview, phần tính năng truy cập hệ thống được cung cấp bởi các hàm API. Ứng dụng gọi hàm bằng Javascript thông qua API thì chương trình Phonegap/Cordova bao bọc sẽ gọi trực tiếp Native xuống hệ điều hành. Bằng cách này, ứng dụng web có thêm những tính năng cao cấp của ứng dụng Native, và do được tính hợp mã nguồn sẵn nên tốc độ của ứng dụng hybrid nhanh hơn ứng dụng web.

Ứng dụng Native là gì

Ứng dụng native là ứng dụng được phát triển trực tiếp bằng ngôn ngữ của hệ điều hành đó cung cấp. Ví dụ với iOS là Objective-C, Swift và Android là Java, Window phone là C++ hoặc C#. Các ứng dụng viết bằng ngôn ngữ này được biên dịch ra ngôn ngữ máy trên điện thoại và có toàn bộ tính năng mà hệ điều hành đó cung cấp. Do là ngôn ngữ trực tiếp cũng như không phải thông qua ứng dụng nào khác nên tốc độ là nhanh nhất.

Tốc độ ở đây bao gồm tốc độ hiển thị (độ mượt), và tốc độ xử lý. Nếu để ý kỹ bạn sẽ thấy các thao tác của ứng dụng native như chuyển trang, điều hướng, cuộn trang đều rất mượt. Với việc hơn hẳn về tốc độ xử lý, nên ứng dụng hybrid khó có thể làm được ứng dụng nặng đồ hoạ như game, mặc dù vẫn có thể làm được nhưng không mượt mà nên hầu như hiếm ai dùng hybrid cho lập trình game cho điện thoại di động (ngoại trừ một số game đơn giản như xếp hình, giải câu đố, 2048…)

Qua 2 định nghĩa trên bạn đã hiểu về native và hybrid rồi, tuy nhiên React Native lại là một thứ điên rồ khác!

Cách hoạt động của React Native

Ứng dụng viết bằng React Native được chia làm 2 phần: phần view(hiển thị) và phần xử lý.

Phần hiển thị được biên dịch từ javascript sẽ map với những component của hệ thống ví dụ: điều hướng, tab, touch…Phần view này được lấy cảm hứng từ Virtual DOM của React JS, mọi xử lý view được thực hiện trên một cây DOM ảo, sau đó được React Native render lại bằng native view.

Phần xử lý vẫn được thực hiện trực tiếp bằng ngôn ngữ javascript: ví dụ “1+1=2” :)), biểu thức này được xử lý dưới bộ core thực thi Javascript, không phải thông dịch qua Java hay Swift/Objective-C rồi mới làm phép tính đâu nhé.

Ưu điểm của React Native

React Native là framework giúp lập trình viên viết ứng dụng Native chỉ bằng Javascript. Đúng vậy, chỉ đơn giản là Javascript, React Native phủ nhận định nghĩa về ứng dụng native ở đoạn trên.

React Native giúp cho lập trình viên web có thể viết ứng dụng native để khắc phục các điểm yếu của ứng dụng web và hybrid. Chỉ với một lập trình viên thành thạo javascript, bạn có thể chiến đấu trên mọi mặt trận web, desktop, server và bây giờ là mobile. Điều này không những có lợi cho lập trình viên web mà nó giúp cho các doanh nghiệp phát triển sản phẩm đầu cuối với ít nhân lực hơn.

Khi xây dựng React Native, điều tuyệt vời là đã được tích hợp tính năng Live Reload, Hot Reload – tương tự tính năng Hot Replacement Module trong Webpack. Tính năng Live Reload khác tính năng Reload, trong khi Live Reload chỉ tải lại chức năng/tập tin nào thay đổi, thì Reload sẽ tải lại toàn bộ mã nguồn. Ngoài ra, bạn cũng dễ dàng debug javascript trong Chrome và Safari. Đối với những lỗi thuộc Native thì phải cần đến XCode cho iOS hoặc Android Studio cho Android.

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

Khuyết điểm của React Native

React Native là một giải pháp tuyệt vời cho phát triển ứng dụng trên điện thoại di động, tuy nhiên đến thời điểm hiện tại, vẫn còn tồn tại một số khuyết điểm:

• Vẫn còn thiếu các component view cho Android: Map, Modal, Slider, Spinner hoặc các module như Camera Roll, Media, PushNotificationIOS.
• Không hỗ trợ Window Phone: đây sẽ là điểm trừ lớn nếu so với ứng dụng hybrid. Tuy nhiên, nếu bạn chỉ tập trung cho iOS và Android thì tất nhiên đây không phải là vấn đề lớn.
• Không build được ứng dụng iOS trên Window và Linux: tất nhiên đây không phải là điểm yếu kém của bản thân React Native, mà đó là do yêu cầu từ Apple.
• React Native không thể build được ứng dụng “quá phức tạp” nếu bạn không biết Swift/Objecive-C, Java – tính phức tạp ở đây là ứng dụng của bạn cần phải chỉnh sửa các component. Bạn nên nhớ là để viết được 1 ứng dụng native bằng javascript “luôn luôn” có sẵn các component đã được viết từ Swift/Objective-C (iOS) và Java (Android) với tính chất 1-1. Trường hợp bạn muốn chỉnh sửa 1 component nào đó: thay đổi thành phần hoặc thêm API thì bạn phải “tự viết” bằng chính ngôn ngữ tương ứng của iOS hoặc Android. Tin vui cho bạn là cũng nhiều lập trình viên khác đã viết nhiều component cần thiết cho hầu hết ứng dụng (đây cũng là lý do vì sao Facebook biến React Native thành mã nguồn mở)
• Không nên dùng để viết game có tính đồ họa và cách chơi phức tạp (Xem thêm Flutter là gì nếu muốn lập trình game)
• Dùng ES2015/ES6 (bạn đọc thêm ở bài ES2015 là gì): đây là cấu trúc mới cho Javascript từ 2015, vì khá là mới nên những cấu trúc của nó có thể bạn chưa quen, dẫn tới việc khó khăn trong việc tiếp cận.
• Bạn có thể phải mất nhiều thời gian để theo hết hệ sinh thái của React, tuy nhiên tất cả là để làm cho đời lập trình viên fullstack đẹp đẽ và những sản phẩm chất lượng hơn, bao gồm: React Js, React Native, Flux, Relay, GraphQL. Bạn không cần phải quan tâm những thứ này chỉ để viết ứng dụng với React native

Kết luận

27,000  84000 sao tại Github, đây là con số nói lên độ hot của React Native. Với phương châm “Học một lần sử dụng mọi nơi”, React Native và React JS sẽ là bộ đôi lý tưởng cho lập trình viên fullstack. Đừng chần chờ gì nữa, Javascript sẽ là mảnh đất màu mỡ chờ bạn khai phá với những công nghệ thời thượng, đó là một thực tế đã và đang đúng!

Cập nhật 1: Hiện tại đã đạt 32,000 sao tại Github

Cập nhật 2 (12/2019): Phiên bản mới nhất đã là 0.61  với 84k sao

The post React Native là tương lai của ứng dụng di động? appeared first on Fullstack Station.