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

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

Eric Ferraiuolo
May 31, 2012
Programming
10
2k

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

Eric Ferraiuolo

May 31, 2012
Tweet

More Decks by Eric Ferraiuolo

See All by Eric Ferraiuolo
React.js & i18n
ericf
2
450
Node on the Road
ericf
1
85
Pure
ericf
7
920
YUI and The Future
ericf
2
670
YUI 3.10.0 — Go Fast
ericf
3
510
YUI, Open Source, and Community
ericf
0
380
Advocatus Diaboli – Throne of JS
ericf
8
16k

Other Decks in Programming

See All in Programming
コードレビューで学ぶ！Kotlinオブジェクト指向デザインパターン
akkie76
2
170
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
130
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
480
What We Can Learn From OSS
inouehi
0
390
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
310
Introduction for Open Source Swift Workshop
giginet
PRO
0
1.1k
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
270
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
230
Designing for tomorrow's programming workflows
honnibal
PRO
2
110
元気予報
suu_mire0726
0
850
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
330
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100

Featured

See All Featured
Practical Orchestrator
shlominoach
181
9.7k
Rails Girls Zürich Keynote
gr2m
91
13k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
YesSQL, Process and Tooling at Scale
rocio
162
13k
The Invisible Side of Design
smashingmag
293
49k
Atom: Resistance is Futile
akmur
258
25k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
Building an army of robots
kneath
300
41k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Into the Great Unknown - MozCon
thekraken
10
980
KATA
mclloyd
14
12k
The Cult of Friendly URLs
andyhume
73
5.7k

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