Như mọi khi, để xác định được xu hướng, mình dùng Google Trends, và so sánh 2 từ khoá “React Native” và “Flutter”:

Flutter là gì

Flutter là nền tảng phát triển ứng dụng đa nền tảng cho iOS và Android do Google phát triển. Flutter sử dụng ngôn ngữ DART cũng do Google phát triển và flutter cũng đã được sử dụng để tạo ra các ứng dụng native cho Google.

Ngôn ngữ DART

Ngôn ngữ DART là ngôn ngữ thuần hướng đối tượng được Google giới thiệu từ năm 2011, với mục đích cung cấp sự lựa chọn hiện đại hơn nhưng không thay thế Javascript. Tối ưu cho client, nhất là ứng dụng đa nền tảng.

Từng giữ vị trí Top 1 cho bình chọn ngôn ngữ không nên học năm 2018 theo Codementor:

https://www.codementor.io/blog/worst-languages-to-learn-3phycr98zk

Đưa ra ví dụ để có thể nói mọi thứ đều có thể trở thành hiện tượng “vật đổi sao dời”, từ một ngôn ngữ không nên học vào 2018 có thể trở thành ngôn ngữ được sử dụng nhiều trong năm 2019 này, và nhờ Flutter mà có khả năng tiếp tục phát triển vào 2020.

Ngôn ngữ DART được hỗ trợ khá tốt ở Visual Studio Code, và trong Android Studio.

Flutter có thể làm được gì

Flutter: Ưu điểm

• Mạnh về hiệu ứng, hiệu suất ứng dụng rất cao.
• Giao tiếp gần như trực tiếp với hệ thống
• Ngôn ngữ kiểu tĩnh nhưng với cú pháp hiện đại (tương tự JS, Python, Java), compiler linh động khi dùng AOT (cho sản phẩm cuối) và JIT (cho quá trình phát triển với hot reload)
• Có thể chạy được giả lập mobile ngay trên web, tiện cho việc phát triển. Các bộ đo lường chỉ số hiệu suất được hỗ trợ sẵn giúp lập trình viên kiểm soát tốt hiệu suất của ứng dụng.
  – Có thể dùng để xây dựng các nền tảng gắn vào ứng dụng native để tăng hiệu suất.

Flutter: Nhược điểm

• Bộ render UI được nhóm phát triển gần như viết lại, không liên quan tới UI có sẵn của Framework native, dẫn đến memory sử dụng khá nhiều. Hơn nữa, các UI không đi chung với OS, mà được phát triển riêng, nghĩa là cùng 1 phiên bản Flutter khi tạo ra ứng dụng cho iOS thì iOS 8.x -> 12.x đều y chang nhau, tương tự như với Android. Nhưng UI của Android thì tất nhiên khác với iOS.
• Phải học thêm ngôn ngữ DART: lập trình viên biết về DART không nhiều, cũng có rủi ro là học xong DART sẽ dính liền luôn với DART ở mảng phát triển ứng dụng mobile. Chứ không uyển chuyển như JS hay Python có thể nhảy qua lại giữa front, back hay AI…
• Mô hình dữ liệu mới: bloc pattern, DART Streaming; nếu đã quen với Redux khi làm phát triển React Native, bạn sẽ mất thời gian để học thêm mô hình dữ liệu trong Flutter, mặc dù nó không khó.
• Là con cưng của Google, tuy nhiên hãng dính nhìu phốt với thói quen “quăng con giữa chợ” nên cũng cần cân nhắc. Tuy nhiên, mình nhận thấy Flutter rất tốt, tốt hơn nhiều so với những cái mà Google từng làm ra như Angular.

Native đúng nghĩa

Bộ engine để render UI hoàn toàn thuộc Flutter, vì vậy bạn có thể tạo ra bất kỳ hiệu ứng và đồ hoạ nào cho cả 2 nền tảng iOS và Android. Bạn có thể tưởng tượng Flutter như 1 engine game, có thể điểu chỉnh đến từng pixel và phủ trên đó là hệ thống Widget đa dạng, phong phú.

Hot Reload

