Chuyển đến nội dung chính

Bài đăng

Hiển thị các bài đăng có nhãn Web

SEO for Flutter web: when to prerender and when not to

Flutter web is not a CMS. SEO-critical marketing pages often want HTML. This article turns that observation into a small implementation model you can test, measure, and keep boring when the app grows. The problem in one sentence Documented limits, hybrid HTML, and marketing page strategies. The useful question is not whether the API or pattern looks elegant in isolation. It is where state lives, which boundary owns failure, and how a user recovers when the happy path disappears. A practical model Use Flutter for app surfaces; host blog/docs as static HTML. Start with one explicit owner for the behavior. Keep widgets responsible for rendering and user intent; keep IO, persistence, permissions, and retries behind a small interface. That gives you a seam for a fake in tests and a place to record the facts that matter in production. For a Flutter app, the boundary usually looks like this: The widget emits an intent such as load, submit, refresh, or retry. A controller or use case...

Embedding Flutter into an existing marketing site

You can add a Flutter product surface without replacing the CMS site. This article turns that observation into a small implementation model you can test, measure, and keep boring when the app grows. The problem in one sentence Element embedding, lifecycle, and SEO-safe boundaries. The useful question is not whether the API or pattern looks elegant in isolation. It is where state lives, which boundary owns failure, and how a user recovers when the happy path disappears. A practical model Keep crawlable content in HTML; put the interactive app in Flutter. Start with one explicit owner for the behavior. Keep widgets responsible for rendering and user intent; keep IO, persistence, permissions, and retries behind a small interface. That gives you a seam for a fake in tests and a place to record the facts that matter in production. For a Flutter app, the boundary usually looks like this: The widget emits an intent such as load, submit, refresh, or retry. A controller or use case va...

Wasm deferred loading: split Flutter web for first paint

Wasm unlocks near-native graphics and a new packaging discipline. This article turns that observation into a small implementation model you can test, measure, and keep boring when the app grows. The problem in one sentence Opt into —wasm and —enable-wasm-deferred-loading for smaller boot bundles. The useful question is not whether the API or pattern looks elegant in isolation. It is where state lives, which boundary owns failure, and how a user recovers when the happy path disappears. A practical model Keep login/shell in the main module; defer admin and heavy editors. Start with one explicit owner for the behavior. Keep widgets responsible for rendering and user intent; keep IO, persistence, permissions, and retries behind a small interface. That gives you a seam for a fake in tests and a place to record the facts that matter in production. For a Flutter app, the boundary usually looks like this: The widget emits an intent such as load, submit, refresh, or retry. A controlle...

Jaspr: Dart server-driven cho web

Jaspr mang mental model component lên Dart phía server. Nếu bạn thích cấu trúc Flutter nhưng cần HTML/SEO, đây là hệ sinh thái kề cận — đáng chú ý khi góp phần vào hiện diện web của chính Flutter. Bài học Model Dart dùng chung giữa API, UI server và client Flutter giảm lệch DTO. SSR/hydration là vấn đề đóng gói nhiều như vấn đề UI. Server component khuyến khích trang nhàm chán, cache được. Cạm bẫy Đừng giả định widget Flutter chạy nguyên xi. Constraint layout và lifecycle khác mobile. Cân nhắc Jaspr cho site nội dung và dashboard nơi SEO quan trọng và Dart đã là ngôn ngữ của bạn. Bài viết gốc đăng tại FlutterCook . Bản trên đó là bản được cập nhật mới nhất.

Flutter web Wasm: deferred loading để first paint nhẹ hơn

Wasm mở khóa đồ họa gần native trên web — kèm kỷ luật đóng gói mới. Flutter 3.47 thêm deferred loading experimental cho build Wasm để tách app lớn thành module lazy. Lệnh build flutter build web --release --wasm flutter build web --release --wasm --enable-wasm-deferred-loading Điều kiện tiên quyết Rời dart:html sang package:web và JS interop hiện đại. Update package còn giả định interop chỉ dart2js. Chiến lược tách module Giữ login/shell ở module chính. Defer màn nặng (admin, editor, map). Đo time to interactive , không chỉ dung lượng tải. Cạm bẫy Library deferred không được bắt buộc ở frame đầu. UI nặng canvas/Skottie vẫn cần ngân sách asset chặt. Không phải tổ hợp browser/flag nào cũng giống nhau — test Chrome, Safari, Firefox. Bài viết gốc đăng tại FlutterCook . Bản trên đó là bản được cập nhật mới nhất.

