Zero Configuration Tooling in 2017

Let's get into a yet new trend of toolings in JS, 2017

Transcript

1. View Slide

2. View Slide

3. TOOLS, SHOULD I LEARN ALL OF?
   TOOLS, FOR MORDEN WEBAPPS
   TOOLS, FOR ZERO-CONFIGURATION
   TOOLS, SHOULD I LEARN TODAY?
   

   View Slide

4. View Slide

5. NO, NOT EVERY
   

   View Slide

6. TOOLS, SHOULD I LEARN ALL OF?
   TOOLS, FOR MORDEN WEBAPPS
   TOOLS, FOR ZERO-CONFIGURATION
   TOOLS, SHOULD I LEARN TODAY?
   

   View Slide

7. SPA/MPA, LARGE SCAE APPLICATIONS
   apps not a document: s
   e
   t
   u
   p
   , b
   u
   i
   l
   d
   .
   .
   .
   web frameworks / libraries: b
   o
   i
   l
   e
   r
   p
   l
   a
   t
   e
   s
   , s
   t
   a
   r
   t
   e
   r
   -
   k
   i
   t
   s
   .
   .
   .
   mega bundle size: o
   p
   t
   i
   m
   i
   z
   a
   t
   i
   o
   n
   , b
   u
   n
   d
   l
   i
   n
   g
   .
   .
   .
   consistency : l
   i
   n
   t
   , f
   o
   r
   m
   a
   t
   t
   i
   n
   g
   testing: u
   n
   i
   t
   -
   t
   e
   s
   t
   , e
   2
   e
   , c
   i
   , c
   o
   d
   e c
   o
   v
   e
   r
   a
   g
   e
   

   View Slide

8. SETUP APPLICATIONS
   scaffolding boilerpaltes or starter-kits: g
   i
   t c
   l
   o
   n
   e
   , y
   e
   o
   m
   a
   n
   downloading dependencies: n
   p
   m
   , y
   a
   r
   n
   outfitting tons of configs: e
   d
   i
   t
   o
   r
   c
   o
   n
   f
   i
   g
   , g
   i
   t
   c
   o
   n
   f
   i
   g
   s
   , b
   a
   b
   e
   l
   r
   c
   ,
   t
   s
   c
   o
   n
   f
   i
   g
   , t
   r
   a
   v
   i
   s
   .
   .
   .
   

   View Slide

9. CLONING BOILERPLATES OR STARTER-KITS
   git clone h
   t
   t
   p
   s
   :
   /
   /
   g
   i
   t
   h
   u
   b
   .
   c
   o
   m
   /
   m
   y
   /
   b
   a
   b
   e
   l
   -
   w
   e
   b
   p
   a
   c
   k
   -
   g
   u
   l
   p
   -
   r
   e
   a
   c
   t
   -
   r
   e
   d
   u
   x
   -
   f
   l
   o
   w
   -
   p
   r
   e
   t
   t
   i
   e
   r
   -
   b
   o
   i
   l
   e
   r
   p
   l
   a
   t
   e
   git clone h
   t
   t
   p
   s
   :
   /
   /
   g
   i
   t
   h
   u
   b
   .
   c
   o
   m
   /
   h
   i
   s
   /
   r
   e
   a
   c
   t
   -
   r
   e
   d
   u
   x
   -
   s
   s
   r
   -
   p
   w
   a
   -
   t
   y
   p
   e
   s
   c
   r
   i
   p
   t
   -
   g
   u
   l
   p
   -
   l
   e
   s
   s
   -
   s
   t
   a
   r
   t
   e
   r
   -
   k
   i
   t
   

   View Slide

10. View Slide

11. GENERATING PROJECTS FEATURED BY YEOMAN
    npm install -
    g y
    o y
    e
    t
    -
    a
    n
    o
    t
    h
    e
    r
    -
    f
    r
    a
    m
    e
    w
    o
    r
    k
    -
    g
    e
    n
    e
    r
    a
    t
    o
    r
    yo y
    e
    t
    -
    a
    n
    o
    t
    h
    e
    r
    -
    f
    r
    a
    m
    e
    w
    o
    r
    k
    npx -
    p y
    o -
    p w
    e
    e
    x
    -
    v
    u
    e
    -
    w
    e
    b
    p
    a
    c
    k
    -
    g
    e
    n
    e
    r
    a
    t
    o
    r -
    - y
    o n
    o
    d
    e
    

    View Slide