Khi làm việc với những thứ liên quan đến UI thì Hot Reload thật khiến cho lập trình viên dễ chịu, càng tuyệt hơn khi Flutter cung cấp khả năng ghi nhớ state của ứng dụng. Hot Reload cung cấp cho bạn trải nghiệm tuyệt vời khi lập trình Flutter, so với React Native thì điểm này Flutter hơn.

Dart DevTools

DevTools tuy mới ở giai đoạn beta nhưng độ hoàn thiện cũng rất cao, so với DevTools của React/React Native thì DevTools của Flutter tốt hơn.

Nâng cấp dễ dàng

Mặc dù cách cài đặt ban đầu của Flutter là tải về tập tin nén, nhưng khi cập nhật lên phiên bản mới thì chỉ cần dòng lệnh là đủ, và khá dễ dàng. Ứng dụng sau khi nâng cấp phiên bản Flutter chạy không gặp trở ngại gì cả. Đây là một điểm cộng khá lớn khi xét về độ trưởng thành. Khi sử dụng React Native, các phiên bản từ 0.25, 0.48 có những thay đổi phải sửa bằng tay mới chạy, rất khó chịu.

Những điều chưa làm được của Flutter

Cập nhật lên kho ứng dụng không dễ dàng

Phải cập nhật ứng dụng thông qua trung tâm ứng dụng như Play Store hay App Store. Với React Native, nếu bạn chỉ chỉnh sửa phần sử dụng javascript thì bạn không cần phải build phiên bản mới để cập nhật ứng dụng. Điều này là không thể với Flutter vì Flutter build ra ứng dụng native, và code được biên dịch AOT.

Thiếu JSX

Gọi là thiếu thì cũng không chính xác, nhưng do quen với JSX khá thuận tiện của React Native. Mình thấy có khi JSX trực quan và dễ hiểu layout hơn của Flutter. Yêu cầu về JSX đã được gởi tới nhóm phát triển, họ không từ chối, tuy nhiên cũng không nên mong đợi điều này vì có lẽ nó không phù hợp lắm với DART.

Import chưa rõ ràng

Có chút khó khăn khi code, không biết 1 class, function được import từ package nào. Nếu sử dụng IDE hoặc VSCode thì có thể hover lên class để xác định, tuy nhiên đối với các Text Editor khác hoặc đọc bài viết thì khó xác định được class thuộc package nào.

Fullstack Station Tips

Vừa native vừa hot reload, cho trải nghiệm tốt cả giai đoạn phát triển và hiệu suất ứng dụng tốt. Đây quả là 1 điều tuyệt vời! Mình thật sự ấn tượng với Flutter, và gần như muốn chắc chắn sẽ sử dụng Flutter cho dự án mới. Tuy nhiên, ngôn ngữ Dart là một rào cản khá lớn, mình nghĩ phải cân nhắc rất kỹ cho định hướng nghề nghiệp. Nếu bạn muốn trở thành lập trình viên ứng dụng di động, hãy sử dụng Flutter từ hôm nay.

iOS và Android đã phát triển đến mức bão hoà, việc có chức năng, tính năng đột phá thật sự rất khó. Vì vậy, tương lai của ứng dụng đa nền tảng là hiển nhiên. Trong bài viết này mình chưa đề cập nhiều đến việc so sánh giữa Flutter và React Native, nhưng kinh nghiệm mình cho biết Flutter sẽ thắng trong thời gian tới, hãy chờ xem nhé.

Tham khảo

https://developers.googleblog.com/2019/05/Flutter-io19.html

https://medium.com/flutter-community/flutter-from-mobile-to-desktop-93635e8de64e

https://medium.com/asos-techblog/flutter-vs-react-native-for-ios-android-app-development-c41b4e038db9

https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a

https://hackernoon.com/react-native-vs-flutter-which-is-preferred-for-you-bba108f808

The post Flutter là gì? Kỷ nguyên mới cho lập trình di động 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.

Time traveling là gì

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

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

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

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

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

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

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

Time traveling – Redux có lợi gì

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

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

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

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

Redux Dev Tool

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

Kết

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

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

The post Kỹ thuật lập trình Time traveling là gì appeared first on Fullstack Station.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Kết

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

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

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.

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

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

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

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

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

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

Bạn nhìn 3D sau: 

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

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

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

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

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

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

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

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

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

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

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

