SlideShare a Scribd company logo
1 of 39
Download to read offline
App in a Browser
            jQuery Conference 2010
            Boston, Massachusetts


                                     @jdsharp

Monday, October 18, 2010
Who am I?



Monday, October 18, 2010
Started developing for the web
                            in 1996

                           AOL was a popular browser of choice
                                   2400bps modem




Monday, October 18, 2010
Monday, October 18, 2010
THE jOUERY COMPANY




                           Co-founded appendTo in October 2009




                            9 employees, 3 contractors, 9 states


Monday, October 18, 2010
Cowboy after 5PM M-F & weekends

Monday, October 18, 2010
How many of you are
                               integrators?



Monday, October 18, 2010
Ready for a challenge?



Monday, October 18, 2010
you’ve got to grab hold...




                                                 Flickr @evilerin

Monday, October 18, 2010
Flickr @ prasoonpics



          ...with even more enthusiasm
Monday, October 18, 2010
App in a Browser



Monday, October 18, 2010
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




Monday, October 18, 2010
The app boot process...
                           - Download resources
                              - Execute scripts
                            - Wait for the DOM


Monday, October 18, 2010
We think of client side
                  development in a DOM centric
                   approach because that’s our
                              roots


Monday, October 18, 2010
How do we organize this?



Monday, October 18, 2010
Once again it’s a
                                 spectrum...

       Server                                      Client


           Server                                    Client
         generated                                 generated




                           ?          ?       ?
Monday, October 18, 2010
Integration driven
                               approach



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

Monday, October 18, 2010
Integration is the core
                     attribute of a successful
                          web developer



Monday, October 18, 2010
How do you integrate
                              successfully?



Monday, October 18, 2010
Discrete components...



Monday, October 18, 2010
Server

                           Data          HTML, CSS, JavaScript




             Request                 Core                         Other
             Manager               Application                   Services


                                    Pub / Sub


                                  View Manager

Monday, October 18, 2010
Components that...
            - consume/sync data
            - control flow
            - display/present data


Monday, October 18, 2010
How do components
                  communicate / interface?

                       This is key to a holistic
                     approach to an applications
                               lifecycle

Monday, October 18, 2010
Server

                           Data          HTML, CSS, JavaScript




             Request                 Core                         Other
             Manager               Application                   Services


                                    Pub / Sub


                                  View Manager

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




Monday, October 18, 2010
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){
       ...
  });




Monday, October 18, 2010
Server

                           Data          HTML, CSS, JavaScript




             Request                 Core                         Other
             Manager               Application                   Services


                                    Pub / Sub


                                  View Manager

Monday, October 18, 2010
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 || {});


Monday, October 18, 2010
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);

Monday, October 18, 2010
Server

                           Data          HTML, CSS, JavaScript




             Request                 Core                         Other
             Manager               Application                   Services


                                    Pub / Sub


                                  View Manager

Monday, October 18, 2010
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);

Monday, October 18, 2010
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);

Monday, October 18, 2010
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);

Monday, October 18, 2010
What have we done?
  - Protected data sources
  - Protected the DOM
  - Testing is easier
  - Scales to teams
  - Front-end backend balance
Monday, October 18, 2010
So remember...
  - Discrete components
  - “I’m an integrator”
  - and as such think about the APIs



Monday, October 18, 2010
appendTo will be releasing
               amplify as open source



Monday, October 18, 2010
...yee haw!


  Flickr @ martinvirtualtours




Monday, October 18, 2010
App in a Browser
            jQuery Conference 2010
            Boston, Massachusetts


                                     @jdsharp

Monday, October 18, 2010

More Related Content

Similar to App in a Browser

Data driven app deploys with chef frontdev
Data driven app deploys with chef frontdevData driven app deploys with chef frontdev
Data driven app deploys with chef frontdevjtimberman
 
Human APIs - expanding the mobile web or are robots coming to JavaScript?
Human APIs - expanding the mobile web or are robots coming to JavaScript? Human APIs - expanding the mobile web or are robots coming to JavaScript?
Human APIs - expanding the mobile web or are robots coming to JavaScript? Nikolai Onken
 
Ignite iPad App: The Making Of....
Ignite iPad App: The Making Of.... Ignite iPad App: The Making Of....
Ignite iPad App: The Making Of.... Day Software
 
5 分でキメル! (慣れれば、あなたもやれる!) たったの 5 分でできるサーバと通信できる iPhone アプリの作成
5 分でキメル!  (慣れれば、あなたもやれる!)  たったの 5 分でできるサーバと通信できる iPhone アプリの作成5 分でキメル!  (慣れれば、あなたもやれる!)  たったの 5 分でできるサーバと通信できる iPhone アプリの作成
5 分でキメル! (慣れれば、あなたもやれる!) たったの 5 分でできるサーバと通信できる iPhone アプリの作成Takafumi Kawano
 
iBizLog. Smalltalking the Web
iBizLog. Smalltalking the WebiBizLog. Smalltalking the Web
iBizLog. Smalltalking the WebESUG
 
