Skip to main content

3 posts tagged with "facebook"

View All Tags

Cấu trúc dữ liệu trong javascript

· 4 min read
Thinh Nguyen
React Native Developer

Chào tất cả các bạn! Trong bài viết này chúng ta sẽ tìm hiểu về một chủ đề quan trọng khi nó liên quan đến khoa học máy tính và software development: đó là data structures

Nó chắc chắn là một chủ đề mà bất cứ ai trên thế khới cũng phải biết làm việc trong lập trình, nhưng nó không khó để hiểu và không đáng sợ khi bạn bắt đầu làm quen với nó :))

Let's go !

Nội dung chính

  • Cấu trúc dữ liệu là gì
  • Mãng (Arrays)
  • Object (hash tables)
  • Stack (Ngăn xếp)
  • Queues
  • Linked lists
    • Single linked lists
    • Double linked list
  • Trees (Cây)
    • Binary trees
    • Heaps
  • Graphs
    • Cây đồ thị vô hướng và có hướng
    • Cây đồ thị có trọng số và không có trọng số

2022 sẽ là năm của kiến trúc mới trong mã nguồn mở

Vì bản phát hành gần đây, đây là khoảng thời gian tốt để tìm hiểu những thay đổi đang diễn ra và chúng có thể ảnh hưởng như thế nào để ứng dụng React Native của bạn

Trong bài viết này bao gồm hầu hết các thay đổi quan trọng bởi công nghệ mới

  • JavaScrip Interface(JSI)

  • Fabric

  • Turbo Modules

  • CodeGen

    Đầu tiên chúng ta sẽ đi tìm hiểu

Công nghệ hiện tại

Trước khi đến với công nghệ mới chúng ta sẽ tóm tắt công nghệ hiện tại làm việc như thế nào

Vui lòng lưu ý, Tôi chỉ bao gồm những điểm liên quan để hiểu blog này, nếu bạn muốn tìm hiểu nhiều hơn về công nghệ hiện tại vui lòng đọc tài liệu của react native

  • In a nutshell

Khi bạn chạy một ứng dụng RN, tất cả code Javascript của bạn sẽ được đóng gói lại với nhau thành một gói có tên là JS Bundle, Mã Native code được giữ nguyên

Việc thực thi của ứng dụng React Native sảy ra trong 3 luồng

  1. Javascript Thread: sử dụng JS Engine, để chạy JS Bundle
  2. Native/UI Thread: nó sử dụng để Native Modules và xử lý hoạt động giống UI Rendering, sủ dụng gesture events
  3. Ngoài ra Thread thứ 3 gọi là shadow thread, Được sử dụng để tính toán bố cục của các phần tử trước khi hiển thị chúng trên màn hình

Giao tiếp giữa JS và Native Threads được giao tiếp thông qua một cây cầu, Khi gửi dữ liệu đi qua cây cầu nó sẽ được chia thành từng phần(tối ưu hóa) và được phân ra dưới dạng JSON, Cây cầu này có thể chỉ xử lý các giao tiếp bất đồng bộ

Docusaurus Plushie

Một số điều kiện quan trọng:

JavascriptCore: nó là tên của Javascript Engine, cái mà React Native sử dụng để thực thi JS Code

Yoga: Là tên của Layout Engine, cái mà sử dụng để tính toán vị trí của phần tử UI của người dùng trên màn hình

1. Javascript Interface (JSI)

Trong công nghệ hiện tại, React native sử dụng Bridge Module để tạo các giao tiếp giữa JS code và Native threads, Mỗi khi data được gửi đến cây cầu, nó phải được đăng ký dưới dàng JSON, Khi dữ liệu được nhận ở phía bên kia nó cũng được giải mã

Nó có nghĩa là Javascript và Native hoạt động không biết về nhau (ie. JS Thread không thể gọi trực tiếp một phương thức trên luồng Native)

Một điều quan trọng khác, Các thông báo gửi qua cầu về bản chất là không đồng bộ, đây là một điều tốt cho hầu hết các trường hợp sử dụng, nhưng có một số trường hợp khi mã JS và mã gốc cần được đồng bộ hóa

Github page và deploy blog cá nhân

· 3 min read
Thinh Nguyen
React Native Developer

Bạn đang tìm kiếm các dướng dẫn đơn giản về cách đưa một ứng dụng React trên Heroku? Bạn muốn xuất bản một dự án vào phút cuối và không biết làm cách nào? Đây chính là hướng dẫn dành cho bạn

Trong hướng dẫn này, chúng tôi có một ứng dụng ReactJS đơn giản, chúng ta sẽ triển khai nó, Bạn cần sử dụng một ứng dụng nào đó có sẵn hoặc tạo mới nó sử dụng create-react-app, Đừng lo lắng, chúng ta sẽ thảo luận các bước từ đầu

Đã xây dựng ứng dụng thành công, Bây giờ là thời gian để xuất bản nó Có một số dịch vụ bạn có thể xuất bản ứng dụng của mình Heroku là một trong số chúng, Đó là một sự lựa chọn hiển nhiên

Khi nói điến việc triển khai, nó cung cấp cơ sở(facility) để xuất bản, quản lý, và scale ứng dụng, Bạn có thể thấy nó ghê gớm(intimidating) nhưng làm việc với Heroku rất dễ dàng

Đăng nhập tài khoản Heroku

Đến trang web Heroku và đăng nhập bằng tài khoản của bạn Sau khi đăng nhập thành công bạn sẽ được chuyển đến trang quản lý

Docusaurus Plushie

Tạo một tài khoản mới

