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