Modular JavaScript: FEL, Feb 2013

Transcript

1. 1.

   Modular JavaScript @Jack_Franklin

2. 2.

   First: An Apology...

3. 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. 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. 5.

   The era of web applications

6. 6.

   What is Modular Development?

7. 7.

   Separation of Concerns

8. 8.

   One Module One Concern

9. 9.

   Loose Coupling

10. 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. 11.

    Publish and Subscribe

12. 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. 13.

    JS Patterns JavaScript is really good!

14. 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. 15.

    RequireJS

16. 16.

    RequireJS Implements the AMD Spec define() modules require() them No

    more <script> tag rubbish Dynamic module loading Build tool
17. 17.

    Package Managers

18. 18.

    Package Managers JamJS Bower Component Volo nodefetch

19. 19.

    GruntJS The JavaScript Task Runner

20. 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. 21.

    Going Modular

22. 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. 23.

    Questions? @Jack_Franklin javascriptplayground.com jackfranklin.co.uk github.com/jackfranklin