SlideShare a Scribd company logo
1 of 81
Download to read offline
Caesar Chi
戚務漢


從DevOps觀念看Web前端開發測試先⾏行
@clonncd
From devOps to front end Ops
What is DevOps
What is DevOps
Developer + Operation
http://goo.gl/ChbBTO
TEST IS ALL
Deploy without test, it is naked
沒有測試的佈署,就像是裸奔
–DevOps
“Any tests than none.”
Everything has test
(at least)
BDD, TDD, Unit test, XDD, Whatever
TestTestTest
TestTestTest?
Do you have ever front end test yet?
Trigger
Developer / QA/ Anyone
Open browser
Key / input / submit / mouse
Success / Fail
Trigger
Developer / QA/ Anyone
Open browser
Key / input / submit / mouse
Success / Fail
Deploy
Trigger
Developer / QA/ Anyone
Open browser
Key / input / submit / mouse
Success / Fail
DailyDeploy
Trigger
Developer / QA/ Anyone
Open browser
Key / input / submit / mouse
Success / Fail
DailyDeploy Feature
Trigger
Developer / QA/ Anyone
Open browser
Key / input / submit / mouse
Success / Fail
DailyDeploy Feature Hotfix
“Boss Driven Development.”
BDD
– John Doe
“If test is all,
why not test front end / UI.”
Convention
Controller
Compresser
Convention
“Everyone’s code, must be same code.”
+ ‘use restrict’ JavaScript
$jscs .
HTML
CSS
use
ghooks
precommit-hook
to validate all things in local before commit
Convention
“Everyone’s code, must be same code.”
+ ‘use restrict’ JavaScript
HTML
CSS
Controller
“User Interface.”
https://gist.github.com/warpech/9431953
UI event
Logic function
Controller
UI event
Logic function
Controller
user input -> login -> Validate -> Auth -> success
result verify
user input -> login -> Validate -> Auth -> success
result verify
Mock data
Logic function
https://blog.codeship.com/mocha-js-chai-sinon-frontend-javascript-code-testing-tutorial/
Logic function (Angular)
Mock data
https://docs.angularjs.org/guide/unit-testing
– John Doe
“Make Test as Simple as Posible.”
UI event
Logic function
Controller
Code save
Open browser
…. // do sth
Success / Fail
Old school
, wait …
too heavy to run with browser.
Test save
Code save
Success / Fail
Welcome to 20 Century
Test save
Code save
Success / Fail
, you turn
run all test on real browser … GO
use WebDriver to trigger browser
No more extra code
No more extra code
protractor.conf.js
UI event
Logic function
UI event
Logic function
User basic behavior
Backend
Input
Logic function Backend
Output
UI event User basic behavior
Click
Select
Deploy
Compresser
concat minify
concat minify
concat minify
THEN ?
As Developer
• Keep test running
• Share test concept
• Build a jenkins server
• Keep your task done on time.
• Wash your boss’ brain.
You
We are here
As Manager
Push them, do the right thing
Make resource for developer,
ex, time, machine, env …
You
We are here
Effect
Code without Test
Code with Test
Compare
Test No test
Test more, keep test move on with logic complex, it is more easy figure out problem.
Then you will save more time
Front end Ops
• Face problem
• Accept Result 

(fail / success)
• Refactor code
• Deploy code
• Trade off code
From devOps to front end Ops, test first

More Related Content

What's hot

行動應用開發實務 - Gradle 介紹
行動應用開發實務 - Gradle 介紹行動應用開發實務 - Gradle 介紹
行動應用開發實務 - Gradle 介紹
Kyle Lin
 
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
Fred Sauer
 

What's hot (20)

Efficient JavaScript Unit Testing, May 2012
Efficient JavaScript Unit Testing, May 2012Efficient JavaScript Unit Testing, May 2012
Efficient JavaScript Unit Testing, May 2012
 
行動應用開發實務 - Gradle 介紹
行動應用開發實務 - Gradle 介紹行動應用開發實務 - Gradle 介紹
行動應用開發實務 - Gradle 介紹
 
Test-Driven JavaScript Development (JavaZone 2010)
Test-Driven JavaScript Development (JavaZone 2010)Test-Driven JavaScript Development (JavaZone 2010)
Test-Driven JavaScript Development (JavaZone 2010)
 
Automate testing with behat, selenium, phantom js and nightwatch.js (5)
Automate testing with behat, selenium, phantom js and nightwatch.js (5)Automate testing with behat, selenium, phantom js and nightwatch.js (5)
Automate testing with behat, selenium, phantom js and nightwatch.js (5)
 
Put an end to regression with codeception testing
Put an end to regression with codeception testingPut an end to regression with codeception testing
Put an end to regression with codeception testing
 
Composer at Scale, Release and Dependency Management
Composer at Scale, Release and Dependency ManagementComposer at Scale, Release and Dependency Management
Composer at Scale, Release and Dependency Management
 
