Modularize all the things

714 views

Published on

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

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
714
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
7
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Modularize all the things

  1. 1. MODULARIZE ALLTHETHINGS
  2. 2. Buildingthecasefor Modularization
  3. 3. Realworldexamples: Monolithicapplications
  4. 4. The2013website
  5. 5. The2013website stickyheader parallax contactform carousel
  6. 6. Theelephant intheroom
  7. 7. Reinventingthewheel
  8. 8. Reinventingthewheel Notinventedheresyndrome
  9. 9. Reinventingthewheel Notinventedheresyndrome Learningcurve
  10. 10. Youcouldhave itsomuchbetter
  11. 11. Modularizing
  12. 12. Identifying reusable blocks
  13. 13. Whatifreusinganelement couldbeassimpleas:
  14. 14. Whatifreusinganelement couldbeassimpleas:
  15. 15. Leavingthe comfortzone
  16. 16. Timeforanew workflow
  17. 17. Package Managers
  18. 18. npm: defaultNode.jspackagemanager comeswithnewNode.jsinstallations
  19. 19. mostpopularfront-endpackagemanager mustbeinstalledusingnpm
  20. 20. DifferencesbetweennpmandBower
  21. 21. package.json bower.json
  22. 22. Module definition
  23. 23. window.namespace
  24. 24. window.namespace
  25. 25. CommonJS
  26. 26. AMD
  27. 27. UMD
  28. 28. UMD
  29. 29. Frameworks
  30. 30. AngularJS
  31. 31. Angularhasitsownmoduledefinitions. DirectivesandServicesaregreat!
  32. 32. Newtechnologies
  33. 33. Webcomponents
  34. 34. Automating Tasks
  35. 35. Yeoman
  36. 36. Yeomanisnotonlygreatforstartingbigprojects. Runageneratorandgetyourmodule structurereadyinamatterofseconds! generator-node generator-amd generator-angular
  37. 37. Grunt
  38. 38. YourYeomangeneratorwillcertainlybringyou aGruntfilewithmanyusefulGrunttasksbydefault. Improveitwithtaskstospeedupmodulereleases: grunt-bump grunt-sg-release
  39. 39. Publishing
  40. 40. Itdoesn’tHAVEtobeopen-source.BothnpmandBower supportsmanyendpointssuchasGit,SVN,zip,localfolder,etc. npmpublish/bowerregister Onceourpackageispublishedwecanjustinstallanduseit.
  41. 41. Justaswewanted:
  42. 42. Reusing third-party modules
  43. 43. CedricDugas “CanIcodeitmyselfeasily? DoIhavetime? Whatbrowsersisthissupporting? Numberofopenissues? What’sthecodesize? DoItrustthisguy(orteam)?”
  44. 44. Shareyour modules!
  45. 45. Merci! @ruyadorno http://ruyadorno.com
  46. 46. -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
  47. 47. -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

×