Flocations: Javascript without framework

Transcript

1. Javascript w/o frameworks Flocations Monday, August 27, 12
2. About Flocations Monday, August 27, 12
3. Overview • Software stack • Working without framework • Challenges • Workarounds • Performance • Roadmap • Questions Monday, August 27, 12
4. Software Stack • Codeigniter ‣ doctrine2 (object relational mapper ORM for PHP) ‣ composer (dependency management in PHP) ‣ packagist (composer repository) • Javascript ‣ Libraries: jQuery, underscore.js ‣ Google Maps API • LessCss ‣ Dynamic stylesheet (variables, mixins, operations, functions) • Apache / Mysql • phing ‣ PHP build tool based on Apache ANT Monday, August 27, 12
5. Working without framework • Learning curve • Coping with limited resources (time, skills) • Priorities • MVP Monday, August 27, 12
6. Challenges • Difficulty managing the codebase • Increasing complexity • Stuff breaking Monday, August 27, 12
7. Workarounds Monday, August 27, 12
8. Splitting up code base // all.js function A() { ... ... } function B() { ... ... } // 001-featureA.js function A() { ... ... } // 100-featureB.js function B() { ... ... } Monday, August 27, 12
9. Modules, utilities & namespace // 100-user-interface-manager.js flocations.UserInterfaceManager = function () { var uim = {}; var _currentDestination; function _somePrivateFn() { } uim.setDestination = function (aNewDest) { _currentDestination = aNewDest; } return uim; } // 001-utilities.js flocations.utilities = function () { fn1: function() { ... }, fn2: function() { ... }, ... } // main.js function loadAll () { uim = flocations.UserInterfaceManager(); uim.setDestination(“SIN”); ... flocations.utilities.fn1(); ... } Monday, August 27, 12
10. Replaceable map interface HTML / CSS Google Map Flocations Exploration Map Any Map Monday, August 27, 12
11. Extending jQuery plugin // datepicker-plugin.js (function( $ ){ ... $.fn.datePickerManager = function( method ) { if ( methods[method] ) { return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); } else if ( typeof method === 'object' || ! method ) { return methods.init.apply( this, arguments ); } else { $.error( 'Method ' + method + ' does not exist on jQuery.datePickerManager' ); } }; })( jQuery ); • Extending DatePicker Monday, August 27, 12
12. jQuery promise • Returns “promise” value instead of blocking call function _showDestinationImages( aIataCode ) { var p1 = _getDestinationPicsPromise(aIataCode); var p2 = _getDestinationImagesTemplate(); $.when(p1, p2).done(function (r1, r2){ cbLoadDestinationPics(r1, r2); }); } Monday, August 27, 12
13. Jasmine // 001-utilitiesSpec.js describe("001-utilities", function() { it("should do hex2dec", function() { expect(utilities.javascript.hex2dec("a")).toEqual(10); }); it("should do dec2hex", function() { expect(utilities.javascript.dec2hex(100)).toEqual('64'); }); }); • Testing Javascript Monday, August 27, 12
14. Performance Monday, August 27, 12
15. Minified checks during deployment ## YUI Compressor java \ -jar \ ${yui-jarfile} \ --type js \ -o ${output_min.js} \ ${concat_input_js_file.js} • Omits whitespace • Replacing local symbols with 1 (2 or 3) letters Monday, August 27, 12
16. mod_deflate ## httpd.conf ... <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE application/x- javascript text/css text/html text/xml text/ javascript </IfModule> ... • Browser needs to support (Accept-encoding: gzip, deflate ) • Compress content before sending to client Monday, August 27, 12
17. mod_expires ## .htaccess <IfModule mod_expires.c> ExpiresActive on ExpiresByType application/javascript "access plus 1 month" </IfModule> • Enables generation of Expires headers Monday, August 27, 12
18. mod_expires Monday, August 27, 12
19. Storing data in var instead of DOM <div class=”bubble” data-price=‘100’></div> Monday, August 27, 12
20. Caching jQuery selector var bubble; $(document).ready(function(){ bubble = $('#bubble'); // faster than doing $(‘#bubble’) twice bubble.doSomething(); bubble.doSomethingAgain(); }); • Multiple styling for bubbles • Improve run-time Monday, August 27, 12
21. Async loading <script type="text/javascript" src="code.js" async="async"></script> • HTML5, all major browsers (except IE) :( • Only for external scripts • Require “src” attribute • Options: ‣ async=”async” (executed after downloaded) ‣ defer=”defer” (executed in the order they occur in the page) Monday, August 27, 12
22. Async loading <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXX-X']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script');ga.type = 'text/javascript';ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga, s); })(); </script> • Works for all browsers Monday, August 27, 12
23. Serving from different subdomains <script type="text/javascript" src="http://js.flocations.com/code.js" ></script> • Multiple HTTP connections • Recommended for serving assets, images Monday, August 27, 12
24. Roadmap • Backend framework • JS Framework: Angularjs ‣ partial implementation Monday, August 27, 12
25. Questions? Monday, August 27, 12
26. Hackers Wanted! shaw@flocations.com Monday, August 27, 12