This course has been updated! We now recommend you take the Complete Intro to Real-Time course.
Transcript from the "HTML5 Facades" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Kyle Simpson: Now I'm gonna present to you just real quickly again because I don't want to belabor lots of HTML5. This is not an HTML5 workshop, but I want to present to you several APIs that exist in HTML5, but I'm gonna do so in a different way than maybe you're used to seeing because I'm not actually gonna show you the native APIs.
[00:00:21] What I'm going to show you is code that's using what I call API facades. Now I have an entire talk on this particular topic if this is at all Interesting to you. I'll give you like the two minute blurb on what a facade is and why it's important.
[00:00:36] A facade is an extremely thin layer of obstruction around a native API. It is not a poly fill. It does not put functionality into an environment where that functionality does not already exist. It does not add new functionality on top of the existing APIs for the most part.
[00:00:56] It is not terribly concerned with lots of bug fixes and things. The main goal of a facade, the main goal of this thin wrapper API is for you to have thin layer of insulation between the code that you write across your production application. And the actual API is that sometimes develop bugs in them.
[00:01:16] Sometimes they change sometimes they move from not being vendor prefixed to being vendor prefixed or the other way around. Sometimes quirks occur. And if you have production code that is using the direct native API it's all over the place. Say, for instance, the canvas API or the local storage API.
[00:01:34] If you're using those APIs directly and one of the environments that you're supporting your production app in changes something about it, like a bug is introduced. I don't remember the exact details but I remember a few months ago there was some change that [COUGH] happened with Safari and their number of concurrent Ajax requests or something.
[00:01:54] And all of a sudden, production apps just have to start dealing with a change to the environment that they used to be able to run in. So when those things occur, if you've been using the native APIs directly across your whole code base. You've got a whole bunch of places to go and fix it.
[00:02:10] But if you've been using a facade, the facade is a place, it's sort of a pressure release valve or it's an insulation layer that allows you to fix that problem. Or fix that bug or whatever that quirk in one location rather than having to invalidate the code across your entire app.
[00:02:25] So facades are an incredibly important thing to be using if you're using these native APIs directly I encourage you to rethink that choice. Use some sort of facade, use some sort of frameworks are just a more complex version of a facade. Frameworks add all kinds of extra stuff into it they add in poly fills and if you're using a framework around canvas like if you're using D3 or whatever great no problem.
[00:02:47] I'm not gonna complain about your use of a framework but if you're using the canvas API directly anywhere. You should either be using a facade or a framework rather than the direct API. So that's my little two minute spiel on that and what I'm going to show you is several of these API using a facade APIs that I have built.
[00:03:08] There's a project that I built called H5 and the goal of that was sort of a community driven thing. It really hasn't gotten as much attention as I had hoped it would but the goal was for us as a community to collectively build facade APIs for all of the built in HTML5 APIs that are available.
[00:03:25] Everything from local storage, to webRTC, to websockets all everything. I wanted us to build facades for that so that we could responsibly use these features now, but insulate ourselves in case there are problems or changes or bugs down the road. And we've probably gotten five or six of those facades written so I'm gonna show you some of those today.
[00:03:46] But there's, if you go and check out, it's the project is H with the number 5. h5ive is the project name and if you go and check out h5ive on the GitHub repo. You'll see there's 20 or 30 other APIs already identified that we need to write that haven't been written yet.
[00:04:02] So, if you'd like to help I would love that and I've got a contribution guide there on how to help participate in that, t's pretty easy stuff. But I'm [COUGH] I'm gonna show you some of the facades for the APIs that I already use that I've built.