The post Javascript làm được gì? appeared first on Fullstack Station.

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.

Cập nhật: do meteor-webpack không còn được duy trì phát triển, nên meteor-webpack không tương thích với Meteor đã cập nhật lên phiên bản 1.4 (chỉ tương thích 1.2 và 1.3)

Giới thiệu

Trước khi bắt đầu xây dựng web app realtime với Meteor, React, Webpack chúng ta sẽ lần lượt lướt qua các công nghệ này và tìm hiểu xem là công nghệ fullstack đã thay đổi như thế nào!

Trong bài viết này, Meteor là chính, tiếp theo là React, còn Webpack là để biến chúng trở nên hoàn hảo với nhau! Tuy nhiên, nếu bạn chưa biết gì về webpack, bạn nên đọc Những rủi ro khi sử dụng Webpack với Meteor ở cuối bài.

Meteor

Trang chủ: www.meteor.com

Nên đọc: Điều gì khiến Meteor 1.3 trở nên đặc biệt

Đây là một fullstack framework dùng để viết App (Web/Mobile) realtime rất mạnh, dễ dàng. Mặc dù mặc định để build cho mobile là hybrid (sử dụng Phonegap), tuy nhiên bạn hoàn toàn có thể sử dụng React Native để kết nối với Meteor.

React

Trang chủ: https://facebook.github.io/react/

Nên đọc: React Js là gì

Nên đọc: Hướng dẫn học React Js

Webpack

Webpack là một cách đơn giản để cấu trúc mã nguồn của dự án, đồng thời cung cấp khả năng Hot Load (Hot Module Replacement – HMR) mà mình rất thích, và đưa vào Meteor để nâng cao khả năng tốc độ làm việc.

Nên đọc: Webpack là gì

Nên đọc: Giới thiệu webpack

Gói thư viện sẽ sử dụng: Meteor Webpack

Vấn đề của Meteor

Ưu điểm

• Cơ chế Xuất bản (Publications) và Đăng ký (Subscription)
  • Bảo vệ xuất bản dữ liệu một cách đơn giản
  • Giao thức DDP giúp đồng bộ client dễ dàng và nhanh chóng (Hỗ trợ React Native)
• Cơ chế xác thực: sử dụng tài khoản với mật khẩu hay sử dụng OAuth dễ dàng
• Từ 1.2 đã hỗ trợ ReactJs và Angular Js
• Từ 1.3
  • Đã sử dụng hoàn toàn ES6/ES2015
  • Đã sử dụng NPM

Còn nhiều ưu điểm khác để sử dụng Meteor để xây dựng ứng dụng realtime, tuy nhiên bài viết này mình không tập trung nói về Meteor.

Khuyết điểm

Bài viết này mình tập trung vào khuyết điểm nặng nhất của Meteor đó là chính công cụ build của Meteor: nó chậm kinh khủng! Bất kỳ mỗi động tác Save file nào, Meteor sẽ build lại “toàn bộ mã nguồn”, mặc dù sau đó nó tự động kích hoạt Client để refresh với mã nguồn mới, tuy nhiên mình mất quá nhiều thời gian cho lập trình, trong khi Webpack lại có cơ chế HMR quá hay!

Một số bài viết nói về khuyết điểm của Meteor liên quan đến NPM và ES6/ES2015 là đã cũ, từ Meteor 1.3 đã khắc phục các vấn đề này rồi.

Giải quyết vấn đề khuyết điểm

Hot Module Replacing – HMR

Như đã nói ở trên, mình muốn giải quyết vấn đề build lâu của Meteor, nhưng HMR là gì? Bạn lập trình web thì biết mỗi lần sửa file gì, mình phải refresh lại trang, để cho trình duyệt nạp lại các tập tin mới.

Meteor thực hiện việc refresh này một cách tự động, nhưng do cơ chế của Meteor, bất kỳ 1 thay đổi nào của file cũng sẽ kích hoạt quy trình build phức tạp của Meteor, việc xử lý này mất khá nhiều thời gian từ 20-30s đối với dự án lớn (Khi bắt đầu thì thấy thay đổi rất nhanh, nhưng với cấu trúc dự án lớn thì khá chậm), sau khi build xong Meteor sẽ gởi tín hiệu xuống client và kích hoạt refresh để lấy code mới. Với cách này thì Meteor làm cũng khá ổn rồi, nhưng vẫn chậm!

