SlideShare una empresa de Scribd logo
1 de 76
Descargar para leer sin conexión
YUI App Framework
  You’ve Been Wanting This



                     Eric Ferraiuolo
                              @ericf
MVC
Backbone
Model
Y.Model
• Manages data/state
• Observable attributes
• Coalesced change event
• Contains business logic
• Has data-syncing layer
Y.ModelList
          1   foo

          2   foo

          3   foo

set()     4   foo

          5   foo

          6   foo

          7   foo
Y.ModelList




                   }
        1    foo

        2    foo

        3    foo

set()   4    foo      foo:change
        5    foo

        6    foo

        7    foo
View
Y.View
• Containment
• Render-able (you provide rendering logic)
• BYO-Template
• Declarative event subscriptions
• Lightweight
Router
Y.Controller Y.Router
• Basic navigation management
• Uses HTML5 pushState & popstate
   • Degrades to hash-based history
• Bookmark-able URLs
• Browser back/forward buttons work!
• Wire-up application states to routes
Y.Router Example
var router = new Y.Router();

router.route('/library/:lib/', function (req) {
    var lib = req.params.lib;
    if (lib === 'yui') {
        Y.log('YUI Library is awesome!');
    }
});

router.save('/library/yui/');
// => 'YUI Library is awesome!'
Y.Router Example
var router = new Y.Router();

router.route('/library/:lib/', function (req) {
    var lib = req.params.lib;
    if (lib === 'yui') {
        Y.log('YUI Library is awesome!');
    }
});

router.save('/library/yui/');
// => 'YUI Library is awesome!'
Y.Router Example
var router = new Y.Router();

router.route('/library/:lib/', function (req) {
    var lib = req.params.lib;
    if (lib === 'yui') {
        Y.log('YUI Library is awesome!');
    }
});

router.save('/library/yui/');
// => 'YUI Library is awesome!'
Y.Router Example
var router = new Y.Router();

router.route('/library/:lib/', function (req) {
    var lib = req.params.lib;
    if (lib === 'yui') {
        Y.log('YUI Library is awesome!');
    }
});

router.save('/library/yui/');
// => 'YUI Library is awesome!'
Y.Router Example
var router = new Y.Router();

router.route('/library/:lib/', function (req) {
    var lib = req.params.lib;
    if (lib === 'yui') {
        Y.log('YUI Library is awesome!');
    }
});

router.save('/library/yui/');
// => 'YUI Library is awesome!'
Y.Router Example
var router = new Y.Router();

router.route('/library/:lib/', function (req) {
    var lib = req.params.lib;
    if (lib === 'yui') {
        Y.log('YUI Library is awesome!');
    }
});

router.save('/library/yui/');
// => 'YUI Library is awesome!'
Y.Router Mechanics

            Y.Router

              history:change

   save/replace()

                               popstate
           Y.History
    pushState()
                               hashchange
Built on Solid Core
•Y.Base          •Y.ArrayList
•Y.Attribute     •Y.Node
•Y.EventTarget   •Y.History
•Y.io
•Y.JSON
•Y.Array
4.6KB
BIG
Community Adoption
What’s Coming
App Framework — 3.5.0
Y.App
Foundation and Structure
Sample Users App
var usersApp = new Y.App({
    views: {
        users: {
             type    : Y.UsersView,
             preserve: true
        },

          user: {
              type : Y.UserView,
              parent: 'users'
          }
      }
});
Sample Users App
var usersApp = new Y.App({
    views: {
        users: {
             type    : Y.UsersView,
             preserve: true
        },

          user: {
              type : Y.UserView,
              parent: 'users'
          }
      }
});
Sample Users App
var usersApp = new Y.App({
    views: {
        users: {
             type    : Y.UsersView,
             preserve: true
        },

          user: {
              type : Y.UserView,
              parent: 'users'
          }
      }
});
Sample Users App
var usersApp = new Y.App({
    views: {
        users: {
             type    : Y.UsersView,
             preserve: true
        },

          user: {
              type : Y.UserView,
              parent: 'users'
          }
      }
});
Sample Users App
var usersApp = new Y.App({
    views: {
        users: {
             type    : Y.UsersView,
             preserve: true
        },

          user: {
              type : Y.UserView,
              parent: 'users'
          }
      }
});
Sample Users App
var users = new Y.UsersList();

