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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. Who’s Data?

    View Slide

  6. Everyone’s?

    View Slide

  7. Everyone’s?
    Use Full-path URLs

    View Slide

  8. Server’s Ability?

    View Slide

  9. Dumb Server?

    View Slide

  10. Dumb Server?
    Use Hash-based URLs

    View Slide

  11. Initial State
    The First Thing a User Sees

    View Slide

  12. Rendering /foo/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  16. Rendering /#/foo/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. Enhance
    …Progressively

    View Slide

  25. pjax
    pushState + Ajax

    View Slide

  26. View Slide

  27. Removes Unnecessary
    Full Page Loads

    View Slide

  28. Automatically Handles
    Clicks

    View Slide

  29. Does Not Break
    Browser's Conventions

    View Slide

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

    View Slide

  31. Data in Memory ->
    No HTTP Request

    View Slide

  32. Seamlessly Support
    /foo/ & /#/foo/

    View Slide

  33. Responding to
    URL Changes

    View Slide

  34. Clicks
    Page Reloads
    Back/Forward
    Programatic
    URL

    View Slide

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

    View Slide

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

    View Slide

  37. Y.App

    View Slide

  38. Y.App
    Y.PjaxBase Y.Router
    Y.View

    View Slide

  39. Y.App
    Navigation Routing
    App View

    View Slide

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

    View Slide

  41. Hello World Y.App

    View Slide

  42. Hello World Y.App



    Hello World!






    View 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 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 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 Slide

  46. 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 Slide

  47. 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 Slide

  48. Hello World Y.App



    Hello World!





    Hello eric!



    View Slide

  49. Square ing

    View Slide

  50. Square ing

    View Slide

  51. Photos Near Me

    View Slide

  52. Photos Near Me

    View Slide

  53. Questions?
    Eric Ferraiuolo, YUI
    @ericf

    View Slide