The document discusses continuous delivery practices for front-end engineers. It outlines seven stages of a continuous delivery process: 1) efficiently reusing code through tools like NPM, Bower, and Yeoman, 2) test-driven development using Karma, Jasmine, Mocha and Protractor, 3) integrating continuously, 4) deploying often through automation to reduce risks, 5) monitoring performance and errors, 6) using feature toggles to deploy unfinished features, and 7) conducting A/B tests to gradually release new features. Moving from traditional waterfall to continuous delivery processes allows deploying from 4 times a year to 50 times a day and building a culture of continuous delivery.

1. Continuous Delivery
Practices for
Front-End Engineers
by Sergey N. Bolshchikov

2. Continuous Delivery
Practices for
Front-End Engineers
by Sergey N. Bolshchikov

3. Front-End Engineering
Before and
After joining Wix
by Sergey N. Bolshchikov

4. Sergey N.
Bolshchikov
Developer Advocate @ Wix

5. 7 years ago
I wrote code in
Waterfall

6. Development Integration Testing Deployment Release

7. 3 years ago
I wrote code in
Scrum

8. Sprint 1 Sprint N Testing Deployment Release

9. Long
Release
Cycle

10. Inability
To
Change

11. Lost
Time to
Market

12. Now
I write code in
Continuous
Delivery

13. Development
Testing
Integration
Deployment
Release Development
Testing
Integration
Deployment
Development
Testing
Integration
Deployment
Development
Testing
Integration
Deployment

14. We deploy
Every day!
50-100 deploys/day

15. In our
Developers
We trust

16. Continuous
Delivery is
A mindset

17. A journey
From development
To production

18. The journey
Is better
With automation

19. Stage 1
Reuse efficiently & Bootstrap fast

20. Stage 1
Reuse efficiently & Bootstrap fast
NPM & Bower
● Node dependencies
● Browser dependencies
● Private registries

21. Stage 1
Reuse efficiently & Bootstrap fast
Yeoman
● Project skeleton generator
● Project entities generator
● wix-angular-generator

22. Stage 2
Test Driven Development
We can’t check everything manually.
It is expensive.

23. Stage 2
Test Driven Development
Better quality code.

24. Stage 2
Test Driven Development
Develop faster.

25. Stage 2
Test Driven Development
Run tests first, see them fail.
Write code.
Run tests, see them passed.
And again.

26. Stage 2
Test Driven Development
All production code is covered with tests.

27. Stage 2
Test Driven Development
No QA person for the server side.

28. Stage 2
Test Driven Development
Tests give you confidence.

29. Stage 2
Test Driven Development
Karma
● Automatic Test Runner
● Unit tests with Jasmine/Mocha
● Browser integration

30. Stage 2
Test Driven Development
Angular
● Build with tests in mind
● Dependency Injection
● Great ecosystem

31. Stage 2
Test Driven Development
Protractor
● Integration and e2e tests
● Wrapper over selenium & webdriver
● Angular-friendly

32. Stage 3
Integrate Continuously

33. Stage 3
Integrate Continuously

34. Stage 3
Integrate Continuously

35. Stage 3
Integrate Continuously

36. Stage 3
Integrate Continuously

37. Stage 4
Deploy
Deploy often.

38. Stage 4
Risk management
Risk = # of deployments × Pgoes wrong × $$wrong

39. Stage 4
Waterfall Risk
Risk = × ×
Deploys % $

40. Stage 4
Waterfall Risk
Risk = × ×
Deploys % $
1280 = 20 × 0.8 × 80

41. Stage 4
Continuous Delivery Risk
Risk = × ×
Deploys % $

42. Stage 4
Continuous Delivery Risk
Risk = × ×
Deploys % $
320 = 80 × 0.2 × 20

43. Stage 4
Continuous Delivery Risk
Risk = × ×
Deploys % $
320 = 80 × 0.2 × 20
4 times
less risk

44. Stage 4
Deploy
Conscious decision
to click a button to deploy.

46. Projects Versions

50. Monitoring

51. Stage 5
Monitor Everything

52. Stage 5
Monitor Everything
Business Intelligence
● Analytics tools (user)
● Report every action
● Alerts

53. Stage 5
Monitor Everything
New Relic
● Analytics tools (server & browser)
● Tracing errors
● Alerts

54. Browser loading performance

55. Pages view per minute

56. JavaScript Errors

58. Stage 6
Feature Toggles
Developing feature might take time.

59. Stage 6
Feature Toggles
If else statement in your code.

60. Stage 6
Feature Toggles
Commit unfinished code into production.

61. Stage 6
Feature Toggles
Allows code rewrites and refactoring.

62. Stage 6
Feature Toggles
Feature Toggle override.

63. Stage 6
Feature Toggles
Test features internally.

64. Stage 7
A/B Tests
Test features internally.

65. Stage 7
A/B Tests
A/B tests are almost like Feature Toggles.

66. Stage 7
A/B Tests
Divide and conquer measure

67. Stage 7
A/B Tests
Gradual release
Language
Internally → Country → 50/50 → All
New users

68. Stage 7
A/B Tests
Must provide consistent user behavior

69. Stage 7
A/B Tests
http://github.com/wix/petri

70. 1. Scaffolding
2. TDD
3. Deploy
4. Monitor
5. Experiment

71. Deploy
From 4 times/year
To 50 times/day

72. Culture of
Continuous
Delivery

73. Thanks!
http://bolshchikov.net
http://blog.bolshchikov.net
http://il.linkedin.com/in/bolshchikov
http://github.com/bolshchikov