10 ms·
Show HN: Way.js – Simple, persistent, framework-agnostic two-way databinding
- ges 12y agoGithub repo: https://github.com/gwendall/way.js https://github.com/gwendall/way.js
- myhf 12y agoHow does it compare to other framework-agnostic binders such as Rivets.js?
- onion2k 12y agoLooks very nice indeed. Especially like the low overhead. I've been using an alternative, Cortex[1], recently. It's similar, but with a pubsub based eventing system so your updates don't need to be broadcast to every component that uses the data model (e.g. you can subscribe callbacks to specific changes in the model). It works nicely with React.js. Worth a look if way.js isn't quite enough. [1] https://github.com/mquan/cortex https://github.com/mquan/cortex
- Kiro 12y agoLooks very straight-forward. Good job! OT: After building a couple of large applications in Angular I've come to realize that I seldom need two-way bindings. The school example where you enter something in an input box and it shows up somewhere else in real-time is not really used in the real world. Or is it? Why do we need two-way data binding?
- progx 12y agoIt depend on your application. Collaboration applications need it.
- UweSchmidt 12y agoHow about: Enter an amount in an input box and see a sub-total in real-time, or alert when constraints are violated? Possibilities are endless and you're more likely to implement them when it is so painless.
- itry 12y agoIs it really more painless to add way.js and its dependencies (jquery.js, underscore.js, underscore.json.js, form2js.js and js2form.js) to your page then to simply add a plain javascript eventhandler to the field you want to validate?
- jcrotor 12y agoThat depends. How many forms and how many fields do you need to validate? jQuery is pretty much standard on most websites, so I don't count that against the author. The total minified dependency file is 123 kb. I will agree that is pretty large if all you are using it for is a single field, but again, a large portion of that is jquery. Also compared to just core angular, which is 104 kb, I would say this is a viable alternative depending of course on your specific use cases. That being said, could an implementation be done without jQuery? Probably. I'm sure the author is open to pull requests if you want to give it a go.
- itry 12y agoWell, you can argue if 5 dependencies and 123 kilobytes of code is much or not. But what does it bring to the table? Your "sub-total" example would just need a normal javascript event handler. Lets say we are uber lazy and use jquery. Then it looks like this: http://jsfiddle.net/La93vk4q/ http://jsfiddle.net/La93vk4q/ How does the way.js version look like? Im sceptical it makes it more elegant.
- nissimk 12y agoI'm with you itry. Thanks for bringing this up here. These folks all want to avoid writing event handlers but these alternatives just make there be many levels of function calls between that actual user event and the developer's code to handle it. In addition to it being much slower, it's a lot harder to figure out what's happening when something goes wrong.
- UweSchmidt 12y agoI guess it depends :) I'm using Angular's databinding and recently it felt as if it was just convenient enough to implement a nice-to-have feature that I might have postponed otherwise. I'm also careful with adding too many dependencies for simple things. But since I've committed to learning and using Angular anyways, I don't mind the weight and like using what it has to offer.
- AndrewDucker 12y agoI rarely need _simultaneous_ two-way databinding. But I do sometimes need databinding from view to model (when I want users to enter data, and it just fills in my object), and I sometimes want databinding from model to view (where my data is nicely displayed). So rather than doing something fiddly and different for each way, it makes more sense to just have 2-way databinding in the first place. And that then makes it easier for when I _do_ want 2-way databinding - for instance allowing users to enter a filter to narrow down a list.
- itry 12y ago> allowing users to enter a filter Wouldn't it be enough to add a keydown event to the field?
- nitrogen 12y agoTwo-way data binding is needed for audio hardware controls that are linked to multiple inputs or to other controls (e.g. a volume control with both a text input and a slider, possibly linked to another volume control from a different channel).
- threeseed 12y agoMight be worth benchmarking against the others: http://jsperf.com/angular-vs-knockout-vs-ember/351 http://jsperf.com/angular-vs-knockout-vs-ember/351 For me personally I am loving VueJS right now.
- girvo 12y agoI'm entirely in love with VueJS. It's just amazing. I only wish I could use it with IE8 so I could replace our old version of Angular that we're stuck with at work, but hey, somethings got to give to get that nice an API.
- nailer 12y agoVue / Ractive / React. I'm not a reactive programming nerd, I just want something simple, and all three of these are implemented so well.
- dodyg 12y agoHow do you compare this with ractivejs.org?
- nailer 12y agoA cursory glance: ractive uses mustache, way uses HTML attributes. Ractive requires you to actually create the binding, way just leverages that HTML.
- ishener 12y agoThat's the only javascript framework one needs. Actually I've been wanting to write something like that for a long time but didn't get around to it. Nice to see someone else did exactly what I wanted...
- itry 12y agoDoes anybody have real world examples of websites that use this kind of thing? Im always under the assumption that the old "post data to server, save it there" model still works best. Am I missing something?
- sehr 12y agoTwo way binding doesn't necessarily negate that.
- ishi 12y agoOne possible use case is "live editing" of an object. Imagine a form that lets you build an HTML button from various properties: text, color, font, background, border-radius etc. Using way.js the button can be updated immediately whenever you change one of its properties, without waiting for a server response. And saving the data to localstorage is very useful when the user is spending a long time filling the form and then accidentally closes the browser / clicks BACK / etc. It's a bit like autosaving a draft version of the form.
- 12y ago
- Ronsenshi 12y agoGreat job, i just wish it was at least no dependent on several other libraries including jQuery.
- danhanly 12y agoIs it me, or should the description read: "This form is bound to the 'formData' property" instead of "This form is binded to the 'formData' property"
- alexjeffrey 12y agoit should, but it doesn't benefit the conversation to point out grammatical errors - plenty of HN users are not natively english-speaking so it's probably best to just let it slide.
- chrismorgan 12y agoI applied to the example here the first test I always make of any things like this: HTML injection. Result: failure. ☹
- cwmma 12y agoyup, my go to test name: \_(ʘ_ʘ)_/ "'<!--/*༼ つ ◕_◕ ༽つ caused it to show { "formData": { "name": "\\_(ʘ_ʘ)_/ \"'
- coolg54321 12y agojust this will do: <! will show: { "formData": { "name": "
- ges 12y agoThanks! Fixed. I added a "way-html" attribute (boolean, false by default) that you can pass to your DOM elements.
- sleepyhead 12y agoWhy use invalid 'way-data'-attributes when there is data-attributes?
- datashaman 12y ago+1.
- plq 12y agoI've been working on something pretty similar, but on the server side. It's called 'Neurons', and it's a pre-alpha Python library. It's built on Spyne[3], an RPC framework which is another side project of mine that I've been working on for ~4 years now. The aim with neurons initially is to let you generate a html form (e.g. [1]) and related services from just a model definition and an instance of this model (e.g. [2]), making it a breeze to publish CRUD pages. It currently handles complex stuff like dates, times, arrays and nested objects just fine. In Spyne terms, that's "serializing a model instance using the HtmlForm protocol". The same object definition can be used to for other protocols like json as well as for persisting data to a relational database (via SQLAlchemy). You can play with the code generator at http://spyne.io http://spyne.io to get a better feel about how it works. One could even write a Spyne protocol that renders a given model instance to way.js code. Help is welcome! [1]: https://github.com/plq/neurons/blob/test_output/html/test_simple_array.html https://github.com/plq/neurons/blob/test_output/html/test_si... [2]: https://github.com/plq/neurons/blob/fccab8fee4c1795f65ac3f9b20d79cb1e9279a3f/neurons/form/test/test_form.py#L193 https://github.com/plq/neurons/blob/fccab8fee4c1795f65ac3f9b... [3]: http://spyne.io http://spyne.io
- woah 12y agoOh man, I've had to work on projects with serverside form generation (python people are really into this stuff for some reason), and it's a huge pain. Backend engineer thinks it's going to be way easier or something not having to write templates, however on the frontend, the code generated by these tools is always weird and different from the rest of the markup. No thanks.
- bstrom 12y agoSame. Not sure why this is such a popular thing to do. Makes error handling almost impossible to reason about.
- plq 12y agoFWIW, with neurons, there's always the option to override markup generation on a field-by-field basis, so if you don't like the generated code for a certain part of the document, you can change it to your heart's content. You'll even be able to pass templates down a certain object hierarchy, but that's further down the pipeline.
- antonwinter 12y agolooks damn fine, less dependencies would be an added bonus
- mattdesl 12y agoPolluting global scope and a hard dependency on jQuery.. :(
- ges 12y agoIt is now stand-alone and doesn't mess with global scope anymore (except for the "way" object allowing you to set watchers, etc)
- rubiquity 12y agoWe're still using HTML attributes, and in this case invalid HTML attributes, to add behavior via JavaScript? When are we going to learn :/
- lhorie 12y agoMaybe I'm just missing something, but is there no way to deal with arrays? You know, like looping through data and displaying things for each of them? (also related: what about looping through Object.keys()?) What about dates? And data parsing/formatting in general? Those are kind of important for a bi-directional bindings library. Remember that the Javascript data is usually the canonical data and the displayed data is derived from it, not the other way around. If you want to compare w/ Knockout/Angular/etc then there's even more stuff that could be considered as "missing" (e.g. condiditionals, partials/components, how-do-i-use-select2-with-it, etc). One could argue those are out of scope for a lightweight library, but then again, I think this library has too many dependencies for something that advertises itself as "lightweight". My own framework Mithril ( http://lhorie.github.io/mithril http://lhorie.github.io/mithril ) for example is ~5kb gzipped, has no dependencies, and allows you to do quite a bit more in terms of templating and data binding. Incidentally, I wrote a article a while back about how two-way binding isn't even always the best answer to your questions, and that there are often better ways to update javascript data from forms: http://lhorie.github.io/mithril-blog/asymmetrical-data-bindings.html http://lhorie.github.io/mithril-blog/asymmetrical-data-bindi...
- nawitus 12y agoHow does Way.js detect changes made in JavaScript to the values? E.g. if you set a new property to the object, is it reflected in the DOM?
- jesalg 12y agoThis is cool but in real world scenarios you need more functionality to make it useful. So far I've been using KnockoutJS where I don't need full-blown MVC and can get away with MVVM.
- matthewmacleod 12y agoI would also suggest looking at Rivets (http://rivetsjs.com http://rivetsjs.com) which is my current go-to solution for this sort of thing.