Modular JavaScript: FEL, Feb 2013

Transcript

1. Modular JavaScript @Jack_Franklin
2. First: An Apology...
3. Who is this guy? Author of "Beginning jQuery" Blogger at javascriptplayground.com Developer for Kainos (JS & Ruby) Comp-Sci student at University of Bath
4. Book Giveaway! Tweet your most cringe-worthy, clean joke with the hashtag #feljoke I'll pick two winners once I'm done talking.
5. The era of web applications
6. What is Modular Development?
7. Separation of Concerns
8. One Module One Concern
9. Loose Coupling
10. modules don't know about each other modules are independent modules don't talk to each other directly so they need some way of communicating
11. Publish and Subscribe
12. Modules have no knowledge of each other Modules publish events Modules subscribe to events Loosely coupled, more maintainable modules don't publish events to specific other modules, but just do it generally
13. JS Patterns JavaScript is really good!
14. The Module Pattern var APP = (function() { var _count = 0; var incrementCount = function() { _count++; } var getCount = function() { return _count; } return { incrementCount: incrementCount, getCount: getCount }; })(); _count is kept private can only be manipulated through incrementCount
15. RequireJS
16. RequireJS Implements the AMD Spec define() modules require() them No more <script> tag rubbish Dynamic module loading Build tool
17. Package Managers
18. Package Managers JamJS Bower Component Volo nodefetch
19. GruntJS The JavaScript Task Runner
20. GruntJS Run tasks on your JS, including plugins for: - Concatenating - Minifying - RequireJS Build Tool - Sass / LESS - CoffeeScript - Handlebars / Jade / templating - QUnit / Jasmine / Mocha / testing
21. Going Modular
22. - one step at a time - split your JS up (in development) - use a tool (Grunt) for production JS - jQuery does Pub/Sub - initial hurdles outweighed by long-term gains
23. Questions? @Jack_Franklin javascriptplayground.com jackfranklin.co.uk github.com/jackfranklin