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

Y.App: Coordinating URL Navigation, Routing, an...

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
460
Node on the Road
ericf
1
92
Pure
ericf
7
930
YUI and The Future
ericf
2
690
YUI 3.10.0 — Go Fast
ericf
3
530
YUI, Open Source, and Community
ericf
0
400
Advocatus Diaboli – Throne of JS
ericf
8
16k

Other Decks in Programming

See All in Programming
Go の GC の不得意な 部分を克服したい
taiyow
2
770
【re:Growth 2024】 Aurora DSQL をちゃんと話します！
maroon1st
0
770
useSyncExternalStoreを使いまくる
ssssota
6
1k
快速入門可觀測性
blueswen
0
340
なまけものオバケたち -PHP 8.4 に入った新機能の紹介-
tanakahisateru
1
120
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
360
nekko cloudにおけるProxmox VE利用事例
irumaru
3
420
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
110
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
270
rails stats で紐解く ANDPAD のイマを支える技術たち
andpad
1
290
42 best practices for Symfony, a decade later
tucksaun
1
180
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
405
66k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
28
900
Building Adaptive Systems
keathley
38
2.3k
Making the Leap to Tech Lead
cromwellryan
133
9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
440

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