Có gì hot? Tuần 39 - 2022

Chào mọi người, chúng ta lại gặp nhau trong bản tin Ehkoo tuần 39 - 2022 rồi đây 😃

Cloudflare mở mã nguồn của workerd

Cloudflare vừa công bố mã nguồn của workerd, môi trường thực thi JavaScript/Wasm mà Cloudflare Workers đang sử dụng.

Bạn có thể dùng workerd để:

• Tự host Cloudflare Workers: Thay vì triển khai ứng dụng lên Cloudflare Workers, bạn có thể cài workerd và tự chạy luôn. Chỉ có một lưu ý là workerd không phải là môi trường sandbox bảo mật, nên bạn cần phải cài đặt thêm nếu muốn chạy code cho người dùng nhập trực tiếp. Xem thêm về bảo mật Cloudflare Workers ở đây

• Phát triển và kiểm thử ở máy local: Để xây dựng ứng dụng với Cloudflare Workers, trước đây mọi người hay dùng Miniflare. Nhưng Miniflare chỉ gần giống với môi trường của Workers mà thôi nên trong một số trường hợp nó không chạy đúng. Nay với sự hỗ trợ của workerd, Miniflare và Wrangler CLI sẽ đem đến môi trường giả lập chính xác hơn ở local.

• Dùng như proxy: workerd có thể đóng vai trò như một proxy, một host, hoặc cả hai. Căn bản thì chúng ta có thể dùng JavaScript để “đón lõng” request/response, thay đổi chúng, và chuyển sang tầng tiếp theo xử lý hoặc trả về phía người dùng.

Những tính năng nổi bật của workerd:

• Thiết kế dành riêng cho server: Các môi trường thực thi JavaScript/Wasm khác được thiết kế đa mục đích: ứng dụng dòng lệnh (CLIs), ứng dụng GUIs, servers, v.v. Riêng workerd tập trung chủ yếu vào HTTP servers, do đó nó không chỉ tiếp nhận và trả về requests, nó còn có thể đẩy events về phía máy khách.

• Các API chuẩn của web: Các API như Fetch, URL, WebCrypto, v.v. đều được cài đặt trong workerd, giúp ứng dụng của bạn dễ dàng chuyển sang chạy trên trình duyệt, hoặc các môi trường thực thi khác.

• Nanoservices: Microservices là kiểu chúng ta chia nhỏ ứng dụng thành từng dịch vụ nhỏ hơn, và các dịch vụ này giao tiếp với nhau thông qua network. Microservices giúp cho việc xây dựng và triển khai các thành phần của ứng dụng có thể tiến hành song song, nâng cao hiệu suất của nhóm phát triển. Bù lại tốc độ tương tác giữa các microservices chậm đi một chút vì dữ liệu phải gửi qua network, đồng thời microservices đòi hỏi phải có cấu hình tốt để đảm bảo độ tin cậy và tính bảo mật.

  Nanoservices cũng tương tự nhưng có chút khác. Mỗi dịch vụ sẽ là một Worker, và các Worker sẽ được cài đặt để chạy chung trong một process. Mỗi Worker sẽ được thực thi trong một môi trường “độc lập”, với code và tầm vực (scope) riêng. Vì các Workers chạy chung một process nên tốc độ khi giao tiếp với nhau sẽ nhanh hơn, gần như bằng lời gọi hàm.

  Vì lý do này mà workerd được thiết kế để tối ưu hóa việc chia sẻ các tài nguyên, nhằm giảm chi phí chuyển đổi ngữ cảnh qua lại. Hơn nữa, các APIs bên trong workerd được viết bằng native code, không phải bằng JavaScript, nên không tốn thời gian tải và tốc độ thực thi sẽ nhanh hơn.

• Triển khai đồng nhất (homogeneous deployment): Mỗi dịch vụ trong microservices sẽ được gán vào một/nhiều containers, cùng với các luật để tự động tăng/giảm tải khi cần thiết. workerd theo một hướng triển khai khác khi tất cả dịch vụ đều được triển khai ở tất cả các máy. Lý do là vì Worker chạy trên workerd rất nhẹ, có thể chạy hàng trăm tới hàng ngàn dịch vụ trong một máy chủ. Bằng cách này, chúng ta không cần phải lo tăng/giảm tải cho từng dịch vụ, mà chỉ cần cân bằng tải cho toàn hệ thống, và gắn thêm máy chủ khi cần thiết.

