Continuous Delivery for Front-End Engineers
•
6 gefällt mir•2,587 views
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.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Continuous Delivery for Front-End Engineers
Ähnlich wie Continuous Delivery for Front-End Engineers (20)
Mehr von Sergey Bolshchikov
Mehr von Sergey Bolshchikov (14)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Continuous Delivery for Front-End Engineers
- 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
- 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.
- 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
- 55. Pages view per minute
- 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