Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Y.App: Coordinating URL Navigation, Routing, and Managing Views

Y.App: Coordinating URL Navigation, Routing, and Managing Views

Eric Ferraiuolo

May 31, 2012
Tweet

More Decks by Eric Ferraiuolo

Other Decks in Programming

Transcript

  1. Eric Ferraiuolo, YUI
    @ericf
    Y.App
    URLs, Navigation, Routing, & Views

    View full-size slide

  2. URLs
    Core to an App, Part of the UI

    View full-size slide

  3. http://example.com/foo/
    http://example.com/#/foo/
    http://example.com/#!/foo/

    View full-size slide

  4. http://example.com/foo/
    http://example.com/#/foo/
    http://example.com/#!/foo/

    View full-size slide

  5. Who’s Data?

    View full-size slide

  6. Everyone’s?

    View full-size slide

  7. Everyone’s?
    Use Full-path URLs

    View full-size slide

  8. Server’s Ability?

    View full-size slide

  9. Dumb Server?

    View full-size slide

  10. Dumb Server?
    Use Hash-based URLs

    View full-size slide

  11. Initial State
    The First Thing a User Sees

    View full-size slide

  12. Rendering /foo/

    View full-size slide

  13. http://example.com/foo/

    View full-size slide

  14. http://example.com/foo/
    Fast Puppy!
    /foo/
    HTML

    View full-size slide

  15. http://example.com/foo/
    Fast Puppy!
    /puppy.jpg
    IMG
    /foo/
    HTML

    View full-size slide

  16. Rendering /#/foo/

    View full-size slide

  17. http://example.com/#/foo/

    View full-size slide

  18. http://example.com/#/foo/
    /
    HTML

    View full-size slide

  19. http://example.com/#/foo/
    /
    /app.js
    JavaScript
    HTML

    View full-size slide

  20. http://example.com/#/foo/
    /
    /app.js
    HTML
    /foo/
    JSON
    JavaScript
    Slow Puppy :(

    View full-size slide

  21. http://example.com/#/foo/
    /
    /app.js
    HTML
    /foo/
    JSON
    JavaScript
    Slow Puppy :(
    /puppy.jpg
    IMG

    View full-size slide

  22. Render Initial State on
    the Server, It’s Faster!

    View full-size slide

  23. 5x Faster
    Twitter is Moving Away From /#!/

    View full-size slide

  24. Enhance
    …Progressively

    View full-size slide

  25. pjax
    pushState + Ajax

    View full-size slide

  26. Removes Unnecessary
    Full Page Loads

    View full-size slide

  27. Automatically Handles
    Clicks

    View full-size slide

  28. Does Not Break
    Browser's Conventions

    View full-size slide

  29. Client-side Routing
    Ful lling Requests on the Client

    View full-size slide

  30. Data in Memory ->
    No HTTP Request

    View full-size slide

  31. Seamlessly Support
    /foo/ & /#/foo/

    View full-size slide

  32. Responding to
    URL Changes

    View full-size slide

  33. Clicks
    Page Reloads
    Back/Forward
    Programatic
    URL

    View full-size slide

  34. Clicks
    Page Reloads
    Back/Forward
    Programatic
    URL Route Handlers

    View full-size slide

  35. Clicks
    Page Reloads
    Back/Forward
    Programatic
    URL Route Handlers
    UI

    View full-size slide

  36. Y.App
    Y.PjaxBase Y.Router
    Y.View

    View full-size slide

  37. Y.App
    Navigation Routing
    App View

    View full-size slide

  38. Y.App
    Navigation Routing
    App View
    View Management Transitions
    Server Coordination

    View full-size slide

  39. Hello World Y.App

    View full-size slide

  40. Hello World Y.App



    Hello World!






    View full-size slide

  41. Hello World Y.App
    Y.HelloView = Y.Base.create('helloView', Y.View, [], {
    render: function () {
    var name = this.get('name');
    this.get('container').set('text', 'Hello ' + (name || 'World') + '!');
    return this;
    }
    });
    var app = new Y.App({
    views: {
    hello: {type: 'HelloView'}
    }
    });
    app.route('/', function (req) { this.showView('hello'); });
    app.route('/:name', function (req) { this.showView('hello', {name: req.params.name}); });
    app.render().navigate('/eric');

    View full-size slide

  42. Hello World Y.App
    Y.HelloView = Y.Base.create('helloView', Y.View, [], {
    render: function () {
    var name = this.get('name');
    this.get('container').set('text', 'Hello ' + (name || 'World') + '!');
    return this;
    }
    });
    var app = new Y.App({
    views: {
    hello: {type: 'HelloView'}
    }
    });
    app.route('/', function (req) { this.showView('hello'); });
    app.route('/:name', function (req) { this.showView('hello', {name: req.params.name}); });
    app.render().navigate('/eric');

    View full-size slide

  43. Hello World Y.App
    Y.HelloView = Y.Base.create('helloView', Y.View, [], {
    render: function () {
    var name = this.get('name');
    this.get('container').set('text', 'Hello ' + (name || 'World') + '!');
    return this;
    }
    });
    var app = new Y.App({
    views: {
    hello: {type: 'HelloView'}
    }
    });
    app.route('/', function (req) { this.showView('hello'); });
    app.route('/:name', function (req) { this.showView('hello', {name: req.params.name}); });
    app.render().navigate('/eric');

    View full-size slide

  44. Hello World Y.App
    Y.HelloView = Y.Base.create('helloView', Y.View, [], {
    render: function () {
    var name = this.get('name');
    this.get('container').set('text', 'Hello ' + (name || 'World') + '!');
    return this;
    }
    });
    var app = new Y.App({
    views: {
    hello: {type: 'HelloView'}
    }
    });
    app.route('/', function (req) { this.showView('hello'); });
    app.route('/:name', function (req) { this.showView('hello', {name: req.params.name}); });
    app.render().navigate('/eric');

    View full-size slide

  45. Hello World Y.App
    Y.HelloView = Y.Base.create('helloView', Y.View, [], {
    render: function () {
    var name = this.get('name');
    this.get('container').set('text', 'Hello ' + (name || 'World') + '!');
    return this;
    }
    });
    var app = new Y.App({
    views: {
    hello: {type: 'HelloView'}
    }
    });
    app.route('/', function (req) { this.showView('hello'); });
    app.route('/:name', function (req) { this.showView('hello', {name: req.params.name}); });
    app.render().navigate('/eric');

    View full-size slide

  46. Hello World Y.App



    Hello World!





    Hello eric!



    View full-size slide

  47. Square ing

    View full-size slide

  48. Square ing

    View full-size slide

  49. Photos Near Me

    View full-size slide

  50. Photos Near Me

    View full-size slide

  51. Questions?
    Eric Ferraiuolo, YUI
    @ericf

    View full-size slide