Substack
Testing and Modular Front-End
2 hours, 9 minutes
CC
Course Description
Learn how to write unit tests and development code for NodeJS and the browser. Using simple tools connected for easy configuration and updating, without the need for frameworks, James demonstrates how to create effective modern web applications with ease. This workshop is for people who want to know how to start testing and how to quickly whip up modern web apps without having to wade through a bunch of boilerplate or configuration.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: September 13, 2017
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
User Testing
Section Duration: 1 hour, 1 minute
James Halliday starts the workshop on user testing by first introducing how to use assert, a node module used for writing unit tests in applications.
James reviews the Test Anything Protocol (TAP), which is the simple text-based interface between testing modules in a test harness. TAP started from Perl, but now has implementations in C, C++, Python, PHP, Perl, Java, JavaScript, and others.
For testing in node and in the browser, James introduces how to use the tape node module that is built on TAP.
After reviewing a tape test function, James demonstrates how to make a test suite out of multiple test functions. James takes questions from students.
James 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.
James illustrates how to create and runs tests in the browser with browserfiy.
James 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.
James 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.
After 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
Section Duration: 40 minutes
After 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.
After introducing template strings available in ES6 as well as tagged template strings, James reviews hyperx, a tagged template string virtual DOM builder.
James reviews yo-yo, which is a library for building modular UI components using DOM diffing and ES6 tagged template literals.
To help handle scaling in web development, James refactors code to show how to deal with state management.
James demonstrates how to use WebSockets to create an old school page hit counter.
After showing how to set routing up, James discusses installing setting up pushState.
James updates a web app to use Choo, a modular redux architecture that uses modules such as yo-yo, hyperx, and sheetify.
James shows how to use browserify transforms to get code reading for production. Then he mentions bankai, a streaming compiler for JavaScript, HTML, and CSS.
WebGL and Audio
Section Duration: 27 minutes
James introduces WebGL, a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.
James starts to create a project with WebGL using the regl library.
Extending the initial WebGL demonstration, James continues to code by adding additional elements and imaging effects. James takes questions from students.
James works on demonstrating the effects available with WebGL. James takes questions from students.
Showcasing his online studio space, James brings in audio into the browser with the web audio module.
While adding some feedback, James holds a jamming session letting students play with online Web audio studio.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops