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

PJAX & Turbolinks

Avatar for juanpablo juanpablo
January 31, 2013
Programming
1
160

PJAX & Turbolinks

Sobre mi experiencia usando PJAX/Turbolinks para acelerar fácilmente* sitios.

* (las experiencia podrían variar, consulte con su experto local)

Avatar for juanpablo

juanpablo

January 31, 2013
Tweet

Other Decks in Programming

See All in Programming
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
Avatar for pluulove (노현석) pluu
1
210
リッチエディターを安全に開発・運用するために
Avatar for una unachang113
1
310
構文解析器入門
Avatar for ydah ydah
7
1.9k
CIを整備してメンテナンスを生成AIに任せる
Avatar for Hazumi Ichijo hazumirr
0
370
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
Avatar for ivargrimstad ivargrimstad
0
600
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ～継続的な取り組みを添えて～
Avatar for Takuya TAKAHASHI takutakahashi
4
1.4k
中級グラフィックス入門～効率的なメッシュレット描画～
Avatar for Pocol projectasura
3
2k
GPUを計算資源として使おう！
Avatar for prime number primenumber
1
300
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか？
Avatar for Shinichi Takayanagi stakaya
3
240
JetBrainsのAI機能の紹介 #jjug
Avatar for yusuke yusuke
0
160
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
Avatar for yakenji yakenji
1
850
iOS開発スターターキットの作り方
Avatar for akidon0000 akidon0000
0
230

Featured

See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
139
34k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
5.9k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.6k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.2k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k

Transcript

  1. PJAX & TURBOLINKS The invisible art code

  2. HOLA, SOY Juan Pablo Scaletti (@jpscaletti)

  3. lucumalabs.com

  4. PJAX

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None

  13. AJAX + PushState = PJAX

  14. None

  15. Pero...

  16. Mejor:

  17. ¿Y si...?

  18. None

  19. Si, si sirve de algo [Demo]

  20. None
  21. None

  22. Realmente no todos los enlaces: No queremos: a[href]:not(

  23. Realmente no todos los enlaces: No queremos: - absolutos (externos)

    a[href]:not( a[href^="http:"],

  24. Realmente no todos los enlaces: No queremos: - absolutos (externos)

    - anchors a[href]:not( a[href^="http:"], a[href^="#"],

  25. Realmente no todos los enlaces: No queremos: - absolutos (externos)

    - anchors - lightboxes a[href]:not( a[href^="http:"], a[href^="#"], a.lightbox,

  26. Realmente no todos los enlaces: No queremos: - absolutos (externos)

    - anchors - lightboxes - links a minisitios - etc. a[href]:not( a[href^="http:"], a[href^="#"], a.lightbox, a[data-reload] )

  27. Realmente no todos los enlaces: No queremos: - absolutos (externos)

    - anchors - lightboxes - links a minisitios - etc. a[href]:not( a[href^="http:"], a[href^="#"], a.lightbox, a[data-reload] )

  28. Pero... - ¿Animación de “cargando”?

  29. Pero... - ¿Animación de “cargando”?

  30. Pero... - Animación de “cargando” - ¿Google Analytics?

  31. Pero... - Animación de “cargando” - ¿Google Analytics?

  32. Pero... - Animación de “cargando” - ¿Google Analytics? - $(document).ready

    ?

  33. Pero... - Animación de “cargando” - ¿Google Analytics? - $(document).ready

    ? ....

  34. PJAX en <body> + niceties = Turbolinks https://github.com/rails/turbolinks

  35. PJAX en <body> + niceties = Turbolinks ?

  36. [DEMO 2]

  37. ¿Magia?

  38. NO

  39. - $(document).ready - FB, TW - Ad server - otros

  40. page:fetch starting to fetch the target page (only called if

    loading fresh, not from cache). page:load fetched page is being retrieved fresh from the server. page:restore fetched page is being retrieved from the 10-slot client-side cache. page:change page has changed to the newly fetched version.
  41. None
  42. None
  43. None
  44. None

  45. Gracias. @jpscaletti