Có gì hot? Tuần 20 - 2023

Cloudflare Pages và Workers kết hợp làm một

Trong một bài viết mới đây, Cloudflare (CF) công bố những thay đổi giúp triển khai các ứng dụng web trên nền tảng của họ dễ dàng và mượt mà hơn. Cùng xem qua nhé.

Đầu tiên là chuyện Cloudflare Pages kết hợp với Workers thành một nền tảng duy nhất. Trước đây CF Pages được dùng để chứa các trang HTML tĩnh, tương tự như Github Pages hay Netlify, trong khi CF Workers là nền tảng tính toán serverless chạy trên nền V8, hỗ trợ JavaScript, hoặc Rust, C hay C++ sau khi được biên dịch thành Wasm. Bằng cách kết hợp CF Pages và Workers với nhau, chúng ta có được những lợi ích như:

• Độ trễ siêu thấp: Đảm bảo các request luôn dưới trả về 50ms. Tốc độ này đáp ứng được 95% lượng người dùng Internet trên toàn cầu, còn 5% không có điều kiện để xài mạng nhanh thì… “not my users”.

• Một nền tảng tính toán độc lập với ngôn ngữ lập trình: CF Workers hỗ trợ sẵn JavaScript, hoặc Wasm. Xu hướng bây giờ là ngày càng có nhiều ngôn ngữ lập trình cho phép dịch ra Wasm, không chỉ gói gọn trong Rust, C/C++ nữa, thành ra bạn có thể sử dụng ngôn ngữ yêu thích như Python, Ruby hay C# để viết hàm chạy trên Workers.

• Sử dụng những dịch vụ khác của Clouflare: Ví dụ như dùng R2 để chứa tập tin tĩnh với API tương tự như Amazon S3, hay KV Storage, Queues, cơ sở dữ liệu D1…

• Smart Placement giúp Workers tính toán nhanh hơn: Edge computation về căn bản là tính toán ở những vị trí gần người dùng nhất. Ví dụ như bạn ở Việt Nam thì serverless functions nên được đặt ở Singapore chẳng hạn. Nhưng ví dụ như database bạn cần truy cập, hay một API của bên thứ ba được đặt ở châu Âu thì vẫn làm tăng độ trễ khi cần lấy dữ liệu tính toán. CF Smart Placement giúp giải quyết vấn đề này bằng cách theo dõi ứng dụng của bạn, sau đó tự động xác định và triển khai vào vị trí tối ưu nhất giữa dữ liệu và người dùng.

• Tăng cường bộ nhớ, CPU, và kích cỡ ứng dụng: Bạn có thể deploy ứng dụng với kích thước tối đa 10MB sau khi gzip, và có độ trễ khởi động tối đa là 400ms. Thông tin về bộ nhớ, CPU, cũng như cách tính tiền khi sử dụng dịch vụ của CF sẽ được công bố sớm.

• Hỗ trợ tích hợp git và CI/CD workflow: Chỉ cần kết nối git repo vào dự án, sau đó push là CF sẽ tiến hành chạy build cho bạn.

Bên cạnh đó CF Pages cũng nâng cấp build image lên phiên bản v2 beta. Ứng dụng của bạn sẽ được build trên nền Ubuntu 22.04.2, với Node.js 18.16.0, Python 2.7.18 và 3.10.5, Ruby 3.2.2, Yarn 3.5.1, và pnpm 8.2.0. Ngoài ra bạn cũng có thể cài đặt Go, Dart, v.v. hay tùy chọn phiên bản phần mềm mong muốn thông qua các biến môi trường, ví dụ như NPM_VERSION hay NODE_VERSION. Xem chi tiết ở đây.

Cuối cùng là những cập nhật về tool cộ, cũng như trải nghiệm của lập trình viên khi sử dụng CF Pages và Workers, bao gồm:

• Adapter cho các web framworks bây giờ như Next.js, Angular, Qwik…

• Một CLI mới gọi là C3, viết tắt của create-cloudflare CLI, giúp bạn khởi tạo dự án mới khi chạy npm/ yarn/ pnpm create cloudflare.

