Our great sponsors
-
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
-
dashborg-go-sdk
Modern internal tools. Defined, controlled, and deployed directly from backend code. No JavaScript. Secure.
-
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
Source https://github.com/dashborg/hibiki | Interactive Tutorial https://playground.hibikihtml.com/tutorial/
I love JavaScript, but for many projects -- especially internal tools and prototypes -- setting up a full frontend JavaScript stack (npm, webpack, babel, create-react-app, redux) and all of their configuration files, folders, and scaffolding is overkill.
Hibiki HTML incrementally plugs into any backend, using any template language (even static HTML files) with a single script include. It includes a built-in frontend data model, Vue.js-like rendering, built-in AJAX integration, and a full component/library system.
It is also fully scriptable from your backend AJAX handlers. Anything that Hibiki HTML can do on the frontend can be done with a remote handler by returning specially formatted JSON actions. This allows you to write frontend logic (that would normally be JavaScript code) in your backend handlers.
Background -- Hibiki HTML is a standalone, open-source, more powerful version of the frontend language that I had built for my internal tools startup Dashborg over the past year. It is a reaction against the extreme amount of scaffolding and configuration required to set up a new frontend project, especially when you're a backend/devops/data engineer who isn't a JavaScript expert. As more Hibiki libraries are written, the advantages will hopefully become even more clear.
I'd love to get all of your feedback, questions, and comments. Would love a star on Github if you like the idea. Also, feel free to email me, and/or join the Slack workspace I set up (contact info on Github or the tutorial).
This is cool and definitely something I'm going to look into!
But I have a question for the frontend people.
Is server-side rendering + (something like) Bootstrap + (something like) jQuery really getting you into that much trouble? Even with peppering in HTMX[0]?
I do all my project with Django + Bootstrap + jQuery + (maybe HTMX if needed) and I've never heard any kind of feedback from anyone that suggests I should be doing anything else.
[0] https://htmx.org/
He's talking about AngularJS (v1). It is very different to modern frameworks like Angular (v2+), React, et.al. Frameworks from that era didn't involve setting up any build process.
Have a look at https://angularjs.org/ or https://knockoutjs.com/
He's talking about AngularJS (v1). It is very different to modern frameworks like Angular (v2+), React, et.al. Frameworks from that era didn't involve setting up any build process.
Have a look at https://angularjs.org/ or https://knockoutjs.com/
Ya, I understand your concern, and I may change the license going forward if it causes too much confusion. The intent is that those use cases would be totally fine (unless 3rd party users are literally writing Hibiki HTML code). My intent is more of a temporary anti-cloud-poaching license because I intend to integrate Hibiki into my hosted internal tools platform - https://github.com/sawka/dashborg-go-sdk .
Your project seems to do more but, for a small framework that only needs a small script to work, petite-vue[0] is an alternative.
[0] https://github.com/vuejs/petite-vue
Vite [0] configures React, Vue and more perfectly out of the box
[0] https://github.com/vitejs/vite
I appreciate certainly React and Angular are difficult to get going without some sort of build step (React can do it, but not JSX, so it's not optimal), but Vue has always made it very easy to start right in the browser. AlpineJS[0] is newer on the scene, but it also focusses on doing exactly what Hibiki is trying to do with a much smaller API surface area.
This demo[1] runs a similar template to the initial few in the Hibiki HTML tutorial via Vue. I've been able to use the full Vue templating features and I've used a minimal amount of JS to set it up. The script I've included is ~4x smaller than the minified prod build of Hibiki, and my data models are in a real JS script tag so my code editor will treat it as real JS, as are my event handling methods which interact with my data model. AlpineJS is actually half the size again of Vue's prod build, I just chose Vue as I work with it regularly.
In trying to save developers the trouble of learning JS where they're not familiar, Hibiki feels like a new, less known, less documented DSL wrapped in non-standard HTML tags and lots of esoteric naming conventions in order to connect logic, data and layout together (it gives me ColdFusion vibes). While I could see the idea with remote actions, replicating this kind of loop in JS is trivial and feels less "magic", with the benefit that a strict data structure isn't thrust on the developer that then leaks into their backend code.
If a developer doesn't want to learn JS, they can get by just fine with server rendered pages which need to update with every action. If they want interactive content without reload, it's probably best for them to learn the small amount JS required to do what they want.
I apologise for being so down on the idea, especially as I'm keen to see more projects embrace the approach of keeping it simple, and ridding themselves of painful build steps and huge node_modules folders. But I'm struggling to see the benefits of Hibiki over the incumbent frameworks available.
[0] https://alpinejs.dev
Yeah I can see how Turbo is more geared towards Rails. I feel like Stimulus is easier to combine with non Rails backends. I found this starter project for Stimulus and Go, if you're interested: https://github.com/narup/go-stimulus