Tools for writing modular javascript.

My talk for a javascript meetup.

Transcript

1. Modular JavaScript. Jacob Burden @jekrb
2. I'm fairly new. But highly opinionated.
3. As a frontend developer I want to do these things... Write really nice looking code. Send the user a wall of text.
4. Easiest way to write nice looking code.
5. Write less code.
6. Decouple your code.
7. Disclaimer I'm not against writing the better solution if it needs more code. This is not relevant to every web app. This more relevant to a native web app or large javascript library.
8. Our current options are problematic. Extra http request. Single giant.js
9. Making extra request. Keeps files seperated. Easy to work with. Potentially slows down app.
10. Working in hugefile.js Single http request. Looking at lots of code. You'll start to resent your work.
11. Solution?
12. Browserify!
13. Works really nicely with NPM.
14. Lets you cleanly use dependencies.
15. Underscore Terminal n p m i n s t a l l u n d e r s c o r e - - s a v e isNull.js v a r _ = r e q u i r e ( ' u n d e r s c o r e ' ) c o n s o l e . l o g ( _ . i s N u l l ( n u l l ) ) / / t r u e This file is larger than it seems.
16. isNull.js m o d u l e . e x p o r t s = f u n c t i o n i s N u l l ( o b j ) { r e t u r n o b j = = = n u l l } isNumber.js v a r t o S t r i n g = O b j e c t . p r o t o t y p e . t o S t r i n g m o d u l e . e x p o r t s = f u n c t i o n i s N u m b e r ( o b j ) { r e t u r n t o S t r i n g . c a l l ( o b j ) = = = ' [ o b j e c t N u m b e r ] ' } entry.js v a r i s N u l l = r e q u i r e ( ' . / i s N u l l . j s ' ) v a r i s N u m b e r = r e q u i r e ( ' . / i s N u m b e r . j s ' ) c o n s o l e . l o g ( i s N u l l ( n u l l ) ) / / t r u e c o n s o l e . l o g ( i s N u m b e r ( 1 3 3 7 ) ) / / t r u e
17. bundle up b r o w s e r i f y e n t r y . j s > a p p . b u n d l e . j s
18. Work in seperate modules.
19. Send the user app.bundle.js
20. Send app.bundle.js to the user.
21. In your terminal b e e f y e n t r y . j s b e e f y ( v 2 . 1 . 1 ) i s l i s t e n i n g o n h t t p : / / 1 2 7 . 0 . 0 . 1 : 9 9 6 6
22. Check your bundled code in the browser.
23. Faster production with Moonboots.
24. v a r H a p i = r e q u i r e ( ' h a p i ' ) v a r s e r v e r = n e w H a p i . S e r v e r ( ' l o c a l h o s t ' , c o n f i g . h t t p . p o r t ) v a r m o o n b o o t s = r e q u i r e ( ' m o o n b o o t s _ h a p i ' ) v a r m o o n b o o t s C o n f i g = r e q u i r e ( ' . / m o o n b o o t s C o n f i g ' ) s e r v e r . p a c k . r e g i s t e r ( { p l u g i n : m o o n b o o t s , o p t i o n s : m o o n b o o t s C o n f i g } , f u n c t i o n ( e r r ) { i f ( e r r ) t h r o w e r r ; s e r v e r . s t a r t ( f u n c t i o n ( e r r ) { i f ( e r r ) t h r o w e r r ; } ) ; } ) ;
25. m o o n b o o t s C o n f i g . j s m o d u l e . e x p o r t s = { m o o n b o o t s : { m a i n : _ _ d i r n a m e + ' / c l i e n t / a p p . b u n d l e . j s '
26. Extremly portable
27. Save dependencies to package.json
28. In summary. Seperate development from production. Write small, maintainable modules.
29. Thank you!
30. Links Browserify Beefy Moonboots