DevOps and CI/CD demystified for Javascript

A presentation at CascadiaJS 2021 Pre-Show in October 2021 in by Jeremy Meiss

Slide 1

Slide 1

Demystifying CI/CD

Slide 2

Slide 2

Imagine you’re getting ready to ship something…

Slide 3

Slide 3

Slide 4

Slide 4

You press the big red button

Slide 5

Slide 5

click

Slide 6

Slide 6

Slide 7

Slide 7

silence

Slide 8

Slide 8

Do you… a) Sweat and wait to see if it blows up

Slide 9

Slide 9

Do you… a) Sweat and wait to see if it blows up b) Pack up, go home & enjoy your weekend

Slide 10

Slide 10

It all boils down to automation.

Slide 11

Slide 11

The green pastures of automation Image source: Forbes

Slide 12

Slide 12

Slide 13

Slide 13

Image source: Horizon Zero Dawn

Slide 14

Slide 14

Image source: Demotivational

Slide 15

Slide 15

Timeline.jerdog.me IAmJerdog jerdog Director, DevRel & Community /in/jeremymeiss

Slide 16

Slide 16

“DEVOPS”

Slide 17

Slide 17

The DevOps Lifecycle ○ Plan Image source: C-Sharp Corner

Slide 18

Slide 18

The DevOps Lifecycle ○ Plan ○ Code Image source: C-Sharp Corner

Slide 19

Slide 19

The DevOps Lifecycle ○ Plan ○ Code ○ Build Image source: C-Sharp Corner

Slide 20

Slide 20

The DevOps Lifecycle ○ ○ ○ ○ Image source: C-Sharp Corner Plan Code Build Test

Slide 21

Slide 21

The DevOps Lifecycle ○ ○ ○ ○ ○ Image source: C-Sharp Corner Plan Code Build Test Release

Slide 22

Slide 22

The DevOps Lifecycle ○ ○ ○ ○ ○ ○ Image source: C-Sharp Corner Plan Code Build Test Release Deploy

Slide 23

Slide 23

The DevOps Lifecycle ○ ○ ○ ○ ○ ○ ○ Image source: C-Sharp Corner Plan Code Build Test Release Deploy Operate

Slide 24

Slide 24

The DevOps Lifecycle ○ ○ ○ ○ ○ ○ ○ ○ Image source: C-Sharp Corner Plan Code Build Test Release Deploy Operate Monitor

Slide 25

Slide 25

Continuous {Integration|Deployment}

Slide 26

Slide 26

Software Development without CI/CD Image source: Oursky

Slide 27

Slide 27

Software Development with CI/CD Image source: Oursky

Slide 28

Slide 28

CI == Continuous Integration the practice of merging all developers’ working copies to a shared code repository Code Shared Code Repo CI/CD Runtime Test Scan for Vulnerabilities Build Website

Slide 29

Slide 29

CI == Continuous Integration ○ Merge code changes often Code Shared Code Repo CI/CD Runtime Test Scan for Vulnerabilities Build Website

Slide 30

Slide 30

CI == Continuous Integration ○ Merge code changes often ○ Run automated tests to validate builds Code Shared Code Repo CI/CD Runtime Test Scan for Vulnerabilities Build Website

Slide 31

Slide 31

CI == Continuous Integration ○ Merge code changes often ○ Run automated tests to validate builds ○ Only integrate tested code into code base Code Shared Code Repo CI/CD Runtime Test Scan for Vulnerabilities Build Website

Slide 32

Slide 32

CI == Continuous Integration ○ ○ ○ ○ Merge code changes often Run automated tests to validate builds Only integrate tested code into code base Changes frequently merged into release branches Code Shared Code Repo CI/CD Runtime Test Scan for Vulnerabilities Build Website

Slide 33

Slide 33

CD == Continuous Deployment the practice of automatically deploying new software releases to target environments Build Website Server deployment Active Users

Slide 34

Slide 34

Continuous Deployment ○ Faster release cycles Build Website Server Deployment Active Users

Slide 35

Slide 35

Continuous Deployment ○ Faster release cycles ○ Low-risk releases Build Website Server Deployment Active Users

Slide 36

Slide 36

Continuous Deployment ○ Faster release cycles ○ Low-risk releases ○ Higher quality Build Website Server Deployment Active Users

Slide 37

Slide 37

Continuous Deployment ○ ○ ○ ○ Build Website Faster release cycles Low-risk releases Higher quality Lower costs Server Deployment Active Users

Slide 38

Slide 38

Is CI/CD a TOOL?

Slide 39

Slide 39

Are there benefits to CI/CD?

Slide 40

Slide 40

CI/CD Benefits ○ ○ ○ ○ ○ ○ Improve team productivity & efficiency Accelerate speed to market Identify product/market fit Release higher quality, more stable products Increase customer satisfaction Keep devs happy and shipping code

Slide 41

Slide 41

Slide 42

Slide 42

I feel the need… the need for SPEED! ○ Customers get access to new features faster ○ Company gets a faster ROI from new features

Slide 43

Slide 43

Implementing CI/CD

Slide 44

Slide 44

Make sure everyone is on the same page

Slide 45

Slide 45

Always start small

Slide 46

Slide 46

Do what works for you

Slide 47

Slide 47

Always measure

Slide 48

Slide 48

CI/CD Benchmarks for high performance Throughput Duration At will <10 minutes Success Rate

90% Mean Time to Recovery <1 hour

Slide 49

Slide 49

Better CI/CD Practices ○ Make testing an integral part of the dev process

Slide 50

Slide 50

Better CI/CD Practices ○ Make testing an integral part of the dev process ○ Ensure testing environment mirrors production

Slide 51

Slide 51

Better CI/CD Practices ○ Make testing an integral part of the dev process ○ Ensure testing environment mirrors production ○ Use coding better practices, i.e. pair programming

Slide 52

Slide 52

Full Report https://circle.ci/ssd2020

Slide 53

Slide 53

Better CI/CD Practices ○ ○ ○ ○ Make testing an integral part of the dev process Ensure testing environment mirrors production Use coding better practices, i.e. pair programming Streamline the deploy workflow

Slide 54

Slide 54

Streamline deploy

Slide 55

Slide 55

Slide 56

Slide 56

Do not try to automate everything

Slide 57

Slide 57

Proof of concept ○ ○ ○ ○ A rigorous testing practice Consistent software environments Training on continuous integration practices. Reports to measure key metrics.

Slide 58

Slide 58

Timeline.jerdog.me Thank you. For feedback and swag: circle.ci/jeremy IAmJerdog jerdog /in/jeremymeiss