$30 off During Our Annual Pro Sale. View Details »

npm: Modularizing your JavaScript development

Ruy Adorno
November 22, 2014

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

Ruy Adorno

November 22, 2014
Tweet

More Decks by Ruy Adorno

Other Decks in Programming

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