Document-Oriented Databases: Couchdb Primer
Document-Oriented Databases: Couchdb PrimerDocument-Oriented Databases: Couchdb Primer
Document-Oriented Databases: Couchdb Primerjsiarto
 
Accelerating BIM - CIB W78 Cairo 2010
Accelerating BIM - CIB W78 Cairo 2010Accelerating BIM - CIB W78 Cairo 2010
Accelerating BIM - CIB W78 Cairo 2010Léon Berlo
 
BIMserver presentation at Digital Mix, BuildingSMART week Copenhagen
BIMserver presentation at Digital Mix, BuildingSMART week CopenhagenBIMserver presentation at Digital Mix, BuildingSMART week Copenhagen
BIMserver presentation at Digital Mix, BuildingSMART week CopenhagenLéon Berlo
 
Building Intelligent Mashups
Building Intelligent MashupsBuilding Intelligent Mashups
Building Intelligent Mashupsgiurca
 
The Tech Side of Project Argo
The Tech Side of Project ArgoThe Tech Side of Project Argo
The Tech Side of Project ArgoWesley Lindamood
 
[Nuxeo World 2013] Roadmap 2014 - Product part
[Nuxeo World 2013] Roadmap 2014 - Product part[Nuxeo World 2013] Roadmap 2014 - Product part
[Nuxeo World 2013] Roadmap 2014 - Product partNuxeo
 
WordPress Front End Optimizations
WordPress Front End OptimizationsWordPress Front End Optimizations
WordPress Front End OptimizationsScott Taylor
 
HTML5: Toolkits and Gaps
HTML5: Toolkits and GapsHTML5: Toolkits and Gaps
HTML5: Toolkits and Gapsdylanks
 
GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...
GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...
GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...Patrick Chanezon
 
Not Only Drupal
Not Only DrupalNot Only Drupal
Not Only Drupalmcantelon
 
Dojo Mobile
Dojo MobileDojo Mobile
Dojo Mobiledylanks
 
PHP in a Mobile Ecosystem (Zendcon 2010)
PHP in a Mobile Ecosystem (Zendcon 2010)PHP in a Mobile Ecosystem (Zendcon 2010)
PHP in a Mobile Ecosystem (Zendcon 2010)Ivo Jansch
 
Vital.AI Creating Intelligent Apps
Vital.AI Creating Intelligent AppsVital.AI Creating Intelligent Apps
Vital.AI Creating Intelligent AppsVital.AI
 

Similar to App in a Browser (20)

Data driven app deploys with chef frontdev
Data driven app deploys with chef frontdevData driven app deploys with chef frontdev
Data driven app deploys with chef frontdev
 
Human APIs - expanding the mobile web or are robots coming to JavaScript?
Human APIs - expanding the mobile web or are robots coming to JavaScript? Human APIs - expanding the mobile web or are robots coming to JavaScript?
Human APIs - expanding the mobile web or are robots coming to JavaScript?
 
Human APIs
Human APIsHuman APIs
Human APIs
 
Ignite iPad App: The Making Of....
Ignite iPad App: The Making Of.... Ignite iPad App: The Making Of....
Ignite iPad App: The Making Of....
 
5 分でキメル! (慣れれば、あなたもやれる!) たったの 5 分でできるサーバと通信できる iPhone アプリの作成
5 分でキメル!  (慣れれば、あなたもやれる!)  たったの 5 分でできるサーバと通信できる iPhone アプリの作成5 分でキメル!  (慣れれば、あなたもやれる!)  たったの 5 分でできるサーバと通信できる iPhone アプリの作成
5 分でキメル! (慣れれば、あなたもやれる!) たったの 5 分でできるサーバと通信できる iPhone アプリの作成
 
iBizLog. Smalltalking the Web
iBizLog. Smalltalking the WebiBizLog. Smalltalking the Web
iBizLog. Smalltalking the Web
 
Document-Oriented Databases: Couchdb Primer
Document-Oriented Databases: Couchdb PrimerDocument-Oriented Databases: Couchdb Primer
Document-Oriented Databases: Couchdb Primer
 
Accelerating BIM - CIB W78 Cairo 2010
Accelerating BIM - CIB W78 Cairo 2010Accelerating BIM - CIB W78 Cairo 2010
Accelerating BIM - CIB W78 Cairo 2010
 
BIMserver presentation at Digital Mix, BuildingSMART week Copenhagen
BIMserver presentation at Digital Mix, BuildingSMART week CopenhagenBIMserver presentation at Digital Mix, BuildingSMART week Copenhagen
BIMserver presentation at Digital Mix, BuildingSMART week Copenhagen
 
Building Intelligent Mashups
Building Intelligent MashupsBuilding Intelligent Mashups
Building Intelligent Mashups
 
The Tech Side of Project Argo
The Tech Side of Project ArgoThe Tech Side of Project Argo
The Tech Side of Project Argo
 
