3 ms·

I take the opposite view, as a recent Blazor convert since the just released .NET 8 we're now recommending Blazor for any new .NET Web App (excl. CDN Hostable,

by mythz 3y ago

I take the opposite view, as a recent Blazor convert since the just released .NET 8 we're now recommending Blazor for any new .NET Web App (excl. CDN Hostable, SSG websites). I was short on Blazor before .NET 8 and could only seriously recommend it for Internal Apps since the compromises for using either of Blazor's Server or WASM Interactivity delivered a poor UX for Intranet hosted Apps as covered by this post. However that's changed in .NET 8 Blazor's default Static Rendering where you're effectively able to develop traditional Server Rendered Apps like Razor Pages/MVC but with Blazor's superior component model, advanced features like Streaming Rendering and its built-in (smart) Enhanced Navigation which gives simple Server Rendered App's SPA-like responsiveness without any of npm's build tool complexity, need to manage separate client routing, heavy client state, npm dependencies, large JS bundles, etc. Even better is that you no longer need to use Blazor Interactivity for any Web App features, e.g. which we avoid in our "Blazor Vue" (100% SSR) Tailwind template that progressively enhances statically rendered Blazor content with Vue.js. I cover this approach in detail in our ".NET 8's Best Blazor" [1] blog post. As it embraces the simplicity of "No Build" JavaScript Modules (i.e. avoiding npm deps + build tools) it's now become my preferred approach for most .NET Web Apps. Blazor Diffusion [2] is an example App built using this template, originally developed in Blazor Server, deployed as WASM but now converted to "Blazor SSR + Vue", source code available at [3]. [1] https://servicestack.net/posts/net8-best-blazor https://servicestack.net/posts/net8-best-blazor [2] https://blazordiffusion.com https://blazordiffusion.com [3] https://github.com/NetCoreApps/BlazorDiffusionVue https://github.com/NetCoreApps/BlazorDiffusionVue

jddj 3y ago
Very interesting, and the first time I might have been nearly sold on it. Maybe next new project I'll try it out. Razor pages with JavaScript on the front end and automatic diffing on the backend is definitely appealing. As much as I don't like the idea in general of serverside session state. By the way, I think if you used a light-dom framework like alpine or petite-vue you would avoid most of the issues with the page not recalculating the front-end state on navigation.
- mythz 3y ago
  > By the way, I think if you used a light-dom framework like alpine or petite-vue you would avoid most of the issues with the page not recalculating the front-end state on navigation. Unfortunately it's how Blazor Enhanced Navigation works where it compares the rendered content of the new page and diffs in the changes so I'm not expecting it to work by default (i.e. without adopting a workaround) with any JS FX that dynamically generates the UI as it'll get replaced back into an empty div when Blazor patches in the new page elements. Also I wouldn't recommend "lite-dom" FX's like PetiteVue which has basically been unmaintained since 2021, has poor composition/component model and pretty glaring bugs/limitations you're likely to hit very quickly for any complex UI. We ended up having to rewrite all our Built-in UIs [1] with Vue 3 [2] to overcome its limitations. The 40kb increase in minified/compressed .js size vs vue.min.js is not worth the pain of working within its limitations. [1] https://servicestack.net/auto-ui https://servicestack.net/auto-ui [2] https://docs.servicestack.net/releases/v6_07#new-locode-api-explorer-admin-uis-now-in-vue-3 https://docs.servicestack.net/releases/v6_07#new-locode-api-...
  - jddj 3y ago
    Ah, ok. I did that same rewrite (alpinejs to vue3) in a project of mine. I did it for CSP reasons rather than performance/behaviour limitations despite spending quite a while getting recursive generation to work. The next project has less untrusted input and a simpler datamodel so I went with alpine again and I've not had any issues whatsoever. Good to know about the bugs/abandonment of petit-vue. Admittedly, I probably shouldn't have recommended it above without having used it.
feoren 3y ago
> Blazor SSR + Vue I'm sorry, but WTF? You spend 5 paragraphs talking about how great Blazor Server-Side Rendering is and then throw a "+ Vue" right at the end? WTF? So it's not SSR at all!? How are you avoiding npm and JavaScript builds when you're literally using Vue? That little example app you showed has ~3500 lines of JavaScript in it ...
- mythz 3y ago
  > So it's not SSR at all!? It is 100% using Blazor SSR, i.e. uses Blazor Static Rendering on all Blazor Pages and never uses Blazor Server or WebAssembly Interactive render modes. > How are you avoiding npm and JavaScript builds when you're literally using Vue? Because all interactivity is implemented by progressively enhancing Blazor Static Rendered pages with an ESM build of vue.min.js, which doesn't require any npm dependencies or any build tools. Vue.js is a dependency-free 60kb gzip download loaded directly by browsers using its native JavaScript Modules and Import Maps support, i.e. same approach DHH has moved to [1] for all his new Rails Apps precisely because it lets you develop modern Web Apps without any npm dependencies or build tools since it uses the Browsers native module support for loading JavaScript modules. > That little example app you showed has ~3500 lines of JavaScript in it ... https://blazordiffusion.com https://blazordiffusion.com is an example of how you can build highly interactive Web Applications without ever needing to resort to Blazor Web Assembly or Blazor Server Sockets for any interactivity features. For a more traditional Web Application that's primarily server rendered, including a markdown powered Blog and Auto CRUD UIs which uses pockets of Vue.js for any components requiring interactivity, checkout a Live Demo of the empty (100% SSR) blazor-vue template [2]: https://blazor-vue.web-templates.io https://blazor-vue.web-templates.io [1] https://world.hey.com/dhh/you-can-t-get-faster-than-no-build-7a44131c https://world.hey.com/dhh/you-can-t-get-faster-than-no-build... [2] https://github.com/NetCoreTemplates/blazor-vue https://github.com/NetCoreTemplates/blazor-vue

