Web Refactoring into Testability Workshop


Duration: 180 mins
Scott Davis
Principal Engineer, ThoughtWorks

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.

You may also be interested in

50 mins
Application Security from the Inside Out

This talk tells the story of the implementation of an application security program in an agile, polyglot, cloud-first organisation. With fast-moving...

25 mins
Proper Care and Feeding of Junior Developers

Junior Developers require more than just a first job; they need help, and they need it from YOU. Just as...

25 mins
How to Validate your Startup Idea Quickly

I work at Facebook's Innovation Lab as an Engineering Lead. As part of that, I help with rapidly prototyping and...

25 mins
Uncovering your Personal Values

We regularly review our code and attend retros, but what about tracking and reviewing our personal identity? We all know...

50 mins
Identifying And Removing Impediments

Executing a software project has many challenges. For a team to function smoothly and deliver working solution we have to...

180 mins
Modern Software Development

Our industry never stops changing, but sometimes those changes are trivial and fluffy and we can ignore them. Sometimes they...