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

Transcript

1. Walking through the source
   code of an OSS library(ESLint)
   'SPOUFOE&OHJOFFS-5#FFS#BTI
   @kkeeth @kuwahara_jsri @kkeeth
   

   View Slide

2. Who am I
   const my_info = {
   
   
   Name: ‘Kuwahara KEETH Kiyohito’,
   
   
   Company: ‘Yumemi Inc’,
   
   
   Position: ‘Servant Leader/Board’,
   
   
   Skills: ‘Riot.js/Next.js/Chit-chat’,
   
   
   }
   

   View Slide

3. Published
   

   View Slide

4. OQNKTDPNdLLFFUI
   

   View Slide

5. 🙇 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

6. Let’s start 😆
   

   View Slide

7. one day in development 💁
   

   View Slide

8. *NDPODFSOFEBCPVUUIFCFIBWJPS
   PGUIJTEFQFOEFOUMJCSBSZ🤔
   *TOUUIBUBIVSEMFUPCFHJOXJUI
   $BOZPVSFBMMZSFBEJU
   me
   my “inner voice”
   -FUTSFBEUIFDPEFPGUIJTMJCSBSZ
   me
   

   View Slide

9. :FT CVU*EPOUVOEFSTUBOEXIBU
   UIJTMJCSBSZJTEPJOHBOE
   .BZCFZPVEPOUIBWFUIFUJNF
   *TUIBUFTTFOUJBMMZXIBUZPVXBOUUP
   TPMWF
   me
   my “inner voice”
   *UEFQFOETPOUIFUIJOH CVU
   JOUFSJNTVQQPSUDBOCFBMJBCJMJUZ
   MBUFSPO
   me
   

   View Slide

10. #VUFWFOJGZPVVOEFSTUBOEUIF
    TPVSDFDPEF XIBUEPZPVEPXJUI
    JU
    my “inner voice”
    *GJUTBCVH JUTCFTUUPDSFBUFBO
    JTTVFPS13
    me
    8IFOEPZPVUIJOLUIBUXJMMCF
    SFTPMWFE %PZPVUIJOLJUXJMMCF
    EPOFPOUJNF
    my “inner voice”
    

    View Slide

11. *GOPU UIFXPSTUUIBUDBOIBQQFOJT
    UIBUXFGPSLUIFSFQPTJUPSZBOE
    MPBEUIFDIBOHFT
    8IPJTHPJOHUPNBJOUBJOJU
    

    8IBUTUIFDPTU
    me
    my “inner voice”
    )NNN*HVFTTTP0LBZ MFUT
    KVTUBTTVNFUIBUTUIFEFTJHOJUT
    TVQQPTFEUPCF😅
    me
    

    View Slide

12. *GOPU UIFXPSTUUIBUDBOIBQQFOJT
    UIBUXFGPSLUIFSFQPTJUPSZBOE
    MPBEUIFDIBOHFT
    8IPJTHPJOHUPNBJOUBJOJU
    

    8IBUTUIFDPTU
    me
    my “inner voice”
    )NNN*HVFTTTP0LBZ MFUT
    KVTUBTTVNFUIBUTUIFEFTJHOJUT
    TVQQPTFEUPCF😅
    me
    none of your business ʘ(^o^)ʗ
    

    View Slide

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

    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. Next, let’s look at
    
    
    “bin” dir.
    

    View Slide

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

    View Slide

19. View Slide

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

    View Slide

21. View Slide

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

    View Slide

23. I found out later that...
    

    View Slide

24. There exists a
    dependency map💁
    *NBHFCZIUUQTHJUIVCDPNFTMJOUFTMJOUCMPCNBJOEPDTTSDEFWFMPQFSHVJEFBSDIJUFDUVSFEFQFOEFODZTWH
    

    View Slide

25. Knowledge 1:
    
    
    Overall design
    

    View Slide

26. Unified format
    
    
    for writing each module📝
    

    View Slide

27. Uni
    fi
    ed format
    
    
    for writing each
    module
    

    View Slide

28. Uni
    fi
    ed format
    
    
    for writing each
    module
    

    View Slide

29. util objects rich in methods📝
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. *NBHFCZIUUQTOPEFKTPSHBQJVUJMIUNM
    

    View Slide

34. Knowledge 3:
    
    
    Generator functions
    
    
    in JavaScript
    

    View Slide

35. Do you understand
    
    
    the following code?💁
    

    View Slide

36. View Slide

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

    View Slide

38. View Slide

39. View Slide

40. View Slide

41. more detail, show MDN👉
    

    View Slide

42. An afterthought
    

    View Slide

43. 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

44. View Slide

45. View Slide

46. Thoughts💁
    

    View Slide

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

    View Slide

48. View Slide