Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

While looking back on a day 💁

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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^)ʗ

Slide 8

Slide 8 text

I feel like I could learn more from reading codes 😆

Slide 9

Slide 9 text

About me

Slide 10

Slide 10 text

Published 📙

Slide 11

Slide 11 text

OQNKTDPNdLLFFUI

Slide 12

Slide 12 text

🙇 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!!

Slide 13

Slide 13 text

Let’s start 😆

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

*NBHFCZIUUQTFTMJOUPSH

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

This is the module that actually does the work 💁

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Only 3 helper functions and an executable function here💁

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

I found out later that...

Slide 28

Slide 28 text

There exists a dependency map💁 *NBHFCZIUUQTHJUIVCDPNFTMJOUFTMJOUCMPCNBJOEPDTTSDEFWFMPQFSHVJEFBSDIJUFDUVSFEFQFOEFODZTWH

Slide 29

Slide 29 text

Knowledge 1: Overall design

Slide 30

Slide 30 text

Unified format for writing each module📝

Slide 31

Slide 31 text

Uni fi ed format for writing each module

Slide 32

Slide 32 text

Uni fi ed format for writing each module

Slide 33

Slide 33 text

util objects rich in methods📝

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

*NBHFCZIUUQTOPEFKTPSHBQJVUJMIUNM

Slide 38

Slide 38 text

Knowledge 3: Generator functions in JavaScript

Slide 39

Slide 39 text

Do you understand the following code?💁

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Let's take a look at some sample codes💁

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

more detail, show MDN👉

Slide 47

Slide 47 text

An afterthought

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Thoughts💁

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

No content