Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Eric Ferraiuolo Eric Ferraiuolo
May 31, 2012
Programming
2.2k
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
500
Node on the Road
Avatar for Eric Ferraiuolo ericf
1
140
Pure
Avatar for Eric Ferraiuolo ericf
7
990
YUI and The Future
Avatar for Eric Ferraiuolo ericf
2
790
YUI 3.10.0 — Go Fast
Avatar for Eric Ferraiuolo ericf
3
620
YUI, Open Source, and Community
Avatar for Eric Ferraiuolo ericf
0
490
Advocatus Diaboli – Throne of JS
Avatar for Eric Ferraiuolo ericf
8
16k

Other Decks in Programming

See All in Programming
The Good Stuff, Not the Slop: Engineering High-Quality Android Apps with Modern AI Tooling
Avatar for danybony danybony
1
250
巨大モノリシックアプリ モダン化大作戦
Avatar for Ryomm ktcryomm
0
1k
Omarchy Tokyo やると聞いて UMPC 買ってセットアップしてきた
Avatar for Fumiaki MATSUSHIMA mtsmfm
0
140
市販E-Readerを乗っ取れ 〜Embedded Swiftで電子ペーパーガジェットを制御する〜
Avatar for Trickart trickart
0
190
更なる可用性を求めて、5年間運用したKotlinのアプリケーションをGoでリプレイスする話
Avatar for Kensuke Taguchi ken_tunc
0
160
AGENTS.md Is Not Enough: Build Skills, Don't Download Them
Avatar for Alex T lx_t
0
110
cdk deploy JawsSonic #MARATHONしながらAWSリソースをデプロイしてみよう
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
130
スマートフォンでモールス信号を送受信する 〜スマートフォンのLEDとカメラで作る光通信の設計と実装〜
Avatar for Atsuki Seo atsuki_seo
0
100
Swift愛好会と私（ウホーイ） / Swift Fan Club and Uhooi
Avatar for uhooi uhooi
0
150
個人開発基盤をまるごとCloudflareに引っ越して爆速で総合的体験を向上させた話
Avatar for Tsubasa SEKIGUCHI tinykitten
0
180
『寄り添うラジオ』をAIで作る 体験価値から逆算した、会話しないUXと品質設計
Avatar for テオリア・テクノロジーズ theoriatec2024
3
180
テストを司るデーモンに会いに行く 〜隔離した仮想マシンでテストを通すまで〜
Avatar for Hidemune Takahashi h1d3mun3
1
340

Featured

See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.8k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
1
34k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
520
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
590
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
280
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.2k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
380
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
25k

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