Zero Configuration Tooling in 2017

687ac25540fe35fcb5e828f75c4a6079?s=47 Jimmy Moon
August 19, 2017

Zero Configuration Tooling in 2017

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

687ac25540fe35fcb5e828f75c4a6079?s=128

Jimmy Moon

August 19, 2017
Tweet

Transcript

  1. None
  2. None
  3. TOOLS, SHOULD I LEARN ALL OF? TOOLS, FOR MORDEN WEBAPPS

    TOOLS, FOR ZERO-CONFIGURATION TOOLS, SHOULD I LEARN TODAY?
  4. None
  5. NO, NOT EVERY

  6. TOOLS, SHOULD I LEARN ALL OF? TOOLS, FOR MORDEN WEBAPPS

    TOOLS, FOR ZERO-CONFIGURATION TOOLS, SHOULD I LEARN TODAY?
  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
  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 . . .
  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
  10. None
  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
  12. None
  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 . . .
  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 . . .
  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 . . .
  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
  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
  18. None
  19. TOOLS, SHOULD I LEARN ALL OF? TOOLS, FOR MORDEN WEBAPPS

    TOOLS, FOR ZERO-CONFIGURATION TOOLS, SHOULD I LEARN TODAY?
  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
  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
  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
  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
  24. MANAGED BY AUTHORIZED MAINTAINERS maintained projects by owner and relatives

    author-endorsed compelling defaults, workflows uniform commands
  25. ember-cli maintained by ember core team broccoli, babel, testem, livereload...

  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
  27. creat-react-app maintained by facebook create-react-app, react-script: babel, eslint, postcss, jest,

    webpack...
  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
  29. polymer-cli maintained by google polymer team BOWER!, polymer builder, yeoman-generator,

    gulp...
  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
  31. angular-cli maintained by google angular team typescript, webpack, karma, protractor,

    jasmine, tslint...
  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
  33. preact-cli maintained by developit webpack, babel, ejs, postcss...

  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
  35. vue-cli maintained by vue team babel, postcss, webpack, handebars...

  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
  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
  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
  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
  40. AND MORE petehunt/rwb mzabriskie/rackt-cli insin/nwb babel-cli webpack-cli

  41. TOOLS, SHOULD I LEARN ALL OF? TOOLS, FOR MORDEN WEBAPPS

    TOOLS, FOR ZERO-CONFIGURATION TOOLS, SHOULD I LEARN TODAY?
  42. YES, BUT NOT EVERY

  43. None
  44. FIRST DO IT, DO IT RIGHT THEN DO IT BETTER

    optimization for performance testing for sequire and quaility consistency for large scale application
  45. npm, yarn build: webpack, gulp es.next, formatting: babel, typescript, flow,

    prettier... e2e, code coverage, unit test
  46. None
  47. None
  48. None
  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