App in a Browser

App in a Browser
jQuery Conference 2010
Boston, Massachusetts

@jdsharp

Monday, October 18, 2010

Who am I?


Started developing for the web
in 1996

AOL was a popular browser of choice
2400bps modem


THE jOUERY COMPANY

Co-founded appendTo in October 2009

9 employees, 3 contractors, 9 states


Cowboy after 5PM M-F & weekends


How many of you are
integrators?


Ready for a challenge?


you’ve got to grab hold...

Flickr @evilerin


Flickr @ prasoonpics

...with even more enthusiasm

App in a Browser


There’s a spectrum of
development...
Party like
it’s 1998 Gmail

Server Client

Server Side Client Side
Post back Ajax
Where we’ll be today


The app boot process...
- Download resources
- Execute scripts
- Wait for the DOM


We think of client side
development in a DOM centric
approach because that’s our
roots


How do we organize this?


Once again it’s a
spectrum...

Server Client

Server Client
generated generated

? ? ?

Integration driven
approach


Web developers are
integrators, they have to
work with a variety of
layers, tools and
technologies


Integration is the core
attribute of a successful
web developer


How do you integrate
successfully?


Discrete components...


Server

Data HTML, CSS, JavaScript

Request Core Other
Manager Application Services

Pub / Sub

View Manager


Components that...
- consume/sync data
- control ﬂow
- display/present data


How do components
communicate / interface?

This is key to a holistic
approach to an applications
lifecycle


The data
{ “name” : “Jonathan Sharp”,
“phone” : “402-000-0000”,
“notes” : “Delta Flight 2022 @ 2PM”
}


The request
Abstract the endpoint and transport
amplify.request.define(“contacts”, “ajax”, {
“url” : “/restful/api”,
“method” : “POST”,
“dataType” : “json”
});

amplify.request(“contacts”, args, function(json){
...
});


Core Application
Protect the global scope
Provide architecture for new functionality
// App core
(function(app) {
app.bus = amplify.bus;
app.request = amplify.request;
app.ui = {};
app.init = function() {
// Load any scripts/resources(Async)..
// Then initialize our components
app.bus.trigger(“component.init”);
};
app.init();
})(window.app = window.app || {});


Core Application
// Component
(function(app) {
app.contacts = {};
app.contacts.load = function() {
app.bus.publish(“contacts.ui.load”);

// Request our initial payload
app.request(“contacts”, function(data) {
app.bus.publish(“contacts.list”, data);
});
};

app.bus.subscribe(
“component.init”, app.contacts.load);
})(window.app);


The View
// Canvas manager
(function(app) {
app.ui.canvas = {
add: function(panel) {
var id = $(panel).attr(“id”) || randomId();
$(panel).appendTo(“#panels”);

app.bus.publish(
“ui.canvas.added”, {“id”:id});
return id;
}
};
})(window.app);


The View
// Panel
(function(app) {
app.ui.panel = {
create: function(options) {
var dom = $(“<div>...</div>”);
dom.bind(“updateContacts”, function(e,data){
// Update the DOM with new contact data
...
});
return dom;
}
};
})(window.app);


The View
// UI Controller
(function(app) {
app.ui.manager = {
init: function init() {
var p = app.ui.panel.create({...});
app.ui.canvas.add(p);
app.bus.subscribe(
“contact.list”, function(data) {
p.trigger(‘updateContacts’, data);
});
}
};
app.bus.subscribe(
“contacts.ui.load”, app.ui.manager.init);
})(window.app);


What have we done?
- Protected data sources
- Protected the DOM
- Testing is easier
- Scales to teams
- Front-end backend balance

So remember...
- Discrete components
- “I’m an integrator”
- and as such think about the APIs


appendTo will be releasing
amplify as open source


...yee haw!

Flickr @ martinvirtualtours


App in a Browser

More Related Content

Similar to App in a Browser (20)

Recently uploaded (20)

App in a Browser