npm: Modularizing your JavaScript development

npm is a great platform for sharing JavaScript packages. This talk was focused on showing people how easy it is to create their own npm packages and reuse them later across different applications.

Presented at Full Stack Toronto 2014 #fstoco

Transcript

1. Modularizing your JavaScript development
   Ruy Adorno | @ruyadorno
   

   View Slide

2. • Huge unmaintainable chunks of code
   • Anti-pattern
   Monolithic applications
   

   View Slide

3. Modularizing
   • Identify reusable blocks
   • Create small modules
   • Smaller modules are easier to
   maintain and can be reused later!
   

   View Slide

4. Package Managers
   • Tool that automates the process of installing,
   uninstalling and updating software packages
   • Provides a standard way of managing
   dependencies
   • Managing files manually is an extremely error-
   prone task
   

   View Slide

5. Why npm?
   • Recently got a $2.6M funding
   • Announced they want to be a part of the
   Front-end ecosystem
   

   View Slide

6. Differences between
   

   View Slide

7. Module definitions
   • Make code reusable
   • ES6 modules are still not there yet
   • npm supports any module format
   

   View Slide

8. Global namespaces
   

   View Slide

9. CommonJS
   

   View Slide

10. AMD
    

    View Slide

11. UMD
    

    View Slide

12. Frameworks
    • Have their own modules definitions
    • Directives and Services are great for reuse
    when working with AngularJS
    

    View Slide

13. New technologies
    web components
    

    View Slide

14. MODULARIZE
    ALL THE THINGS
    

    View Slide

15. npm install
    

    View Slide

16. npm init
    

    View Slide

17. View Slide

18. Automating tasks
    • Yeoman is great for starting any new structure
    • Grunt is the most popular JavaScript task runner
    

    View Slide

19. Reusing
    third-party
    modules
    

    View Slide

20. Share your
    Modules!
    

    View Slide

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

    View Slide

22. Image Credits
    - Paint all the memes by Sam Spratt: http://samspratt.com/
    - Monolith III by Tim Jarvis: http://www.magnasoma.co.uk/#/monolith-3
    - Lego Color Bricks by Alan Chia: http://commons.wikimedia.org/wiki/File:Lego_Color_Bricks.jpg
    - Go Gopher packages photo by Nathan Youngman: http://nathany.com/go-packages/
    - Pattern tiles by Toni F: https://www.flickr.com/photos/st-lite/2660966951
    - Pile of Kittens by Peter Hasselbom: https://www.flickr.com/photos/peter_hasselbom/3072326220
    - Kitten k3 by Kubilay Ozvardar: https://www.flickr.com/photos/mrkubi/1222735107
    

    View Slide

23. References
    - npm Official Website: http://npmjs.org/
    - npm Official Blog: http://blog.npmjs.org/
    - Package management system: http://en.wikipedia.org/wiki/Package_management_system
    - Not Invented here: http://en.wikipedia.org/wiki/Not_invented_here
    - npm Install: https://www.npmjs.org/doc/cli/npm-install.html
    - npm Publish: https://www.npmjs.org/doc/cli/npm-publish.html
    - Bower API: http://bower.io/docs/api/
    - CommonJS: http://www.commonjs.org/
    - Browserify: http://browserify.org/
    - Node.js modules Doc: http://nodejs.org/api/modules.html
    - AMD: https://github.com/amdjs/amdjs-api
    - RequireJS: http://requirejs.org/
    - UMD: https://github.com/umdjs/umd
    - Bower.json spec: https://github.com/bower/bower.json-spec
    - npm package.json spec: https://www.npmjs.org/doc/files/package.json.html
    - AngularJS: https://angularjs.org/
    - Web components: http://webcomponents.org/
    - Mout and modularity: http://blog.millermedeiros.com/mout-and-modularity/
    - Substack opinions on modules: http://substack.net/how_I_write_modules
    - Death to monolithic libraries by Cedric Dugas: http://www.position-absolute.com/articles/death-to-monolithic-libraries/
    

    View Slide