Nhấn nút "Create a new App" để bắt đầu triển khai ứng dụng

Docusaurus Plushie

Nó sẽ hiển thị như bên dưới, điền đầy đủ thông tin bắt buộc và nhấn nút "Create App"

Docusaurus Plushie

Thêm Buildpacks

Để triển khai ứng dụng React trên Heroku, Chúng ta cần thêm buildpacks, nhấn đến tab Cài đặt và sau đó nhấn nút "Add BuildPack" bên trong Buildpacks section

Docusaurus Plushie

React buildpack URL của chúng ta là https://github.com/mars/create-react-app-buildpack, Copy dường dẫn và thêm nó vào buildpack giống bên dưới

Docusaurus Plushie

Sau khi nhấn nút lưu thay đổi. Buildpacks section sẽ lưu trữ đường dẫn URL mà chúng ta đã thêm, Tham khảo hình ảnh chụp bên dưới

Docusaurus Plushie

Triển khai ứng dụng Heroku: Sử dụng Heroku CLI

Nhấn tab Deploy cho Deploying React App sử dụng Heroku Git

Docusaurus Plushie

Chúng ta có ba phương thức triển khai ứng dụng lên Heroku

  1. Heroku Git
  2. Github
  3. Container Registry

Ở đây chúng ta chọn lựa chọn đầu tiên để triển khai: Heroku Git, Nhấn để tiếp tục

Docusaurus Plushie

Sau khi nhấn lựa chọn Heroku Git option trang bên dưới sẽ hiện ta hiện ta(appear)

Docusaurus Plushie

Bây, chúng ta cần cài đặt Heroku CLI trên máy, Xem trang Heroku CLI

Bạn có thể kiểm tra phiên bản sử dụng dùng command heroku –version

Tiếp theo chạy lệnh heroku login và một trang web hiện ra bạn login bằng tài khoản đã tạo ở trên

Sau khi đăng nhập heroku bạn có thể làm theo hướng dẫn để kết nối dụ án của bạn với heroku dashboard

một lưu ý quan trọng của heroku : You can now change your main deploy branch from "master" to "main" for both manual and automatic deploys, please follow the instructions here. hướng dẫn tại đây

Docusaurus Plushie

TADA : Quá đơn giản phải không nào

Tìm hiểu về React Native New Architecture

· 3 min read
Thinh Nguyen
React Native Developer

Nhóm React Native vừa thông báo về công nghệ mới của react native sẽ ra mắt trong năm 2022, Bạn có thể kiểm tra tại đây here

2022 sẽ là năm của kiến trúc mới trong mã nguồn mở

Vì bản phát hành gần đây, đây là khoảng thời gian tốt để tìm hiểu những thay đổi đang diễn ra và chúng có thể ảnh hưởng như thế nào để ứng dụng React Native của bạn

Trong bài viết này bao gồm hầu hết các thay đổi quan trọng bởi công nghệ mới

  • JavaScrip Interface(JSI)

  • Fabric

  • Turbo Modules

  • CodeGen

    Đầu tiên chúng ta sẽ đi tìm hiểu

Công nghệ hiện tại

Trước khi đến với công nghệ mới chúng ta sẽ tóm tắt công nghệ hiện tại làm việc như thế nào

Vui lòng lưu ý, Tôi chỉ bao gồm những điểm liên quan để hiểu blog này, nếu bạn muốn tìm hiểu nhiều hơn về công nghệ hiện tại vui lòng đọc tài liệu của react native

  • In a nutshell

Khi bạn chạy một ứng dụng RN, tất cả code Javascript của bạn sẽ được đóng gói lại với nhau thành một gói có tên là JS Bundle, Mã Native code được giữ nguyên

Việc thực thi của ứng dụng React Native sảy ra trong 3 luồng

  1. Javascript Thread: sử dụng JS Engine, để chạy JS Bundle
  2. Native/UI Thread: nó sử dụng để Native Modules và xử lý hoạt động giống UI Rendering, sủ dụng gesture events
  3. Ngoài ra Thread thứ 3 gọi là shadow thread, Được sử dụng để tính toán bố cục của các phần tử trước khi hiển thị chúng trên màn hình

Giao tiếp giữa JS và Native Threads được giao tiếp thông qua một cây cầu, Khi gửi dữ liệu đi qua cây cầu nó sẽ được chia thành từng phần(tối ưu hóa) và được phân ra dưới dạng JSON, Cây cầu này có thể chỉ xử lý các giao tiếp bất đồng bộ

Docusaurus Plushie

Một số điều kiện quan trọng:

JavascriptCore: nó là tên của Javascript Engine, cái mà React Native sử dụng để thực thi JS Code

Yoga: Là tên của Layout Engine, cái mà sử dụng để tính toán vị trí của phần tử UI của người dùng trên màn hình

1. Javascript Interface (JSI)

Trong công nghệ hiện tại, React native sử dụng Bridge Module để tạo các giao tiếp giữa JS code và Native threads, Mỗi khi data được gửi đến cây cầu, nó phải được đăng ký dưới dàng JSON, Khi dữ liệu được nhận ở phía bên kia nó cũng được giải mã

Nó có nghĩa là Javascript và Native hoạt động không biết về nhau (ie. JS Thread không thể gọi trực tiếp một phương thức trên luồng Native)

Một điều quan trọng khác, Các thông báo gửi qua cầu về bản chất là không đồng bộ, đây là một điều tốt cho hầu hết các trường hợp sử dụng, nhưng có một số trường hợp khi mã JS và mã gốc cần được đồng bộ hóa