Typescript Front End Refactored: Work in Progress

The developer of our website told us: "This can't be done! You should have told me before!" when we asked to change the number and the content of some of the tables of our site.

In this challenge, Francesco Cirllo will work on the original typescript front-end code delivered by that Senior Web Developer and will show he make those web tables ready to accept any request by applying an adaptive design process able to reduce the cost of change of software development. (And of course without applying the "IF Strategy.")

Here you can find the next session of this series of workshops:

Here you can find the next session of this workshop:

Here you can find the next session of this workshop:

Nicole Lemke

Software Manager, 4flow AG

If you not only want to know what “Object-Oriented Programming” means, but are also interested in its origins and what it can achieve, start here, at the very beginning. Let Francesco take you on a journey. Learn about the essence of good objects and write good stories that those objects can tell.


The Pomodoro® Training is organized in six parts.


Carlo Garatti

Software Engineer, Oracle

If your question is about how to write valuable software, this program is for you!! Through one-on-one lessons with Francesco you will learn how to fit the right techniques and tools in the exact phases of the software development cycle. You will fix and apply these ideas in real cases. And, last but not least, in an enjoyable way!

About this Software Development Challenge

Francesco's Software Development Challenges are journeys in which Francesco, you and the other participants will develop one or more features of a real application. Francesco will lead the development of the feature to be created and show you how he makes software design decisions, how he applies principles and tools, why he chooses one pattern over another and why he prefers certain practices in specific contexts.

The Typescript Web Tables Challenge is a real case in the process of developing our web.

The number of courses we offer is increasing and more trainers will soon be teaching the Pomodoro courses. Our customers want to have access to up-to-date information on course dates, access to resources related to our courses, etc..

To do this, we decided to renew our website not only aesthetically but also in terms of information management. For the first time we decided to develop a real front-end (typescript) and a real back-end (Java).

This is the business opportunity: making the information on our courses dynamic allows our customers to get the information they are looking for clear and up-to-date, and us to reduce the effort to update it.

There is one element where all this - aesthetics and information - comes together. Tables like this one:

This table is dynamic, the information is not written statically in HTML but is retrieved from a DB, is validated, a certain format is applied to certain values following defined rules, and a layout is dynamically assigned.

Our challenge was born one day in March when working with the Web Developer through Zoom, I made an innocent request:

Francesco: "Only for the tables in the Catalogue section of the Learning Path pages... Could you (1) not display the "Area" column (it would be a useless repetition in the Tech Page to see the column Area always containing "Tech"), and (2) could you put the course description in a new column: 'Description?'"

Web Developer: "This can't be done! The description doesn't look bad under the title column..."

Francesco: "Come on, it's just a matter of removing one column and adding another"

Web Developer: "I have to develop a new type of table..."

Web Developer: "...You should have told me before!"

The combination of these two answers takes me back to the 90s for a moment. When software developers could incinerate any request for change with a purely technocratic response. Then images of the next 30 years flash through my mind: the first refactoring browser, my first TDD code, emergent design and incremental evolutionary processes and...

Francesco: "But, if you were a customer of our courses... wouldn't you prefer to see that table organized the way I asked for?"

(After a moment of silence, the Zoom frame revealed the Web Developer nodding. I know I can trust him.)

This dynamics happens on a daily basis in many teams. The answer can be conjugated in various ways:

  • "It can't be done!"
  • "I can't estimate how long it will take"
  • "It would be better to rewrite everything than change the code now."
  • "Are you really really sure you want to do this? It is not bad now after all..."

We're talking about today's teams. Teams that are dead set against Waterfall, and yet... so many developers continue to give technocratic answers that actually stem from the low quality of their design decisions.

My Web Developer is a successful professional in the field. I've been working with him for years. It's like he's part of my team. We trust each other.

Francesco: "Would you show me your code?"

Web Developer: "Yes sure!"

I received the zip file with the typescript workspace right away.

We started working on it together. We had fun. We removed classes, created new ones, and injected objects and patterns:

"This could become an interesting Challenge."

And here we are!

What are the objectives of this Challenge?

The main objective of this Challenge is obviously to "free" Web Tables to go in any direction the business requires. This Challenge is all about front-end development. In particular, we will be injecting the typescript solution into a Shopify store that we actually use only as a website through a brilliant idea of our Web Developer.

As a Customer, I'm sure I don't know all the possible evolutions of the Web Tables and as a Software Designer, my evolutionary strategy is to reduce the complexity of my design solution, to keep it open without having to anticipate future requests.

What are we going to do in the various episodes?

We're going to extract the code from the zip file that was emailed to me by my Web Developer and we're going to analyse it. We will try to understand why it's been written that way. What consequent limits that design solution has from the point of view of growth and evolution.

And then, I will show how, working together with my Web Developer, we have made adaptable several different aspects of our Web Tables:

  • The construction of the table (=with/without Caption? Titles?)
  • The styles (=adding and removing them to different elements)
  • The definition of a layout (=how many columns and which info in which columns we want to show)
  • The acquisition of data (=from database or json files or in memory, etc.)
  • The information validation process (=are links valid, are sessions ready to be sold)
  • The assignment of particular formats (=euros need zero or two decimal places, dates needs different formats depending on the case)

Let's get to the fun part:

  1. We will not use the "IF Strategy" - of course...
  2. We will not write HTML code - It is boring to write HTML code. Isn't it? Instead, we will try to use DOM objects to compose our tables. Or at least we will try!
  3. We will not use a Front-End Framework (ie React, Angular, etc.) - WebPack will be enough. I don't want to depend on a framework.

Ready to work together?

—Francesco Cirillo

Who is it for?

Ideal for Software Developers and Technical Coaches.

"This can't be done! You should have told me before!"

Book your Session

About the Trainer

Francesco Cirillo

Francesco Cirillo has worked at the forefront of the software industry for more than 30 years. In a career spanning startups, corporations and freelance consulting, he has mentored thousands of professionals, developers, managers and software teams.

In the 1990s he worked as a Senior Consultant and Mentor for Sun Microsystem, expert in Software Architectures and Software Development Processes and Java and Object-Oriented Evangelist.

Francesco is one of the pioneers of Agile Methods. He started working on XP and TDD in 1999. He was chosen by Kent Beck to develop the XP community in Europe and as reviewer of the second edition of the book Extreme Programming Explained. In 2000 he created XPLabs, the first company in Europe to offer comprehensive services on XP: software development, training and consulting.

In 2007 he created the Anti-IF Campaign to raise awareness in the international community of software developers to apply good design principles to grow software in a sustainable way.

Since 2008 Francesco stopped actively working on Agile Methods and started to develop RRP, a new method of software development. In 2013 he created Cirillo Consulting based in Berlin to offer professional training and consulting on productivity and software development.

Francesco invented the Pomodoro® Technique, a renowned time-management method used by millions of people all over the world, while being a university student looking for a way to get more done in less time.

Read the Francesco Cirillo's complete profile.

Price & Conditions

  • The price includes the 2,5 hour course as well as the course material.
  • Participants in this course will have access to our new Pomodoro® Web/App for the duration of one month.
  • Participants in this course will have free access to our new Pomodoro® Communities of Practice for the duration of one month.


The Pomodoro® Technique book is not included in the price of any of the courses in this training programme and it should be purchased separately. You can buy it here


Discounts for groups of four or more are possible.

Please contact us for more details.

Marco Isella

Software Engineer

Francesco has changed the way I work, and more.

Upcoming Sessions

Here you can find the next session of this event:

Here you can find the next session of this event:

Useful Resources

Three Bowling Kata Reviews

Learn software design by comparing, fixing and expanding three Bowling Kata solutions. In this session, Francesco Cirillo reviews three different...

The Bowling Kata Challenge Solution

Have you ever noticed how many IFs have been used in Bob Martin's Bowling Kata solution? "Is this an effective...

The Anti-IF Workshop

Learn how to replace the 'IF Strategy' with more effective design strategies that will enable you to reduce the complexity...


Do you have a question not listed here?

Pomodoro® Web App

The Pomodoro® Timer Web App will be your time tutor and help you stay focused so you can get more...

Pomodoro® Sheets

To help you get started, check out the official templates of the Pomodoro Technique that you can download and print....

Pomodoro® Book

This fully updated edition includes new and exclusive material about teamwork, to make you and your team more dynamic than...