Testing Web Applications
Testing Web ApplicationsTesting Web Applications
Testing Web Applications
 
Midwest PHP 2017 DevOps For Small team
Midwest PHP 2017 DevOps For Small teamMidwest PHP 2017 DevOps For Small team
Midwest PHP 2017 DevOps For Small team
 
Testing with Codeception (Webelement #30)
Testing with Codeception (Webelement #30)Testing with Codeception (Webelement #30)
Testing with Codeception (Webelement #30)
 
Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)
Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)
Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)
 
Spring Boot
Spring BootSpring Boot
Spring Boot
 
[CLIW] Web testing
[CLIW] Web testing[CLIW] Web testing
[CLIW] Web testing
 
How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016
How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016
How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016
 
High Performance JavaScript 2011
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011
 
Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Mo...
Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Mo...Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Mo...
Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Mo...
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - DOSUG February 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - DOSUG February 2016Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - DOSUG February 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - DOSUG February 2016
 
"Will Git Be Around Forever? A List of Possible Successors" at UtrechtJUG
"Will Git Be Around Forever? A List of Possible Successors" at UtrechtJUG"Will Git Be Around Forever? A List of Possible Successors" at UtrechtJUG
"Will Git Be Around Forever? A List of Possible Successors" at UtrechtJUG
 
Unit testing @ WordPress Meetup Tilburg 7 januari 2014
Unit testing @ WordPress Meetup Tilburg 7 januari 2014Unit testing @ WordPress Meetup Tilburg 7 januari 2014
Unit testing @ WordPress Meetup Tilburg 7 januari 2014
 
Евгений Жарков "React Native: Hurdle Race"
Евгений Жарков "React Native: Hurdle Race"Евгений Жарков "React Native: Hurdle Race"
Евгений Жарков "React Native: Hurdle Race"
 
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
 

Similar to From devOps to front end Ops, test first

Passing The Joel Test In The PHP World
Passing The Joel Test In The PHP WorldPassing The Joel Test In The PHP World
Passing The Joel Test In The PHP World
Lorna Mitchell
 
Gozengo sauce presentation
Gozengo sauce presentationGozengo sauce presentation
Gozengo sauce presentation
Daniel Straus
 

Similar to From devOps to front end Ops, test first (20)

軟體測試是在測試什麼?
軟體測試是在測試什麼?軟體測試是在測試什麼?
軟體測試是在測試什麼?
 
Test driven development_continuous_integration
Test driven development_continuous_integrationTest driven development_continuous_integration
Test driven development_continuous_integration
 
Passing The Joel Test In The PHP World
Passing The Joel Test In The PHP WorldPassing The Joel Test In The PHP World
Passing The Joel Test In The PHP World
 
Behavior Driven Development by Example
Behavior Driven Development by ExampleBehavior Driven Development by Example
Behavior Driven Development by Example
 
Autotests introduction - Codeception + PHP Basics
Autotests introduction - Codeception + PHP BasicsAutotests introduction - Codeception + PHP Basics
Autotests introduction - Codeception + PHP Basics
 
Java Web Start czyli jak żyć z tą dziwną technologią? & Continuous Delivery w...
Java Web Start czyli jak żyć z tą dziwną technologią? & Continuous Delivery w...Java Web Start czyli jak żyć z tą dziwną technologią? & Continuous Delivery w...
Java Web Start czyli jak żyć z tą dziwną technologią? & Continuous Delivery w...
 
Java script unit testing
Java script unit testingJava script unit testing
Java script unit testing
 
Continuous Cross Platform Mobile App Development using Jenkins Build Server
Continuous Cross Platform Mobile App Development using Jenkins Build ServerContinuous Cross Platform Mobile App Development using Jenkins Build Server
Continuous Cross Platform Mobile App Development using Jenkins Build Server
 
Continuous Delivery for Python Developers – PyCon Otto
Continuous Delivery for Python Developers – PyCon OttoContinuous Delivery for Python Developers – PyCon Otto
Continuous Delivery for Python Developers – PyCon Otto
 
That worked before
That worked beforeThat worked before
That worked before
 
Enterprise Workflows When You Aren't Enterprise
Enterprise Workflows When You Aren't EnterpriseEnterprise Workflows When You Aren't Enterprise
Enterprise Workflows When You Aren't Enterprise
 
How Gozengo Implemented a Continuous Deployment Culture from Day One
How Gozengo Implemented a Continuous Deployment Culture from Day OneHow Gozengo Implemented a Continuous Deployment Culture from Day One
How Gozengo Implemented a Continuous Deployment Culture from Day One
 
Gozengo sauce presentation
Gozengo sauce presentationGozengo sauce presentation
Gozengo sauce presentation
 
Frontend Workflow
Frontend WorkflowFrontend Workflow
Frontend Workflow
 
