Building on HTML5: Optimizing for Data, Communication and Offline Apps

Whether you use the hottest UI framework or craft your site with vanilla JavaScript, you learn foundational HTML5 APIs needed in nearly every app. Learn persist in-browser data, make lightning-fast apps, work offline, and be geographically aware.
Course info
Rating
(16)
Level
Advanced
Updated
May 7, 2019
Duration
1h 43m
Table of contents
Course Overview
Introduction
Saving Data in the Browser
Creating “Multithreaded” Web Applications
Taking Your Application Offline
Communicating in Real Time
Making Your Application Geographically Aware
Description
Course info
Rating
(16)
Level
Advanced
Updated
May 7, 2019
Duration
1h 43m
Description

What does React, Angular, Vue, and any other framework have in common? They are all built on HTML5! In this course, Building on HTML5: Optimizing for Data, Communication and Offline Apps, you will learn foundational knowledge of APIs that are common to scores of web applications. First, you will learn about strategies for storing simple data objects all the way to using the in-browser database which supports large amounts of data. Next, you will discover how to take full control of each request giving you ultimate control over whether files are loaded from the server or from the local machine. Finally, you will explore how the client receives messages pushed from the server in a performance-optimized way, as well as how to request a user’s location and sometimes even have access to details like altitude, heading and speed. When you are finished with this course, whether you’re planning on building your next application with the hottest UI framework or are hand-crafting your app with vanilla JavaScript, you will have the skills and knowledge needed to use the most important APIs available on the web.

About the author
About the author

Craig Shoemaker is a developer, instructor, writer, podcaster, and technical evangelist of all things awesome.

More from the author
HTML5 Fundamentals
Beginner
3h 47m
Mar 3, 2017
More courses by Craig Shoemaker
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
What does React, Angular Vue, and any other UI framework have in common? Well, they're all built on HTML5. Hey, this is Craig Shoemaker. And in this course, you'll learn about a number of foundational APIs that are common to scores of web applications. Nearly every app must manage data. Here, we learn about the strategies for storing simple data objects, all the way to using the in-browser database, which supports large amounts of data. Now some applications feature logic that can lock up the browser. Here, you learn to avoid this pitfall by splitting up the processing and essentially creating a multi-threaded web application, all within the browser. From planes, parking garages, and even spotty connections at grandma's house, you're never guaranteed a strong connection to the internet, and so your applications must work offline. Here, you learn to take full control over each request in your app, giving you ultimate control over whether files are loaded from the server or the local machine. When you need data and you need it right now, you need APIs that make communicating in real time possible. Gone are the days where the only way to get data from the server was to continually pull for changes. Here, you'll learn how the client receives messages pushed from the server in a performance optimized way. Where in the world are your users? Well, you'll soon know. Here, you learn how to request the user's location and sometimes even have access to details like altitude, heading, and even speed. So whether you're planning on building your next application with the hottest UI framework or handcrafting your app with vanilla JavaScript, this course unlocks the most important APIs available on the web.

Introduction
Hello, and welcome to Building on HTML5. Now, this is the course if you're ready to go beyond the basics and want to learn to feature client-side data persistence, have the ability to have your apps communicate in real time, run even while not connected to the network, and be geographically aware. Now, to support client-side persistence, you'll learn to use the web storage APIs that allow you to store data in a single session and even more permanent means. All with a very simple API, plus you'll get a chance to see how to use the in-browser database. Do you have a process-intensive script? Maybe something that makes your browser lock up? Well, you can learn to use web workers where you can take that logic and split it off into what is essentially a separate thread in the browser. What about working offline? With service workers, you get ultimate control over how your pages are served, whether from the network or out of the cache. How about building a website that supports real time communication in a scalable and efficient way? WebSockets allow you to establish a durable two-way connection between the client and the server. And with all of this rich functionality, it'd be a shame not to get out of the house from time to time. With the Geolocation API, your apps become geographically aware, allowing you to build the best experience possible for your users. All right, let's get to it. But before we start coding, let's discuss how to set up your environment and a few notes about the JavaScript syntax used in this course.

Saving Data in the Browser
Welcome to Building on HTML5: Saving Data in the Browser. This is Craig Shoemaker. And in this module, you're going to walk away armed with the knowledge of how browser-based persistence works, along with a good idea of when to use the different available options. So let's get started by talking about the two different types of storage covered in this module. The first type is Web Storage, the simplest of the two options presented here. Web Storage takes advantage of a simple API, which makes saving small amounts of data in the web browser a very simple process. IndexedDB is an in-browser document database capable of handling large amounts of data, complete with support for queries, indexes, and versioning. Alright, well let's get started looking at the details of Web Storage.

Creating “Multithreaded” Web Applications
Welcome back to Building on HTML5. This is Craig Shoemaker, and the next technology to unlock for your applications is web workers. In this module, you'll take scripts out of the page and move them into their own context, essentially allowing them to process in their own thread. So to define a web worker, you simply have browser-based background threads. These threads can either be a dedicated worker or a shared worker. A dedicated worker is only accessible through the script that spawns the worker, while a shared worker is available to any page in the domain. This module deals exclusively with dedicated workers, and the next module, which highlights service workers, lets you work hands-on with a shared web worker. Now we're going to jump into the code quickly here, but there are a few things that I want you to be aware of before we do.

Taking Your Application Offline
Welcome back to building on HTML5. This is Craig Shoemaker. And in this module, you'll learn about the APIs available to allow your web applications to go offline. Service workers are a shared scope web worker that allows your apps to intercept requests for pages, styles, scripts, and images and decide if you want to retrieve them from the network, out of the cache, or perhaps from somewhere else. This fine-grained control allows you to very easily create an application that works offline while giving you liberal amounts of flexibility on how you might fulfill those requests. Now this control really came battle earned.

Communicating in Real Time
Hey there, and welcome back to Building on HTML5. This is Craig Shoemaker, and in this module, you'll learn to use the WebSocket API to allow your web applications to communicate in real time. Web sockets give you full duplex or two-way communication between the client and the server. This means that once you establish a connection to a socket server, you can send messages to and from the server with a very small network payload. And being able to make this communication with such small amounts of associated data makes real-time communication possible using WebSockets. Alright. Well, let's back up just a moment so you can better appreciate the advantages of using WebSockets.

Making Your Application Geographically Aware
Hello, and welcome back to Building on HTML5, the last module in the course. This is Craig Shoemaker, and thanks for joining me at this module where you get to learn how to make your apps geographically aware. Now the geolocation API allows you to make requests to attempt to determine the geographical location of the browser, and you have a couple of different options available to you. You can request the location information once or on a continual basis, and the demos included in this module show both approaches. Now before looking at the code, it's important to have an idea of how the location is determined.