Web Refactoring into Testability
Hands-on workshop for improving your website's existing code and infrastructure
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
- We will be writing very little code from scratch. Most exercises involve rearranging existing code, finished labs will be provided for each exercise.
- Have NodeJS 10.x or higher installed on your local machine.
- Use npm to download and install Taiko and Gauge.
- Download or clone the GitHub repository link and bookmark the live demo website URL.
- Read Refactoring: Improving the Design of Existing Code (book)
- Watch Refactoring Software (learning path)
- Watch Spotlight on Data: Refactoring a Million-Line Codebase with Maude Lemaire (video)
- Read Refactoring for Software Design Smells (book)
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.
The timeframes are only estimates and may vary according to how the class is progressing
Introduction (10 minutes)
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 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.