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