Article...
This commit is contained in:
parent
c5d7c79115
commit
41799df6c4
|
|
@ -10,7 +10,7 @@ description = "Have you ever thought about making a web application, that could
|
||||||
showFullContent = false
|
showFullContent = false
|
||||||
readingTime = true
|
readingTime = true
|
||||||
hideComments = false
|
hideComments = false
|
||||||
draft = true
|
draft = false
|
||||||
+++
|
+++
|
||||||
|
|
||||||
### Table of Contents
|
### Table of Contents
|
||||||
|
|
@ -27,15 +27,15 @@ draft = true
|
||||||
|
|
||||||
# Introduction
|
# Introduction
|
||||||
|
|
||||||
This post is about my experience of making a prototype of a web app with plugin support as well as my reasoning. As a result, this app could be extended by adding compiled `.dll` class libraries into a plugins folder. I've made it possible to load not only classes, but also views and api controllers. You could check out the final version of this prototype in this [GitHub Repo](//github.com/the1mason/prototype.modularmvc).
|
This post is about my experience of making a prototype of a web app with plugin support as well as my reasoning. As a result, this app could be extended by adding compiled `.dll` class libraries into a plugins folder. I've made it possible to load not only classes but also views and API controllers. You can check out the final version of this prototype in this [GitHub Repo](//github.com/the1mason/prototype.modularmvc).
|
||||||
Also right now I'm building a web application, using similar concepts. As of now it's not on github, but you can find it [here](//git.the1mason.com/the1mason/octocore).
|
Also right now I'm building a web application, using similar concepts. As of now, it's not on github, but you can find it [here](//git.the1mason.com/the1mason/octocore).
|
||||||
|
|
||||||
<script src="/js/repo-card.js"></script>
|
<script src="/js/repo-card.js"></script>
|
||||||
<div class="repo-card" data-repo="the1mason/Prototype.ModularMVC" data-theme="dark-theme"></div>
|
<div class="repo-card" data-repo="the1mason/Prototype.ModularMVC" data-theme="dark-theme"></div>
|
||||||
|
|
||||||
# Why
|
# Why
|
||||||
|
|
||||||
Self-hosted web applications can solve different problems and be of use for a variety of different people with slightly different needs. In order for this to work, I think that such application should provide an option to extend it's functionality. This would allow other people to build an ecosystem of different extensions.
|
Self-hosted web applications can solve different problems and be of use to a variety of different people with slightly different needs. For this to work, I think that such an application should provide an option to extend its functionality. This would allow other people to build an ecosystem of different extensions.
|
||||||
|
|
||||||
# Stack
|
# Stack
|
||||||
|
|
||||||
|
|
@ -45,22 +45,28 @@ Do you speak *CSharp*?
|
||||||
I do. It's my main language after all, but why MVC and what is HTMX?
|
I do. It's my main language after all, but why MVC and what is HTMX?
|
||||||
Let's have a quick look at worthy alternatives, and then I'll explain my choices.
|
Let's have a quick look at worthy alternatives, and then I'll explain my choices.
|
||||||
|
|
||||||
`Blazor WASM` does not support runtime assembly loading, which makes client extension impossible. It has [Lazy loading](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-lazy-load-assemblies?view=aspnetcore-8.0), but still it requires these assemblies to be defined in the project file, which is not viable for our case.
|
`Blazor WASM` does not support runtime assembly loading, which makes client extension impossible. It has [Lazy loading](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-lazy-load-assemblies?view=aspnetcore-8.0), but it still requires these assemblies to be defined in the project file, which is not viable for our case.
|
||||||
|
|
||||||
`WebApi + <name a JS framework>` is also not an option. It would require plugins to be written in two languages. Also client would have to be rebuilt after each plugin istallation.
|
`WebApi + <name a JS framework>` is also not an option. It would require plugins to be written in two languages. Also, the client would have to be rebuilt after each plugin installation.
|
||||||
|
|
||||||
So, what are MVC and HTMX?
|
So, what are MVC and HTMX?
|
||||||
|
|
||||||
`ASP.NET MVC` is an older framework that uses `Razor Pages` to render HTML on server and return it to the client. But it has a significant problem: Lack of reactivity. Each user's action would have to be processed on the server like in the good old days...
|
`ASP.NET MVC` is an older framework that uses `Razor Pages` to render HTML on a server and return it to the client. But it has a significant problem: Lack of reactivity. Each user's action would have to be processed on the server like in the good old days...
|
||||||
So in order for the app to be usable, I have decided to go with `HTMX`:
|
So in order for the app to be usable, I have decided to go with `HTMX`:
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
> htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext.
|
> htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext.
|
||||||
> *— from [htmx.org](htmx.org)*
|
> *— from [htmx.org](htmx.org)*
|
||||||
|
|
||||||
|
<div style="display: flex; justify-content: center">
|
||||||
|
<img src="/posts/modular-app/createdwith.jpeg" style="height: 50px;"/>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
|
||||||
This means, that I will use razor pages to generate an HTML body with HTMX tags, and return it to the client. The client would then read HTML, executing HTMX tags. Ain't that awesome?
|
This means, that I will use razor pages to generate an HTML body with HTMX tags, and return it to the client. The client would then read HTML, executing HTMX tags. Ain't that awesome?
|
||||||
|
|
||||||
# How
|
# How
|
||||||
|
|
||||||
:)
|
[This](https://learn.microsoft.com/en-us/dotnet/core/tutorials/creating-app-with-plugin-support) article gives the base for plugin loading. It doesn't cover the ASP.NET part but otherwise is very helpful.
|
||||||
|
Still, I will explain basic concepts here. Just to have everything in one place.
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 1.2 MiB |
Loading…
Reference in New Issue