12. View Slide

13. DEVELOP APPLICATIONS
    transpiling / compiling / typing: b
    a
    b
    e
    l
    , t
    y
    p
    e
    s
    c
    r
    i
    p
    t
    , f
    l
    o
    w
    .
    .
    .
    style processing: s
    a
    s
    s
    , l
    e
    s
    s
    , p
    o
    s
    t
    c
    s
    s
    .
    .
    .
    template: p
    u
    g
    , e
    j
    s
    , d
    u
    s
    t
    , h
    a
    n
    d
    e
    b
    a
    r
    s
    , m
    u
    s
    t
    a
    c
    h
    e
    .
    .
    .
    reloading files in dev: h
    m
    r
    , p
    h
    a
    n
    t
    o
    m
    j
    s
    , l
    i
    v
    e
    r
    e
    l
    o
    a
    d
    , b
    r
    o
    w
    e
    r
    s
    y
    n
    c
    .
    .
    .
    

    View Slide

14. BUILD APPLICATIONS
    building production: g
    r
    u
    n
    t
    , g
    u
    l
    p
    , t
    a
    s
    k
    r
    , n
    p
    m s
    c
    r
    i
    p
    t
    s
    .
    .
    .
    linting: e
    s
    l
    i
    n
    t
    , j
    s
    h
    i
    n
    t
    , j
    s
    l
    i
    n
    t
    , f
    l
    o
    w
    .
    .
    .
    bundling: w
    e
    b
    p
    a
    c
    k
    , r
    o
    l
    l
    u
    p
    .
    .
    .
    optimizing: p
    l
    u
    g
    i
    n
    s f
    o
    r u
    g
    l
    i
    f
    y
    , m
    i
    n
    i
    f
    y
    , c
    o
    n
    c
    a
    t
    .
    .
    .
    

    View Slide

15. TESTING APPLICATIONS
    testing: m
    o
    c
    h
    a
    , j
    a
    s
    m
    i
    n
    e
    , c
    h
    a
    i
    , a
    v
    a
    , t
    a
    b
    p
    , j
    e
    s
    t
    .
    .
    .
    code coverage: n
    y
    c
    /
    i
    n
    s
    t
    a
    n
    b
    u
    l
    , j
    s
    c
    o
    v
    e
    r
    a
    g
    e
    , b
    l
    a
    n
    k
    e
    t
    .
    .
    .
    code formatting: p
    r
    e
    t
    t
    i
    e
    r .
    .
    .
    

    View Slide

16. ├
    ─
    ─ .
    b
    a
    b
    e
    l
    r
    c
    ├
    ─
    ─ .
    c
    o
    d
    e
    c
    o
    v
    .
    y
    m
    l
    ├
    ─
    ─ .
    e
    d
    i
    t
    o
    r
    c
    o
    n
    f
    i
    g
    ├
    ─
    ─ .
    e
    s
    l
    i
    n
    t
    i
    g
    n
    o
    r
    e
    ├
    ─
    ─ .
    e
    s
    l
    i
    n
    t
    r
    c
    .
    j
    s
    ├
    ─
    ─ .
    f
    l
    o
    w
    c
    o
    n
    f
    i
    g
    ├
    ─
    ─ .
    g
    i
    t
    a
    t
    t
    r
    i
    b
    u
    t
    e
    s
    ├
    ─
    ─ .
    g
    i
    t
    i
    g
    n
    o
    r
    e
    ├
    ─
    ─ .
    i
    s
    t
    a
    n
    b
    u
    l
    .
    y
    m
    l
    ├
    ─
    ─ .
    n
    p
    m
    r
    c
    ├
    ─
    ─ .
    n
    y
    c
    r
    c
    ├
    ─
    ─ .
    t
    r
    a
    v
    i
    s
    .
    y
    m
    l
    ├
    ─
    ─ .
    y
    a
    r
    n
    r
    c
    ├
    ─
    ─ a
    p
    p
    v
    e
    y
    o
    r
    .
    y
    m
    l
    ├
    ─
    ─ g
    u
    l
    p
    f
    i
    l
    e
    .
    b
    a
    b
    e
    l
    .
    j
    s
    ├
    ─
    ─ j
    e
    s
    t
    .
    c
    o
    n
    f
    i
    g
    .
    j
    s
    ├
    ─
    ─ k
    a
    r
    m
    a
    .
    c
    o
    n
    f
    .
    j
    s
    ├
    ─
    ─ p
    a
    c
    k
    a
    g
    e
    .
    j
    s
    o
    n
    ├
    ─
    ─ t
    s
    c
    o
    n
    f
    i
    g
    .
    j
    s
    o
    n
    ├
    ─
    ─ w
    e
    b
    p
    a
    c
    k
    .
    c
    o
    n
    f
    i
    g
    .
    d
    e
    v
    .
    j
    s
    └
    ─
    ─ w
    e
    b
    p
    a
    c
    k
    .
    c
    o
    n
    f
    i
    g
    .
    p
    r
    o
    d
    .
    j
    s
    

    View Slide

