Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: switch from angular/AJAX+Boostrap to HTMX+PicoCSS #345

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

berezovskyi
Copy link
Member

@berezovskyi berezovskyi commented Jan 18, 2025

I spent 3 hours updating Angular 10 to 11 yesterday and the migration is not fully complete. Mind you, the current version of Angular is 19 and the recommendation is to upgrade only one major version at a time.

Now I spent just 2 hours to write a complete delegated dialog implementation using HTMX instead of making AJAX requests and using Angular to dynamically render results.

Instead, HTMX is a hypermedia framework that is declaratively configured to make HTTP requests and place responses into the HTML DOM. OSLC, being an LDP REST API built with hypermedia principles at heart is perfectly aligned with HTMX. A lot of code can be removed as a result.

One of the best things is that HTMX does not intend to make breaking change like modern frontend frameworks and be more like jQuery in terms of stability. I think it's a perfect fit for the refimpl that needs to reduce the maintenance burden.

Screen.Recording.2025-01-18.at.14.23.29.mov

Comment on lines +22 to +34
<aside>
<nav>
<ul>
<c:forEach var="requirement" items="${resources}">
<li>
<a href="${requirement.about}"
onclick="sendOslcSelectionPostMessage(this, event)"
>${requirement.title}</a>
</li>
</c:forEach>
</ul>
</nav>
</aside>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this tiny bit of HTML is what gets rendered every time HTMX makes a search request and it dynamically replaces the contents of the #search-results div with this content returned by the server. Simple and easy.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant