Tech Week's Tech Excellence Session

Introduction by Olli

• Vision: Raise the bar of technical excellence globally
• Team:
  • Valentina (Founder and Organizer)
  • Daniel & Alina (Co-organizers/Hosts)
• Communication Platforms:
  • Meetup, YouTube, LinkedIn, X (formerly Twitter), GitHub, Discord
• Sponsorship: Optivem
• Partnership: QEunit

Speaker Introduction: Nick Schumacher

• Experience: 17+ years
• Current Role: Software Engineer & Architect at Payment System at George, Erste Group
• Practices: Pair programming and mob programming
• Training: Web developers in-house and on LinkedIn
• Topic: Shipping a React app with zero bug policy using Test-Driven Development (TDD)

Key Points From Nick's Presentation

Overview of TDD and Zero Bugs Policy

• Aim: Maintain high software quality, especially in digital banking
• Common Issues:
  • Shipping new features vs. fixing bugs
  • Difficulty in maintaining existing code
  • Legacy code leading to low motivation and retention of skilled talent
  • High responsibility in software shipping, especially in sensitive applications like banking
• Solution: Implementing TDD

Example Project: IBAN Validation

• Business Requirements: Validate IBANs and provide feedback
• Acceptance Criteria:
  • Create a page with an IBAN input and validation
  • Handle errors if an invalid IBAN is submitted
• API Specification:
  • Valid IBAN returns details and trust score; invalid returns an error message

Project Structure

• Tools: React, TypeScript, Vite, Tailwind, Cypress
• Types of Tests:
  • Unit tests with VTest
  • Integration tests with Cypress
  • End-to-end tests with Cypress

User Journeys

• Critical Journey: Display validation details for a valid IBAN
• Minor Journey: Display error for an invalid IBAN

Test-Driven Development Cycle

1. Write a test (failing initially)
2. Implement minimal code to pass the test
3. Refactor while ensuring the test still passes

Testing Approach

• Gherkin Syntax: Document user journeys in plain English
• Testing Types:
  • End-to-end tests for critical paths
  • Integration tests for edge cases
  • Unit tests for business logic

Implementation Steps

• Building components incrementally
• Utilizing React Query for state management
• Emphasis on clear separation of business logic and UI
• Importance of unit tests in validating API interactions and business logic

Zero Bugs Policy

• Definition: Not the absence of bugs but a robust system for catching and managing them
• Routine: Peer programming sessions, nightly end-to-end tests, and frequent pull requests

Benefits of TDD

• Enhanced quality and confidence in software delivery
• Clear expectations through upfront tests
• Resilience to refactoring
• Quick feedback from integration tests
• Improved collaboration and understanding across teams

Conclusion

• Encouragement to embrace TDD practices
• Call for continuous improvement in software quality

Q&A Highlights

• React Context & State Management: Recommended using React Query for larger applications
• Mocking vs. Fakes: Discussed minimizing mocking and focusing on functional isolation
• Book Recommendations: "Test Driven Development" by Kent Beck, "Clean Code" by Robert C. Martin, etc.
• BFF Architecture: Acknowledged benefits of backend for frontend but also highlighted current limitations in their team structure

Closing Remarks

• Networking opportunities for collaboration and mentorship
• Link to repository for further exploration of the project
• Encouragement to continue learning and improving skillsets in TDD and React development.