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

npm ftw

npm ftw

I've had a ton of fun with npm+grunt+browserify lately - some reflections on that.

Avatar for Dominykas Blyžė

Dominykas Blyžė

December 11, 2013
Tweet

More Decks by Dominykas Blyžė

Other Decks in Programming

Transcript

  1. Use case Purely client side Widget on a 3rd party

    site Need small footprint Can't rely on libraries Note: small needs to be before gzip
  2. Options Structuring the code: 1. Use globals and namespacing mishmash

    2. AMD: Try to make node.js behave like the browser 3. Browserify: Try to make the browser behave like node.js
  3. $() n p m i n s t a l

    l d o m r e a d y Total footprint: ~1700B r e q u i r e ( " d o m r e a d y " ) ( f u n c t i o n o n D o m R e a d y ( ) { / * . . . * / } ) ;
  4. AJAX n p m i n s t a l

    l x h r ...or any of the other gazillion libs Total footprint: ~3.9k v a r x h r = r e q u i r e ( " x h r " ) x h r ( { b o d y : s o m e J S O N S t r i n g , u r i : " / f o o " , h e a d e r s : { " C o n t e n t - T y p e " : " a p p l i c a t i o n / j s o n " } } , f u n c t i o n ( e r r , r e s p , b o d y ) { / / r e s p = = = x h r / / c h e c k r e s p . b o d y o r r e s p . s t a t u s C o d e } )
  5. node.js callback pattern m e t h o d (

    p 1 , p 2 , p 3 . . . , f u n c t i o n c a l l b a c k ( e r r , r 1 , r 2 , r 3 . . . ) { . . . } ) ;
  6. Callbacks object Use a s y n c , promises

    (q , w h e n , r s v p ), E v e n t E m i t t e r .
  7. CSS Do not modify style properties directly Use c l

    a s s L i s t , polyfill available
  8. Deferred Do not use even if you use jQuery! n

    p m i n s t a l l r s v p Total footprint: ~15kB (ouch) v a r x h r p = r e q u i r e ( ' r s v p ' ) . d e n o d e i f y ( r e q u i r e ( ' x h r ' ) ) ;
  9. Dimensions g e t B o u n d i

    n g C l i e n t R e c t ( )
  10. Events a d d E v e n t L

    i s t e n e r ( ) (IE9+) Custom DOM events EventEmitter RSVP Delegation: ~1kB
  11. Forms IDK, but H5F.js is ~5kB Also n e w

    F o r m D a t a ( ) ; (IE10+)
  12. Manipulation v a r t o A r r a

    y = F u n c t i o n . p r o t o t y p e . c a l l . b i n d ( [ ] . s l i c e ) ; [ ] . s l i c e . c a l l ( n o d e L i s t ) ;
  13. Selectors d o c u m e n t .

    q u e r y S e l e c t o r A l l ( ) ftw E l e m e n t . m a t c h e s ( ) (prefixed) Use Sizzle if you have to
  14. Traversing / Utilities ES5 Array methods (f o r E

    a c h ( ) , m a p ( ) et al) Watch Zakas' video: JS APIs you've never heard of Use l o d a s h if you have to
  15. Attach an event handler to every element Not as expressive,

    but...: Less than 200B $ ( p a r e n t ) . f i n d ( s e l e c t o r ) . o n ( e v e n t , c a l l b a c k ) ; m o d u l e . e x p o r t s = f u n c t i o n ( p a r e n t , s e l e c t o r , e v e n t , c a l l b a c k ) { [ ] . f o r E a c h . c a l l ( p a r e n t . q u e r y S e l e c t o r A l l ( s e l e c t o r ) , f u n c t i o n ( e l ) { e l . a d d E v e n t L i s t e n e r ( e v e n t , c a l l b a c k , t r u e ) ; } ) ; } ;
  16. Private / unpublished modules " r i c k s

    h a w " : " g i t : / / g i t h u b . c o m / s h u t t e r s t o c k / r i c k s h a w . g i t # v 1 . 4 .
  17. grunt g r u n t . r e g

    i s t e r T a s k ( " t e s t " , [ " b r o w s e r i f y " , " _ c o p y - b u n d l e - t o - m i n " , " b u s t e r " ] ) ; g r u n t . r e g i s t e r T a s k ( " r e l e a s e " , [ " l e s s : d i s t " , " b r o w s e r i f y " , " u g l i f y " , " b u s t e r " ] ) ;
  18. grunt-browserify src/index.js: b r o w s e r i

    f y : { d i s t : { f i l e s : { " b u i l d / b u n d l e . j s " : [ " s r c / i n d e x . j s " ] } , o p t i o n s : { t r a n s f o r m : [ " e s 6 i f y " , " e j s i f y " ] } } } v a r r s v p = r e q u i r e ( " r s v p " ) , m y M o d u l e = r e q u i r e ( " . / m y M o d u l e " ) ;
  19. grunt-contrib-uglify u g l i f y : { d

    i s t : { f i l e s : { " b u i l d / b u n d l e . m i n . j s " : [ " b u i l d / b u n d l e . j s " ] } } }
  20. grunt-contrib-watch w a t c h : { s c

    r i p t s : { f i l e s : [ " * * / * . j s " , " * * / * . e j s " , " * * / * . j s o n " , " ! n o d e _ m o d u l e s / * * / * " ] , t a s k s : [ " t e s t " ] } , l e s s : { f i l e s : [ " * * / * . l e s s " ] , t a s k s : [ " l e s s : d e v " ] } }
  21. Custom l o d a s h g r u

    n t . r e g i s t e r T a s k ( " l o d a s h i f y " , f u n c t i o n ( ) { v a r i n c l u d e s = [ " c l o n e " , " c o n t a i n s " , " e a c h " , " e x t e n d " , " f i l t e r " , " f o r E a c h " , " i s A r r a y " , " i s D a t e " , " i s O b j e c t " , " i s U n d e f i n e d " , " m a p " , " o b j e c t " , " p a i r s " , " p i c k " , " t o A r r a y " , " u n i q u e I d " ] ; r e q u i r e ( " s h e l l j s " ) . e x e c ( " . / n o d e _ m o d u l e s / . b i n / l o d a s h i n c l u d e = " + i n c l u d e s . j o i n ( " , " ) + " e x p o r t s = a m d - d - o b r o w s e r _ m o d u l e s / l o d a s h . j s " ) ; } ) ;
  22. Templating: ejs n p m i n s t a

    l l e j s i f y index.ejs view.js < % v a r i 1 8 n = r e q u i r e ( " . / i 1 8 n " ) ; % > < p > < % - i 1 8 n . h e l l o % > , < % = n a m e % > < / p > r e q u i r e ( ' . / i n d e x . e j s ' ) ( { n a m e : " V i l n i u s J S " } ) ;
  23. Use new stuff: es6ify Generators (yield), iterators, let, for..of, etc

    [ " o n e " , " t w o " ] . m a p ( ( i t e m ) = > " v a l u e : " + i t e m ) ;
  24. Maintainers forget to n p m p u b l

    i s h Get used to this:
  25. What next (for me)? Live reload Source maps n p

    m i n s t a l l b e e f y Continuous integration
  26. Resources http://microjs.com/ http://caniuse.com/ ES5 compatibility tables (by @kangax) JavaScript APIs

    you've never heard of (by @slicknet) You're Missing the Point of Promises (by @domenic)