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

Other Decks in Programming

See All in Programming
Figma Dev Modeで変わる！Flutterの開発体験
watanave
0
150
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.7k
subpath importsで始めるモック生活
10tera
0
320
Macとオーディオ再生 2024/11/02
yusukeito
0
370
CSC509 Lecture 12
javiergs
PRO
0
160
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
色々なIaCツールを実際に触って比較してみる
iriikeita
0
330
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
200
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.5k
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
110
WebフロントエンドにおけるGraphQL（あるいはバックエンドのAPI）との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k

Featured

See All Featured
Making Projects Easy
brettharned
115
5.9k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Faster Mobile Websites
deanohume
305
30k
Building Adaptive Systems
keathley
38
2.3k
Building Applications with DynamoDB
mza
90
6.1k
Designing Experiences People Love
moore
138
23k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Practical Orchestrator
shlominoach
186
10k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Into the Great Unknown - MozCon
thekraken
32
1.5k

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