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

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