Convert our Toy DOM Driver to the Cycle.js DOM Driver

[00:00] Now we have our own DSL here for creating views in our application. We could improve this code and the code in the domDriver even further until it's reusable as a library in other applications.

[00:13] We could do that, but currently the domDriver has a problem is that this ID app is hard coded here, so that means that other applications would need to use this special ID when mounting their application on some element. Instead of doing this we could instead provide that mount selector as an argument to this function called makeDOMDriver mount selector, and then we can return this function.

[00:42] Functions are first class values in JavaScript, so we can just return a function. That means that down here instead of directly using the domDriver we first need to create it. Say makeDOMDriver under the ID app, and that should still work. What this gains us is, basically flexibility, so that in another application instead of using ID app I could use, for instance, ID main and that should work still, and it does.

[01:17] Maybe we could make this a library, but our toy domDriver still has many problems. One of the serious problems is that we are clearing the containing element here every time we receive a new description object. In fact this object could be really large as a tree. Then that means that we're flushing the whole DOM and recreating it on every update. This could be really bad for our performance.

[01:42] The second problem we have here is that select events takes that tag name, so if we have other spans in our application it would take mouse over happening on any of those spans. Instead we should be able to provide rich selectors here like the class name foo or bar or both of them instead of just the class name.

[02:05] It's time for us to get rid of our toy domDriver and use the real domDriver. We can just add it as a new script here, the real domDriver is available there as cycleDOM, version 17 at least. Then it gives us a global object called cycleDOM.

[02:27] That has some resources under it such as h, which is very similar to this h that we created except it's more advanced and has better error handling and corner case handling. It also has h1 and it has span as well as div and input and button and functions for each element that you may want to create on the DOM actually, so we have alternatives for those.

[02:55] It also has makeDOMDriver. We could use makeDOMDriver from the real one instead of our toy version any more. One last change is that, instead of select events we have .select, span, and then .events. That's the only big difference with the API. This should still work. When I hover over this it should reset the timer.

[03:24] That's cool. Our domDriver is much more powerful than the toy driver that we wrote, because it doesn't have a necessary flushing of the containing element. In fact it actually uses a virtual DOM library here underneath to avoid these recreations. These things here that the hyper-script functions create, they're actually virtual DOM elements.

[03:51] When I said description objects this is really the same idea as the virtual DOM node. It creates an object describing what should happen on the DOM. Then the domDriver picks that up and uses the virtual DOM to do diff and patch and applies those mutations to the actual DOM without re-flushing everything.

[04:12] In addition, the real domDriver has some nice things, like you can specify style here. We can say things like background color should be red. Then we can see that. Now you can see how we can use the real domDriver and the real cycle run to create full blown applications.