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

Zero Configuration Tooling in 2017

Avatar for Jimmy Moon Jimmy Moon
August 19, 2017

Zero Configuration Tooling in 2017

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

Avatar for Jimmy Moon

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?
  2. TOOLS, SHOULD I LEARN ALL OF? TOOLS, FOR MORDEN WEBAPPS

    TOOLS, FOR ZERO-CONFIGURATION TOOLS, SHOULD I LEARN TODAY?
  3. 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
  4. 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 . . .
  5. 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
  6. 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
  7. 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 . . .
  8. 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 . . .
  9. 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 . . .
  10. ├ ─ ─ . 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
  11. 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
  12. TOOLS, SHOULD I LEARN ALL OF? TOOLS, FOR MORDEN WEBAPPS

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

    author-endorsed compelling defaults, workflows uniform commands
  18. # 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
  19. # 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
  20. # 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
  21. # 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
  22. # 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
  23. # 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
  24. 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
  25. # 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
  26. 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
  27. TOOLS, SHOULD I LEARN ALL OF? TOOLS, FOR MORDEN WEBAPPS

    TOOLS, FOR ZERO-CONFIGURATION TOOLS, SHOULD I LEARN TODAY?
  28. FIRST DO IT, DO IT RIGHT THEN DO IT BETTER

    optimization for performance testing for sequire and quaility consistency for large scale application
  29. 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