by mythz 3y ago

jddj 3y ago

Very interesting, and the first time I might have been nearly sold on it. Maybe next new project I'll try it out. Razor pages with JavaScript on the front end and automatic diffing on the backend is definitely appealing. As much as I don't like the idea in general of serverside session state. By the way, I think if you used a light-dom framework like alpine or petite-vue you would avoid most of the issues with the page not recalculating the front-end state on navigation.

mythz 3y ago
> By the way, I think if you used a light-dom framework like alpine or petite-vue you would avoid most of the issues with the page not recalculating the front-end state on navigation. Unfortunately it's how Blazor Enhanced Navigation works where it compares the rendered content of the new page and diffs in the changes so I'm not expecting it to work by default (i.e. without adopting a workaround) with any JS FX that dynamically generates the UI as it'll get replaced back into an empty div when Blazor patches in the new page elements. Also I wouldn't recommend "lite-dom" FX's like PetiteVue which has basically been unmaintained since 2021, has poor composition/component model and pretty glaring bugs/limitations you're likely to hit very quickly for any complex UI. We ended up having to rewrite all our Built-in UIs [1] with Vue 3 [2] to overcome its limitations. The 40kb increase in minified/compressed .js size vs vue.min.js is not worth the pain of working within its limitations. [1] https://servicestack.net/auto-ui https://servicestack.net/auto-ui [2] https://docs.servicestack.net/releases/v6_07#new-locode-api-explorer-admin-uis-now-in-vue-3 https://docs.servicestack.net/releases/v6_07#new-locode-api-...
- jddj 3y ago
  Ah, ok. I did that same rewrite (alpinejs to vue3) in a project of mine. I did it for CSP reasons rather than performance/behaviour limitations despite spending quite a while getting recursive generation to work. The next project has less untrusted input and a simpler datamodel so I went with alpine again and I've not had any issues whatsoever. Good to know about the bugs/abandonment of petit-vue. Admittedly, I probably shouldn't have recommended it above without having used it.

feoren 3y ago

> Blazor SSR + Vue I'm sorry, but WTF? You spend 5 paragraphs talking about how great Blazor Server-Side Rendering is and then throw a "+ Vue" right at the end? WTF? So it's not SSR at all!? How are you avoiding npm and JavaScript builds when you're literally using Vue? That little example app you showed has ~3500 lines of JavaScript in it ...

mythz 3y ago
> So it's not SSR at all!? It is 100% using Blazor SSR, i.e. uses Blazor Static Rendering on all Blazor Pages and never uses Blazor Server or WebAssembly Interactive render modes. > How are you avoiding npm and JavaScript builds when you're literally using Vue? Because all interactivity is implemented by progressively enhancing Blazor Static Rendered pages with an ESM build of vue.min.js, which doesn't require any npm dependencies or any build tools. Vue.js is a dependency-free 60kb gzip download loaded directly by browsers using its native JavaScript Modules and Import Maps support, i.e. same approach DHH has moved to [1] for all his new Rails Apps precisely because it lets you develop modern Web Apps without any npm dependencies or build tools since it uses the Browsers native module support for loading JavaScript modules. > That little example app you showed has ~3500 lines of JavaScript in it ... https://blazordiffusion.com https://blazordiffusion.com is an example of how you can build highly interactive Web Applications without ever needing to resort to Blazor Web Assembly or Blazor Server Sockets for any interactivity features. For a more traditional Web Application that's primarily server rendered, including a markdown powered Blog and Auto CRUD UIs which uses pockets of Vue.js for any components requiring interactivity, checkout a Live Demo of the empty (100% SSR) blazor-vue template [2]: https://blazor-vue.web-templates.io https://blazor-vue.web-templates.io [1] https://world.hey.com/dhh/you-can-t-get-faster-than-no-build-7a44131c https://world.hey.com/dhh/you-can-t-get-faster-than-no-build... [2] https://github.com/NetCoreTemplates/blazor-vue https://github.com/NetCoreTemplates/blazor-vue