Web

web.dev

• -:

  • Render phía máy chủ nhanh và SEO tốt. Render phía người dùng phù hợp cho những ứng dụng cần tương tác nhiều
  • Web ban đầu được lập ra chỉ để trao đổi tập tin nội bộ, nên nó không được thiết kế để sẵn sàng cho nhu cầu hiện tại
  • Lập trình web có rào cản gia nhập thấp nhất trong các loại lập trình
  • Trước đây các trình duyệt có tạo API Crypto. Sau này được chuẩn hoá thì dùng SubtleCrypto

• Framework (Preact, Fresh):

  • 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
  • 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
  • Phải viết JSX trong .jsx hoặc .tsx
  • Props giúp việc thêm property cho DOM giống như thêm attribute cho HTML
  • 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
  • Dùng fetch dạng promise chứ đừng await trong component
  • Những hàm được export default và được viết hoa ký tự đầu tiên là component
  • Không có async component vì hiệu suất quá tệ
  • 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
  • Facebook tạo ra React vì jQuery không đáp ứng đủ nhu cầu
  • 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)
  • 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
  • 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
  • Nói cho đến cùng thì trang web chỉ là form
  • 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
  • Lịch sử phát triển framework JavaScript
  • createContext() nằm ngoài global, useContext() nằm trong component
  • useContext() là cách để không phải dùng Consumer
  • Giá trị trả về của useContext() là giá trị được truyền vào thuộc tính value của provider
  • Đố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
  • Không dùng mảng hoặc vật thể trong setState được
  • 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
  • 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
  • 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
  • effect khác computed ở chỗ một cái có return, một cái không có return
  • Render là quá trình chuyển đổi dữ liệu và code sang HTML
  • Route là code viết cho server. Island là code viết cho client
  • 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
  • Khi một vật thể được đổ dữ liệu vào, nó được gọi là được tưới nước
  • Island với partial hydration là một
  • State giúp cập nhật dữ liệu mà không cần tải lại trang
  • Mỗi khi state thay đổi thì islands được render lại
  • 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
  • Next.js, Remix, Gatsby là những framework mà chính React giới thiệu là nên dùng
  • 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
  • ❓Metaframework với server-side framework là một
  • React được sinh ra để làm việc với trạng thái
  • UI là kết quả của state và data. State nằm ở client, data nằm ở server

• Trình duyệt:

  • Cache là dữ liệu đã được tải trước để giúp giảm thời gian tải trang
  • Nếu tạo CORS proxy thì chỉ trả về đúng HTML thôi, đừng xử lý gì trên đó hết
  • Same-origin policy ngăn chặn việc script ở tab này điều khiển tab kia
  • CORS là để trình duyệt bảo vệ người dùng, không phải để bảo vệ máy chủ
  • Việc cô lập các tab là một cái giá phải trả để tránh một lỗi bảo mật
  • HTML parser, DOM parser, trình duyệt
  • DOM property khác HTML attribute
  • Nếu không có DOM, JS sẽ không có bất cứ mô hình hoặc ý niệm nào về trang web, tài liệu HTML, SVG và các thành phần khác
  • DOM là kết quả của việc phân tích cú pháp một tài liệu HTML cộng với
  • Worker là một tính năng của trình duyệt
  • Cookie lưu thông tin cá nhân để server nhận dạng được ai với ai. Giống như bệnh viện dùng sổ khám bệnh để biết mình là ai và đã được điều trị thế nào

Nơi thảo luận