Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

NO, NOT EVERY

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

> 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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

# 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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

# 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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

# 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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

# 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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

# 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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

# 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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

# 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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

YES, BUT NOT EVERY

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

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