Real world Webapp
Real world WebappReal world Webapp
Real world Webapp
 
Browser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.jsBrowser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.js
 
Test-Driven Development In Action
Test-Driven Development In ActionTest-Driven Development In Action
Test-Driven Development In Action
 
Java Web Start czyli jak żyć z tą dziwną technologią & Continuous Delivery w ...
Java Web Start czyli jak żyć z tą dziwną technologią & Continuous Delivery w ...Java Web Start czyli jak żyć z tą dziwną technologią & Continuous Delivery w ...
Java Web Start czyli jak żyć z tą dziwną technologią & Continuous Delivery w ...
 
Enterprise PHP (PHP London Conference 2008)
Enterprise PHP (PHP London Conference 2008)Enterprise PHP (PHP London Conference 2008)
Enterprise PHP (PHP London Conference 2008)
 
Measuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb EditionMeasuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb Edition
 

More from Caesar Chi

More from Caesar Chi (20)

為何技術老人這樣想那樣做?
為何技術老人這樣想那樣做?為何技術老人這樣想那樣做?
為何技術老人這樣想那樣做?
 
面試AI技術大進化,加速招聘軟體工程師的全套攻略!
面試AI技術大進化,加速招聘軟體工程師的全套攻略!面試AI技術大進化,加速招聘軟體工程師的全套攻略!
面試AI技術大進化,加速招聘軟體工程師的全套攻略!
 
初探工程師升級手冊 2022
初探工程師升級手冊 2022初探工程師升級手冊 2022
初探工程師升級手冊 2022
 
預約及客服 LINE 服務串接大挑戰
預約及客服 LINE 服務串接大挑戰預約及客服 LINE 服務串接大挑戰
預約及客服 LINE 服務串接大挑戰
 
Remote monitoring widget setup and customization
Remote monitoring  widget setup and customizationRemote monitoring  widget setup and customization
Remote monitoring widget setup and customization
 
JS 從 Non-type 到 Type 的愛恨情仇
JS 從 Non-type 到 Type 的愛恨情仇JS 從 Non-type 到 Type 的愛恨情仇
JS 從 Non-type 到 Type 的愛恨情仇
 
LINE@ 2.0 offline to online
LINE@ 2.0  offline to onlineLINE@ 2.0  offline to online
LINE@ 2.0 offline to online
 
Chatbot 智能溝通策 流程規劃與實做 e-Commerce Chatbot - AI strategy and Chat bot user flow
Chatbot 智能溝通策 流程規劃與實做 e-Commerce Chatbot - AI strategy and Chat bot user flow Chatbot 智能溝通策 流程規劃與實做 e-Commerce Chatbot - AI strategy and Chat bot user flow
Chatbot 智能溝通策 流程規劃與實做 e-Commerce Chatbot - AI strategy and Chat bot user flow
 
PWA and Chatbot - with e-Commerce experience sharing
PWA and Chatbot - with e-Commerce experience sharingPWA and Chatbot - with e-Commerce experience sharing
PWA and Chatbot - with e-Commerce experience sharing
 
Morden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web AppsMorden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web Apps
 
codecept.js introduce - front end test E2E tool introduce
codecept.js introduce - front end test E2E tool introducecodecept.js introduce - front end test E2E tool introduce
codecept.js introduce - front end test E2E tool introduce
 
遠端團隊專案建立與管理 remote team management 2016
遠端團隊專案建立與管理 remote team management 2016遠端團隊專案建立與管理 remote team management 2016
遠端團隊專案建立與管理 remote team management 2016
 
Introduce Angular2 & render & firebase flow
Introduce Angular2 & render & firebase flowIntroduce Angular2 & render & firebase flow
Introduce Angular2 & render & firebase flow
 
如何提昇技術力 - 參與技術社群之經驗分享
如何提昇技術力 - 參與技術社群之經驗分享如何提昇技術力 - 參與技術社群之經驗分享
如何提昇技術力 - 參與技術社群之經驗分享
 
html5 & phonegap
html5 & phonegaphtml5 & phonegap
html5 & phonegap
 
Docker with Cloud Service GCPUG
Docker with Cloud Service  GCPUGDocker with Cloud Service  GCPUG
Docker with Cloud Service GCPUG
 
從失敗中學習打造技術團隊
從失敗中學習打造技術團隊從失敗中學習打造技術團隊
從失敗中學習打造技術團隊
 
Docker with Cloud Service
Docker with Cloud ServiceDocker with Cloud Service
Docker with Cloud Service
 
技術單兵作戰及團隊開發流程差異
技術單兵作戰及團隊開發流程差異技術單兵作戰及團隊開發流程差異
技術單兵作戰及團隊開發流程差異
 
Developer team review of 2014
Developer team review of 2014Developer team review of 2014
Developer team review of 2014
 

Recently uploaded

Recently uploaded (20)

Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 

From devOps to front end Ops, test first