17. PROS AND CONS
    vary opinionated but unauthorized
    various types of tools but locked in unmaintainable tools
    configurable everything but enforced focusing on setting first
    paid for fifth-wheel
    

    View Slide

18. View Slide

19. TOOLS, SHOULD I LEARN ALL OF?
    TOOLS, FOR MORDEN WEBAPPS
    TOOLS, FOR ZERO-CONFIGURATION
    TOOLS, SHOULD I LEARN TODAY?
    

    View Slide

20. Having just attended EmberCamp a week ago, I was excited about
    Ember CLI. Ember users have a great getting started experience
    thanks to a curated set of tools united under a single command-line
    interface. I have heard similar feedback about Elm Reactor. - Create
    Apps with No Configuration - React Blog
    

    View Slide

21. The problem is that by choosing React (and inherently JSX), you've
    unwittingly opted into a confusing nest of build tools, boilerplate,
    linters, & time-sinks to deal with before you ever get to create
    anything - Javascript Fatigue
    

    View Slide

22. NO CONFIGURATIONS
    only files to build your app and simple folder structure
    pre-configured build settings out of the box
    learning how to order not configure
    

    View Slide

23. > y
    a
    r
    n c
    r
    e
    a
    t
    e r
    e
    a
    c
    t
    -
    a
    p
    p m
    y
    -
    a
    p
    p
    > c
    d m
    y
    -
    a
    p
    p &
    & t
    r
    e
    e . -
    L 1 -
    a
    .
    ├
    ─
    ─ .
    g
    i
    t
    i
    g
    n
    o
    r
    e
    ├
    ─
    ─ R
    E
    A
    D
    M
    E
    .
    m
    d
    ├
    ─
    ─ n
    o
    d
    e
    _
    m
    o
    d
    u
    l
    e
    s
    ├
    ─
    ─ p
    a
    c
    k
    a
    g
    e
    .
    j
    s
    o
    n
    ├
    ─
    ─ p
    u
    b
    l
    i
    c
    ├
    ─
    ─ s
    r
    c
    └
    ─
    ─ y
    a
    r
    n
    .
    l
    o
    c
    k
    

    View Slide

24. MANAGED BY AUTHORIZED MAINTAINERS
    maintained projects by owner and relatives
    author-endorsed compelling defaults, workflows
    uniform commands
    

    View Slide

25. ember-cli
    maintained by ember core team
    broccoli, babel, testem, livereload...
    

    View Slide

26. # i
    n
    s
    t
    a
    l
    l
    $ n
    p
    m i
    n
    s
    t
    a
    l
    l -
    g e
    m
    b
    e
    r
    -
    c
    l
    i
    # s
    c
    a
    f
    f
    o
    l
    d
    i
    n
    g
    $ e
    m
    b
    e
    r n
    e
    w m
    y
    -
    e
    m
    b
    e
    r
    -
    a
    p
    p
    # b
    u
    i
    l
    d
    $ e
    m
    b
    e
    r b
    u
    i
    l
    d
    # t
    e
    s
    t
    $ e
    m
    b
    e
    r t
    e
    s
    t
    # s
    t
    a
    r
    t s
    e
    r
    v
    e
    r
    $ e
    m
    b
    e
    r s
    e
    r
    v
    e
    

    View Slide

27. creat-react-app
    maintained by facebook
    create-react-app, react-script: babel, eslint, postcss, jest, webpack...
    

    View Slide

