Embed Size (px)
Citation preview
Nov 23, 2014
Nov 23, 2014Sofia
var title =“RequireJS - a brand new world!”;
var info = {name: “Bogoi Bogdanov”,
otherOptional: “Managing Partner at Empters Ltd.”
};
Nov 23, 2014
agenda();
• 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
<html><head>
<link rel='stylesheet' href=‘stylesheet1.css' />
<script src=“scriptfile1.js"></script><script src=“scriptfile2.js"></script><link rel='stylesheet'
href=‘stylesheet2.css' /><link rel='stylesheet'
href=‘stylesheet3.css' />...
</head><body>…</body></html>Bogoi Bogdanov RequireJS - a brand new world!
Nov 23, 2014
How Browsers load JavaScript & CSS
files
Bogoi Bogdanov RequireJS - a brand new world!
stylesheet1.cssscriptfile1.jsscriptfile2.jsstylesheet2.cssstylesheet3.css
100 ms
100 ms
100 ms
Nov 23, 2014
Typical HTML page – Good practice<html><head>
<link rel='stylesheet' href=‘stylesheet1.css' /><link rel='stylesheet' href=‘stylesheet2.css' /><link rel='stylesheet' href=‘stylesheet3.css' />
</head><body>
…<script src=“scriptfile1.js"></script><script src=“scriptfile2.js"></script>
</body></html>
Bogoi Bogdanov RequireJS - a brand new world!
Nov 23, 2014
How Browsers load JavaScript & CSS
files
Bogoi Bogdanov RequireJS - a brand new world!
stylesheet1.cssstylesheet2.cssstylesheet3.cssscriptfile1.jsscriptfile2.js
100 ms
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 filevar 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 calls
Facts
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.”
http://requirejs.org/
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.conf
RequireJS
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!
<html><head>…</head><body>
…<script data-main="../js/app/page1“ src="scripts/require.js"></script>
</body></html>
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 sizeo 1.09 MB (1,153,523 bytes)
• Optimized JavaScript sizeo 95.4 KB (97,699 bytes)
~ 12 times less bytes!
• Initial JavaScript requests count o 7 requests
• Optimized requests counto 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
Upcoming events
ISTA Conference 26-27 Novemberhttp://istabg.org/
Stay tuned for 2015:Azure Bootcamp http://azure-camp.eu/
UXify Bulgaria http://uxify.org/
SQLSaturday https://www.sqlsaturday.com/
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:
