Nov 23, 2014 Sofia var title = “RequireJS - a brand new world!”; var info = { name: “Bogoi Bogdanov”, otherOptional: “Managing Partner at Empters Ltd.” };

Nov 23, 2014agenda(); Web Development known issues What is RequireJS What is RequireJS module How to create and use modules Usage of RequireJS Optimization Tool Bogoi Bogdanov RequireJS - a brand new world!

Nov 23, 2014 Typical HTML page – Bad practice... … Bogoi Bogdanov RequireJS - a brand new world!

Nov 23, 2014 How Browsers load JavaScript & CSS files Bogoi Bogdanov RequireJS - a brand new world! stylesheet1.css scriptfile1.js scriptfile2.js stylesheet2.css stylesheet3.css 100 ms

Nov 23, 2014 Typical HTML page – Good practice … Bogoi Bogdanov RequireJS - a brand new world!

Nov 23, 2014 How Browsers load JavaScript & CSS files Bogoi Bogdanov RequireJS - a brand new world! stylesheet1.css stylesheet2.css stylesheet3.css scriptfile1.js scriptfile2.js 100 ms

Nov 23, 2014 Always put the JavaScript files after the CSS files!

Nov 23, 2014 It is better to have one big JavaScript file than many small files!

Nov 23, 2014 Typical JavaScript file var variable1 = “something”; var variable2 = 5; var variable3 = “something else”; function doSomething1() { // some code here } function doSomething2() { // some more code here } $( document ).ready(function() { // some other code here }); ….. Bogoi Bogdanov RequireJS - a brand new world!

Nov 23, 2014 Polluted Global Namespace Hard to maintain dependencies Hard code maintenance Lack of code reusability Issues of Typical JavaScript files Bogoi Bogdanov RequireJS - a brand new world!

Nov 23, 2014 Web sites are turning into Web apps Code complexity grows as the site gets bigger Developer wants discrete JS files/modules Deployment wants optimized code in just one or a few HTTP callsFacts Bogoi Bogdanov RequireJS - a brand new world!

Nov 23, 2014 The solution - RequireJS “RequireJS is a JavaScript file and module loader.” “Using a modular script loader like RequireJS will improve the speed and quality of your code.” Bogoi Bogdanov RequireJS - a brand new world!

Nov 23, 2014 Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded.

Nov 23, 2014 define() require() require.confRequireJS Bogoi Bogdanov RequireJS - a brand new world!

Nov 23, 2014 define(name?, [‘dep1’,’dep2’,…]?, function(dep1,dep2,…) { var object = {}; //some fancy code return object; //optional }); RequireJS – define() function Bogoi Bogdanov RequireJS - a brand new world!

Nov 23, 2014 require([‘dep1’,’dep2’,…]?, function(dep1, dep2, …) { //some fancy code //no return! }); RequireJS – require() function Bogoi Bogdanov RequireJS - a brand new world!

Nov 23, 2014 RequireJS Setup Bogoi Bogdanov RequireJS - a brand new world! … …

Nov 23, 2014 Page load time analysis Bogoi Bogdanov RequireJS - a brand new world!

Nov 23, 2014 Merge modules in single file Minify and Uglify the file RequireJS Optimization Tool Bogoi Bogdanov RequireJS - a brand new world!

Nov 23, 2014 r.js build.js node.js or Rhino for Java RequireJS Optimization Tool Bogoi Bogdanov RequireJS - a brand new world!

Nov 23, 2014 Page load time analysis Bogoi Bogdanov RequireJS - a brand new world!

Nov 23, 2014 Performance analysis of the Demo Bogoi Bogdanov RequireJS - a brand new world! Initial JavaScript size o 1.09 MB (1,153,523 bytes) Optimized JavaScript size o 95.4 KB (97,699 bytes) ~ 12 times less bytes! Initial JavaScript requests count o 7 requests Optimized requests count o 2 requests ~ 3.5 times less requests!

Nov 23, 2014 Reusable modules Asynchronous Loading of JavaScript files Less HTTP requests Optimized JavaScript files RequireJS Overall Bogoi Bogdanov RequireJS - a brand new world!

Nov 23, 2014 Q & A Bogoi Bogdanov, managing partner at Empters Ltd. / empters

Nov 23, 2014 Upcoming events ISTA Conference November Stay tuned for 2015: Azure Bootcamp UXify Bulgaria SQLSaturday and more js.next();

Nov 23, 2014 Thanks to our Sponsors: Diamond Sponsor: Gold Sponsors: Swag Sponsors: Media Partners: Silver Sponsors: Hosting partner: Technological Partners: Bronze Sponsors: