The document discusses the importance of autonomous frontend teams and effective communication in addressing issues like lack of transparency and focus. It outlines strategies such as agile methodologies, design fundamentals, and comprehensive testing practices to enhance team collaboration and product quality. It emphasizes continuous learning, user feedback, and the utilization of tools like Cypress for automated testing.

1. Autonomous Frontend Team*

2. What does it mean?

3. What kind of teams exist?

4. Functional teams
Design Frontend QABackend

5. Cross-functional teams
Team A
Team C
Team B

6. Relay 42
Backend FrontendDesign QA

7. Autonomous team*
* - no backend
20%
30%
50%
Frontend Testing Design

8. Chapter I
Team and Process

9. We had a problem

10. Not a team
•Bunch of individuals
•Nobody know what other people do
•Not transparent
•Almost doesn't help/talk with each-other
•Does not have a focus / goal
•Very long TTM

11. How we solved it?

12. SCRUM
(NO)

13. Cargo cult
– Igor M
“Cargo Cult is an attempt to re-create
successful outcomes by replicating the
circumstances associated with these outcomes
(Wikipedia). The circumstances may or may
not be related to the outcomes. Cargo Cults
happens when there is no understanding of
what is the real cause of the success.”

14. Communication is the key

15. How it help us
•Sprints - Goals and Focus
•Daily and Demo - Transparency
•Planing - Priority

16. Retrospective
•Problems and Improvements
•Write it down
•Action points
•Come back to actions points

17. Backlog refinement

18. Story points

19. Align everyone
•Base story
•Table of storyies
•Story A - 3
Story B - 5
Story C - 7

20. Anonymous planing poker

22. Definition of Done
•Have integration tests
•Acceptance criteria met
•Reviewed and tested
•Merged to master
•Released

23. Acceptance criteria
•For estimation
•For developing
•For testing

24. Example mapping

25. Code Agreements
•Automate what you can
• ESLint
• Prettier
•Write it down
•Discuss it
•Update it
•Do it

26. Summary
•Talking with each-other
•Understand WHY and WHAT are you doing

27. Chapter II
Design

28. One secret

29. Luck

30. – Some front-end developer
“I know this looks terrible, but I have no idea why.”

31. We think design is hard

32. We don't know the design
basics

34. Proximity
“The principle of proximity is simply the process of ensuring
related design elements are placed together. Any unrelated
items should be spaced apart.”

35. Refactoring UI book
•
• Hierarchy
• Layout and Spacing
• Colors / variants of palette
• Fonts
• Images
• Components gallery
https://refactoringui.com/

36. Be consistent

37. Design system
•List of existing design system for inspiration
•Component library
•Spaces (8x), Typography, Color
•You don’t need to think a lot

38. Ask you users
•You make application for users
•Feedback is important
•Beta mode

39. Summary
•Be consistent
•Ask you users
•Learn basics

40. Chapter III
Testing

41. Why?

42. Confidence

43. Preparation
Design
AC
Technical session
Development
Pair programming
Code Review
Tests and linter
Manual Testing Regression
E2E*

44. Manual testing
•Use Acceptance criteria
•Responsibility
•You're starting to get to know your product better

45. Need to automate everything

46. Testing Pyramid

48. The Testing Trophy
Kent C. Dodds - https://testingjavascript.com/

49. Static
•Typescript?
The TypeScript Tax
•ESint
•Sonar*

50. Unit and Integration

51. Cypress

52. Cypress
•Easy and Fun to use
•Integration (Mock API)
•E2E
•Only Chrome, only one domain per case
•Parallel only with Dashboard (paid)

53. Cypress for developing

54. We failed
•Check request to API
•False positive
•Use red-green-refactor

55. But what if we have bugs?

56. Sentry

57. Summary
•Code Review
•Do testing
•Write integration tests
•Use Sentry

58. Thank you!