28. # i
    n
    s
    t
    a
    l
    l &
    & s
    c
    a
    f
    f
    o
    l
    d
    i
    n
    g
    $ y
    a
    r
    n c
    r
    e
    a
    t
    e r
    e
    a
    c
    t
    -
    a
    p
    p m
    y
    -
    r
    e
    a
    c
    t
    -
    a
    p
    p
    # b
    u
    i
    l
    d
    $ y
    a
    r
    n b
    u
    i
    l
    d
    # t
    e
    s
    t
    $ y
    a
    r
    n t
    e
    s
    t
    # s
    t
    a
    r
    t s
    e
    r
    v
    e
    r
    $ y
    a
    r
    n s
    t
    a
    r
    t
    

    View Slide

29. polymer-cli
    maintained by google polymer team
    BOWER!, polymer builder, yeoman-generator, gulp...
    

    View Slide

30. # i
    n
    s
    t
    a
    l
    l
    $ n
    p
    m i
    n
    s
    t
    a
    l
    l -
    g p
    o
    l
    y
    m
    e
    r
    -
    c
    l
    i
    # s
    c
    a
    f
    f
    o
    l
    d
    i
    n
    g a
    n
    d i
    n
    s
    t
    a
    l
    l d
    e
    p
    s (
    v
    i
    a b
    o
    w
    e
    r
    )
    $ p
    o
    l
    y
    m
    e
    r i
    n
    i
    t &
    & p
    o
    l
    y
    m
    e
    r i
    n
    s
    t
    a
    l
    l
    # b
    u
    i
    l
    d
    $ p
    o
    l
    y
    m
    e
    r b
    u
    i
    l
    d
    # t
    e
    s
    t
    $ p
    o
    l
    y
    m
    e
    r t
    e
    s
    t
    # s
    t
    a
    r
    t s
    e
    r
    v
    e
    r
    $ p
    o
    l
    y
    m
    e
    r s
    e
    r
    v
    e
    

    View Slide

31. angular-cli
    maintained by google angular team
    typescript, webpack, karma, protractor, jasmine, tslint...
    

    View Slide

32. # i
    n
    s
    t
    a
    l
    l
    $ n
    p
    m i
    n
    s
    t
    a
    l
    l -
    g @
    a
    n
    g
    u
    l
    a
    r
    /
    c
    l
    i
    # s
    c
    a
    f
    f
    o
    l
    d
    i
    n
    g
    $ n
    g n
    e
    w m
    y
    -
    n
    g
    -
    a
    p
    p
    # b
    u
    i
    l
    d
    $ n
    g b
    u
    i
    l
    d
    # t
    e
    s
    t
    $ n
    g t
    e
    s
    t
    # s
    t
    a
    r
    t s
    e
    r
    v
    e
    r
    $ n
    g s
    e
    r
    v
    e
    

    View Slide

33. preact-cli
    maintained by developit
    webpack, babel, ejs, postcss...
    

    View Slide

34. # i
    n
    s
    t
    a
    l
    l
    $ n
    p
    m i -
    g p
    r
    e
    a
    c
    t
    -
    c
    l
    i
    # s
    c
    a
    f
    f
    o
    l
    d
    i
    n
    g
    $ p
    r
    e
    a
    c
    t c
    r
    e
    a
    t
    e m
    y
    -
    p
    r
    e
    a
    c
    t
    -
    a
    p
    p o
    r i
    n
    i
    t
    # b
    u
    i
    l
    d
    $ p
    r
    e
    a
    c
    t b
    u
    i
    l
    d
    # t
    e
    s
    t
    $ p
    r
    e
    a
    c
    t t
    e
    s
    t
    # s
    t
    a
    r
    t s
    e
    r
    v
    e
    r
    $ p
    r
    e
    a
    c
    t s
    e
    r
    v
    e
    

    View Slide

35. vue-cli
    maintained by vue team
    babel, postcss, webpack, handebars...
    

    View Slide

36. # i
    n
    s
    t
    a
    l
    l
    $ n
    p
    m i
    n
    s
    t
    a
    l
    l -
    g v
    u
    e
    -
    c
    l
    i
    # s
    c
    a
    f
    f
    o
    l
    d
    i
    n
    g
    $ v
    u
    e i
    n
    i
    t w
    e
    b
    p
    a
    c
    k .
    /
    m
    y
    -
    v
    u
    e
    -
    a
    p
    p
    # b
    u
    i
    l
    d
    $ v
    u
    e b
    u
    i
    l
    d s
    r
    c
    /
    A
    p
    p
    .
    v
    u
    e
    $ n
    p
    m r
    u
    n b
    u
    i
    l
    d
    # t
    e
    s
    t
    $ n
    p
    m t
    e
    s
    t
    # s
    t
    a
    r
    t s
    e
    r
    v
    e
    r
    $ n
    p
    m s
    t
    a
    r
    t
    

    View Slide

