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