usersApp.route('/user/', function () {
    this.showView('users', {modelList: users});
});

usersApp.route('/user/:id/', function (req) {
    var user = users.getById(req.params.id);

      this.showView('user', {model: user}, function (view) {
          // Called after transition.
      });
});
Sample Users App
var users = new Y.UsersList();

usersApp.route('/user/', function () {
    this.showView('users', {modelList: users});
});

usersApp.route('/user/:id/', function (req) {
    var user = users.getById(req.params.id);

      this.showView('user', {model: user}, function (view) {
          // Called after transition.
      });
});
Sample Users App
var users = new Y.UsersList();

usersApp.route('/user/', function () {
    this.showView('users', {modelList: users});
});

usersApp.route('/user/:id/', function (req) {
    var user = users.getById(req.params.id);

      this.showView('user', {model: user}, function (view) {
          // Called after transition.
      });
});
Sample Users App
var users = new Y.UsersList();

usersApp.route('/user/', function () {
    this.showView('users', {modelList: users});
});

usersApp.route('/user/:id/', function (req) {
    var user = users.getById(req.params.id);

      this.showView('user', {model: user}, function (view) {
          // Called after transition.
      });
});
Sample Users App
var users = new Y.UsersList();

usersApp.route('/user/', function () {
    this.showView('users', {modelList: users});
});

usersApp.route('/user/:id/', function (req) {
    var user = users.getById(req.params.id);

      this.showView('user', {model: user}, function (view) {
          // Called after transition.
      });
});
Sample Users App
var users = new Y.UsersList();

usersApp.route('/user/', function () {
    this.showView('users', {modelList: users});
});

usersApp.route('/user/:id/', function (req) {
    var user = users.getById(req.params.id);

      this.showView('user', {model: user}, function (view) {
          // Called after transition.
      });
});
Sample Users App
var users = new Y.UsersList();

usersApp.route('/user/', function () {
    this.showView('users', {modelList: users});
});

usersApp.route('/user/:id/', function (req) {
    var user = users.getById(req.params.id);

      this.showView('user', {model: user}, function (view) {
          // Called after transition.
      });
});
Enhanced Navigation
Enhanced Navigation
App framework — You’ve Been Wanting This
pushState + Ajax =

     pjax
pushState + Ajax = pjax
• Handles link clicks
• Update full URL
• Dynamically load & render content
• Ajax !=== XHR
• Browser’s Back/Forward buttons work!
• Seamless
Y.Pjax

 Y.Router

             Y.PjaxBase


 Y.Pjax

 Y.History
Y.Pjax Mechanics

                          setContent()

link click   navigate()      DOM

              Y.Pjax
                              XHR
                           Server
