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

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

Avatar for Eric Ferraiuolo Eric Ferraiuolo
May 31, 2012
Programming
2.1k
10

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

Avatar for Eric Ferraiuolo

Eric Ferraiuolo

May 31, 2012

More Decks by Eric Ferraiuolo

See All by Eric Ferraiuolo
React.js & i18n
Avatar for Eric Ferraiuolo ericf
2
490
Node on the Road
Avatar for Eric Ferraiuolo ericf
1
130
Pure
Avatar for Eric Ferraiuolo ericf
7
990
YUI and The Future
Avatar for Eric Ferraiuolo ericf
2
770
YUI 3.10.0 — Go Fast
Avatar for Eric Ferraiuolo ericf
3
610
YUI, Open Source, and Community
Avatar for Eric Ferraiuolo ericf
0
480
Advocatus Diaboli – Throne of JS
Avatar for Eric Ferraiuolo ericf
8
16k

Other Decks in Programming

See All in Programming
RTSPクライアントを自作してみた話
Avatar for simotin13 simotin13
0
630
1B+ /day規模のログを管理する技術
Avatar for Broadleaf Co., Ltd. broadleaf
0
110
PHPで使える日時の表現と、その知り方 #frontend_phpcon_do
Avatar for hideki kinjyo o0h
PRO
0
260
Semantic Version 単位で戦略を柔軟に変えて、パッケージアップデートを自動化する
Avatar for daitasu daitasu
1
300
[2026年度第1回ORセミナー] 計画最適化ベンチャーと競技プログラミング人材
Avatar for terry-u16 terryu16
0
270
キャリア迷子上等 ─ "ない道"は自分で作ればいい
Avatar for 16bit_idol 16bitidol
3
2.3k
鹿野さんに聞く！『TypeScriptコードレシピ集』で磨く実践力
Avatar for tonkotsuboy_com tonkotsuboy_com
4
790
AIを活用したE2Eテスト実装効率化のあゆみ / ebisu-mobile-14-kotetu
Avatar for kotetu (kotetuco) kotetuco
0
130
AI 時代のソフトウェア設計の学び方
Avatar for 増田 亨 masuda220
PRO
29
13k
TypeScript+Orvalで実現する型安全かつ堅牢でスケーラブルなマルチチャネル通知基盤 / TSKaigi Night talks ~after conference~
Avatar for doriven d0riven
0
360
過去最大のMCPアップデート! 2026-07-28 RC版の謎に迫る
Avatar for matsukada licux
6
390
スマートグラスで並列バイブコーディング
Avatar for Hayami Shuhei hyshu
0
260

Featured

See All Featured
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
340
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
220
A Soul's Torment
Avatar for Nat Ma seathinner
6
3k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
610
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.8k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
25k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
490
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
430
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.1k

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