Webpack -sử dụng cơ chế HMR cũng quan sát toàn bộ mã nguồn, nhưng khi thay đổi file nào, nó chỉ build lại file đó, và gởi xuống trình duyệt chỉ những thành phần/module thay đổi, việc này giúp cho quá trình lập trình tăng lên. Chỉ cần thay đổi code, Save và liếc qua màn hình có chứa trình duyệt, hoặc thêm mobile web bạn sẽ thấy code thay đổi gần như ngay lập tức (1-3s)

Những cách giải quyết phức tạp – không hay cho người mới

Cũng có một vài repo dùng để kickstart dự án:

https://github.com/thereactivestack/kickstart by@benoit_tremblay

https://github.com/jedwards1211/meteor-webpack-react by jedwards

Tuy nhiên, những repo này lại có những vấn đề khác:

• Thiết lập cấu trúc code theo cách của họ, vì vậy khi bạn sử dụng các hướng dẫn từ trang chủ của Meteor nó rất khác, gây khó hiểu.
• Đưa vào những thành phần, công nghệ không/chưa cần thiết như: Redux, ReactRouter, FlowRouter…

Cách giải quyết vấn đề đơn giản nhất

Theo quan điểm của mình, sử dụng bài viết hướng dẫn của Meteor ngay tại trang chủ là tốt nhất, bởi vì nó dành cho người mới bắt đầu, còn những bài viết khác đa phần là dành cho người đã có kinh nghiệm.

Do vậy, chúng ta chỉ cần sử dụng: Build Todo App with Meteor + React

Hướng dẫn ở trên do chính Meteor soạn thảo đã rất đơn giản và dễ hiểu về Meteor + React, chúng ta không nên đi lung tung. Mình chỉ thêm 1 bước 2a, một bước rất nhỏ để cài Webpack, sau đó bạn có thể tiếp tục với các bước hướng dẫn khác của Meteor.

Bắt đầu

Yêu cầu

NodeJs 0.12 hoặc 4.0+, NPM

Chú ý: ở mục này các bạn có thể theo phần hướng dẫn viết TODO App với React của www.meteor.com, mình chỉ viết lại để tiện theo dõi hơn, chỉ cần chú ý bước cài Webpack là được.

Cài đặt Meteor

MacOS:

curl https://install.meteor.com/ | sh

Window:

https://install.meteor.com/windows

Khởi tạo dự án (Bước 1 – Create an app)

meteor create simple-todos

Sau khi chạy lệnh trên, bạn sẽ có được cấu trúc thư mục như sau:

client/main.js        # a JavaScript entry point loaded on the client
client/main.html      # an HTML file that defines view templates
client/main.css       # a CSS file to define your app's styles
server/main.js        # a JavaScript entry point loaded on the server
package.json          # a control file for installing NPM packages
.meteor               # internal Meteor files
.gitignore            # a control file for git

Chạy Meteor

cd simple-todos
meteor npm install
meteor

Như vậy là bạn đã chạy được webapp bằng Meteor

Khởi tạo React (Bước 2 – Components)

meteor npm install --save react react-dom

….

Bạn vui lòng sử dụng bước 2 tại đây, chỉ cần copy code lại sửa đúng file là được:

https://www.meteor.com/tutorials/react/components

Cài đặt Webpack (Bước 2a – Webpack)

Ở thư mục gốc của dự án simple-todos bạn chạy các dòng lệnh sau:

// Xoá gói build emacscript mặc định của Meteor
meteor remove ecmascript
// Cài đặt webpack - chú ý là webpack của meteor, không phải webpack từ npm
meteor add webpack:webpack
meteor add webpack:react
meteor add webpack:less
meteor

//Sau khi chạy xong lệnh trên, meteor sẽ yêu cầu chạy npm install các gói
npm install

Sau khi chạy xong, bạn sửa file package.json, thêm các dòng sau:

{
  "name": "simple-todos",
   ...
  "main": "server/entry.js", => Dòng 1
  "browser": "client/entry.js" => Dong 2
   ...
}

Như vậy là đã xong rồi, rất đơn giản phải không?