• Ngăn chặn tấn công Server-side Request Forgery (SSRF): Hàm fetch() của workerd chỉ có thể gọi đến những URL được cho phép, giúp giảm rủi ro ứng dụng bị lừa gọi đến những địa chỉ không mong muốn.

• Luôn luôn tương thích ngược: workerd sử dụng hệ thống tương thích của Workers. Điều này giúp bạn có thể thoải mái nâng cấp workerd mà không lo ứng dụng bị bể.

workerd được phát hành theo giấy phép Apache 2.0.

Tin vắn

• HTTP Archive công bố bản báo cáo Web Almanac 2022: Bằng cách phân tích 43.88 TB dữ liệu và metadata của 8.36 triệu websites, HTTP Archive cung cấp một cái nhìn về các công nghệ đang được sử dụng trong thế giới web. Đọc thêm ở đây để xem mọi người sử dụng CSS thế nào, Webpack hay Parcel được nhiều trang sử dụng hơn, hay định dạng font nào đang phổ biết nhất nhe.

• SQLite và Chrome hợp tác để phát triển SQLite bằng Wasm [Nguồn]: Nhanh hơn, xịn hơn, tạm biệt WebSQL 👋

• Import Maps sắp vào ngả vào lòng WebKit [Nguồn]: Import Maps giúp bạn quy định đường dẫn/tập tin/URL nào sẽ được tải khi import ES module.

• Ezno, (lại) một trình biên dịch mới cho JavaScript: Ezno có thể coi như là một bản mở rộng của trình biên dịch TypeScript: hỗ trợ kiểm tra kiểu dữ liệu, theo dấu side-effect, đi kèm với một Language Server Plugin, v.v. Sau bun được viết bằng Zig thì Ezno phải viết bằng Rút 🦀 thôi. Tương lai của Ezno thế nào thì không biết được, nhưng dự án này cũng đáng để theo dõi nếu bạn quan tâm viết một trình biên dịch như thế nào. Bật mí là tác giả của Ezno mới 21 tuổi thôi 😫

• Eleventy (11ty) giới thiệu WebC [Nguồn]: WebC là một định dạng Web Component được Zach Leatherman, tác giả của 11ty, phát triển. WebC chứa HTML, CSS, và JavaScript, tất cả trong một tập tin duy nhất. Bạn có thể tìm hiểu thêm về WebC ở video này.

Ngoài lề: Mình nghĩ “island” sẽ là từ khóa của năm 2022 quá 😫

Đọc gì cuối tuần?

• The Smartest Website You Haven’t Heard of: Câu chuyện vì sao tác giả nghĩ rằng mcmaster.com, một trang bán bù lon con táng và nhiều thứ khác, lại là website thông minh nhất quả đất. Căn bản là khách hàng có thể dễ dàng tìm đến sản phẩm mình cần mà không bị lóa mắt bởi những cái hào nhoáng như font xịn, animation mượt mà, hay gợi ý từ AI. Kết luận của mình là “cũng tùy”, mỗi website phục vụ một phân khúc khách hàng riêng mà 🤷‍♂️

• The new wave of Javascript web frameworks: Đếm sơ qua thì chúng ta đang có một nùi JS framework: React, Svelte, Vue, Solid, Astro, Marko, Fresh, Next, Remix, Qwik, v.v. Vì sao ra nông nỗi này, tương lai sẽ ra sao? Đọc qua để xem lại lịch sử của ngành làm web nhe. Bài khá vui vì PHP được nhắc đến không dưới 3 lần.

• Signal Boosting: Đâu đó vài tuần trước Preact giới thiệu Signal, thư viện quản lý trạng thái nhìn khá xịn xò. Tuần này hãy đọc qua để biết Signal được thiết kế như thế nào ha.

• Speedy CSS Tip! Animated Loader: Tác giả Jhey Tompkins hướng dẫn tạo một cái loading spinner hoàn toàn bằng HTML và CSS, với phần animation sử dụng chỉ mục (index) và biến CSS để tăng giảm opacity. Chiêu này mình mới biết 👍

Kết

Mãi mới cũng lết qua được bản tin Ehkoo thứ ba rồi 🥲 Mọi người có góp ý gì thì để lại bình luận bên dưới nha. Nếu chưa đăng ký thì cũng đừng ngại ngùng mà để lại email luôn.

Hẹn gặp lại các bạn trong tuần sau nhe, bái bai 👋