37. next.js
    maintained by zeit
    next supports built-in commands
    except next init, will be deprecated
    using alternatives, maintained by community
    next_init, create-next-app
    

    View Slide

38. # s
    c
    a
    f
    f
    o
    l
    d
    i
    n
    g &
    & i
    n
    s
    t
    a
    l
    l
    $ m
    k
    d
    i
    r m
    y
    -
    n
    e
    x
    t
    -
    a
    p
    p &
    & c
    d $
    _
    $ n
    p
    m i
    n
    s
    t
    a
    l
    l n
    e
    x
    t r
    e
    a
    c
    t r
    e
    a
    c
    t
    -
    d
    o
    m
    # b
    u
    i
    l
    d
    , e
    q
    u
    i
    v
    a
    l
    e
    n
    t t
    o `
    n
    e
    x
    t b
    u
    i
    l
    d
    `
    $ n
    p
    m r
    u
    n b
    u
    i
    l
    d
    # s
    t
    a
    r
    t s
    e
    r
    v
    e
    r
    , e
    q
    u
    i
    v
    a
    l
    e
    n
    t t
    o `
    n
    e
    x
    t s
    t
    a
    r
    t
    `
    $ n
    p
    m s
    t
    a
    r
    t
    

    View Slide

39. next-init, maintained by me
    # s
    c
    a
    f
    f
    o
    l
    d
    i
    n
    g
    $ n
    e
    x
    t
    -
    i
    n
    i
    t .
    /
    m
    y
    -
    n
    e
    x
    t
    -
    a
    p
    p
    $ n
    e
    x
    t
    -
    i
    n
    i
    t n
    e
    x
    t
    .
    j
    s
    /
    e
    x
    a
    m
    p
    l
    e
    s .
    /
    m
    y
    -
    n
    e
    x
    t
    -
    a
    p
    p
    # b
    u
    i
    l
    d e
    q
    u
    i
    v
    a
    l
    e
    n
    t t
    o `
    n
    p
    m r
    u
    n b
    u
    i
    l
    d
    `
    $ n
    e
    x
    t
    -
    b
    u
    i
    l
    d
    # t
    e
    s
    t
    , e
    q
    u
    i
    v
    a
    l
    e
    n
    t t
    o `
    n
    p
    m t
    e
    s
    t
    `
    $ n
    e
    x
    t
    -
    t
    e
    s
    t
    # s
    t
    a
    r
    t s
    e
    r
    v
    e
    r
    , e
    q
    u
    i
    v
    a
    l
    e
    n
    t t
    o `
    n
    p
    m r
    u
    n b
    u
    i
    l
    d
    `
    $ n
    e
    x
    t
    -
    s
    t
    a
    r
    t
    

    View Slide

40. AND MORE
    petehunt/rwb
    mzabriskie/rackt-cli
    insin/nwb
    babel-cli
    webpack-cli
    

    View Slide

41. TOOLS, SHOULD I LEARN ALL OF?
    TOOLS, FOR MORDEN WEBAPPS
    TOOLS, FOR ZERO-CONFIGURATION
    TOOLS, SHOULD I LEARN TODAY?
    

    View Slide

42. YES, BUT NOT EVERY
    

    View Slide

43. View Slide

44. FIRST DO IT, DO IT RIGHT THEN DO IT BETTER
    optimization for performance
    testing for sequire and quaility
    consistency for large scale application
    

    View Slide

45. npm, yarn
    build: webpack, gulp
    es.next, formatting: babel, typescript, flow, prettier...
    e2e, code coverage, unit test
    

    View Slide

46. View Slide

47. View Slide

48. View Slide

49. REFERENCES
    Javascript Fatigue - Eric Clemmons
    Deploying React with Zero Configuration | Heroku
    Roadmap to becoming a web developer in 2017
    Create Apps with No Configuration - React Blog
    

    View Slide