meteor

Chạy lệnh trên, bạn sẽ nhìn thấy webpack và meteor hoạt động cùng nhau, đây là kết quả từ màn hình console:

=> Started proxy.
=> Started MongoDB.
webpack built c439f6a9efa3849e1c17 in 8174ms \
=> Started your app.

=> App running at: http://localhost:3000/
webpack building...lication                  /
webpack built a9141ae180f4e253c8e1 in 1684ms /
=> Meteor server restarted

Bạn hãy thử mở file import/ui/App.jsx hoặc import/ui/Task.jsx để sửa một cái gì đó bất kỳ rồi save lại, ví dụ sửa “Todo List” => “Simple Todo List”, bạn sẽ thấy console log chạy như sau:

webpack building...ing packages              \
webpack built 2a3c1684ae68400daecc in 1059ms |
=> Meteor server restarted
webpack building...lication                  |
webpack built e6e7c13e3e84258156fc in 536ms  /

Và ngay lập tức, trình duyệt sẽ thay đổi theo ngay, một số thay đổi chỉ mất dưới 1s. Ngay từ ban đầu, nếu bạn làm theo hướng dẫn của Meteor – không dùng Webpack, kết quả không khác nhau nhiều. Nhưng khi số file của dự án tăng lên thì sự khác biệt ngày càng lớn, trường hợp của mình gặp phải là khoảng thời gian build của Meteor mất từ 20s :(. Việc Meteor từ phiên bản 1.3 chuyển qua viết theo dạng module cũng có thể là sự chuẩn bị cho việc dùng Webpack.

Bước 3 đến 12

Như vậy là bạn đã xong bước 2a, bạn hãy tiếp tục sử dụng Bước 3 – Collection trong loạt hướng dẫn của Meteor để tiếp tục vọc Meteor. Mình hi vọng qua bài viết này, những bạn mới bắt đầu học Meteor kết hợp React sẽ dễ dàng phát triển hơn, sẽ rất tốt nếu bạn làm theo hướng dẫn của Meteor rồi sau đó tham khảo bài viết này một cách sớm nhất có thể. Sẽ khó cho bạn nếu bạn sử dụng Meteor + React sau một thời gian rồi mới bắt đầu sử dụng Webpack, vì khi đó việc cài đặt Webpack sẽ gặp nhiều khó khăn hơn.

Rủi ro khi sử dụng Webpack trong dự án Meteor

• Việc sử dụng thêm Webpack khiến dự án của bạn gặp nhiều rủi ro hơn vì phải học cả 3 thứ: Meteor, React, Webpack. Bạn có thể hi sinh thời gian để học thêm được Webpack – thay vì mất thời gian cho việc chờ Meteor build, tuỳ thuộc vào bạn!
• Webpack không được hỗ trợ chính thức từ Meteor Core team (MDG) vì lời hứa backwards compatibility, hơn nữa nó mất thời gian cho việc hỗ trợ cộng đồng Webpack + Meteor mà đó không phải là mục đích của họ khi tạo ra Meteor
• Webpack không đơn giản, bạn sẽ mất thời gian để nghiên cứu, nhiều hay không còn tuỳ thuộc vào vấn đề bạn gặp phải là gì. Tuy nhiên, việc sử dụng bộ thêm Webpack có điểm lợi là sau này nếu bạn sử dụng React cho dự án khác mà không cần sử dụng Meteor, bạn sẽ thấy bộ đôi React + Webpack sẽ rất lợi hại.

Tham khảo

Meteor with Webpack, React and Redux in Practice

BulletProof Meteor by Kadira

React & ES6/ES2015

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

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

Yêu cầu

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

Cài đặt

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

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

$ npm install -g react-native-cli

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

Khởi tạo dự án

$ react-native init AwesomeProject

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

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

iOS

$ cd AwesomeProject
$ react-native run-ios

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

Android

$ cd AwesomeProject
$ react-native run-android

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

Lập trình

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

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

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

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

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

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

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

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

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

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

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

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

Tham khảo

React Native là gì?

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

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

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

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

Giá mà…

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

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

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

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

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

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

React

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

Application testing

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

Cải thiện Cordova

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

Cải thiện minimongo

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

Kết luận

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

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

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