Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

From devOps to front end Ops, test first

18,343 views

Published on

CI, it is test, code, refactor, release, next cycle, how about front end goes. We can do more robust to users.

Published in: Technology
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download Full EPUB Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download Full doc Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download PDF EBOOK here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download EPUB Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download doc Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @Kos Huang 幾乎是整篇打錯貫穿全場 XDDDD
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @Kos Huang 已修正,感謝
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 提醒一下:應該是 Logic Function :P
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

From devOps to front end Ops, test first

  1. 1. Caesar Chi 戚務漢 
 從DevOps觀念看Web前端開發測試先⾏行 @clonncd From devOps to front end Ops
  2. 2. What is DevOps
  3. 3. What is DevOps Developer + Operation
  4. 4. http://goo.gl/ChbBTO
  5. 5. TEST IS ALL
  6. 6. Deploy without test, it is naked 沒有測試的佈署,就像是裸奔
  7. 7. –DevOps “Any tests than none.”
  8. 8. Everything has test (at least) BDD, TDD, Unit test, XDD, Whatever
  9. 9. TestTestTest
  10. 10. TestTestTest? Do you have ever front end test yet?
  11. 11. Trigger Developer / QA/ Anyone Open browser Key / input / submit / mouse Success / Fail
  12. 12. Trigger Developer / QA/ Anyone Open browser Key / input / submit / mouse Success / Fail Deploy
  13. 13. Trigger Developer / QA/ Anyone Open browser Key / input / submit / mouse Success / Fail DailyDeploy
  14. 14. Trigger Developer / QA/ Anyone Open browser Key / input / submit / mouse Success / Fail DailyDeploy Feature
  15. 15. Trigger Developer / QA/ Anyone Open browser Key / input / submit / mouse Success / Fail DailyDeploy Feature Hotfix
  16. 16. “Boss Driven Development.” BDD
  17. 17. – John Doe “If test is all, why not test front end / UI.”
  18. 18. Convention Controller Compresser
  19. 19. Convention “Everyone’s code, must be same code.”
  20. 20. + ‘use restrict’ JavaScript $jscs .
  21. 21. HTML
  22. 22. CSS
  23. 23. use ghooks precommit-hook to validate all things in local before commit
  24. 24. Convention “Everyone’s code, must be same code.” + ‘use restrict’ JavaScript HTML CSS
  25. 25. Controller “User Interface.”
  26. 26. https://gist.github.com/warpech/9431953
  27. 27. UI event Logic function Controller
  28. 28. UI event Logic function Controller
  29. 29. user input -> login -> Validate -> Auth -> success result verify
  30. 30. user input -> login -> Validate -> Auth -> success result verify Mock data
  31. 31. Logic function https://blog.codeship.com/mocha-js-chai-sinon-frontend-javascript-code-testing-tutorial/
  32. 32. Logic function (Angular)
  33. 33. Mock data https://docs.angularjs.org/guide/unit-testing
  34. 34. – John Doe “Make Test as Simple as Posible.”
  35. 35. UI event Logic function Controller
  36. 36. Code save Open browser …. // do sth Success / Fail Old school
  37. 37. , wait … too heavy to run with browser.
  38. 38. Test save Code save Success / Fail Welcome to 20 Century
  39. 39. Test save Code save Success / Fail
  40. 40. , you turn run all test on real browser … GO use WebDriver to trigger browser
  41. 41. No more extra code
  42. 42. No more extra code
  43. 43. protractor.conf.js
  44. 44. UI event Logic function
  45. 45. UI event Logic function User basic behavior Backend
  46. 46. Input Logic function Backend Output
  47. 47. UI event User basic behavior Click Select
  48. 48. Deploy Compresser
  49. 49. concat minify
  50. 50. concat minify
  51. 51. concat minify
  52. 52. THEN ?
  53. 53. As Developer • Keep test running • Share test concept • Build a jenkins server • Keep your task done on time. • Wash your boss’ brain.
  54. 54. You We are here
  55. 55. As Manager Push them, do the right thing Make resource for developer, ex, time, machine, env …
  56. 56. You We are here
  57. 57. Effect
  58. 58. Code without Test
  59. 59. Code with Test
  60. 60. 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
  61. 61. Front end Ops • Face problem • Accept Result 
 (fail / success) • Refactor code • Deploy code • Trade off code

×