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

180 mins
Foundations of Tech Leadership

According to a CareerBuilder study, only 40% of new engineering leaders receive formal training when they become a boss for...

50 mins
Imposter Syndrome: Overcoming Self-Doubt in Success

Impostor Syndrome is the domain of the high achiever. Those who set the bar low are rarely it’s victim. What...

50 mins
The Dao of Tech Leadership

Effectively managing humans requires a certain level of self-awareness. Therefore, understanding your WHY and what drives you is vitally important...

50 mins
Top 10 Algorithms for Coding Interviews

So we are all the best coders, but have you see the run time of the code you are writing?...

25 mins
Writing Professionally

The most important thing you do in your job is write. It's in every email you send, every commit you...

25 mins
Designers + Developers = Best Friends Forever?

How is the relationship between your design team and your development team? Is it highly functional? Or 'just professional'? Maybe...