No content

No content

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

No content

NO, NOT EVERY 

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

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 

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

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 

No content

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 

No content

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

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

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

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

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 

No content

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

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 

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 

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 

> 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 

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

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

# 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 

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

# 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 

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

# 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 

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

# 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 

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

# 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 

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

# 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 

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 

# 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 

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 

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

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

YES, BUT NOT EVERY 

No content

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

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

No content

No content

No content

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