Walking through the source code of an OSS Library(ESLint))

Transcript

1. Walking through the source
   code of an OSS library(ESLint)
   l4VNNFS+BWB4DSJQU'FTUJWBM0OMJOFz
   @kkeeth @kuwahara_jsri @kkeeth
   

   View Slide

2. While looking back
   
   
   on a day 💁
   

   View Slide

3. *`NBMFBEFOHJOFFSPSUFDIMFBE
   
   *WFDSFBUFEB13 QMFBTFSFWJFX
   me
   Team Member A
   0,👍*`MMSFWJFXBOEGFFECBDLZPV
   me
   

   View Slide

4. 5IFOVNCFSPGNFNCFSTBOE13TIBT
   JODSFBTFE TP*TIPVMEDPODFOUSBUFPOMZ
   POSFWJFXJOH OPUJNQMFNFOUJOH
   
   *WFDSFBUFEB13 QMFBTFSFWJFX
   me
   Team Member B, C …
   0,👍*`MMSFWJFXBOEGFFECBDLZPV
   me
   

   View Slide

5. 1MFBTFSBUFUIJTDBOEJEBUFTDPEF
   Recruitment Personnel
   *`NBTFSWBOUMFBEFSPGPGBDSPTTFBDI
   FOHJOFFSJOHHSPVQ
   
   me
   *`NBNFNCFSPGUIF#PBSE
   
   me
   

   View Slide

6. me
   0,👍*`MMSFWJFXBOEGFFECBDLZPV
   *TUPQQFEXSJUJOHNPSFBOENPSFDPEF
   *GZPVPOMZSFBEDPEF DBUDIJOHVQXJUIOFX
   UFDIOPMPHJFTTVDIBTMJCSBSJFTBOEGSBNFXPSLTUFOET
   UPCFTVQFS
   fi
   DJBM4Pʜ
   *GFFMmy technical skills have declined…
   Voice of my heart
   

   View Slide

7. me
   0,👍*`MMSFWJFXBOEGFFECBDLZPV
   *TUPQQFEXSJUJOHNPSFBOENPSFDPEF
   *GZPVPOMZSFBEDPEF DBUDIJOHVQXJUIOFX
   UFDIOPMPHJFTTVDIBTMJCSBSJFTBOEGSBNFXPSLTUFOET
   UPCFTVQFS
   fi
   DJBM4Pʜ
   *GFFMmy technical skills have declined…
   Voice of my heart
   I've got to do something ʘ(^o^)ʗ
   

   View Slide

8. I feel like I could
   learn more from
   reading codes 😆
   

   View Slide

9. About me
   

   View Slide

10. Published 📙
    

    View Slide

11. OQNKTDPNdLLFFUI
    

    View Slide

12. 🙇 Sorry … 🙇
    
    
    This slide is written in English. However, I am
    still learning English, and there may be some
    inappropriate expressions.
    
    
    Plz feedback for me called “Masakari”
    about my talk!!
    

    View Slide

13. Let’s start 😆
    

    View Slide

14. Then, let's read the source code
    of ESLint!
    

    View Slide

15. *NBHFCZIUUQTFTMJOUPSH
    

    View Slide

16. Basically, we start
    from the module
    written in the main of
    package.json💁
    

    View Slide

17. This is the main one.
    This is a so-called
    controller 💁
    

    View Slide

18. This is the module
    that actually
    
    
    does the work 💁
    

    View Slide

19. As the name implies,
    it is a helper or
    preparation for
    testing. It includes
    many things 💁
    

    View Slide

20. This one is just like
    the name.
    
    
    This is a collection of
    processes that handle
    source code. 💁
    

    View Slide

21. Next, let’s look at
    
    
    “bin” dir.
    

    View Slide

22. Only 3 helper
    functions and an
    executable
    function here💁
    

    View Slide

23. View Slide

24. Next, let’s look at “lib/cli.js”
    fi
    le.
    

    View Slide

25. View Slide

26. “cli.js” depends on “ESLint” module
    
    
    “ESLint” module depends on “CLIEngine” module
    

    View Slide

27. I found out later that...
    

    View Slide

28. There exists a
    dependency map💁
    *NBHFCZIUUQTHJUIVCDPNFTMJOUFTMJOUCMPCNBJOEPDTTSDEFWFMPQFSHVJEFBSDIJUFDUVSFEFQFOEFODZTWH
    

    View Slide

29. Knowledge 1:
    
    
    Overall design
    

    View Slide

30. Unified format
    
    
    for writing each module📝
    

    View Slide

31. Uni
    fi
    ed format
    
    
    for writing each
    module
    

    View Slide

32. Uni
    fi
    ed format
    
    
    for writing each
    module
    

    View Slide

33. util objects rich in methods📝
    

    View Slide

34. w /PEFKTlVUJMzPCKFDU
    w MJCSVMFTVUJMTBTUVUJMT
    w MJCTIBSFETUSJOHVUJMT
    w MJCTIBSFETBTUVUJMT NFUIPET SFHHFYQBUUFSOT
    
    w MJCTPVSDFDPEFUPLFOTUPSFVUJMT
    the number of using methods
    

    View Slide

35. Knowledge 2:
    
    
    Node.js’s “util”
    module is useful
    

    View Slide

36. w VUJMJOTQFDU
    w VUJMGPSNBU
    w VUJMJOIFSJUT
    w VUJMMQSPNJTJGZ ˡ8IBUTVSQSJTFENFXBTUIJT
    
    Methods used by ESLint
    

    View Slide

37. *NBHFCZIUUQTOPEFKTPSHBQJVUJMIUNM
    

    View Slide

38. Knowledge 3:
    
    
    Generator functions
    
    
    in JavaScript
    

    View Slide

39. Do you understand
    
    
    the following code?💁
    

    View Slide

40. View Slide

41. View Slide

42. Let's take a look at
    
    
    some sample codes💁
    

    View Slide

43. View Slide

44. View Slide

45. View Slide

46. more detail, show MDN👉
    

    View Slide

47. An afterthought
    

    View Slide

48. An afterthought
    w /PUXSJUUFOJOUZQFTDSJQU UZQFEF
    fi
    OJUJPOTBSFXSJUUFO
    
    w "OZXBZ UIFEPDVNFOUBUJPOJTFYUFOTJWF
    w +4%PDJTXFMMEPDVNFOUFE BTJTNE
    w %PDVNFOUBUJPOJTVTJOH&MFWFOUZKT UZ
    
    w 5PPMTGPS44(
    w %PDVNFOUBUJPOBQQJTFBTJFSUPWJFXUIBOUIFP
    ff
    i
    DJBMTJUF
    w 5IFSFBSFBMTPDPODFQUTPGMBZPVUBOEDPNQPOFOUT
    

    View Slide

49. View Slide

50. View Slide

51. Thoughts💁
    

    View Slide

52. Thoughts
    w 8FEPOUIBWFUPVOEFSTUBOEJUUPUBMZ👍
    w %FTJHOJOHGBNPVTMJCSBSJFTJTBHSFBUMFBSOJOHFYQFSJFODF👍
    w 8FDBOJNQSPWFNZTLJMMTGPSTVSF👍
    w *GZPV
    fi
    OEJUEJ
    ff
    i
    DVMU ZPVDBOSFBEJUXJUITPNFPOFFMTF👍
    w *GZPVIBWFUSPVCMF JU`THPPEUPSFBEGSPNUIFUFTUDPEF👍
    

    View Slide

53. View Slide