Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

kkeeth
July 16, 2022

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

kkeeth

July 16, 2022
Tweet

More Decks by kkeeth

Other Decks in Programming

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