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

Transcript

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

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

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

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

5. Who’s Data?

6. Everyone’s?

7. Everyone’s? Use Full-path URLs

8. Server’s Ability?

9. Dumb Server?

10. Dumb Server? Use Hash-based URLs

11. Initial State The First Thing a User Sees

12. Rendering /foo/

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

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

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

16. Rendering /#/foo/

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

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

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

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

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

    /puppy.jpg IMG

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

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

24. Enhance …Progressively

25. pjax pushState + Ajax

26. None

27. Removes Unnecessary Full Page Loads

28. Automatically Handles <a> Clicks

29. Does Not Break Browser's Conventions

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

31. Data in Memory -> No HTTP Request

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

33. Responding to URL Changes

34. <a> Clicks Page Reloads Back/Forward Programatic URL

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

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

37. Y.App

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

39. Y.App Navigation Routing App View

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

41. Hello World Y.App

42. Hello World Y.App <!DOCTYPE html> <html> <head> <title>Hello World!</title> </head>

    <body> <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script> <script src="app.js"></script> </body> </html>

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');

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');

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');

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');

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');

48. Hello World Y.App <!DOCTYPE html> <html> <head> <title>Hello World!</title> </head>

    <body class="yui3-app"> <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script> <script src="app.js"></script> <div class="yui3-app-views"> <div>Hello eric!</div> </div> </body> </html>

49. Square ing

50. Square ing

51. Photos Near Me

52. Photos Near Me

53. Questions? Eric Ferraiuolo, YUI @ericf