Recap Y.App
• Is a View
• Is a Router
• Uses PjaxBase
• Has an activeView
• Manages View lifecycles & transitions
• Instantiate or sub-class
Templating
{{#with handlebars}}
Handlebars Templates
<script id="entry-template" type="text/x-handlebars-template">

    <div class="entry">
        <h1><{{title}}</h1>

        {{#if author}}
        <p class="author">{{author}}</p>
        {{/if}}

        <div class="body">{{body}}</div>
    </div>

</script>
Handlebars Templates
<script id="entry-template" type="text/x-handlebars-template">

    <div class="entry">
        <h1><{{title}}</h1>

        {{#if author}}
        <p class="author">{{author}}</p>
        {{/if}}

        <div class="body">{{body}}</div>
    </div>

</script>
Handlebars Templates
<script id="entry-template" type="text/x-handlebars-template">

    <div class="entry">
        <h1><{{title}}</h1>

        {{#if author}}
        <p class="author">{{author}}</p>
        {{/if}}

        <div class="body">{{body}}</div>
    </div>

</script>
Handlebars Templates
<script id="entry-template" type="text/x-handlebars-template">

    <div class="entry">
        <h1><{{title}}</h1>

        {{#if author}}
        <p class="author">{{author}}</p>
        {{/if}}

        <div class="body">{{body}}</div>
    </div>

</script>
Handlebars Templates
<script id="entry-template" type="text/x-handlebars-template">

    <div class="entry">
        <h1><{{title}}</h1>

        {{#if author}}
        <p class="author">{{author}}</p>
        {{/if}}

        <div class="body">{{body}}</div>
    </div>

</script>
Handlebars Templates
<script id="entry-template" type="text/x-handlebars-template">

    <div class="entry">
        <h1><{{title}}</h1>

        {{#if author}}
        <p class="author">{{author}}</p>
        {{/if}}

        <div class="body">{{body}}</div>
    </div>

</script>
Handlebars Templates
<script id="entry-template" type="text/x-handlebars-template">

    <div class="entry">
        <h1><{{title}}</h1>

        {{#if author}}
        <p class="author">{{author}}</p>
        {{/if}}

        <div class="body">{{body}}</div>
    </div>

</script>
Y.Handlebars
YUI().use('handlebars', 'node-base', function (Y) {

      var template = Y.one('#entry-template').getContent(),
          render   = Y.Handlebars.compile(template),
          entry    = {
              title : 'The Adventures of Tom Selleck',
              body : 'Tom crossed the river in his Ferrari…',
              author: 'Ryan Grove'
          };

      Y.one('#entry').setContent(render(entry));

});
Y.Handlebars
YUI().use('handlebars', 'node-base', function (Y) {

      var template = Y.one('#entry-template').getContent(),
          render   = Y.Handlebars.compile(template),
          entry    = {
              title : 'The Adventures of Tom Selleck',
              body : 'Tom crossed the river in his Ferrari…',
              author: 'Ryan Grove'
          };

      Y.one('#entry').setContent(render(entry));

});
Y.Handlebars
YUI().use('handlebars', 'node-base', function (Y) {

      var template = Y.one('#entry-template').getContent(),
          render   = Y.Handlebars.compile(template),
          entry    = {
              title : 'The Adventures of Tom Selleck',
              body : 'Tom crossed the river in his Ferrari…',
              author: 'Ryan Grove'
          };

      Y.one('#entry').setContent(render(entry));

});
Y.Handlebars
YUI().use('handlebars', 'node-base', function (Y) {

      var template = Y.one('#entry-template').getContent(),
          render   = Y.Handlebars.compile(template),
          entry    = {
              title : 'The Adventures of Tom Selleck',
              body : 'Tom crossed the river in his Ferrari…',
              author: 'Ryan Grove'
          };

      Y.one('#entry').setContent(render(entry));

});
Y.Handlebars
YUI().use('handlebars', 'node-base', function (Y) {

      var template = Y.one('#entry-template').getContent(),
          render   = Y.Handlebars.compile(template),
          entry    = {
              title : 'The Adventures of Tom Selleck',
              body : 'Tom crossed the river in his Ferrari…',
              author: 'Ryan Grove'
          };

      Y.one('#entry').setContent(render(entry));

});
Y.Handlebars
YUI().use('handlebars', 'node-base', function (Y) {

      var template = Y.one('#entry-template').getContent(),
          render   = Y.Handlebars.compile(template),
          entry    = {
              title : 'The Adventures of Tom Selleck',
              body : 'Tom crossed the river in his Ferrari…',
              author: 'Ryan Grove'
          };

      Y.one('#entry').setContent(render(entry));

});
Server-Side
App framework — You’ve Been Wanting This
Guides
Photos Near Me
 http://photosnear.me
Photos Near Me
• Built with App Framework
• Uses Y.App and Y.Handlebars
• ~ 650 Lines of JavaScript
• Responsive Design
• http://photosnear.me
• https://github.com/ericf/photosnear.me
App framework — You’ve Been Wanting This
PhotosNearMe (Y.App)
PhotosNearMe (Y.App)
Place (Y.Model)


                  Photos (Y.ModelList)
PhotosNearMe (Y.App)


GridView (Y.View)
App framework — You’ve Been Wanting This
PhotosNearMe (Y.App)
PhotosNearMe (Y.App)
Place (Y.Model)

                  Photo (Y.Model)
PhotosNearMe (Y.App)


LightboxView (Y.View)
Future…
App Framework — 3.6.0+
Dealing with Data
• Improved data access
• Model sync layers
• Data binding
Breadth & Depth
• View extensions & plugins
• View-based widgets
• More mobile
• More server
Questions?
  Ask away!



              Eric Ferraiuolo
                       @ericf

Más contenido relacionado

Último

Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 

Último (20)

Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 

Destacado

PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...DevGAMM Conference
 

Destacado (20)

Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 

App framework — You’ve Been Wanting This

  • 1. YUI App Framework You’ve Been Wanting This Eric Ferraiuolo @ericf
  • 2. MVC
  • 5. Y.Model • Manages data/state • Observable attributes • Coalesced change event • Contains business logic • Has data-syncing layer
  • 6. Y.ModelList 1 foo 2 foo 3 foo set() 4 foo 5 foo 6 foo 7 foo
  • 7. Y.ModelList } 1 foo 2 foo 3 foo set() 4 foo foo:change 5 foo 6 foo 7 foo
  • 9. Y.View • Containment • Render-able (you provide rendering logic) • BYO-Template • Declarative event subscriptions • Lightweight
  • 11. Y.Controller Y.Router • Basic navigation management • Uses HTML5 pushState & popstate • Degrades to hash-based history • Bookmark-able URLs • Browser back/forward buttons work! • Wire-up application states to routes
  • 12. Y.Router Example var router = new Y.Router(); router.route('/library/:lib/', function (req) { var lib = req.params.lib; if (lib === 'yui') { Y.log('YUI Library is awesome!'); } }); router.save('/library/yui/'); // => 'YUI Library is awesome!'
  • 13. Y.Router Example var router = new Y.Router(); router.route('/library/:lib/', function (req) { var lib = req.params.lib; if (lib === 'yui') { Y.log('YUI Library is awesome!'); } }); router.save('/library/yui/'); // => 'YUI Library is awesome!'
  • 14. Y.Router Example var router = new Y.Router(); router.route('/library/:lib/', function (req) { var lib = req.params.lib; if (lib === 'yui') { Y.log('YUI Library is awesome!'); } }); router.save('/library/yui/'); // => 'YUI Library is awesome!'
  • 15. Y.Router Example var router = new Y.Router(); router.route('/library/:lib/', function (req) { var lib = req.params.lib; if (lib === 'yui') { Y.log('YUI Library is awesome!'); } }); router.save('/library/yui/'); // => 'YUI Library is awesome!'
  • 16. Y.Router Example var router = new Y.Router(); router.route('/library/:lib/', function (req) { var lib = req.params.lib; if (lib === 'yui') { Y.log('YUI Library is awesome!'); } }); router.save('/library/yui/'); // => 'YUI Library is awesome!'
  • 17. Y.Router Example var router = new Y.Router(); router.route('/library/:lib/', function (req) { var lib = req.params.lib; if (lib === 'yui') { Y.log('YUI Library is awesome!'); } }); router.save('/library/yui/'); // => 'YUI Library is awesome!'
  • 18. Y.Router Mechanics Y.Router history:change save/replace() popstate Y.History pushState() hashchange
  • 19. Built on Solid Core •Y.Base •Y.ArrayList •Y.Attribute •Y.Node •Y.EventTarget •Y.History •Y.io •Y.JSON •Y.Array
  • 20. 4.6KB
  • 23. Y.App
  • 25. Sample Users App var usersApp = new Y.App({ views: { users: { type : Y.UsersView, preserve: true }, user: { type : Y.UserView, parent: 'users' } } });
  • 26. Sample Users App var usersApp = new Y.App({ views: { users: { type : Y.UsersView, preserve: true }, user: { type : Y.UserView, parent: 'users' } } });
  • 27. Sample Users App var usersApp = new Y.App({ views: { users: { type : Y.UsersView, preserve: true }, user: { type : Y.UserView, parent: 'users' } } });
  • 28. Sample Users App var usersApp = new Y.App({ views: { users: { type : Y.UsersView, preserve: true }, user: { type : Y.UserView, parent: 'users' } } });
  • 29. Sample Users App var usersApp = new Y.App({ views: { users: { type : Y.UsersView, preserve: true }, user: { type : Y.UserView, parent: 'users' } } });
  • 30. Sample Users App var users = new Y.UsersList(); usersApp.route('/user/', function () { this.showView('users', {modelList: users}); }); usersApp.route('/user/:id/', function (req) { var user = users.getById(req.params.id); this.showView('user', {model: user}, function (view) { // Called after transition. }); });
  • 31. Sample Users App var users = new Y.UsersList(); usersApp.route('/user/', function () { this.showView('users', {modelList: users}); }); usersApp.route('/user/:id/', function (req) { var user = users.getById(req.params.id); this.showView('user', {model: user}, function (view) { // Called after transition. }); });
  • 32. Sample Users App var users = new Y.UsersList(); usersApp.route('/user/', function () { this.showView('users', {modelList: users}); }); usersApp.route('/user/:id/', function (req) { var user = users.getById(req.params.id); this.showView('user', {model: user}, function (view) { // Called after transition. }); });
  • 33. Sample Users App var users = new Y.UsersList(); usersApp.route('/user/', function () { this.showView('users', {modelList: users}); }); usersApp.route('/user/:id/', function (req) { var user = users.getById(req.params.id); this.showView('user', {model: user}, function (view) { // Called after transition. }); });
  • 34. Sample Users App var users = new Y.UsersList(); usersApp.route('/user/', function () { this.showView('users', {modelList: users}); }); usersApp.route('/user/:id/', function (req) { var user = users.getById(req.params.id); this.showView('user', {model: user}, function (view) { // Called after transition. }); });
  • 35. Sample Users App var users = new Y.UsersList(); usersApp.route('/user/', function () { this.showView('users', {modelList: users}); }); usersApp.route('/user/:id/', function (req) { var user = users.getById(req.params.id); this.showView('user', {model: user}, function (view) { // Called after transition. }); });
  • 36. Sample Users App var users = new Y.UsersList(); usersApp.route('/user/', function () { this.showView('users', {modelList: users}); }); usersApp.route('/user/:id/', function (req) { var user = users.getById(req.params.id); this.showView('user', {model: user}, function (view) { // Called after transition. }); });
  • 41. pushState + Ajax = pjax • Handles link clicks • Update full URL • Dynamically load & render content • Ajax !=== XHR • Browser’s Back/Forward buttons work! • Seamless
  • 42. Y.Pjax Y.Router Y.PjaxBase Y.Pjax Y.History
  • 43. Y.Pjax Mechanics setContent() link click navigate() DOM Y.Pjax XHR Server
  • 44. Recap Y.App • Is a View • Is a Router • Uses PjaxBase • Has an activeView • Manages View lifecycles & transitions • Instantiate or sub-class
  • 47. Handlebars Templates <script id="entry-template" type="text/x-handlebars-template"> <div class="entry"> <h1><{{title}}</h1> {{#if author}} <p class="author">{{author}}</p> {{/if}} <div class="body">{{body}}</div> </div> </script>
  • 48. Handlebars Templates <script id="entry-template" type="text/x-handlebars-template"> <div class="entry"> <h1><{{title}}</h1> {{#if author}} <p class="author">{{author}}</p> {{/if}} <div class="body">{{body}}</div> </div> </script>
  • 49. Handlebars Templates <script id="entry-template" type="text/x-handlebars-template"> <div class="entry"> <h1><{{title}}</h1> {{#if author}} <p class="author">{{author}}</p> {{/if}} <div class="body">{{body}}</div> </div> </script>
  • 50. Handlebars Templates <script id="entry-template" type="text/x-handlebars-template"> <div class="entry"> <h1><{{title}}</h1> {{#if author}} <p class="author">{{author}}</p> {{/if}} <div class="body">{{body}}</div> </div> </script>
  • 51. Handlebars Templates <script id="entry-template" type="text/x-handlebars-template"> <div class="entry"> <h1><{{title}}</h1> {{#if author}} <p class="author">{{author}}</p> {{/if}} <div class="body">{{body}}</div> </div> </script>
  • 52. Handlebars Templates <script id="entry-template" type="text/x-handlebars-template"> <div class="entry"> <h1><{{title}}</h1> {{#if author}} <p class="author">{{author}}</p> {{/if}} <div class="body">{{body}}</div> </div> </script>
  • 53. Handlebars Templates <script id="entry-template" type="text/x-handlebars-template"> <div class="entry"> <h1><{{title}}</h1> {{#if author}} <p class="author">{{author}}</p> {{/if}} <div class="body">{{body}}</div> </div> </script>
  • 54. Y.Handlebars YUI().use('handlebars', 'node-base', function (Y) { var template = Y.one('#entry-template').getContent(), render = Y.Handlebars.compile(template), entry = { title : 'The Adventures of Tom Selleck', body : 'Tom crossed the river in his Ferrari…', author: 'Ryan Grove' }; Y.one('#entry').setContent(render(entry)); });
  • 55. Y.Handlebars YUI().use('handlebars', 'node-base', function (Y) { var template = Y.one('#entry-template').getContent(), render = Y.Handlebars.compile(template), entry = { title : 'The Adventures of Tom Selleck', body : 'Tom crossed the river in his Ferrari…', author: 'Ryan Grove' }; Y.one('#entry').setContent(render(entry)); });
  • 56. Y.Handlebars YUI().use('handlebars', 'node-base', function (Y) { var template = Y.one('#entry-template').getContent(), render = Y.Handlebars.compile(template), entry = { title : 'The Adventures of Tom Selleck', body : 'Tom crossed the river in his Ferrari…', author: 'Ryan Grove' }; Y.one('#entry').setContent(render(entry)); });
  • 57. Y.Handlebars YUI().use('handlebars', 'node-base', function (Y) { var template = Y.one('#entry-template').getContent(), render = Y.Handlebars.compile(template), entry = { title : 'The Adventures of Tom Selleck', body : 'Tom crossed the river in his Ferrari…', author: 'Ryan Grove' }; Y.one('#entry').setContent(render(entry)); });
  • 58. Y.Handlebars YUI().use('handlebars', 'node-base', function (Y) { var template = Y.one('#entry-template').getContent(), render = Y.Handlebars.compile(template), entry = { title : 'The Adventures of Tom Selleck', body : 'Tom crossed the river in his Ferrari…', author: 'Ryan Grove' }; Y.one('#entry').setContent(render(entry)); });
  • 59. Y.Handlebars YUI().use('handlebars', 'node-base', function (Y) { var template = Y.one('#entry-template').getContent(), render = Y.Handlebars.compile(template), entry = { title : 'The Adventures of Tom Selleck', body : 'Tom crossed the river in his Ferrari…', author: 'Ryan Grove' }; Y.one('#entry').setContent(render(entry)); });
  • 63. Photos Near Me http://photosnear.me
  • 64. Photos Near Me • Built with App Framework • Uses Y.App and Y.Handlebars • ~ 650 Lines of JavaScript • Responsive Design • http://photosnear.me • https://github.com/ericf/photosnear.me
  • 67. PhotosNearMe (Y.App) Place (Y.Model) Photos (Y.ModelList)
  • 74. Dealing with Data • Improved data access • Model sync layers • Data binding
  • 75. Breadth & Depth • View extensions & plugins • View-based widgets • More mobile • More server
  • 76. Questions? Ask away! Eric Ferraiuolo @ericf