• Wrangler, công cụ giúp bạn khởi tạo, kiểm tra, và chạy hàm Workers ở local vừa được nâng cấp lên phiên bản v3.

• Tích hợp một trình soạn thảo dựa vào VSCode ngay trên trang dashboard của CF.

Tuần này mới biết: imports trong package.json

Vừa qua mình có đọc bài How to Configure Path Aliases in Frontend Projects in the Native Way của Maksim Zemskov mới biết về trường imports trong tập tin package.json. Giả sử dự án của bạn giống vầy:

app
├── src/
│   ├── features/
│   │    └── cart/
│   │        └── index.js
│   └── shared/
│       └── api/
│            └── index.js
└── package.json

Khi bạn khai báo trong tập tin package.json

{
  "imports": {
    "#shared/*.js": "./src/shared/*.js"
  }
}

Bạn có thể sử dụng:

// Trong tập tin src/features/cart/index.js
// Thay vì…
import { sendRequest } from '../../shared/api'

// Thì có thể viết thành
import { dateDiff } from '#shared/api'

Nhìn gọn gàng sạch sẽ hơn hẳn đúng hông. Tính năng này đã có từ Node.js phiên bản v14.6.0, và các khai báo cho imports phải bắt đầu bằng # để tránh nhầm lẫn với các scoped packages thường được bắt đầu bằng @, ví dụ như @types/react.

Câu hỏi tiếp theo là TypeScript hay các bundlers/ test runners/ text editors khác có hiểu trường imports không. Theo bài viết trên thì Webpack/ Jest/ Vite/ Vitest đã hỗ trợ mà không cần phải chỉnh gì nhiều, TypeScript thì phải chỉnh xíu. Tùy thuộc vào dự án bạn đang làm mà tham khảo nhe.

Bài viết mới: Những phương thức mới của mảng trong JavaScript

Hông biết có ai để ý hông chứ Ehkoo vừa ra bài mới đó 🥲 Trong bài viết này mình có điểm qua các phương thức vừa được thêm vào Array, chẳng hạn như Array.fromAsync(), Array#at(), Array#group(), hay Array#with().

Vì còn khá mới nên mức độ hỗ trợ của các trình duyệt cũng khác nhau, chỉ có Safari là đã cài đặt đầy đủ các phương thức này. Thôi đi đọc qua để “đi tắt đón đầu” vậy.

Mới thấy trên quầy

Một vài thư viện/ công cụ hữu ích mà bọn mình mới phát hiện 😛

• edmundhung/conform: Thư viện giúp kiểm tra form dành cho Remix và React Router 😳 Hỗ trợ kiểm tra schema với Yup/ Zod, dung lượng chỉ 5KB.

• denoland/saaskit: Team Deno vừa ra một template giúp bạn xây dựng “start-up triệu đô” một cách nhanh chóng. saaskit sử dụng web framework Fresh cùng với Tailwind, tích hợp Deno KV để quản lý người dùng và dữ liệu nói chung, hệ thống thanh toán của Stripe.

• rsuite/rsuite: Tập hợp các React components để xây dựng ứng dụng doanh nghiệp to bự.

• intel/intel-one-mono: Một font mono mới của Intel, có hỗ trợ tiếng Việt.

Đọc/ xem gì cuối tuần

• How the image editing app Photopea uses the File Handling API to let users open files from their file explorer: Một ví dụ thực tế của Photopea khi sử dụng File Handling API để thêm vào menu ngữ cảnh trong chương trình quản lý tập tin.

• Using HTML landmark roles to improve accessibility: Bài viết giới thiệu về 8 landmark roles theo định nghĩa ARIA: banner, navigation, search, main, region, complementary, form, contentinfo, và cách sử dụng chúng.

• A bottom-up, animated guide to HTTP load balancing: Sam Rose có một bài viết với ví dụ rất sinh động về cân bằng tải HTTP.

• Improving Performance with HTTP Streaming: Một bài giới thiệu về HTTP Streaming và cách nhóm phát triển ở Airbnb sử dụng nó.

Kết

Hẹn gặp lại các bạn trong tuần tiếp theo 👋