About Fog Creek Tech Talks
At Fog Creek, we have weekly Tech Talks from our own staff and invited guests. These are short, informal presentations on something of interest to those involved in software development. We try to share these with you whenever we can.
Content and Timings
- Introduction (0:00)
- Demo (0:58)
- Multiple Bindings (1:32)
- Inline Events (3:04)
- Dependent Functions (4:12)
- Checkbox and Disabling Inputs (5:33)
- To-do List and HTML Elements (6:41)
So, let’s see. I guess you can see this little website here. It’s got this little guy. And I have this demo. Just trying to make it big so you can see. It kind of bumped the CSS a little. The main thing in this tool… you’re familiar with HTML templating libraries, I think Mustache is the classic one, where you threw a bunch of curly braces in and you basically just interpolate string values into your HTML.
That’s okay I guess, but in real life you usually have specific attributes that are bound to specific values. You’re not going to cross over a tag barrier with some arbitrary strings. You’d rather have a little more structure. So given that, you can get a very nice domain-specific language. It looks exactly like this. It has… These are HTML element labels, or HTML element node types. Then these are the attributes, and I’ve got a shortcut at value syntax. So if I drag the slider, it adjusts all of them simultaneously. So I think this is what a lot of the libraries like Angular, some of the other bigger ones are going for with their… Knockout especially, with reactive data binding.
And so we see in the binding, the value is just bound to the observable, so it’s bi-directional so that when you update it, it updates the input value, and that filters back into this simple function and updates the composite value that is bound here as well.
Checkbox and Disabling Inputs
And it also just has simple checkboxes. Basically, all the HTML elements work fine.
You can toggle a value from ‘true’ to ‘false’. So, ‘disabled’ here is a way to disable a button in HTML. And by having this disabled.toggle, so it’s an observable of a boolean value, we can in real time swap it back and forth. And then, when the button’s active, you can click it, when it’s disabled, you can’t click it.
I see a lot of other libraries have really complicated ways to do stuff. But a lot of them get farther and farther from the basic HTML itself, like what is actually happening on the web page. To just put the attribute value in using a jQuery selector to do the attribute, but this is actually slightly cleaner even than that. And then with jQuery, if you want to do bi-directional binding, you have to set up a bunch of observers or listeners. It gets complicated fast.
To-do List and HTML Elements
This is the classic ‘to-do list’ app. You can see this is the full app right here, it’s just a template and a model. Other apps that are ‘to-do list’ are a hundred lines. The backbone is probably a hundred, some other new ones I think are shorter.
It’s like, “oh, I have an array and I want to listen to change events, I’ll just make it observable,” and you’re basically done. You throw that into your template and it works the way you would expect. It also can run your HTML elements directly. This equal sign…
So it’s called Hamlet because it’s derived from Haml and Ruby. I think seven years ago that was popular for a little bit, and it’s been influential on a lot of other tools like Jade, or any of these SASS, LESS, these HTML and CSS meta-languages that compile down to HTML and CSS. They take away a lot of redundancy, a lot of the error-prone nature… you have to match your tags and close them and open them. Easily make mistakes. I guess the editors… the app can do that, but here you can just edit in a text area and build a to-do list. So I think it comes out slightly ahead in some respects.
That’s it for my talk. If you do have any front-end code and want to get into interactive user interfaces, I think it’s at least an interesting prospective. I hope that you consider Hamlet the next time you need to have a reactive website. Thanks.