search

dashborg / hibiki

Hibiki HTML
https://www.hibikihtml.com/
Mozilla Public License 2.0
468 stars 6 forks source link

Few observations #1

Closed ansarizafar closed 2 years ago

ansarizafar commented 2 years ago

hibiki looks great but the library size is big in comparison to other similar frameworks like htmx. Is it possible to reduce library size?

Is there any example of using transition/animation, custom form validation, client side routing and using third party javascript libraries with hibiki?

I recommend discord n place of slack for community support.

sawka commented 2 years ago

Thanks Zafar, the library size is big, my goal is to make it more functional by adding features rather than smaller and lightweight. There is some potential to reduce the size (maybe 10-50k), but it will never be the size of something like htmx.

I'm working on a larger set of examples. Right now, for transition/animation your best bet is CSS libraries and then adding/removing classes. Hibiki also provides a "sleep" function which can help with adding and removing classes: e.g. //@hibiki/sleep(ms=100). Custom form validation will depend on the CSS library you're using, but the idea would be to pass the form values to the backend over ajax and then return the errors. The backend can also use hibikiactions to directly set the errors into the data model.

3rd party JS needs more documentation. There are two options, one for adding react controls and one for general 3rd party integration. React components can be added by first registering them with and adding the "react" attribute. You then register the actual JS class using Hibiki.registerLocalReactComponentImpl(name, component) (name matching the name you gave in define-component). Then Hibiki attributes will be converted to props when calling your component.

For examples of non-React integration you can see here. This is a really simple D3 integration: https://github.com/dashborg/hibiki/blob/main/static/libs/d3.html (https://tests.hibikihtml.com/test-d3.html). And this is the integration I did with CodeMirror for the playground: https://github.com/dashborg/hibiki/blob/main/playground/libs/codemirror.html .

Thanks for your suggestion, I'll check out discord.

ansarizafar commented 2 years ago

Thanks for your reply. Modem web frameworks are trying to reduce size as bigger size means more javascript to parse and execute. Mobx is heavy and we can try to replace it with Solidjs like https://github.com/solidjs/react-solid-state Solidjs a very fast and small reactive framework.

sawka commented 2 years ago

Thanks for the tip with SolidJS. I'll definitely check it out, but it would be a heavy lift right now because I use class components for my React code and I definitely have more experience coding with MobX (I know a lot of the pitfalls and workarounds). Good call on Discord, switching over now, set up the server and replaced the link in the README to point to the new server.