Framework (Preact, Fresh)

• -:

  • form
  • Fresh dùng Preact cho UI
  • Fresh đối với Preact cũng giống như Next.js đối với React. React với Preact cung cấp khả năng render (làm framework), còn Fresh hay Next.js xử lý những thứ còn lại (làm meta-framework)
  • JS là để tăng trải nghiệm người dùng. Framework là để tăng trải nghiệm lập trình viên
  • Fresh và Astro đều cung cấp khả năng render island lần đầu tại server và những lần sau tại client
  • Lịch sử phát triển framework JavaScript
  • Next.js, Remix, Gatsby là những framework mà chính React giới thiệu là nên dùng
  • Preact chỉ là một thư viện render. Nó không có biết gì về server hay routing cả
  • React nên được alias thành preact-compat
  • Nói cho đến cùng thì trang web chỉ là form
  • React được sinh ra để làm việc với trạng thái
  • Route là code viết cho server. Island là code viết cho client
  • UI là kết quả của state và data. State nằm ở client, data nằm ở server
  • So sánh Single Page App (SPA) vs Progressive Web App (PWA)
  • Ý nghĩa tên các thư mục trong một dự án web
  • Ở Preact, onInput sẽ kích hoạt ngay trong lúc nhập, còn onChange chỉ kích hoạt khi người dùng đổi focus

• Component, JSX:

  • key là một thuộc tính đặc biệt của vật thể props để việc render được hiệu quả hơn
  • JSX là cách để viết JS như thể viết HTML
  • Props giúp việc thêm property cho DOM giống như thêm attribute cho HTML
  • Phải viết JSX trong .jsx hoặc .tsx
  • Props là đối số đầu tiên của hàm component, dùng để truyền giá trị các thuộc tính của nó
  • Props là viết tắt của property, nghĩa gốc là tài sản. Tài sản của cha mẹ thì con dùng được, nhưng tài sản của con thì cha mẹ không đụng được
  • Component hàm không có trạng thái (stateless). Component lớp có trạng thái (stateful)
  • Component là những hàm hoặc lớp trả về một khối JSX
  • Dùng fetch dạng promise chứ đừng await trong component
  • Không có async component vì hiệu suất quá tệ
  • Những hàm được export default và được viết hoa ký tự đầu tiên là component
  • Nếu truyền HTML làm giá trị biến thì cần dùng dangerouslySetInnerHTML, nếu không thì sẽ bị mã hoá hết

• Render, quản lý state:

  • createContext() nằm ngoài global, useContext() nằm trong component
  • Giá trị trả về của useContext() là giá trị được truyền vào thuộc tính value của provider
  • useContext() là cách để không phải dùng Consumer
  • Đối số của createContext() quyết định kiểu của value của Context.Provider
  • Chính vì setState render lại cả component, nên với những file component muốn tách ra nhiều hàm độc lập, và state
  • Các hàm set của hook sẽ kích hoạt việc render lại component nơi nó được khai báo
  • Cách dùng useEffect với useState
  • Dùng setState gọn hơn signal nếu không phải truyền setter qua nhiều hàm khác nhau
  • Không dùng mảng hoặc vật thể trong setState được
  • Phải viết hook trong component. Không viết trong loop hoặc if được
  • Trong useEffect chỉ dùng được promise, không dùng async được
  • useEffect được sinh ra là để side effect không tự động chạy mỗi khi component được render
  • Render là quá trình chuyển đổi dữ liệu và code sang HTML
  • effect khác computed ở chỗ một cái có return, một cái không có return
  • Signal chỉ render lại mỗi phần tử HTML chứa giá trị của nó
  • Signal giúp giải quyết các vấn đề do useState hoặc Context tạo ra

• Server:

  • Component nằm trong thư mục island sẽ được render lần đầu ở server, còn những lần sau đều ở client
  • Các hàm được môi trường thực thi cung cấp không hoạt động được ở island
  • Island là những component ở trong thư mục islands
  • Island với partial hydration là một
  • Khi một vật thể được đổ dữ liệu vào, nó được gọi là được tưới nước
  • Mỗi khi state thay đổi thì islands được render lại
  • State giúp cập nhật dữ liệu mà không cần tải lại trang
  • Có một số hàm ở server sẽ không serialize được
  • Khi có một yêu cầu tới một route, handler được gọi trước, sau đó tới component
  • Kết quả được trả về ctx.render(arg) của handler sẽ được truyền lại vào props.data của component
  • Nếu viết handler dưới dạng vật thể thì chỉ những phương thức là động từ HTTP mới được dùng. Nếu viết dưới dạng hàm thì cái hàm đó sẽ trở thành handler luôn
  • Route cần có ít nhất một handler hoặc một component
  • Route không bao giờ được gửi đến client. Island được chạy ở cả server và client
  • Serialize là cách duy nhất để truyền dữ liệu từ server tới client và ngược lại

Illustrated explanations of web development, technology and anthropology