Testing and Modular Front-End
Table of Contents
AssertJames Halliday starts the workshop on user testing by first introducing how to use assert, a node module used for writing unit tests in applications.
Tape ModulesFor testing in node and in the browser, James introduces how to use the tape node module that is built on TAP.
Making a Test SuiteAfter reviewing a tape test function, James demonstrates how to make a test suite out of multiple test functions. James takes questions from students.
Setup and TeardownJames reviews how to initialize servers or databases required for testing and then how to perform a clean up by showing up to create setup and teardown phases.
Testing in the BrowserJames illustrates how to create and runs tests in the browser with browserfiy.
I/O ShellJames introduces the concept of the I/O Shell, which allows for writing code that is easy to test and code that is reusable. By taking inputs and outputs such as reading or writing to a file push it up to the uppermost layer where it might be more configurable.
Code Coverage, Coverify, and NYCJames reviews code coverage, which is a measure used to describe the degree to which the source code of a program is tested by a particular test suite. After talking about abstract syntax trees (AST), which is a data structure representation of a program, James shows how to use a transform to check for code coverage with coverify. Then James illustrates how to use nyc, which is Istanbul's command line interface for test coverage.
Continuous IntegrationAfter reviewing npm scripts that are a way to have automation for packages, James introduces continuous integration, which is the concept of running tests every time code is pushed out, by using Travis CI.
Modular Web Development
Introducing Modular Web DevelopmentAfter reviewing his approach to modern web development through the use of single-purpose npm service packages and native web technologies and APIs, James recommends "starting from zero" to force oneself to know and understand the tools that make up a web application rather than relying on third-party boilerplate solutions.
Template StringsAfter introducing template strings available in ES6 as well as tagged template strings, James reviews hyperx, a tagged template string virtual DOM builder.
yo-yo.jsJames reviews yo-yo, which is a library for building modular UI components using DOM diffing and ES6 tagged template literals.
Managing State and Refactoring CodeTo help handle scaling in web development, James refactors code to show how to deal with state management.
Using WebSocketsJames demonstrates how to use WebSockets to create an old school page hit counter.
Routing and pushStateAfter showing how to set routing up, James discusses installing setting up pushState.
ChooJames updates a web app to use Choo, a modular redux architecture that uses modules such as yo-yo, hyperx, and sheetify.
WebGL and Audio
Coding WebGLJames starts to create a project with WebGL using the regl library.
Extending WebGLExtending the initial WebGL demonstration, James continues to code by adding additional elements and imaging effects. James takes questions from students.
More Extending WebGLJames works on demonstrating the effects available with WebGL. James takes questions from students.
Web AudioShowcasing his online studio space, James brings in audio into the browser with the web audio module.
Jamming with Web AudioWhile adding some feedback, James holds a jamming session letting students play with online Web audio studio.