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

Getting Lazy with Vue and PDFs

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Ross Kaffenberger Ross Kaffenberger
January 16, 2019
Programming
1.5k
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.3k
Enumerable's Ugly Cousin - GORUCO Microtalk
Avatar for Ross Kaffenberger rossta
0
450
Enumerator - Enumerable's Ugly Cousin
Avatar for Ross Kaffenberger rossta
1
580
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.8k
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
[BalkanRuby 2026] Drop your app/services!
Avatar for Vladimir Dementyev palkan
3
710
Talking to terminals (and how they talk back) (KotlinConf 2026)
Avatar for Jake Wharton jakewharton
PRO
1
150
JavaDoc 再入門
Avatar for nagise nagise
0
190
Old Dog, New Tricks: The Java 25 Reinvention - JNation
Avatar for A N M Bazlur Rahman bazlur_rahman
0
130
Signal Forms: Beyond the Basics @ngBaguette 2026 in Paris
Avatar for Manfred Steyer manfredsteyer
PRO
0
150
Composerを使ったサプライチェーン攻撃の様子を眺めてみる #phpstudy
Avatar for hideki kinjyo o0h
PRO
2
180
さぁV100、メモリをお食べ・・・
Avatar for nilpe nilpe
0
110
Sans tests, vos agents ne sont pas fiables
Avatar for Nathan Abondance nabondance
0
170
Inspired By RubyKaigi (EN)
Avatar for Atsushi Kawamura (atzz/a2c) atzzcokek
0
350
Modding RubyKaigi for Myself
Avatar for yui-knk yui_knk
0
720
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
Avatar for chobishiba chobishiba
3
460
タクシーアプリ『GO』の バックエンド開発のおける AI利活用と若者のすべて
Avatar for Kazuhiko Yamashita pyama86
3
1.8k

Featured

See All Featured
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
210
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.5k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
460
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
210
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.2k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
200
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.7k
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.3k

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]