Designing Modules

[00:00:00]
>> Next, what we can do is, let's use everything we've just learned about leveldb to run some of these examples in the browser. So, We're gonna need to write some DOM code, but the main thing that you change is just instead of requiring level, you require level-browserify. And then you'll get a shim that works in the browser.

[00:00:21]
But you have to use a compiler like browserify to do that. I'm gonna use budo which requires browserify behind the scenes. Now, IndexedDB is the database that the browser uses to make this all work. IndexedDB is extremely complicated and it's not easy to use, it's not easy to think about.

[00:00:42]
I've written some IndexedDB based things before. And it took me so long just to like parse through all of this up to MDN documentation about like how to even set it up correctly. It's not pleasant. So if you can, I think this way is much simpler, and you can have persistence in the browser, which is really nice if you wanna build things like offline web applications.

[00:01:05]
And if you wanna do replication between your clients and the servers so that you can have really fast queries, because you can just query things that are already on someone's computer without hitting network at all, zero latency. All right, so let's go ahead and do that. So I'm gonna make a new directory called browser.

[00:01:26]
And, We can just go ahead and stick some stuff in the browser in IndexedDB. So now instead of requiring level, just do level-browserify, everything else is the same. So you still pass in a string to level, but instead of a filename, this is sort of like a database name.

[00:01:49]
So IndexedDB has this notion of a database name that this maps to. So you just put whatever you want in that. I don't think I've ever had an app where I had multiple database names at the same time, but this is something that you might need. So then we can do things like, maybe we'll just build a little counter application.

[00:02:09]
So I'm gonna load a library for doing some DOM stuff. And we'll just kind of recreate the simple counter example but it will be persistent in the browser, without using cookies and without using local storage. So we can actually expand this demo to be pretty comprehensive if we wanted to.

[00:02:30]
Okay, so the first thing we're gonna have to do, I'm gonna just make some quick DOM scaffolding. You can, This is just my standard song and dance for doing that. That's just gonna make a div and stick it in the body so that I don't have to like have any extra HTML kicking around, just like throw a script tag between some body tags and you're good to go.

[00:02:51]
You don't have to do DOM ready or anything like that. Then I'm gonna have an update function which I will call immediately. And that's gonna take different variables that represent the state, and it's just gonna render them. It's kind of like a really extremely simplified version of Redux architecture.

[00:03:09]
We'll be talking a lot more about that tomorrow. So, Mostly using this really nifty feature called template strings. So you can use dollar sign in brackets to kind of put variables in there, sort of a built in templating engine that the DOM has now. And this bit, the tag template string makes it so that the html syntax is parsed into real DOM nodes behind the scenes.

[00:03:38]
All kind of and aside, but so what we can do is I'll make a button, make an onclick event. And it'll say CLICK ME. It's a good thing for button to say, I think. And then we'll have a counter variable in an h1 tag. So I'm gonna define counts to be 0 or maybe a question mark will be a good value for count until we've actually gotten the value from the database.

[00:04:11]
It's kind of in an inconsistent state. So what I can do now is call db.get, For counts. And just like we've been doing, I can now do, Count = value or 0 and call the update function again, which will just rerender the page using some DOM diffing tricks.

[00:04:36]
All right, so the next thing that we need to do is define an onclick function. So onclick function should increment the count. So, it should do count++, and then it should also save that value. So, it should do db.put count. The new value for count? Why don't I go ahead and put all of this with valueEncoding JSON so we're not gonna get 1, 1, 1, 1, 1, 1, 1?

[00:05:05]
And then listen for errors. If there's an error, we probably wanna know about it, let me just do like that. Otherwise, we wanna update the DOM with the new value of the counter. And so when I refresh the page, the first thing it should do is print the question mark.

[00:05:26]
And then as soon as this database call finishes, we should see the previous count if everything's working correctly. I think this is all that we need. So I'm gonna go ahead and, I don't know if I remembered to install everything exactly but I can run this with budo.

[00:05:46]
So you can get this program by doing npm i -g budo if you like. And then you have a program where you can just run some JavaScript code that's gonna run in the browser, and you can require packages and things from npm. So long as they run in the browser, it should all work.

[00:06:01]
Now, I should be able to run budo on our file main.js that we ran. So it's gonna spin up our web server and everything locally and just stick our script tag in between body and slash body, which is pretty much all you need for most of this kind of stuff.

[00:06:16]
All right, so if I go to that URL, I see 0 and it says CLICK ME. That seems good so far. If click it, 1, 2, 3, 4 as expected. So now the big test will be if I reload the page, is it gonna be still at 32?

[00:06:33]
Hopefully it will but we'll see. Refresh, still at 32, great, and so now we have persistence in the browser. And in fact, if I close the browser all together, that was actually an incognito window. So let me load Chrome not in incognito window and then you can also see that, I'll just click it a bunch of times.

[00:06:59]
You can refresh, you can close the browser, you can open the browser again and, We're back where we started. So I can refresh, refresh, refresh, click, click, click, click, etc. And so all of the same kinds of codes that we've now been doing with node will work in our browser code as well.