jQuery Conf JavascriptMVC

Transcript

1. Organizing Code with JavaScriptMVC Thomas Reynolds git clone git://github.com/tdreyno/jquery-demo.git Friday, October 14, 11
2. Who am I? Friday, October 14, 11
3. Who am I? • JavascriptMVC Core Committer • jQuery Plugin Developer • @tdreyno • github.com/tdreyno • awardwinningfjords.com Friday, October 14, 11
4. Friday, October 14, 11
5. Friday, October 14, 11
6. Getting to Know You Friday, October 14, 11
7. Getting to Know You • Traditional Website Developers • Web Application Developers • Mobile Web Developers Friday, October 14, 11
8. Organizing Code Friday, October 14, 11
9. Common Problems Friday, October 14, 11
10. One BIG File Friday, October 14, 11
11. $(function(){ // make external links open in new window $('a[rel="external"]').attr('target','_blank'); if ($("body").attr('id') == 'homepage'){ bindHomepage(); } else if ($("body").hasClass('lessons_index') || $("body").hasClass('lessons_list')) { bindLessonsList(); } else if ($("body").hasClass('documents_detail')) { if (weird === 0){ showDetail(); } weird++; } else if ($("body").hasClass('lessons_detail')) { if (weird === 0){ showDetail(); } weird++; // look for requests to launch the activity editor var edit_matches = window.location.search.match(/[?&]edit_activity=(\d+)&type=([^=?&]+)/) if (edit_matches) { var edit_activity_id = edit_matches[1]; var edit_activity_type = edit_matches[2]; launchCreatorModal({ id: edit_activity_id, type: edit_activity_type, mode: 'edit' }); } } else if ($("body").attr('id')=='my_classroom'){ bindMyClassroom(); } else if ($("body").hasClass('templates_index')){ bindTemplates(); } bindCreatorLinks(); // This can cause an error in Chrome, but the problem is already patched (03/2010) // and awaiting a release. window.onbeforeunload = handleOnBeforeUnload; window.onunload = handleOnUnload; if (window.location.search.match(/[?&]from_activity=1/)) { $('#back_to_activity a').pulse(); } bindSearchToggle(); // Load the "Star This" code // Should be inlined using something like Sprockets in the future $.getScript("/js/stars-and-add-to-buttons.js"); // Handle resources page toggles $("p.more a.morelink, ul.more a.morelink, a.arrow").click(function(e) { e.preventDefault(); var parentElem = $(this).parents(".openRow, .closedRow"); parentElem[0].className = parentElem.is(".openRow") ? "closedRow" : "openRow"; }); if (document.location.hash.length) { $("a[name=" + document.location.hash.replace(/#/, "") + "]").parents(".closedRow").find(".arrow").click(); } Friday, October 14, 11
12. One BIG File • 800+ Lines • Difficult to read • No Documentation • No Test Cases • Not DRY Friday, October 14, 11
13. The Solution? Break into Maintainable Chunks of Code Friday, October 14, 11
14. Problems with Multiple Files • Does everything go into one folder? • What if something is needed in two different places? • Communication • Loading speed • Loading order Friday, October 14, 11
15. JavascriptMVC Provides Dependency Management Friday, October 14, 11
16. StealJS • Asynchronously Loading • Provides a structure for organizing files • Cleans, Combines & Compresses • Bundles Presentational CSS • Supports CoffeeScript & Less.js Friday, October 14, 11
17. steal.plugins("jquery/controller", "jquery/event/drag", "jquery/dom/within") .then(function($) { // Configure JavascriptMVC plugins }) .resources("jquerytools.tabs", "jquery.ui.position", "jquerytools.scrollable") .then(function($) { // Configure jQuery plugins }) .controllers("tile", "large_zoom", "medium_zoom", "small_zoom", "control", "image") .then(function($) { // All dependencies are satisfied }) StealJS Example Friday, October 14, 11
18. Plugin • Basic unit of organization • Simply, a folder. • Initialized by a .js file named the same as the app. • For example: my_plugin/my_plugin.js • Can include other plugins Friday, October 14, 11
19. Resources • A folder named “resources/” in your plugin • Contains raw Javascript files, often a jQuery plugin • jQuery UI • jQuery Tools • Modernizr • Et cetera Friday, October 14, 11
20. Controller • Could be called several things: • View Controller • Widget • $.fn on Steroids Friday, October 14, 11
21. Controller • Controls a DOM element • Uses templates to create & manipulate the DOM • Manages state • Uses PubSub (OpenAjax) to communicate • Responds to events Friday, October 14, 11
22. Example Site Friday, October 14, 11
23. Example Site Friday, October 14, 11
24. Example Site Friday, October 14, 11
25. Example Site • Homepage • A slideshow • Tabs • Custom Autocomplete Search • Contact Page • Form with Validator • “Success” lightbox • Custom Autocomplete Search Friday, October 14, 11
26. Getting Started • Download zip file from GitHub • http://github.com/jupiterjs/framework/ downloads • Unzip • Install gem • gem install javascriptmvc --pre • jmvc-init jqconf-demo Friday, October 14, 11
27. Fresh JavascriptMVC Application Friday, October 14, 11
28. Homepage “App” Friday, October 14, 11
29. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>homepage</title> </head> <body> <h1>Thanks for stealing StealJS!</h1> <p>Don't worry, it's open source. It's only stealing if you don't do something awesome with it.</p> <div id='content'></div> <script type='text/javascript' src='../steal/steal.js?homepage'></script> </body> </html> Homepage HTML Friday, October 14, 11
30. steal( 'resources/example' ) // Loads 'resources/example.js' .css( 'homepage' ) // Loads 'homepage.css' .plugins( 'steal/less', 'steal/coffee' ) // Loads 'steal/less/less.js' and // 'steal/coffee/coffee.js' .then(function(){ // Adds a function to be called back // once all prior files have been // loaded and run steal.coffee('resources/example') // Loads 'resources/example.coffee' .less('resources/example'); // Loads 'resources/example.less' }); Homepage Javascript Friday, October 14, 11
31. Resources (jQuery Plugins) Friday, October 14, 11
32. homepage/homepage.js steal.plugins("jquery") .resources("slider", "tabs") .then(function($) { $(document).ready(function() { $("#slider").slider(); $("#tabs").tabs(); }); }); Friday, October 14, 11
33. Friday, October 14, 11
34. Contact Page “App” Friday, October 14, 11
35. Contact Page steal.plugins("jquery") .resources("validator", "lightbox") .then(function() { $("form").validator(); $("form").submit(function() { $.lightbox(); }); }); Friday, October 14, 11
36. Autocomplete Search (Plugin) Friday, October 14, 11
37. TR.SearchControl Plugin Friday, October 14, 11
38. But Wait!? Friday, October 14, 11
39. FuncUnit • Test-Driven Development: • Results well thought-out code • Inspires trust in your users • Documents logic • Provides an automated means of making sure everything still works Friday, October 14, 11
40. TR.SearchControl FuncUnit module("TR.SearchControl", { setup: function() { $("form#search").tr_search_control(); } }) test("Autocomplete", function(){ // Type into text box // Extra results should appear }) test("Submit", function(){ // Clicking submit or hitting enter // Should submit the form }) Friday, October 14, 11
41. TR.SearchControl FuncUnit Friday, October 14, 11
42. Search Controller steal.plugins("jquery/controller") .resources("autocomplete") .then(function($) { $.Controller.extend("TR.SearchControl", { }, { init: function() { this.element.autocomplete(); }, "input:text change": function() { // Autocomplete lookup }, "submit": function() { // Ajax form submit } }); $(document).ready(function() { $("form#search").tr_search_control(); }); }); Friday, October 14, 11
43. TR.SearchControl FuncUnit Friday, October 14, 11
44. homepage/homepage.js steal.plugins("jquery") .resources("slider", "tabs") .plugins("tr/search_control") .then(function($) { $(document).ready(function() { $("#slider").slider(); $("#tabs").tabs(); }); }); Friday, October 14, 11
45. Friday, October 14, 11
46. All Done Coding, Time to Optimize Friday, October 14, 11
47. • Packages • 0.js - Shared between all apps (jQuery, JavascriptMVC componetns, etc) • homepage/production.js Unique to Homepage • contacts/contact.js Unique to Contact • Google Closure Compiler • Dojo Shrinksafe also available Building & Compression Friday, October 14, 11
48. ./steal/js steal/buildjs homepage contact Building & Compression Friday, October 14, 11
49. Building & Compression Friday, October 14, 11
50. Production HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>homepage</title> </head> <body> <h1>Thanks for stealing StealJS!</h1> <p>Don't worry, it's open source. It's only stealing if you don't do something awesome with it.</p> <div id='content'></div> <script type='text/javascript' src='../steal/steal.js?homepage,production'> </script> </body> </html> Friday, October 14, 11
51. Friday, October 14, 11
52. Summary • Organize code into apps & plugins • Always Test Your Code • Use consistent naming and organization • Create sharable modules (Github) • Optimize! Friday, October 14, 11
53. JavascriptMVC Provides Models (JSON API wrappers) Views (EJS, Micro, Jaml) Controllers (Event system, data binding) Functional testing (FuncUnit, qunit, selenium) Dependency management (Optimization) Friday, October 14, 11
54. My Plugins JavascriptMVC convenience gem • gem install javascriptmvc --pre • jmvc-init newproject • jmvc-gen newapp Friday, October 14, 11
55. • steal.plugins("ss/state_machine") http://github.com/secondstory/secondstoryjs-statemachine • steal.plugins("ss/router") http://github.com/secondstory/secondstoryjs-router • steal.plugins("tr/views/mustache") http://github.com/tdreyno/mustache-javascriptmvc • steal.plugins("tr/controller/pure") http://github.com/tdreyno/javascriptmvc-pure My Plugins Friday, October 14, 11
56. Thank you • Questions? • http://v3.javascriptmvc.com/index.html • @tdreyno • awardwinningfjords.com • github.com/secondstory • github.com/tdreyno • http://github.com/tdreyno/jquery-demo Friday, October 14, 11