[Nuxeo World 2013] Roadmap 2014 - Product part
[Nuxeo World 2013] Roadmap 2014 - Product part[Nuxeo World 2013] Roadmap 2014 - Product part
[Nuxeo World 2013] Roadmap 2014 - Product part
 
WordPress Front End Optimizations
WordPress Front End OptimizationsWordPress Front End Optimizations
WordPress Front End Optimizations
 
HTML5: Toolkits and Gaps
HTML5: Toolkits and GapsHTML5: Toolkits and Gaps
HTML5: Toolkits and Gaps
 
GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...
GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...
GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...
 
GWT♥HTML5
GWT♥HTML5GWT♥HTML5
GWT♥HTML5
 
Not Only Drupal
Not Only DrupalNot Only Drupal
Not Only Drupal
 
Dojo Mobile
Dojo MobileDojo Mobile
Dojo Mobile
 
PHP in a Mobile Ecosystem (Zendcon 2010)
PHP in a Mobile Ecosystem (Zendcon 2010)PHP in a Mobile Ecosystem (Zendcon 2010)
PHP in a Mobile Ecosystem (Zendcon 2010)
 
Vital.AI Creating Intelligent Apps
Vital.AI Creating Intelligent AppsVital.AI Creating Intelligent Apps
Vital.AI Creating Intelligent Apps
 

Recently uploaded

Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditManual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditSkynet Technologies
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesThousandEyes
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 

Recently uploaded (20)

Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditManual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance Audit
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 

App in a Browser

  • 1. App in a Browser jQuery Conference 2010 Boston, Massachusetts @jdsharp Monday, October 18, 2010
  • 2. Who am I? Monday, October 18, 2010
  • 3. Started developing for the web in 1996 AOL was a popular browser of choice 2400bps modem Monday, October 18, 2010
  • 5. THE jOUERY COMPANY Co-founded appendTo in October 2009 9 employees, 3 contractors, 9 states Monday, October 18, 2010
  • 6. Cowboy after 5PM M-F & weekends Monday, October 18, 2010
  • 7. How many of you are integrators? Monday, October 18, 2010
  • 8. Ready for a challenge? Monday, October 18, 2010
  • 9. you’ve got to grab hold... Flickr @evilerin Monday, October 18, 2010
  • 10. Flickr @ prasoonpics ...with even more enthusiasm Monday, October 18, 2010
  • 11. App in a Browser Monday, October 18, 2010
  • 12. 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 Monday, October 18, 2010
  • 13. The app boot process... - Download resources - Execute scripts - Wait for the DOM Monday, October 18, 2010
  • 14. We think of client side development in a DOM centric approach because that’s our roots Monday, October 18, 2010
  • 15. How do we organize this? Monday, October 18, 2010
  • 16. Once again it’s a spectrum... Server Client Server Client generated generated ? ? ? Monday, October 18, 2010
  • 17. Integration driven approach Monday, October 18, 2010
  • 18. Web developers are integrators, they have to work with a variety of layers, tools and technologies Monday, October 18, 2010
  • 19. Integration is the core attribute of a successful web developer Monday, October 18, 2010
  • 20. How do you integrate successfully? Monday, October 18, 2010
  • 22. Server Data HTML, CSS, JavaScript Request Core Other Manager Application Services Pub / Sub View Manager Monday, October 18, 2010
  • 23. Components that... - consume/sync data - control flow - display/present data Monday, October 18, 2010
  • 24. How do components communicate / interface? This is key to a holistic approach to an applications lifecycle Monday, October 18, 2010
  • 25. Server Data HTML, CSS, JavaScript Request Core Other Manager Application Services Pub / Sub View Manager Monday, October 18, 2010
  • 26. The data { “name” : “Jonathan Sharp”, “phone” : “402-000-0000”, “notes” : “Delta Flight 2022 @ 2PM” } Monday, October 18, 2010
  • 27. 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){ ... }); Monday, October 18, 2010
  • 28. Server Data HTML, CSS, JavaScript Request Core Other Manager Application Services Pub / Sub View Manager Monday, October 18, 2010
  • 29. 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 || {}); Monday, October 18, 2010
  • 30. 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); Monday, October 18, 2010
  • 31. Server Data HTML, CSS, JavaScript Request Core Other Manager Application Services Pub / Sub View Manager Monday, October 18, 2010
  • 32. 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); Monday, October 18, 2010
  • 33. 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); Monday, October 18, 2010
  • 34. 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); Monday, October 18, 2010
  • 35. What have we done? - Protected data sources - Protected the DOM - Testing is easier - Scales to teams - Front-end backend balance Monday, October 18, 2010
  • 36. So remember... - Discrete components - “I’m an integrator” - and as such think about the APIs Monday, October 18, 2010
  • 37. appendTo will be releasing amplify as open source Monday, October 18, 2010
  • 38. ...yee haw! Flickr @ martinvirtualtours Monday, October 18, 2010
  • 39. App in a Browser jQuery Conference 2010 Boston, Massachusetts @jdsharp Monday, October 18, 2010