Lesson Weekend

Imagine we're part of a development team working on a huge application. The application is live and thousands of people visit our site everyday. It has hundreds of pages, JavaScript files, and dependencies. After all, it's a huge site and many people use it!

Now imagine our site uses only the HTML, CSS and JavaScript techniques we covered in Introduction to Programming. Our index.html page has one hundred script tags in it, each representing a JavaScript file or dependency we need. This would be very messy and hard to work with. A single small change to a file could break everything.

There'd also be another huge problem: our site would be incredibly slow. Each file we load has its own overhead; when multiplied over many files, that overhead quickly adds up and leads to lost customers and lost revenue. Our customers expect the site to load as quickly as possible and it should be reliable!

Modern JavaScript Development

Welcome to the world of modern JavaScript development. Performance and reliability are extremely important. It's essential to optimize our applications so they run faster, whether in production or development.

There are many ways to optimize a JavaScript application that's in production. For instance, we can concatenate all of our JavaScript files into a single file so there's less overhead and the JavaScript loads faster. We can also minify the code, making files smaller so they load more quickly.

There are also many ways to optimize our development environment. We can use testing tools like Jasmine and Karma to run tests. We can use a code linter to check for errors as we work. And we can also use a live development server that reloads every time we change our code.

We'll do all of these things this week and more. We'll incorporate this functionality in our applications by combining webpack (a module bundler) with npm (a package manager). We'll also learn to run our tests using the popular JavaScript testing tools Jasmine and Karma. In the process, we'll learn how to use new JavaScript features that were released with ES2015 (EcmaScript 2015, the latest stable release of JavaScript).