Jaspr: server-driven Dart for the web

Jaspr brings a component mental model to Dart on the server. If you like Flutter’s structure but need HTML/SEO, this is the adjacent ecosystem — notably powering parts of Flutter’s own web presence. Lessons Shared Dart models between API, server UI, and Flutter clients reduce DTO drift. SSR/hydration is a packaging problem as much as a UI problem. Server components encourage boring, cacheable pages. Pitfalls Do not assume Flutter widgets work unchanged. Layout constraints and lifecycle differ from mobile. Consider Jaspr for content sites and dashboards where SEO matters and Dart is already your language. Originally published on FlutterCook . Read the latest version there — that copy is the one kept up to date.

Flutter web Wasm: deferred loading for smaller first paint

Wasm unlocks near-native graphics on the web — and a new packaging discipline. Flutter 3.47 adds experimental deferred loading for Wasm builds so you can split a large app into lazy modules. Build commands flutter build web --release --wasm # experimental deferred modules (main channel flag in 3.47 era) flutter build web --release --wasm --enable-wasm-deferred-loading Prerequisites Migrate off dart:html to package:web and modern JS interop. Update packages that still assume dart2js-only interop. Splitting strategy Keep login/shell in the main module. Defer heavy feature screens (admin, editors, maps). Measure time to interactive , not just download size. Pitfalls Deferred libraries must not be required during first frame. Wasm + canvas/Skottie-heavy UIs still need careful asset budgets. Not every browser/flag combination is equal — test Chrome, Safari, Firefox. Originally published on FlutterCook . Read the latest version there — that copy is the one...

Flutter web biên dịch sang WebAssembly: được gì, mất gì

flutter build web --wasm trông như một cờ bạn bật lên cho nhanh. Thực chất nó gần với đổi runtime hơn. Đứng sau cờ đó là dart2wasm , một compiler khác dart2js, sinh mã cho một cỗ máy khác, với một tập thư viện lõi khác hẳn. Code hôm qua build được hôm nay có thể hỏng — không phải vì nó sai, mà vì nó import một thư viện không còn tồn tại trên target mới. Chi phí migration hầu như không nằm ở code của bạn. Phần lớn code ứng dụng không đụng trực tiếp vào dart:html ; nó gọi một package, package đó gọi một package khác, và cái cuối cùng mới đụng. Nên lần build --wasm đầu tiên của một app thật thường chết ở đâu đó ba tầng sâu trong cây dependency, trong một file bạn chưa từng mở, thuộc một package bạn không hề chủ động chọn. Và nằm sau tất cả những chuyện đó là điều không cờ biên dịch nào thay đổi được: app Flutter web vẽ lên một canvas. Thứ tới trình duyệt là một ứng dụng, không phải một tài liệu. Riêng sự thật đó kéo theo hầu hết các giới hạn thẳng thắn ở dưới — first paint, SEO, tìm t...

Flutter on the web compiled to WebAssembly: what you get, what you give up

flutter build web --wasm reads like a flag you turn on for speed. It is closer to switching runtimes. Behind it sits dart2wasm , a different compiler from dart2js, emitting code for a different machine, with a different set of core libraries available to you. Code that compiled yesterday can stop compiling today — not because it is wrong, but because it imports a library that no longer exists on the target. The migration cost is almost never in your own code. Most application code never touches dart:html directly; it calls a package, which calls a package, which does. So the first --wasm build of a real app usually fails somewhere three levels down your dependency graph, in a file you have never opened, in a package you did not choose deliberately. And past all of that sits the part no compiler flag changes: a Flutter web app paints into a canvas. The bytes that arrive in the browser are an application, not a document. That single fact drives most of the honest limitations below —...

Using web technology to build mobile apps: the 2026 technical map

“Can web technology build a mobile app?” expired as a question years ago. The question that still earns its keep is: which of the four paths are you on, and do you know what you’re trading away? This is a technical map, not a pitch for anyone’s framework. Every number here carries a source and a date — and you’ll find that most of the work in this article goes into removing dead evidence the industry is still citing . Four paths, not one People lump everything under “hybrid.” They differ at the architectural layer, and that difference decides everything downstream: Pure PWA — nothing packaged. Users arrive via URL and add to home screen. No store involved. Native shell + WebView — your web code runs inside WKWebView (iOS) or Android System WebView, with a JS ↔ native bridge for camera, push, biometrics. This is Capacitor, Cordova, Tauri mobile. Native shell + server-rendered HTML — no SPA bundle. The server returns HTML; the native shell turns every link tap into a native sc...