Publishing and reusing Javascript modules doesn't need to be hard. This talk shows some tips on how to use Package managers, use a module definition to share your work and finally how to publish it; so the world (including yourself) can reuse it later! Presented at JS Montreal in 12 august 2014

1. MODULARIZE
ALLTHETHINGS

2. Buildingthecasefor
Modularization

3. Realworldexamples:
Monolithicapplications

4. The2013website

5. The2013website
stickyheader
parallax
contactform
carousel

6. Theelephant
intheroom

7. Reinventingthewheel

8. Reinventingthewheel
Notinventedheresyndrome

9. Reinventingthewheel
Notinventedheresyndrome
Learningcurve

10. Youcouldhave
itsomuchbetter

11. Modularizing

12. Identifying
reusable
blocks

13. Whatifreusinganelement
couldbeassimpleas:

14. Whatifreusinganelement
couldbeassimpleas:

15. Leavingthe
comfortzone

16. Timeforanew
workflow

17. Package
Managers

18. npm:
defaultNode.jspackagemanager
comeswithnewNode.jsinstallations

19. mostpopularfront-endpackagemanager
mustbeinstalledusingnpm

20. DifferencesbetweennpmandBower

21. package.json bower.json

22. Module
definition

23. window.namespace

24. window.namespace

25. CommonJS

27. AMD

29. UMD

30. UMD

31. Frameworks

32. AngularJS

33. Angularhasitsownmoduledefinitions.
DirectivesandServicesaregreat!

34. Newtechnologies

35. Webcomponents

36. Automating
Tasks

37. Yeoman

38. Yeomanisnotonlygreatforstartingbigprojects.
Runageneratorandgetyourmodule
structurereadyinamatterofseconds!
generator-node
generator-amd
generator-angular

39. Grunt

40. YourYeomangeneratorwillcertainlybringyou
aGruntfilewithmanyusefulGrunttasksbydefault.
Improveitwithtaskstospeedupmodulereleases:
grunt-bump
grunt-sg-release

41. Publishing

42. Itdoesn’tHAVEtobeopen-source.BothnpmandBower
supportsmanyendpointssuchasGit,SVN,zip,localfolder,etc.
npmpublish/bowerregister
Onceourpackageispublishedwecanjustinstallanduseit.

43. Justaswewanted:

44. Reusing
third-party
modules

45. CedricDugas
“CanIcodeitmyselfeasily?
DoIhavetime?
Whatbrowsersisthissupporting?
Numberofopenissues?
What’sthecodesize?
DoItrustthisguy(orteam)?”

46. Shareyour
modules!

47. Merci!
@ruyadorno
http://ruyadorno.com

48. -PaintallthememesbySamSpratt:http://samspratt.com/
-MonolithIIIbyTimJarvis:http://www.magnasoma.co.uk/#/monolith-3
-Elephantintheroomphoto:“BarelyLegal”exhibition,September15,2006.(REUTERS/FredProuser)
-LegoColorBricksbyAlanChia:http://commons.wikimedia.org/wiki/File:Lego_Color_Bricks.jpg
-FranzFerdinand-YouCouldHaveItSoMuchBetteralbumcover
-GoGopherpackagesphotobyNathanYoungman:http://nathany.com/go-packages/
--PatterntilesbyToniF:https://www.flickr.com/photos/st-lite/2660966951
-PileofKittensbyPeterHasselbom:https://www.flickr.com/photos/peter_hasselbom/3072326220
-Kittenk3byKubilayOzvardar:https://www.flickr.com/photos/mrkubi/1222735107
ImageCredits

49. -Packagemanagementsystem:http://en.wikipedia.org/wiki/Package_management_system
-NotInventedhere:http://en.wikipedia.org/wiki/Not_invented_here
-NPMPublish:https://www.npmjs.org/doc/cli/npm-publish.html
-BowerAPI:http://bower.io/docs/api/
-CommonJS:http://www.commonjs.org/
-Browserify:http://browserify.org/
-Nod-Node.jsmodulesDoc:http://nodejs.org/api/modules.html
-AMD:https://github.com/amdjs/amdjs-api
-RequireJS:http://requirejs.org/
-UMD:https://github.com/umdjs/umd
-Bower.jsonspec:https://github.com/bower/bower.json-spec
-npmpackage.jsonspec:https://www.npmjs.org/doc/files/package.json.html
-AngularJS:https://angularjs.org/
--Webcomponents:http://webcomponents.org/
-Moutandmodularity:http://blog.millermedeiros.com/mout-and-modularity/
-Substackopinionsonmodules:http://substack.net/how_I_write_modules
-DeathtomonolithiclibrariesbyCedricDugas:http://www.position-absolute.com/articles/death-to-mono-
lithic-libraries/
ListofJavascriptPackagemanagers:
-npm:https://www.npmjs.org/
-Bower:http://bower.io/
-Volo:http://volojs.org/
-Jam:http://jamjs.org/
-Component:https://github.com/component/component
References