Last year, AOL adopted a new content strategy and has positioned itself as a premier destination for original content. Core to this strategy is having reusable, highly efficient and optimized common code and experiences at scale, which is where jQuery comes in. Check in with Dave Artz to see how jQuery has helped his front-end standards team tackle unique challenges like optimizing 3rd party widget performance, overriding plugin functionality, and managing dependencies and updates across 100+ sites spanning multiple back-end platforms.
This presentation covers some jQuery basics, as well as some general concepts you should understand about jQuery. You will find other tips and tricks sprinkled throughout before the live coding session starts.
The code from the live coding session is available here: https://github.com/dcneiner/jQuery-Bling and covers far more advanced topics than the slide portion of this presentation.
JsViews - Next Generation jQuery TemplatesBorisMoore
Come and see the future of jQuery Templates, as it moves from Beta1 towards a V1 product. The new jQuery Templates is taking two forms: JsRender – lean and mean, for fast rendering of templates as strings, and JsViews – for powerful interactive browser apps in which Data Link and Templates work hand-in-hand. See how with declarative data linking and templating together, creating powerful data-driven UI is easy, whether using MVVM patterns or binding directly to JSON, and whatever the richness or complexity of the underlying data.
jQuery UI is already building its future data-bound widgets on top of this technology. With JsViews and JsRender integration between jQuery UI controls and your own data and UI becomes trivially straightforward.
This session dives deep into the DOM traversal methods of the jQuery API where you will learn the difference between brittle and fluid traversal methods, strategies for structuring your HTML, and how to leverage some of the more obscure jQuery selectors.
This presentation covers some jQuery basics, as well as some general concepts you should understand about jQuery. You will find other tips and tricks sprinkled throughout before the live coding session starts.
The code from the live coding session is available here: https://github.com/dcneiner/jQuery-Bling and covers far more advanced topics than the slide portion of this presentation.
JsViews - Next Generation jQuery TemplatesBorisMoore
Come and see the future of jQuery Templates, as it moves from Beta1 towards a V1 product. The new jQuery Templates is taking two forms: JsRender – lean and mean, for fast rendering of templates as strings, and JsViews – for powerful interactive browser apps in which Data Link and Templates work hand-in-hand. See how with declarative data linking and templating together, creating powerful data-driven UI is easy, whether using MVVM patterns or binding directly to JSON, and whatever the richness or complexity of the underlying data.
jQuery UI is already building its future data-bound widgets on top of this technology. With JsViews and JsRender integration between jQuery UI controls and your own data and UI becomes trivially straightforward.
This session dives deep into the DOM traversal methods of the jQuery API where you will learn the difference between brittle and fluid traversal methods, strategies for structuring your HTML, and how to leverage some of the more obscure jQuery selectors.
jQuery is a JavaScript library which allows you to develop solutions with less code, in less time. You can build interactive prototypes for your prospective clients, or take an existing solution and add new dynamic behaviour with little effort.
We will see how jQuery can be used to quickly and concisely apply JavaScript behaviour to your web app. It will cover selectors, Ajax, DOM manipulation and more. The aim: to produce lean unobtrusive JavaScript with jQuery.
The jQuery community has provided thousands of useful plugins which can be stitched together to create exceptional websites. However, organizing those plugins, tracking their upstream changes and managing dependencies can become a nightmare with a system to help you manage. JavascriptMVC, and specifically its new version 3 release, provides a framework for organizing outside code, integrating it into your workflow and compressing down to a single output javascript file. This talk will focus on taking external plugins such as jQuery Tools, jQuery UI and other popular plugins and creating a workflow for building larger applications from these components. I will show how to use the JavascriptMVC “getter” and “pluginify” scripts to pull external resources. With JavascriptMVC 3, css and javascript can be packaged together creating truly convenient widgets. I will also demonstrate how often-used pieces of functionality can be abstracted into plugins and shared with the general community via Github.
The Art of AngularJS in 2015 - Angular Summit 2015Matt Raible
Presentation from Angular Summit Keynote in September 2015. http://angularsummit.com/conference/boston/2015/09/session?id=34212
AngularJS is one of today's hottest JavaScript MVC Frameworks. In this session, we'll explore many concepts it brings to the world of client-side development: dependency injection, directives, filters, routing and two-way data binding. We'll also look at its recommended testing tools and build systems.
Learn to balance your use of jQuery's .css with CSS Style Sheets. Covers pros, cons, and tips on when to choose one method over another. Presented at the jQuery SF Bay Area Conference 2011.
In a world dominated by React and Angular, Vue is the open source framework that brings a third alternative to the table, combining the strengths of the first two while trying to weed out their weaknesses.
The result is an easy to use, lightweight and versatile framework. In this talk we will explore Vue's architecture, see how components interact among themselves, have a look at the event model and in the end, how to wrap everything together in a SPA using Webpack.
The Inclusive Web: hands-on with HTML5 and jQuerycolinbdclark
Driven by technologies such as HTML5, JavaScript, and jQuery, innovative new user experiences are thriving on the Web. This workshop, presented by Justin Obara and Colin Clark from the Fluid community (http://fluidproject.org), will provide Web designers and developers with an overview of modern Web accessibility techniques, providing hands-on ways to make HTML5 and jQuery-based applications more accessible, flexible, and inclusive of a diverse range of users. We’ll also cover some of the features of Fluid Infusion, an application framework built on top of jQuery.
jQuery is a JavaScript library which allows you to develop solutions with less code, in less time. You can build interactive prototypes for your prospective clients, or take an existing solution and add new dynamic behaviour with little effort.
We will see how jQuery can be used to quickly and concisely apply JavaScript behaviour to your web app. It will cover selectors, Ajax, DOM manipulation and more. The aim: to produce lean unobtrusive JavaScript with jQuery.
The jQuery community has provided thousands of useful plugins which can be stitched together to create exceptional websites. However, organizing those plugins, tracking their upstream changes and managing dependencies can become a nightmare with a system to help you manage. JavascriptMVC, and specifically its new version 3 release, provides a framework for organizing outside code, integrating it into your workflow and compressing down to a single output javascript file. This talk will focus on taking external plugins such as jQuery Tools, jQuery UI and other popular plugins and creating a workflow for building larger applications from these components. I will show how to use the JavascriptMVC “getter” and “pluginify” scripts to pull external resources. With JavascriptMVC 3, css and javascript can be packaged together creating truly convenient widgets. I will also demonstrate how often-used pieces of functionality can be abstracted into plugins and shared with the general community via Github.
The Art of AngularJS in 2015 - Angular Summit 2015Matt Raible
Presentation from Angular Summit Keynote in September 2015. http://angularsummit.com/conference/boston/2015/09/session?id=34212
AngularJS is one of today's hottest JavaScript MVC Frameworks. In this session, we'll explore many concepts it brings to the world of client-side development: dependency injection, directives, filters, routing and two-way data binding. We'll also look at its recommended testing tools and build systems.
Learn to balance your use of jQuery's .css with CSS Style Sheets. Covers pros, cons, and tips on when to choose one method over another. Presented at the jQuery SF Bay Area Conference 2011.
In a world dominated by React and Angular, Vue is the open source framework that brings a third alternative to the table, combining the strengths of the first two while trying to weed out their weaknesses.
The result is an easy to use, lightweight and versatile framework. In this talk we will explore Vue's architecture, see how components interact among themselves, have a look at the event model and in the end, how to wrap everything together in a SPA using Webpack.
The Inclusive Web: hands-on with HTML5 and jQuerycolinbdclark
Driven by technologies such as HTML5, JavaScript, and jQuery, innovative new user experiences are thriving on the Web. This workshop, presented by Justin Obara and Colin Clark from the Fluid community (http://fluidproject.org), will provide Web designers and developers with an overview of modern Web accessibility techniques, providing hands-on ways to make HTML5 and jQuery-based applications more accessible, flexible, and inclusive of a diverse range of users. We’ll also cover some of the features of Fluid Infusion, an application framework built on top of jQuery.
Javascript and first-class citizenry: require.js & node.js
Javascript on web pages is ubiquitous and its problems are legendary. Javascript, seen as a second-class code citizen, is usually hacked together even by seasoned developers. New libraries (jQuery, prototype, backbone, knockout, underscore) and runtime tools (firebug, jasmine) look like they solve many problems - and they do. But they still leave poorly written code as just that. One key problem is that all javascript code lives globally and this results in poorly managed, tested and delivered code.
In this session, I will illustrate that we can treat javascript as a first-class citizen using with require.js and node.js: it can be modular, encapsulated and easily unit tested and added to continuous integration cycle. The dependencies between javascript modules can also be managed and packaged just like in C# and Java. In the end, we can resolve many javascript difficulties at compile time rather than waiting until runtime.
In this intro-level session on utilizing jQuery with SharePoint, the focus will be to empower users on how to satisfy some of the common UI changes clients request by writing clean and unobtrusive Javascript with the help of the jQuery library. We'll begin by diving into the different ways that jQuery can be hooked up to SharePoint. We'll talk about CDN versus local copies of the library, as well as linking jQuery via masterpages, custom actions, content editor web parts, and more.
We'll then spend time discussing css selectors, and some of the common patterns and jQuery methods you'll want to familiarize yourself with when targeting page-level elements. After that, the remainder of the presenation will be focused on walking through real-life scenarios of altering the UI with jQuery, such as adding interaction and animation to content query webparts, changing the behavior of links inside a page, and more. The code utilized in the presentation will be made available online after the Conference is completed.
How to increase Performance of Web Application using JQuerykolkatageeks
Pallab Dutta presented a wonderful session on how to increase productivity of web application using JQuery. He showed us demos regarding basic syntax of JQuery.
Follow us
www.kolkatageeks.com
to get more.
Slides of my session at DanNotes on the use of Bootstrap with XPages, including using the Bootstrap4XPages plugin.
View the demos at http://bootstrap4xpages.com
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)Doris Chen
Get frustrated by cross-browser incompatibility? Hate to develop application using JavaScript? jQuery is a powerful JavaScript library that can enhance your websites regardless of your background. jQuery is fast, lean, simple and hugely expandable, enabling you to build compelling web applications quickly and easily. In this session, we will start with a quick introduction of jQuery, illustrate what’s so good about jQuery, and demonstrate step by step how to develop jQuery Ajax application efficiently with database, web services, OData, NetFlix and ASP.NET MVC. Microsoft is now shipping, supporting, and contributing to jQuery, with ASP.NET and Visual Studio. New features which will be available in the next release of jQuery such as globalization, templating and data-linking will be introduced in the session as well.
JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
Downloading jQuery file from jQuery website.
Referring to jQuery file through Content Delivery Networks.
Google CDN
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js>
</script>
Microsoft CDN
<script src=“http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js”>
</script>
Backbone.js — Introduction to client-side JavaScript MVCpootsbook
Using Backbone.js to move state to the client-side and the benefits of using a JavaScript MVC framework.
Delivered at SuperMondays, Newcastle upon Tyne, on 26th September 2011.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
Search and Society: Reimagining Information Access for Radical FuturesBhaskar Mitra
The field of Information retrieval (IR) is currently undergoing a transformative shift, at least partly due to the emerging applications of generative AI to information access. In this talk, we will deliberate on the sociotechnical implications of generative AI for information access. We will argue that there is both a critical necessity and an exciting opportunity for the IR community to re-center our research agendas on societal needs while dismantling the artificial separation between the work on fairness, accountability, transparency, and ethics in IR and the rest of IR research. Instead of adopting a reactionary strategy of trying to mitigate potential social harms from emerging technologies, the community should aim to proactively set the research agenda for the kinds of systems we should build inspired by diverse explicitly stated sociotechnical imaginaries. The sociotechnical imaginaries that underpin the design and development of information access technologies needs to be explicitly articulated, and we need to develop theories of change in context of these diverse perspectives. Our guiding future imaginaries must be informed by other academic fields, such as democratic theory and critical theory, and should be co-developed with social science scholars, legal scholars, civil rights and social justice activists, and artists, among others.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Let's dive deeper into the world of ODC! Ricardo Alves (OutSystems) will join us to tell all about the new Data Fabric. After that, Sezen de Bruijn (OutSystems) will get into the details on how to best design a sturdy architecture within ODC.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
8. Global
Header
Built
to
scale
across
100+
sites
with
unexpected
business
needs
Successfully
rolled
out
to
all
sites
in
a
few
weeks
9. Goals
for
our
standard
plugin
paaern
Maintainability
Extensibility
Performance
10. Default
op]ons
are
globally
configurable
Not
using
a
selector
allows
you
to
set
new
default
op]ons.
Instances
can
always
override
default
op]ons.
// I’m better than the default.
$.aolWidget({
initialTab: 2
});
$("#aol-widget").aolWidget()
// I kinda think the first tab
// should be default.
$("#another-aol-widget").aolWidget({
initialTab: 1
})
11. Op]ons
are
available
externally
via
data
API
Op]ons
object
holds
a
bunch
of
stuff,
as
you’ll
see.
// Inside plugin
$elem.data( "options." + namespace, options );
// Inside app accessing widget.
var $aolWidget = $("#aol-widget"),
options = $aolWidget.data("options.aolwidget");
alert( "My initial tab was " + options.initialTab );
12. All
names
are
customizable
via
op]ons
Define
a
namespace
Class
aaribute
names
Data
variable
names
Custom
event
names
namespace: "aolwidget",
names: {
class: {
activeTab: "active-tab",
activePanel: "active-panel"
},
data: {
tabIndex: "tabindex."
},
event: {
tabChange: "tabchange."
}
},
13. “UI”
op]on
param
holds
selector
informa]on
Developers
can
override
default
selectors.
Used
for
event
binding/delega]on.
Used
for
doing
find()’s
internally.
var defaultOptions = {
initialTab: 1,
ui: {
tabs: "h3.tab",
panels: "div.panel"
}
}
14. It
also
holds
cached
jQuery
objects
Local
vars
increase
performance
Rule
of
thumb,
never
look
up
same
elements
twice
$().find()
is
fast;
limits
context
to
widget
DOM
Use
$().filter()
and
$().children()
too;
avoid
full-‐on
selectors
var $tabs = ui.$tabs = $elem.find( ui.tabs ),
$panels = ui.$panels = $elem.find( ui.panels );
15. Event
handlers
delegate
from
the
container
Always
namespace
events
Events
call
a
core
func]on,
pass
element
as
“this”
$elem.delegate( ui.tabs, "click." + namespace, function(){
core.selectTab.call(this);
});
Never
use
.live(),
rarely
use
.bind()
$(document).delegate(".tab", "click.tabs", function(){…});
$(".tab").live("click.tabs", function(){…});
While
the
above
statements
are
func]onally
equivalent,
.live()
must
first
select
the
elements
before
aaaching
the
handler.
Slow
selectors
like
class
names
cause
pain
in
IE6/7
(s]ll
40%
of
our
users)
and
can
lead
to
pegged
CPUs.
16.
17. Trigger
custom
events
Pass
in
helpful
data
like
the
element
responsible
and
op]ons
Remember
to
namespace
// At the end of the core.selectTab() function...
$tabElem.trigger( eventNames.tabChange + namespace,
[ tabIndex, $elem, options ] );
This
is
how
other
widgets
can
react
to
yours:
// Inside some other library
$(document).bind("tabchange.aolwidget",
function( event, tabIndex, $elem, options ){
alert( "Neat! The tab was changed to " + tabIndex);
$elem.fadeOut(); // Make it go away.
});
18. Provide
interface
to
override
core
func]ons
Keeps
developers
from
rolling
their
own
version,
branching
code
Desired
features
can
be
quickly
tested
and
implemented
Func]ons
have
access
to
op]ons,
variables
and
current
state
via
the
Data
API
var $aolWidget = $("#aol-widget");
$aolWidget.aolWidget({
core: {
selectTab: function(){
// I think tabs should work this way instead.
var tabElem = this,
$tabElem = $(tabElem),
options = $aolWidget.data("aolwidget.options”),
$ui = options.$ui,
$tabs = $ui.$tabs;
...
}
}
});
26. We
can
quickly
react
universally
to…
Performance,
availability
problems
Tracking
problems
Changes
in
privacy
policies,
business
rela]onships
Shits
in
product
direc]on
33. Case
Study:
Facebook
Social
metrics
impact
In
Firefox
2
and
IE
browsers
without
Flash,
FB.init()
opens
a
hidden
<iframe>
that
loads
the
page
the
user
is
currently
on
Page
views
were
inflated
across
our
network
More
importantly,
so
were
ad
impressions
Facebook
referrals
were
through
the
roof!
The
fix:
hap://wiki.github.com/facebook/connect-‐js/custom-‐channel-‐url
options: {
status: true,
cookie: true,
xfbml: false, // Parse XFBML manually for optimal performance.
channelUrl: domain + "/_uac/aol-facebook-social-channel.html"
},
43. Here’s
how
long
56
Like
buaons
take
to
load
(With
nothing
else
on
the
page)
hap://www.artzstudio.com/files/jquery-‐boston-‐2010/56-‐like-‐buaons.html
XFBML
<iframe>
23.3
Seconds
12.7
Seconds
356
kB
375
kB
115
HTTP
Requests
74
HTTP
Requests
XFBML
Test:
hap://goo.gl/0q4e
<iframe>
Test:
hap://goo.gl/ik5v
Source:
webpagetest.org
44. Loading
stuff
in
on
user
scroll
Many
sites,
mobile
apps
do
this
now
45. Why
it’s
a
good
thing
to
do
15-‐20%
users
actually
reach
the
boaom
of
your
page
32-‐26%
do
not
make
it
past
the
1000px
line
True
regardless
of
browser
height
hap://blog.clicktale.com/2007/10/05/clicktale-‐scrolling-‐research-‐report-‐v20-‐part-‐1-‐visibility-‐and-‐scroll-‐reach/
46. jQuery.sonar()
Plugin
Detects
if
an
element
is
on
user’s
screen
Adds
two
special
events,
“scrollin”
and
“scrollout”
<img class="scrollin" src="http://o.aolcdn.com/js/x.gif"
data-src="http://farm5.static.flickr.com/
4137/4909229545_f7ff33d3e9_m.jpg" width="300" height="250" />
(function($){
$("img.scrollin").bind("scrollin", function(){
var img = this,
$img = $(img);
$img.unbind("scrollin"); // clean up binding
img.src = $img.attr( "data-src" );
});
})(jQuery);
Read
Ben
Alman’s
special
events
post:
hap://benalman.com/news/2010/03/jquery-‐special-‐events/
48. Throaling
stuff
using
jQuery.fn.queue()
Take
a
number
// Declared in higher scope, across all plugin instances
var defaultOptions = { … },
$initQueue = $({});
// Inside Facebook Social plugin
function facebookXFBMLParse( next ) {
// Parse XFBML.
FB.XFBML.parse( $div[0], function(){
$div.trigger("fbml-parsed." + namespace);
next();
});
}
// Queue up our Facebook XFBML parse function.
$initQueue.queue( facebookXFBMLParse );
49. Throaling
stuff
using
jQuery.fn.queue()
Sprinkle
in
some
jQuery
Sonar
ac]on…
// Declared in higher scope, across all plugin instances
var defaultOptions = { … },
$initQueue = $({});
function facebookXFBMLParse( next ) {
// Parse XFBML.
FB.XFBML.parse( $div[0], function(){
$div.trigger("fbml-parsed." + namespace);
next();
});
}
$div.bind("scrollin.aol-facebook-social", function(){
// Unbind the scrollin event.
$div.unbind("scrollin.aol-facebook-social");
// Queue our Facebook parse function.
$initQueue.queue( facebookXFBMLParse );
});
50. 56
Like
Buaons
loading
1
by
1,
on
“scrollin”
hap://www.moviefone.com/show]mes/leesburg-‐va/20175/theaters
52. jQuery.getScript
doesn’t
didn’t
cache
by
default
It
adds
added
a
]mestamp
to
the
src
(i.e.
?ts=3242353252)
We
made
jQuery.getJS()
to
fix
this
(function( $ ){
$.getJS = function( src, callback ) {
$.ajax({
dataType: "script",
cache: true,
url: src,
success: callback
});
};
})( jQuery );
53. Plugins
dependant
on
scripts
(on
demand)
We
found
ourselves
needing
a
paaern
like
this:
var jsQueue = [],
jsStatus = 0; // 0 = not called, 1 = loading, 2 = loaded
$.fn.myPlugin = function( options ){
function init( options ) {
// initialize the plugin
}
switch ( jsStatus ) {
case: "0”
$.getJS("http://connect.facebook.net/en_US/all.js",
function(){
jsStatus = 2; // update status to "loaded"
for ( var callback in jsQueue ) { // clear out queue
jsQueue[ callback ]();
}
}
});
jsStatus = 1; // update status to "loading"
break;
case: "1"
jsQueue.push(function(){ init( options ) }); // script still loading, queue up for later
break;
case: "2"
init( options );
break;
}
});
54. Plugins
dependant
on
scripts
(on
demand)
We
wanted
to
write
less,
and
do
more
(with
our
]me)
$.fn.myPlugin = function( options ){
function init( options ) {
// initialize the plugin
}
$.getJS("http://connect.facebook.net/en_US/all.js", function(){
init( options );
});
});
55. Revamped
jQuery.getJS()
(function( $ ){
var scriptCache = {};
$.getJS = function( src, callback, force ) {
var scriptStatus = scriptCache[ src ],
executeCallbacks = function(){
scriptStatus.s = 2; // loaded
var callbackFunctions = scriptStatus.fn,
i = 0, l = callbackFunctions.length;
for (; i < l; i++ ) callbackFunctions[i]();
},
getScript = function( src, callback ){
$.ajax({
dataType: 'script',
cache: true,
url: src,
success: callback
});
};
if ( force ) { // bypass queueing system
getScript( src, callback );
} else {
if ( scriptStatus ) { // if script is is loading or loaded
if ( callback ) {
scriptStatus.s === 1 ? scriptStatus.fn.push( callback ) : callback();
}
} else { // not yet called, make it so
scriptStatus = scriptCache[ src ] = { // new script status object
s: 1, // load state
fn: callback ? [ callback ] : [] // callback cache
};
getScript( src, executeCallbacks ); // load this script, pass in clearing function
}
};
})( jQuery );
56. How
do
we
call
jQuery?
Let’s
look
at
our
requirements:
Load
scripts
asynchronously
(non-‐blocking)
Some
scripts
(tracking,
ad
call
code)
need
to
be
at
the
top
…but
we
want
the
majority
at
the
boaom
Minimize
HTTP
Requests
…but
don’t
compromise
code
maintainability,
cacheability
Back-‐end
system
independent
Support
unknown
paaerns
of
JS
code
organiza]on,
build
scripts
57. What
we
do
Aol.getJS
+
Dynamic
Merge
URL
// Merge and load js global to website
Aol.getJS("http://o.aolcdn.com/os_merge/?file=/aol/
jquery-1.4.2.min.js&file=/aol/jquery.getjs.min.js&file=/aol/
jquery.inlinecss.min.js&file=/moviefone/js/global.js")
// Merge and load js specific to template page
.getJS("http://o.aolcdn.com/os_merge/?file=/aol/
jquery.sonar.min.js&file=jquery.facebooksocial.min.js&files=j
query.aolwidget.min.js&file=/moviefone/js/theater-
listings.js", function(){
(function($){
// Initialize anything page specific here.
$("div.aol-widget").aolWidget();
})(jQuery);
});
58. Aol.getJS
loads
JS
asynchronously,
and
preserves
execu]on
order
HTML
5
Boilerplate
–
3.3
seconds
HTML
5
Boilerplate
w/
Aol.getJS
–
1.7
seconds
59. Provides
same
func]on
as
LabJS,
but
smaller
(function(p){var
q="string",w="head",H="body",Y="script",t="readyState",j="preloaddone",x="loadtrigger",I="srcuri",C="preload",Z="complete",y="done",z="whi
ch",J="preserve",D="onreadystatechange",ba="onload",K="hasOwnProperty",bb="script/cache",L="[object ",bv=L+"Function]",bw=L
+"Array]",e=null,h=true,i=false,n=p.document,bx=p.location,bc=p.ActiveXObject,A=p.setTimeout,bd=p.clearTimeout,M=function(a){return
n.getElementsByTagName(a)},N=Object.prototype.toString,O=function(){},r={},P={},be=/^[^?#]*//.exec(bx.href)[0],bf=/^w+:///?[^/]
+/.exec(be)[0],by=M(Y),bg=p.opera&&N.call(p.opera)==L+"Opera]",bh=("MozAppearance"in n.documentElement.style),u={cache:!(bh||
bg),order:bh||bg,xhr:h,dupe:h,base:"",which:w};u[J]=i;u[C]=h;r[w]=n.head||M(w);r[H]=M(H);function Q(a){return N.call(a)===bv}function R
(a,b){var c=/^w+:///,d;if(typeof a!=q)a="";if(typeof b!=q)b="";d=(c.test(a)?"":b)+a;return((c.test(d)?"":(d.charAt(0)==="/"?bf:be))
+d)}function bz(a){return(R(a).indexOf(bf)===0)}function bA(a){var b,c=-1;while(b=by[++c]){if(typeof b.src==q&&a===R(b.src)&&b.type!==bb)
return h}return i}function E(v,k){v=!(!v);if(k==e)k=u;var bi=i,B=v&&k[C],bj=B&&k.cache,F=B&&k.order,bk=B&&k.xhr,bB=k
[J],bC=k.which,bD=k.base,bl=O,S=i,G,s=h,l={},T=[],U=e;B=bj||bk||F;function bm(a,b){if((a[t]&&a[t]!==Z&&a[t]!=="loaded")||b[y]){return i}a
[ba]=a[D]=e;return h}function V(a,b,c){c=!(!c);if(!c&&!(bm(a,b)))return;b[y]=h;for(var d in l){if(l[K](d)&&!(l[d][y]))return}bi=h;bl()}
function bn(a){if(Q(a[x])){a[x]();a[x]=e}}function bE(a,b){if(!bm(a,b))return;b[j]=h;A(function(){r[b[z]].removeChild(a);bn(b)},0)}
function bF(a,b){if(a[t]===4){a[D]=O;b[j]=h;A(function(){bn(b)},0)}}function W(b,c,d,g,f,m){var o=b[z];A(function(){if("item"in r[o]){if(!
r[o][0]){A(arguments.callee,25);return}r[o]=r[o][0]}var a=n.createElement(Y);if(typeof d==q)a.type=d;if(typeof g==q)a.charset=g;if(Q(f)){a
[ba]=a[D]=function(){f(a,b)};a.src=c}r[o].insertBefore(a,(o===w?r[o].firstChild:e));if(typeof m==q){a.text=m;V(a,b,h)}},0)}function bo
(a,b,c,d){P[a[I]]=h;W(a,b,c,d,V)}function bp(a,b,c,d){var g=arguments;if(s&&a[j]==e){a[j]=i;W(a,b,bb,d,bE)}else if(!s&&a[j]!=e&&!a[j]){a
[x]=function(){bp.apply(e,g)}}else if(!s){bo.apply(e,g)}}function bq(a,b,c,d){var g=arguments,f;if(s&&a[j]==e){a[j]=i;f=a.xhr=(bc?new bc
("Microsoft.XMLHTTP"):new p.XMLHttpRequest());f[D]=function(){bF(f,a)};f.open("GET",b);f.send("")}else if(!s&&a[j]!=e&&!a[j]){a[x]
=function(){bq.apply(e,g)}}else if(!s){P[a[I]]=h;W(a,b,c,d,e,a.xhr.responseText);a.xhr=e}}function br(a){if(a.allowDup==e)
a.allowDup=k.dupe;var b=a.src,c=a.type,d=a.charset,g=a.allowDup,f=R(b,bD),m,o=bz(f);if(typeof d!=q)d=e;g=!(!g);if(!g&&((P[f]!=e)||(s&&l
[f])||bA(f))){if(l[f]!=e&&l[f][j]&&!l[f][y]&&o){V(e,l[f],h)}return}if(l[f]==e)l[f]={};m=l[f];if(m[z]==e)m[z]=bC;m[y]=i;m[I]=f;S=h;if(!
F&&bk&&o)bq(m,f,c,d);else if(!F&&bj)bp(m,f,c,d);else bo(m,f,c,d)}function bs(a){T.push(a)}function X(a){if(v&&!F)bs(a);if(!v||B)a()}
function bt(a){var b=[],c;for(c=-1;++c<a.length;){if(N.call(a[c])===bw)b=b.concat(bt(a[c]));else b[b.length]=a[c]}return b}G=
{script:function(){bd(U);var a=bt(arguments),b=G,c;if(bB){for(c=-1;++c<a.length;){if(c===0){X(function(){br((typeof a[0]==q)?{src:a[0]}:a
[0])})}else b=b.script(a[c]);b=b.wait()}}else{X(function(){for(c=-1;++c<a.length;){br((typeof a[c]==q)?{src:a[c]}:a[c])}})}U=A(function()
{s=i},5);return b},wait:function(a){bd(U);s=i;if(!Q(a))a=O;var b=E(h,k),c=b.trigger,d=function(){try{a()}catch(err){}c()};delete
b.trigger;var g=function(){if(S&&!bi)bl=d;else d()};if(v&&!S)bs(g);else X(g);return b}};if(v){G.trigger=function(){var a,b=-1;while(a=T[+
+b])a();T=[]}}return G}function bu(a){var b,c={},d=
{"UseCachePreload":"cache","UseLocalXHR":"xhr","UsePreloading":C,"AlwaysPreserveOrder":J,"AllowDuplicates":"dupe"},g=
{"AppendTo":z,"BasePath":"base"};for(b in d)g[b]=d[b];c.order=!(!u.order);for(b in g){if(g[K](b)&&u[g[b]]!=e)c[g[b]]=(a[b]!=e)?a[b]:u[g
[b]]}for(b in d){if(d[K](b))c[d[b]]=!(!c[d[b]])}if(!c[C])c.cache=c.order=c.xhr=i;c.which=(c.which===w||c.which===H)?c.which:w;return c}p.
$LAB={setGlobalDefaults:function(a){u=bu(a)},setOptions:function(a){return E(i,bu(a))},script:function(){return E().script.apply
(e,arguments)},wait:function(){return E().wait.apply(e,arguments)}};(function(a,b,c){if(n[t]==e&&n[a]){n[t]="loading";n[a](b,c=function()
{n.removeEventListener(b,c,i);n[t]=Z},i)}})("addEventListener","DOMContentLoaded")})(window);
(function(g){var d=g.getElementsByTagName("head")[0]||g.documentElement,c={},e={},f={},b={},h={};function a(j,r){var o=b[j]
=this._c,q=g.createElement("script"),n=0,p,m=p="text/javascript",k="c",i=(function(s){s[s]=s+"";return s[s]!=s+""})(new String
("__count__"));function l(s,t){function u(w){do{if(!c[w]){return 0}}while(w=b[w]);return 1}var v=f[s];if(t===m){v&&v();l(h[s],k)}else{s&&u
(s)&&!e[s]&&a(s,v)}}f[j]=r;if(o&&!i){h[o]=j;p=k}q.type=p;q.src=j;p===m&&(e[j]=1);q.onload=q.onreadystatechange=function(){if(!n&&(!
q.readyState||q.readyState==="loaded"||q.readyState==="complete")){c[j]=n=1;l(j,p);q.onload=q.onreadystatechange=null;d.removeChild
(q)}};d.insertBefore(q,d.firstChild);return{_c:j,getJS:a}}window.Aol||(Aol={});Aol.getJS=a})(document);
60. AOL
Origin
Server
Tool
Merging
Automa]c
versioning
via
Java
Bean
/
web
service
enables
Versioning
longer
cache
headers,
immediate
cache
bus]ng:
CDN
Flushing
http://o.aolcdn.com/os_merge/?file=/aol/1-jquery-1.4.2.min.js&file=/
aol/4-jquery.getjs.min.js&file=/aol/2-jquery.inlinecss.min.js&file=/
moviefone/js/34-global.js
Cache
Controls
61. You
can
do
something
similar,
see
modconcat
What
it
does:
hap://www.artzstudio.com/2008/08/using-‐modconcat-‐to-‐speed-‐
up-‐render-‐start/
Where
to
get
it:
hap://code.google.com/p/modconcat/
62. Where
we
go
from
here
Standardize
a
JS
organiza]on
paaern
Evolve
our
plugin
paaern
(jQuery
UI?)
jQuery
Mobile
Get
on
the
latest
jQuery
Make
IE
6
go
away
faster