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

Zero Configuration Tooling in 2017

Jimmy Moon
August 19, 2017

Zero Configuration Tooling in 2017

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

Jimmy Moon

August 19, 2017
Tweet

More Decks by Jimmy Moon

Other Decks in Programming

Transcript

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

    View full-size slide

  2. NO, NOT EVERY

    View full-size slide

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

    View full-size slide

  4. 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 full-size slide

  5. 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 full-size slide

  6. 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 full-size slide

  7. 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 full-size slide

  8. 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 full-size slide

  9. 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 full-size slide

  10. 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 full-size slide



  11. ─ .
    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 full-size slide

  12. 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 full-size slide

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

    View full-size slide

  14. 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 full-size slide

  15. 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 full-size slide

  16. 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 full-size slide

  17. > 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  20. # 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 full-size slide

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

    View full-size slide

  22. # 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 full-size slide

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

    View full-size slide

  24. # 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 full-size slide

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

    View full-size slide

  26. # 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 full-size slide

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

    View full-size slide

  28. # 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 full-size slide

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

    View full-size slide

  30. # 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 full-size slide

  31. 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 full-size slide

  32. # 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 full-size slide

  33. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  36. YES, BUT NOT EVERY

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. 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 full-size slide