nds_8_reftest.pdf

489c8b0a930ed88ad275345d7476b945?s=47 ooooooo_q
November 14, 2015

 nds_8_reftest.pdf

489c8b0a930ed88ad275345d7476b945?s=128

ooooooo_q

November 14, 2015
Tweet

Transcript

  1. REFTEST-RUNNERͰ UIͷREVIEWΛ NDS in Niigata #8 @ooooooo_q 1

  2. !PPPPPPP@Rʢͳͳ͓͘ʣ झຯͰηΩϡϦςΟ େମKT ϑϩϯτΤϯυ αʔόαΠυ 2

  3. ։ൃٕज़ +4ʹΑΔ41"ͷ։ൃ .7 ʹΑΔઃܭ ࣗಈςετ ։ൃϑϩʔ ίʔυϨϏϡʔ $*ʢܧଓతΠϯςάϨʔγϣϯʣ (*5'-08 (*5)6#'-08

    લఏ஌ࣝ 3
  4. 6*ͷϨϏϡʔ Ͳ͏ͯ͠·͔͢ʁ 4

  5. ʼ6*ͷϨϏϡʔͲ͏ͯ͠·͢ʁ ΩϟϓνϟΛͷͤͯ΋Β͏ ίʔυελΠϧͱಈ࡞ΛνΣοΫ ίʔυελΠϧͷΈνΣοΫ ϨϏϡʔ͍ͯ͠ͳ͍PS͢ΔจԽ͕ͳ͍ ʜʜ 5

  6. ίʔυελΠϧͷνΣοΫ͸Ͱ͖Δ ίʔυͷมԽͱ6*ͷมԽ͸Ͳ͏݁ͼ͍͍ͭͯΔʁ $44͸ଞͷͱ͜ΖʹӨڹ͠ͳ͍ʁ Ϋϩεϒϥ΢βͰͪΌΜͱಈ͘ʁ 6

  7. Ωϟϓνϟͷ%*''Ͱ ݟ͍ͨʂʂ 7

  8. 3&'5&45 36//&3 8

  9. 3&'5&4536//&3 OQNͰ഑෍͞Ε͍ͯΔOPEFKT༻Ϟδϡʔϧ !B[V͞Μ࡞ OQNHJOTUBMMSFGUFTUSVOOFS OPEFKTWܥҎ্͕ඞཁ 9

  10. “ SFGUFTUSVOOFSͱ͍͏ϒϥ΢βͰඳը಺༰΍ϨΠΞ΢ τͱ͍ͬͨදࣔ݁ՌΛςετ͢ΔͨΊͷϥΠϒϥϦΛ ࡞Γ·ͨ͠ɻ ཁૉٕज़ͱͯ͠͸ϒϥ΢βɺ8FC%SJWFS"1*ɺϨϯμ ϦϯάΩϟϓνϟɺը૾%J⒎ͱ͍͏ײ͡Ͱ͢ɻ ϒϥ΢βͰϏδϡΞϧςετΛ͢Δreftest-runnerΛ࡞ͬͨ http://efcl.info/2015/05/14/reftest-runner/ 10

  11. \ OBNFSFGUFTUSVOOFS  BVUIPSB[V  FNBJMB[VDJBP!HNBJMDPN  IPNFQBHFIUUQTHJUIVCDPNB[VSFGUFTUSVOOFS  MJDFOTF.*5

     WFSTJPO  EFTDSJQUJPO3FGUFTUSVOOFSXJUI8FC%SJWFS"1*z ʜ 11 QBDLBHFKTPO͔Βൈਮ
  12. ʜ EFQFOEFODJFT\ CMJOLEJGG?  CMVFCJSE?  EBUFGPSNBU?  ʜ ʜ

    PQUJPOBUPS?  SFGUFTUMJTUQBSTFS?  TFMFOJVNEPXOMPBE?  TFMFOJVNXFCESJWFS? ^ 12
  13. #-*/,%*'' :BIPPࣾ੡ͷը૾ൺֱπʔϧ ̎ͭͷը૾Λൺֱͯ͠ɺEJ⒎͕͋Δͱ͜Ζ͸੺͘ͳΔ 13 https://github.com/yahoo/blink-diff

  14. 8&#%3*7&3 㲈TFMFOJVN OPEFKTͳͲ͔Βϒϥ΢βΛૢ࡞Ͱ͖Δ *&ɺ'JSFGPYɺ$ISPNFɺ4BGBSJɺ0QFSBɺ 1IBOUPN+4ͳͲͷϒϥ΢βΛαϙʔτ 14

  15. 15 reftest-runner browser A browser B capture A (canvas)
 output

    png webdriver webdriver static server blink-diff capture B (canvas)
 URL A, URL B
  16. هड़ྫ 16

  17. ଞ ΩϟϓνϟΛऔΔλΠϛϯάΛඇಉظʹͰ͖Δ IUNMλάʹΫϥεΛ͚͓͍ͭͯͯɺ֎͢ ֎෦63-΋ࢦఆͰ͖Δ ŠVTF&YUFSNBM4FSWFS DMJ͔ΒΑΓ΋OPEFKT͔Βͷݺͼग़͠ਪ঑ CMJOLEJ⒎ͷPQUJPO΋౉ͤΔΑ͏ʹͳΔ 17

  18. 3&'5&45 18

  19. 3&'5&45 ϦϑΝϨϯεςετ ϒϥ΢β։ൃ޲͚ͷٕज़ ςετ༻ͱϦϑΝϨϯε༻ͷϑΝΠϧΛͦΕͧΕ༻ҙ ผʑͷػೳΛ࢖ͬͯɺಉ͡ද͕ࣔग़Δ͜ͱΛ֬ೝ͢Δ IUUQBEPCFHJUIVCJPXFCQMBUGPSNQSFTFOUBUJPOT UFTUUXGIPXUPXSJUFBSFGUFTUKQ 19

  20. “ ը૾ൺֱϕʔεͷςετ͸มԽʹऑ͘อक͕େม ͳͷͰɺҰ೥΄Ͳલʹ3FGUFTUTͱݺ͹ΕΔ৽͠ ͍λΠϓͷςετ͕αϙʔτ͞Εͨ -- ୸޵ͷఉࢣ - steps to phantasien

    http://steps.dodgson.org/b/2012/05/20/gardening-with-canaries/ 20
  21. 3&'5&4536//&3 '03 6*3&7*&8 21

  22. 22 reftest-runner git push ci runner pull request add png

    files output png
  23. ʜ%*'' 23

  24. ݟ͍ͨ΋ͷ͸ϒϥϯνؒͷ%*'' ϚʔδઌͷϒϥϯνͱͷEJ⒎͕ཉ͍͠ ෳ਺ϒϥϯν͕ಉ࣌ʹଘࡏ͠ͳ͍ͱ͍͚ͳ͍ $*্Ͱ͸Ұͭͷϒϥϯν͔͔͋ͭ͑͠ͳ͍ ࣗ෼ࣗ਎Λίϐʔͤ͞Α͏ STZOD HJUJHOPSF HJUDIFDLPVU 24

  25. ࣮ԋ (BACKBONE.JS+GITHUB+CIRCLECI) https://github.com/ooooooo-q/reftest-branch-sample 25

  26. ςετ͍ͨ͠ STATE͸Ұͭʁ 26

  27. 45"5&Λ੾Γସ͑Δʹ͸ %#αʔόͷσʔλΛςετͷͨͼʹ੾Γସ͑ "1*ͷϞοΫαʔόΛཱͯͯ੾Γସ͑ ςετίʔυΛೖΕͯϏϧυ࣌ʹ੾Γସ͑ ʜ 27

  28. ݟ͍ͨͷ͸ 7*&8ͱ45"5&ͷ ૊Έ߹Θͤ ʜ'-69 28

  29. 3&'5&4536//&3 8*5)'-69 '03 6*3&7*&8 29

  30. FLUXͱͷ૊Έ߹Θͤ ඞཁͳͷ͸63-ͱςετσʔλͷ૊Έ߹Θͤ 'MVYͰ͋Ε͹σʔλ͕Ͳ͔͜Βདྷ͍ͯΔ͔͸໰Θͳ͍ SFUFTUSVOOFSతʹ͸63-͔Β౉ͤΔͱָ MPDBUJPOIBTI l EBUBAFODPEF63*$PNQPOFOU +40/4USJOHJGZ EBUB Az

    30
  31. ࣮ԋʢؒʹ߹͍·ͤΜͰͨ͠ʣ react.js 31

  32. 6*૚ Πϕϯτ૚ υϝΠϯ૚ VOJUUFTU VOJUUFTU SFGUFTU SFWJFX &&UFTU

  33. 3&(3&44*0/ 33

  34. ςετͷੑ࣭ VOJUUFTUͱҧͬͯಉ͡౴͑Λอূ͠ͳ͍ SFGUFTUͦͷ΋ͷͱ͸࢖͍ํ͕ҧ͏ 6*͕ͪΐͬͱมΘΔͨͼʹςετΛॻ͖௚͢ͷ͸ਏ͍ ਓ͕ݟͯ0,ͳΒେମ0,ʁ 34

  35. 3&'5&4536//&3 '03 6*3&7*&8 "/%(*5'-08 35

  36. 36 master development feature branch A feature branch B ػೳ͝ͱͷϚʔδ

    ϦϦʔεϚʔδ
  37. ϦϦʔε಺༰͕೺Ѳ͠΍͍͢ ʜΤϯδχΞ͡Όͳͯ͘΋ ϨϏϡʔʹࢀՃͰ͖Δʜ 37

  38. PROBLEM? 38

  39. ςετͮ͠Β͍಺༰ Ϛ΢εΦʔό࣌ͷσβΠϯมߋͳͲ $44Ξχϝʔγϣϯͷಈ࡞ ςετ࣌ͷॲཧΛ+4ଆʹॻ͘ SFGUFTUSVOOFSΛಈըʹରԠͤ͞Δʜʁ ςετͱͯ͠ΦʔόεϖοΫʹͳΓ͕ͪ 39

  40. ؀ڥߏங $*αʔό༻ͷ؀ڥߏங೉͍͠ ̎ͭͷϒϥϯνΛڞଘ͢Δϊ΢ϋ΢͕ಛघ +4ͷϏϧυ΍γεςϜߏ੒͕བྷΉ ෳ਺ϒϥ΢βͷ؀ڥߏங "NB[PO-BNEB΍XFCIPPLͰઐ༻αʔόʹඈ͹͢ TFMFOJVN(SJEͱ͔4BVDF-BCTͱ͔ 40

  41. ςετͷอक '-69ͷͱ͖ɺશମͷTUBUFΛຖճهड़͢Δʁ ࢖͏ςετσʔλ͸ϚʔδݩʁϚʔδઌʁ σʔλߏ଄͕มΘΔͱ࣮ߦͰ͖ͳ͍ $PNQPOFOU͝ͱʹςετͰ͖Ε͹ ʜʜ·ͩΘ͔Βͳ͍ 41

  42. REFTEST-RUNNERΛ࢖ͬͯ UI REVIEWָ͕ʹͳΔ͔΋ ͠Εͳ͍ ͕·ͩͪΐͬͱԕ͍ 42