And it’s nice to easily toggle
between -raw.js, -min.js,
and -debug.js versions.
three avors of each
fully-commented
-debug with logging
-min for deployment
So, our goals:
Features
• Handle prerequisies without duplication
• Manage order dependency
• Per-module exibility
• Fast toggling between avors
• Continue fetching onDemand
• Minimize HTTP requests
and not block rendering
That’s what YUI’s Get
& Loader Utilities do.
They’re partners.
Loader Get
Combo
Loader Get
Handler
Loader Get Combo
The “seed” le. Parses request.
Creates new
nodes & src’s.
Meta data. Concats modules
if rst.
Non-blocking.
Con g options.
Edge-caches.
Cross-domain.
Helpers/Sugar.
GET not POST.
Loads anything:
• Library les
• Your own les
• JS, CSS, JSON, ...
• Urchin.js, badges, includes, ...
Easily de ne your resources
// one or more external modules
// that can be loaded along side of YUI
modules: {
json_org: {
fullpath: quot;http://www.json.org/json.jsquot;
},
json2_org: {
fullpath: quot;http://www.json.org/json2.jsquot;
}
}
name
type
path
fullpath
requires
optional
supersedes
after
rollup
Once the seed is on
the page:
<script src=quot;yui-min.jsquot;/>
<script>
YUI().use(quot;sliderquot;, function(Y) {
// Slider available and ready for use.
});
</script>
Other cool features
in Get:
Choose where the nodes go.
Purge After Reading
Bene ts
• Easy to use.
• No typos. Less to manage.
• Much faster performance.
• Extensive exibility.
• Nice support for lazy-loading.
• Library agnostic.
The code you write is
transformed before a
browser consumes it
Google Web Toolkit
(turns Java into
JavaScript)
Pyjamas
(turns Python into
JavaScript)
Cappuccino
(turns “Objective-J”
into JavaScript)
Some of them are
lightweight...
Narrative JS
(adds “sleep”-like
functionality to JS)
function waitForButton() {
// do some work
// create our notifier
var notifier = new EventNotifier();
// attach our notifier to the button
document.getElementById(quot;myButtonquot;).onclick = notifier;
// wait for the button to be clicked
notifier.wait->();
// do more work
}
Google Caja
(turns JavaScript into
safer JavaScript)
var blogComment = document.createElement('div');
blogComment.innerHTML = quot;<b>user entered text quot; +
quot;which happens to contain a script quot; +
quot;tag.</b><script defer>alert('muahahaa');</scrquot; + quot;ipt>quot;;
document.getElementById(quot;resultquot;).appendChild(blogComment);
Analyzing Performance
Optimizing performance is a huge
!
concern: Faster code = happy users!
Measure execution time
!
Loop the code a few times
!
Measure the di!erence:
!
! quot;new Date#.getTimequot;#;
Stack Pro$ling
jQuery Stack Pro$ler
!
Look for problematic methods and plugins
!
http://ejohn.org/blog/deep%pro$ling%
!
jquery%apps/
Accuracy of
JavaScript Time
We’re measuring the performance of
JavaScript from within JavaScript!
http://ejohn.org/blog/accuracy-of-javascript-time/
15ms intervals ONLY!
Error Rate of 50-750%!
Performance Tools
How can we get good numbers?
!
We have to go straight to the source: Use
!
the tools the browsers provide.
Tools:
!
! Firebug Pro$ler
! Safari Pro$ler
! quot;Part of Safari 4#
! IE 8 Pro$ler
Firebug Pro$ler
Safari 4 Pro$ler
IE 8 Pro$ler
FireUnit
A simple JavaScript test suite embedded in
!
Firebug.
http://$reunit.org/
!
Test Suites
Automated testing
!
jQuery, Prototype, Dojo, YUI all have
!
their own test suites
QUnit
jQuery&s Test Suite
!
! Nice and simple
! Works well for asynchronous tests, too.
qUnit Usage
test(quot;a basic test examplequot;, function() {
!
ok( true, quot;this test is finequot; );
var value = quot;helloquot;;
equals( quot;helloquot;, value, quot;We expect value to be helloquot; );
});
module(quot;Module Aquot;);
test(quot;first test within modulequot;, function() {
ok( true, quot;all passquot; );
});
test(quot;second test within modulequot;, function() {
ok( true, quot;all passquot; );
});
module(quot;Module Bquot;);
test(quot;some other testquot;, function() {
expect(1);
ok( true, quot;wellquot; );
});
qUnit Output
Choose Your Browsers
Cost / Bene$t
IE 7 IE 6 FF 3 Safari 3 Opera 9.5
Cost Benefit
Draw a line in the sand.
Graded Support
Yahoo Browser Compatibility
Browser Support Grid
IE Firefox Safari Opera Chrome
Previous 6.0 2.0 3.0 9.5
Current 7.0 3.0 3.2 9.6 1.0
Next 8.0 3.1 4.0 10.0 2.0
jQuery Browser Support
Browser Support Grid
IE Firefox Safari Opera Chrome
Previous 3.0 9.5
6.0 2.0
Current 7.0 3.0 3.2 9.6 1.0
Next 8.0 3.1 4.0 2.0
10.0
jQuery 1.3 Browser Support
The Scaling Problem
The Problem:
!
! jQuery has 6 test suites
! Run in 11 browsers
! quot;Not even including multiple platforms!#
All need to be run for every commit,
!
patch, and plugin.
JavaScript testing doesn&t scale well.
!
Distributed Testing
Hub server
!
Clients connect and help run tests
!
A simple JavaScript client that can be run
!
in all browsers
! Including mobile browsers!
! TestSwarm
FF 3.5 FF 3.5 FF 3.5
IE 6
IE 6
FF 3 IE 6
Op 9
FF 3
IE 7
TestSwarm
IE 7
Test Suite Test Suite Test Suite
Manual Testing
Push tests to users who follow pre%de$ned
!
steps
Answer 'Yes&/&No& questions which are
!
pushed back to the server.
An e!ective way to distribute manual test
!
load to dozens of clients.
TestSwarm.com
Incentives for top testers quot;t%shirts, books#
!
Will be opening for testing at the end of
!
the month
Help your favorite JavaScript library
!
become better tested!
http://testswarm.com
!
Q&A
Please come up to the microphones!
Let LinkedIn power your SlideShare experience
+
Let LinkedIn power your SlideShare experience
Customize SlideShare content based on your interests
We will import your LinkedIn profile and you will be visible on SlideShare.
Keep up to date when your LinkedIn contacts post on SlideShare
andersonmiao
Regards
http://www.stratbeans.com
http://www.slideshare.net/sameernigam 4 years ago