3 ms·
Couple years ago I gave some thought about how to handle reusable JS in a sane fashion. Actually, a lot of thought. The end result was something that superficia
by romaniv 10y ago
Couple years ago I gave some thought about how to handle reusable JS in a sane fashion. Actually, a lot of thought. The end result was something that superficially sounds like Web Components, but it quite different underneath. I guess a good name for it would be "Web Behaviors".
It's not a framework or a library, but rather a set of rules and practices of how to do things. It will sounds somewhat weird, but I'll list them anyway. Maybe someone will find it useful:
- Overall mental model: libraries don't implement components, but rather change the behavior of certain elements on the page.
- No library keeps state in JavaScript variables. DOM is your model.
- All configuration is also done through DOM with liberal use of CSS selectors to reference things.
- No library has any direct dependencies on any other.
- Things that need to react to changes should (if at all possible) use timers. If that's not possible, they should register global event handlers, rather than attach them to individual components.
While this might horrify some people, it actually forced me to come up with rather nice, abstract behaviors that capture many common features I had to commonly implement. Also, this plays well with the notion of progressive enhancement. I recommend everyone to try it on some new web-based project of low to moderate complexity. Ir really does simplify a lot things.
- bcherny 10y agoDo you have some code samples you could link? On the face of it, this is the exact opposite of what React, Vue, Angular, Ember, Backbone, etc. do.
- romaniv 10y agoA demo of sorts: http://quickenloans.github.io/Behaviors.js/ http://quickenloans.github.io/Behaviors.js/ The code will look extremely non-idiomatic to most frontend engineers. Treat it as a thought experiment (which it is). The important thing isn't the particular implementation, but the ideas I outlined above. There are other, often simpler, ways to implement the same concepts. One property of these libraries that might not be immediately obvious is that they "automatically" adapt to changes on the page. So you can add an element with a behavior via AJAX or dev tools and it will actually work. This is why using timers and global events is a part of that list. Another thing is that none of these libraries have an API or modify the global JS namespace. This is part of the thought experiment not directly related to the main concepts. It drives some of the complexity. Edit: Fixed the link.
- c-smile 10y agoAppears as close enough to principles of Twitter Flight (https://flightjs.github.io/ https://flightjs.github.io/) - principles of creating loosely coupled components that communicate with each other by DOM events.