3.1 Project Overview

Now that we gained a little bit of background with React, webpack, and the ES2015 syntax, let's start using this and look at a project that you're gonna build. In the next series of lessons in this course, we'll build a HAR Viewer. So your obviously question at this point would be, what is HAR? HAR stands for HTTP archive. It's a JSON format that describes the flow of network traffic into your browser. It's already available inside Chrome DevTools. In fact, if you go to the Network tab and right-click, you will see a menu like this. The HAR format has been a standard for several years now. It's also supported by all the modern browsers. For a quick reference to HAR and related ecosystem, take a look at the gist shown over here. For the purposes of this project, we'll concern ourselves with the small subset of the HAR format. The HAR file, in a sense, describes a flow of network traffic into the browser, so it's not surprising that a top level object is the log. This is the log of the pages and the entries. Here, pages is an [INAUDIBLE], page objects that contains the details about each page along with the page timings. Entries, as you can expect, is an [INAUDIBLE] of entry objects. Each entry consists of the request, response and the timings, essentially one complete round trip from the server. As you can tell from the names, the request contains all the details of the request mail from the browser. And of course the response is the actual response received from the server. The timings object captures the time it took to make the request and also to get back to response. In this project, we'll be building a UI to visualize all of this information. And guess what? We even have wireframes for this. At a high level, we'll have a way to select between different HAR files from the combo box on the top right. Once you make a selection, you will see a list of all the entries from the first page of our HAR file. Each entry in the entries table shows you the URL, the file size, and also a timeline chart of when the request was started and how long it took to complete. The pie chart gives you a quick distribution of the different MIME types in our entries table. No matter where you see a table, you can definitely expect to search it, filter it, and even sort it, and will support all of those operations. In this course, we'll go from this wireframe to a fully functional application that looks like this. Of course, built using React. So come along with me for a deep dive.