nds_8_reftest.pdf

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͞Μ࡞
   OQN
   H
   JOTUBMM
   SFGUFTUSVOOFS
   OPEFKT
   WܥҎ্͕ඞཁ 9

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

11. \
    
    
    OBNF
    SFGUFTUSVOOFS
    
    
    BVUIPS
    B[V
    
    
    FNBJM
    B[VDJBP!HNBJMDPN
    
    
    IPNFQBHF
    IUUQTHJUIVCDPNB[VSFGUFTUSVOOFS
    
    
    MJDFOTF
    .*5

    
    
    
    WFSTJPO
    
    
    
    EFTDSJQUJPO
    3FGUFTU
    SVOOFS
    XJUI
    8FC%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
    
    HJU
    DIFDLPVU 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*૚ Πϕϯτ૚ υϝΠϯ૚ VOJU
    UFTU VOJU
    UFTU SFGUFTU
    SFWJFX &&
    UFTU

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

34. ςετͷੑ࣭ VOJU
    UFTUͱҧͬͯಉ͡౴͑Λอূ͠ͳ͍
    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΍XFC
    IPPLͰઐ༻αʔόʹඈ͹͢
    TFMFOJVN
    (SJEͱ͔
    4BVDF-BCTͱ͔ 40

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

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