Webmodules - JSConf.ar 2014

Transcript

1. WRITING A WEBMODULE
   JSCONF.AR 2014
   @TOOTALLNATE
   

   View Slide

2. WEBMODULES!
   

   View Slide

3. Not this one
   

   View Slide

4. Not the Python library either
   

   View Slide

5. Definitely not this…
   

   View Slide

6. WEBMODULES!
   NPM MODULES DESIGNED FOR
   WEB BROWSER USAGE
   

   View Slide

7. HTTPS://GITHUB.COM/WEBMODULES
   

   View Slide

8. THERE’S SOME GUIDELINES…
   • Very small, focusing on a single task
   • Client-side bundling via browserify
   • Repository name matches npm package name
   • Add a README.md file
   • Add unit tests, with “cloud testing” enabled
   

   View Slide

9. SMALL, FOCUSED
   • Must export a Function: module.exports
   • Helps enforce the small and focused philosophy
   • Example: https://github.com/webmodules/node-contains
   

   View Slide

10. SMALL, FOCUSED
    • Cross-browser Polyfills
    • Remember to say focused
    though!
    • Example: https://
    github.com/webmodules/
    progress-event
    

    View Slide

11. SMALL, FOCUSED
    • If a module has an inverse function, implement it
    as a separate module / repository
    • Example: https://github.com/webmodules/wrap-range
    and https://github.com/webmodules/unwrap-range
    wrapRange(‘b’) →
    unwrapRange(‘b’) →
    

    View Slide

12. BROWSERIFY
    • Assume browserify will be used for client-side
    bundling
    • It’s possible that other bundlers like component or
    require.js might work in some cases, but untested
    

    View Slide

13. GITHUB == NPM
    • Make it easy for users to find the repository
    • Basically leaves us at the 2nd level namespace,
    since most of the good single-word names are
    taken in the npm registry at this point
    

    View Slide

14. ALWAYS ADD README.MD
    • Installation instructions
    • Usage example
    • API docs ( dox(1) )
    • Travis-CI and Saucelabs
    build badges
    

    View Slide

15. CLOUD TESTING
    • Zuul
    • Use it to run Mocha unit tests in the browser
    • npm test command runs zuul
    • https://github.com/defunctzombie/zuul
    

    View Slide

16. CLOUD TESTING
    • Travis-CI
    • Use it to run SauceLabs browsers in the cloud
    • Set up GitHub commit hooks to test every commit
    • https://github.com/defunctzombie/zuul/wiki/Travis-ci
    

    View Slide

17. CLOUD TESTING
    • SauceLabs
    • Zuul is designed to integrate with Saucelabs
    • Somewhat annoying… you have to create a new
    SauceLabs account for every module created
    

    View Slide

18. CLOUD TESTING
    • In the end, hopefully you get all green passing
    tests!
    

    View Slide

19. ¡GRACIAS!
    https://github.com/webmodules
    

    View Slide