Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


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

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

2 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!

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

4 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

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

6 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

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

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

9 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!

10 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!

11 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!

12 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!

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

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

15 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!

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

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

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

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

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

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

22 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!

23 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!

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

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

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


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

Similar presentations


Ads by Google