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
10x productivity for Developers and Architects

Productivity is key to success in software development. We will be exploring different principles, so you do not have to...

50 mins
Do You Know Da Wae

We build development teams based on individual ability to write code but development of a software project of any significance...

50 mins
Building Antifragile Teams

Antifragile systems thrive under stress and through failure. How can we help our teams – systems made up of people...

30 mins
Up Your Engineering Game: Adopting the Good Parts of Startup Culture

We all know the hallmarks of startup culture: “act first, apologize later,”  “work hard, play hard,” "growth, growth and more...

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...

25 mins
How Non-violent Communication Can Help Keep the Peace on your Team

Non-violent communication will help you communicate with your coworkers in a manner that enables productivity and helps you understand how...