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

Getting Lazy with Vue and PDFs

Avatar for Ross Kaffenberger Ross Kaffenberger
January 16, 2019
Programming
1.6k
2

Getting Lazy with Vue and PDFs

I share the most important lessons learned while building a PDF Viewer in Vue.

Avatar for Ross Kaffenberger

Ross Kaffenberger

January 16, 2019

More Decks by Ross Kaffenberger

See All by Ross Kaffenberger
A Webpack Survival Guide for Rails Developers
Avatar for Ross Kaffenberger rossta
1
2.8k
What I look for in a Junior Developer
Avatar for Ross Kaffenberger rossta
2
1.1k
Progressive Web Apps on Rails
Avatar for Ross Kaffenberger rossta
0
2.4k
Enumerable's Ugly Cousin - GORUCO Microtalk
Avatar for Ross Kaffenberger rossta
0
510
Enumerator - Enumerable's Ugly Cousin
Avatar for Ross Kaffenberger rossta
1
620
Recurring Events with Montrose
Avatar for Ross Kaffenberger rossta
3
2.1k
Enumerable - How I Fell in Love with Ruby
Avatar for Ross Kaffenberger rossta
20
4.9k
Create and Deploy an Ember App in 5 Minutes
Avatar for Ross Kaffenberger rossta
7
3.8k

Other Decks in Programming

See All in Programming
AmebaブログはKMPから卒業します
Avatar for 伊藤光次郎 kmars0605
0
310
R8 の設定見直しでアプリサイズ削減
Avatar for ANDPAD inc andpad
0
240
AI主導のプログラミング学習アプリを作ってみた
Avatar for econanringo econanringo
0
200
Crash Auto Pipelines
Avatar for Veronikapj veronikapj
1
190
プロジェクトコードをキレイキレイしよう！暗黙的な参照を読み解く静的解析
Avatar for Takuma Osada ostk0069
0
190
クラウドゲーミングのパフォーマンス最適化に挑む / Cloud Gaming Performance Tuning
Avatar for viviON vivion
0
310
Compiling a real-world CLI tool to native with Static Hermes
Avatar for Tzvetan Mikov tmikov2023
0
140
AIがコードを書いてくれる時代、我々は何を確かめるのか
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
13
5.3k
Apple Intelligenceとオンデバイス時代の到来
Avatar for Yahiro Sugiyama yahir0
0
180
全ての永続トークンを、生まれる前に消し去りたい！
Avatar for sylph01 sylph01
2
1.6k
우리의 Nitro Modules는 당신의 Turbo Modules보다 아름답다
Avatar for HyunWoo Lee l2hyunwoo
0
240
sbt 2.0: takeoff
Avatar for Eugene Yokota eed3si9n
0
180

Featured

See All Featured
HDC tutorial
Avatar for Michiel Stock michielstock
2
990
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.9k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
570
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
550
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
720
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.5k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
109
250k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1.6k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.9k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
1.1k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
5
870

Transcript

  1. Ross Kaffenberger @rossta Getting Lazy with Vue and PDFs

  2. Ross Kaffenberger @rossta Building a PDF Vue-er

  3. #dadjokes

  4. None

  5. • ross kaffenberger @rossta

  6. rossta.net/vue-pdfjs-demo

  7. None

  8. PDF.js fetching

  9. None

  10. PDF.js rendering

  11. None

  12. PDF.js in Vue

  13. None
  14. None

  15. Problem: Large PDFs

  16. •Lazy render: draw to canvas when visible •“Infinite” scroll: fetch

    pages in batches

  17. Iteration #1: Math!

  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None

  26. Problem: Vue cannot watch $el properties

  27. Manual work

  28. None
  29. None
  30. None
  31. None

  32. Next iteration:

  33. IntersectionObserver!

  34. None
  35. None

  36. Advantages

  37. •no $el property tracking •less code, fewer bugs •easier to

    extend

  38. Akryum/vue-observe-visibility

  39. Lesson: Opt for Vue-friendliness

  40. None

  41. Lesson: Be curious and flexible

  42. rossta/vue-pdfjs-demo

  43. @rossta rossta.net/talks [email protected]