Using RequireJS with CakePHP
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Using RequireJS with CakePHP

on

  • 3,592 views

CakeFest 2013 presentation

CakeFest 2013 presentation

Statistics

Views

Total Views
3,592
Views on SlideShare
2,515
Embed Views
1,077

Actions

Likes
2
Downloads
22
Comments
0

7 Embeds 1,077

http://www.scoop.it 847
http://lanyrd.com 190
http://eventifier.com 17
http://microle-systems.com 12
https://twitter.com 5
http://eventifier.co 5
http://www.eventifier.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Using RequireJS with CakePHP Presentation Transcript

  • 1. USING REQUIREJS WITH CAKEPHPStephen Young @young_steveo Sr. Software Engineer - Zumba Fitness
  • 2. WHAT'S THE POINT?
  • 3. The Javascript layer of a typical MVC app starts simple. ...like a jQuery Zen garden. $(function(){ /* animate the blog title */ $('.title').slideDown(); });
  • 4. As the project matures, things get a little more tricky. $(function(){ /* animate the blog title */ $('.title').slideDown(350, function(){ $.get('/stats/count').done(function(data){ $('.statsCount') .html(data.count) .addClass('green'); }); }); }); Still maintainable... -ish
  • 5. ...before long
  • 6. /* mega_file.js */ $(function(){ if (window.isBlogPage && typeof window.App !== 'undefined') { var app = new App(); /* animate the blog title */ $('.title').slideDown(350, function(){ $.get('/stats/count').done(function(data){ $('.statsCount').html(data.count).addClass('green'); $.getScript('/js/superAwesomePlugin', function(){ $.get('/posts/someData').done(function(data){ if(data.posts){ doSomeCoolStuff(data.posts); } }); }); }); }); } else if (window.isCategory) { /* oh, god, please, stop! */
  • 7. Don't forget the layout file...
  • 8. <script src="js/box2d/common/b2Settings.js"></script> <script src="js/box2d/common/math/b2Vec2.js"></script> <script src="js/box2d/common/math/b2Mat22.js"></script> <script src="js/box2d/common/math/b2Math.js"></script> <script src="js/box2d/collision/b2AABB.js"></script> <script src="js/box2d/collision/b2Bound.js"></script> <script src="js/box2d/collision/b2BoundValues.js"></script> <script src="js/box2d/collision/b2Pair.js"></script> <script src="js/box2d/collision/b2PairCallback.js"></script> <script src="js/box2d/collision/b2BufferedPair.js"></script> <script src="js/box2d/collision/b2PairManager.js"></script> <script src="js/box2d/collision/b2BroadPhase.js"></script> <script src="js/box2d/collision/b2Collision.js"></script> <script src="js/box2d/collision/Features.js"></script> <script src="js/box2d/collision/b2ContactID.js"></script> <script src="js/box2d/collision/b2ContactPoint.js"></script> <script src="js/box2d/collision/b2Distance.js"></script>
  • 9. THERE IS A BETTER WAY.
  • 10. WHAT IS REQUIREJS? javascript module & file loader AMD (asynchronous module definition) optimization tool http://requirejs.org
  • 11. WHAT'S SO GREAT ABOUT AMD? Encapsulation Dependency Management
  • 12. AMD EXAMPLE Define your modules: /* define(id?, dependencies?, factory); */ define("SomeModule", ["dependency"], function(dependency) { var SomeModule = function(){}; SomeModule.prototype.init = function(){ dependency.doStuff(); }; /* etc. */ return SomeModule; });
  • 13. AMD EXAMPLE Load your modules and use them: /* require(dependencies, callback); */ require(["ModuleA", "ModuleB"], function(ModuleA, ModuleB) { var module = new ModuleA(); ModuleA.init(); /* etc. */ });
  • 14. REQUIRE() OR DEFINE() ? Use `define` to declare a module for use elsewhere. Use `require` to pre-load dependencies and/or do some stuff.
  • 15. WHAT IS CAKEPHP? (just kidding)
  • 16. HELLO WORLD /* app/Views/Layouts/someLayout.ctp */ echo $this->Html->script("require.js", [ "data-main" => "/js/bootstrap" ]); /* app/webroot/js/bootstrap.js */ requirejs.config({ paths : { jquery : 'js/vendor/jquery.min' } }); require(['js/libs/blogs']); /* app/webroot/js/libs/blogs.js */ require(['jquery'], function($){ $(function(){ /* etc. */ }); });
  • 17. IT IS THAT SIMPLE. IS IT THAT SIMPLE? IT NEVER IS, IS IT? Even with RequireJS, things can get out of hand. As with many great tools, RequireJS gives you plenty of "rope."
  • 18. TIPS Keep your modules focused; remember the single responsibility principle. Define a solid directory structure, and stick to it. (like your CakePHP /app directory) Think "automagic" and document your conventions. /js/README.md
  • 19. GOING BEYOND "HELLO WORLD" i.e. What if your project contains LOTS of javascript?
  • 20. DISCLAIMER This works for us, and we like it, but feel free to tweak it to meet your needs. image from gifsoup.com
  • 21. IDENTIFY SECTIONS FOR YOUR PROJECT 1. Break the project down into sections, and create a module for each section (e.g. blog.js, shop.js, etc). 2. Identify any functionality that would be shared across multiple sections, and put them into common modules.
  • 22. CHANGE THE LAYOUT BEFORE: /* (data-main does the heavy lifting) */ echo $this->Html->script("require.js", [ "data-main" => "/js/bootstrap" ]); AFTER: /* no more data-main */ echo $this->Html->script("require.js"); <script> require(['/js/bootstrap.js'], function(){ require(['modules/<?php echo $javascriptModule; ?>']); }); </script>
  • 23. MODIFY THE APPCONTROLLER public function beforeRender(){ $this->set(array( 'javascriptModule' => $this->javascriptModule )); } public function beforeFilter() { /* just a nice convention, you could use a default file too */ if (!$this->javascriptModule){ $moduleName = Inflector::underscore($this->name); $this->javascriptModule = $moduleName; } }
  • 24. NEW BOOTSTRAP.JS FILE requirejs.config({ paths : { jquery : 'js/vendor/jquery', someLib : 'js/libs/someLib', anotherLib : 'js/libs/anotherLib' }, shim : { anotherLib : ['jquery', 'someLib'] } });
  • 25. OPTIMIZATION
  • 26. R.JS RequireJS ships with a great minification/concatenation tool It runs in Node.js, Java with Rhino, or a browser It is configurable Bonus: it can minify CSS files for you too (but I'm not going to cover that today)
  • 27. CONCATENATE DEPENDENCIES r.js will combine modules that are specified as dependencies in your module definitions
  • 28. CONFIGURATION FILE { "modules": [ { "name" : "bootstrap", "include" : [ "underscore", "backbone", "jquery" ] }, { "name" : "blogs", exclude: ['bootstrap'] }, { "name" : "shops", exclude: ['bootstrap'] }, { "name" : "profiles", exclude: ['bootstrap'] }, /* etc. */
  • 29. THAT'S IT! QUESTIONS?
  • 30. EXAMPLE REPO github.com/young-steveo/require_cake