O'Reilly logo
live online training icon Live Online training

Web Refactoring into Testability

Programming

Hands-on workshop for improving your website's existing code and infrastructure

Scott Davis

In his book Refactoring: Improving the Design of Existing Code, Martin Fowler gives a simple, compelling definition of the word: "noun: a change made to the internal structure of software to make it easier to understand and cheaper to modify without changing its observable behavior". The examples in the book are written in JavaScript and Java. Can the same principles be applied to web development?

In this workshop, expert Scott Davis (Web Architect and Developer Advocate, ThoughtWorks) brings the engineering rigor of Refactoring to an existing, perfectly functional website -- a website that works now, but might give anyone pause if they were tasked with adding some new functionality to it. The website is what Scott affectionately calls "20th Century Idiomatic" -- "page-centric" if one is feeling charitable; "monolithic" and "pathologically global" if less so.

Join Scott as he brings 21st Century web development practices and programming to the "internal structure" of the website -- web components and custom events; templates and shadow DOM; -- and modern testing tools -- Gauge and Taiko -- that "make it easier to understand and cheaper to modify without changing its observable behavior".

What you'll learn-and how you can apply it

By the end of this live, hands-on, online course, you’ll understand:

  • Refactoring and Testing strategies
  • HTML5 Custom Elements, Shadow DOM, HTML Templates, Custom Events
  • Free and open-source testing tools like Gauge and Taiko

And you’ll be able to:

  • Refactor a monolithic website into one based on framework-free, standards-based Web Components
  • Learn about modern testing strategies and tools

This training course is for you because...

  • You’re a web developer
  • You work with standards-based HTML5 technologies
  • You want to become a better front-end web developer

Prerequisites

  • Basic familiarity with HTML, CSS, and JavaScript
  • We will be writing very little code from scratch. Most exercises involve rearranging existing code, finished labs will be provided for each exercise.

Recommended preparation:

  • Have NodeJS 10.x or higher installed on your local machine.
  • Use npm to download and install Taiko and Gauge.
  • Have a text editor or IDE of your choice ready to edit basic HTML, CSS, and JavaScript files, as well as a web browser to view your locally running web site.
  • Download or clone the GitHub repository link and bookmark the live demo website URL.

Recommended follow-up:

About your instructor

  • Scott Davis is a Web Architect and Developer Advocate with ThoughtWorks, where he focuses on leading-edge / innovative / emerging / non-traditional aspects of web development. This includes serverless web apps, mobile web apps (Responsive PWAs), HTML5-based SmartTV apps, Conversational UIs (like Siri and Alexa), and using web technologies to build IoT solutions.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

Introduction (10 minutes)

  • Meet the website for the fictional grocery store GroceryWorks. In this section, you'll get a guided walkthrough of an existing framework-free, browser-native, standards-compliant website that uses HTML, CSS, and JavaScript. We'll discuss several new features that we hope to add to the existing website, and the challenges of adding them to the current codebase.

Refactoring the Header (20 minutes)

  • You'll refactor the website header into a highly cohesive, loosely coupled W3C Web Component. You'll learn how to build a custom element, and how to keep your CSS scoped to your new custom element using the Shadow DOM.
  • Lab: Refactoring the Header on Your Own (10 minutes)
  • Now that you've seen how to create a Web Component, you'll have time to create one yourself.

Refactoring the Categories Sidebar (25 minutes)

  • In this section, we'll refactor a more technically complex Web Component -- one that involves some JavaScript behavior. We'll also make the Web Component more polite by having it emit a Custom Event that other Web Components can register an interest in, rather than having it presumptuously make changes to the global DOM directly.
  • In order to make this change with confidence, we'll introduce the Taiko testing library to capture the current "known-good" behavior of the website before we make changes to it.
  • Break (5 minutes)

Lab: Refactoring the Categories Sidebar on Your Own (10 minutes)

  • Now that you've seen how to emit Custom Events, you'll have time to explore this capability on your own. You'll also write your first Taiko test.

Refactoring the Grocery Items (25 minutes)

  • In this section, we'll dynamically build out the main part of the website -- the Grocery Items in the middle of the page. We'll use the Fetch API to make a call to a microservice for the JSON data, and create a Web Component that uses HTML Templates to display the results. For testing purposes, we'll intercept the microservices HTTP GET request with Taiko and substitute mock data to make our tests faster to run and be more resilient in the face of potential changes to the live data feed. We'll also introduce Gauge -- a free and open-source User Journey testing framework -- that allows us to gather multiple Taiko tests and run them together as a suite.
  • Lab: Refactoring the Grocery Items on Your Own (10 minutes)
  • Now that you've seen how to use the Fetch API, HTML Templates, Taiko intercepts, and Gauge User Journey tests, you'll have time to work with them on your own.

Refactoring the Shopping Cart (20 minutes)

  • With a test harness in place for safety, and a well-refactored website of supporting Web Components, we are finally ready to begin adding new features to the website -- saving the Shopping Cart contents between visits, and adding some new business logic ("Free Shipping on orders over $10"). We'll, of course, add new tests along with our new features.
  • Lab: Refactoring the Shopping Cart on Your Own (10 minutes)
  • Now that you've seen how to add these new features and write the accompanying tests, you'll have time to work on this on your own.

Conclusion (5 minutes)

  • In this section, we'll review what we've done and give you pointers to future enhancements and techniques.