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

Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfhans926745
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdfChristopherTHyatt
 

Recently uploaded (20)

Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 

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