Tech Talk 2021 - What and Why Frontend CI/ CD

If you suffered from complex release processes struggles to patch production within the same day or to get a new feature to the customers reliably: this talk is for you! In this talk, we will give you all the tools that you and your team need to build a high-velocity development environment, eradicate the fear of releasing, and establish processes for your team to become unstoppable.

Transcript

1. Frontend CI/ CD setup October, 2021
2. Continuous Integration and Continuous Delivery pipeline
3. Superpowers to your team
4. Code that respects consistent styling guidelines and formatting
5. Reliable software is tested and so are its subsequent releases to avoid regressions
6. Consistent releases: releasing a new version to the customer is as easy as possible and your team can ship fixes to production in no time
7. Any upcoming change to the product can be previewed as an independent unit of change
8. Use every developer's time as efficiently as possible.
9. Developers cost money don't constantly putting out fires in production
10. Automate testing and releases, remove all the humans in the process as much as possible
11. More testing means fewer bugs means less fear of change
12. Less fear of change means more experimentation and innovation
13. More automation means more time for experimentation and innovation
14. The impact of automation
15. It's essential to target the efforts where you want to make the most positive impact
16. unit-testing, formatting, linting, and integration-testing impact mainly the developers within the team
17. end to end testing, automated release, and branch previews impactful at the cross-functional or organizational level
18. feature flags and accessibility testing customer-facing
20. Linting and formatting
21. Linting and formatting are essential to keep your codebase consistent and clean.
22. Each team member should follow the same rules and conventions when it comes to writing code.
23. Tools
24. Unit tests
25. As stated earlier, I like to call these tests fast to run, fast to fail.
26. Test each part of your app as "units" or isolated components.
27. In React Components Reducers / State / Actions Utility functions
28. Tools
29. Type checking!
30. Integration and end-to-end testing
31. Integration tests help to test whether an entire set of units work together as expected.
32. Test full user flows and all the different paths they can take (error state, loading state, success state).
33. In React Navigation Forms Views
34. Tools
35. e2e testing
36. End-to-End tests, or also sometimes named e2e, are the set of tests that are the closest to what the user should experience when using your product.
37. Release
38. preview Run on every PR preview deployments
39. You get a standalone deployment each PR that is accessible through a unique endpoint
40. Each deployment is a version of your frontend project with a specific change
41. lets your design and product team validate new features easily
42. release Have release branch in Github repository
43. Automated scripts run every time the main branch is merged on the release branch
44. You can also tag a release or you can even have scheduled deployments
45. Tools
47. Summary
48. The only manual step left in your CI/CD pipeline should be the code review.
49. Q & A
50. HypeTech Tech education and shaping ideas into hype products hypetech.io | reactweek.dev Marko Arsić Founder and CEO @ HypeTech Founder of HypeTech Education Lecturer @ ReactWeek.dev Independent Tech Consultant Helping companies set up teams and standardize the development process github.com/marsicdev
51. As everything good in life, knowledge is great only when shared hypetech.io/education
52. contact@reactweek.dev