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