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
10
2.1k

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

Avatar for Eric Ferraiuolo

Eric Ferraiuolo

May 31, 2012
Tweet

More Decks by Eric Ferraiuolo

See All by Eric Ferraiuolo
React.js & i18n
Avatar for Eric Ferraiuolo ericf
2
460
Node on the Road
Avatar for Eric Ferraiuolo ericf
1
97
Pure
Avatar for Eric Ferraiuolo ericf
7
940
YUI and The Future
Avatar for Eric Ferraiuolo ericf
2
710
YUI 3.10.0 — Go Fast
Avatar for Eric Ferraiuolo ericf
3
550
YUI, Open Source, and Community
Avatar for Eric Ferraiuolo ericf
0
420
Advocatus Diaboli – Throne of JS
Avatar for Eric Ferraiuolo ericf
8
16k

Other Decks in Programming

See All in Programming
20250426 GDGoC 合同新歓 - GDGoC のススメ
Avatar for Yoshimura Naoya getty708
0
110
Improve my own Ruby
Avatar for monochrome sisshiki1969
0
100
AWS Summit Hong Kong 2025: Reinventing Programming - How AI Transforms Our Enterprise Coding Approach
Avatar for Ernest Chiang dwchiang
0
130
Instrumentsを使用した アプリのパフォーマンス向上方法
Avatar for hinakko hinakko
0
240
M5UnitUnified 最新動向 2025/05
Avatar for GOB gob
0
130
Cursorを活用したAIプログラミングについて 入門
Avatar for 株式会社レクト rect
0
170
カオスに立ち向かう小規模チームの装備の選択〜フルスタックTSという装備の強み _ 弱み〜/Choosing equipment for a small team facing chaos ~ Strengths and weaknesses of full-stack TS~
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
1
130
Bedrock × Confluenceで簡単(?)社内RAG
Avatar for iharuoru iharuoru
1
110
サービスレベルを管理してアジャイルを加速しよう！！ / slm-accelerate-agility
Avatar for TomoyaKitaura tomoyakitaura
1
200
個人開発の学生アプリが企業譲渡されるまで
Avatar for akidon0000 akidon0000
2
1.2k
Thank you <💅>, What's the Next?
Avatar for Hayashibara Yuto ahoxa
1
590
実践Webフロントパフォーマンスチューニング
Avatar for しーぴー cp20
45
10k

Featured

See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
5
590
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
13
830
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
700
Designing for Performance
Avatar for Lara Hogan lara
608
69k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
798
220k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
61k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
34
2.2k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
81
9k

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