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

Getting Lazy with Vue and PDFs

Ross Kaffenberger
January 16, 2019
Programming
2
1.3k

Getting Lazy with Vue and PDFs

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

Ross Kaffenberger

January 16, 2019
Tweet

More Decks by Ross Kaffenberger

See All by Ross Kaffenberger
A Webpack Survival Guide for Rails Developers
rossta
1
2.4k
What I look for in a Junior Developer
rossta
2
990
Progressive Web Apps on Rails
rossta
0
2.2k
Enumerable's Ugly Cousin - GORUCO Microtalk
rossta
0
340
Enumerator - Enumerable's Ugly Cousin
rossta
1
490
Recurring Events with Montrose
rossta
3
1.9k
Enumerable - How I Fell in Love with Ruby
rossta
20
4.6k
Create and Deploy an Ember App in 5 Minutes
rossta
7
3.7k

Other Decks in Programming

See All in Programming
趣味全開のAITuber開発
kokushin
0
100
Do Dumb Things
mitsuhiko
0
350
AI Agents with JavaScript
slobodan
0
190
エンジニア未経験が最短で戦力になるためのTips
gokana
0
240
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
14
4.1k
Productivity is Messing Around and Having Fun
hollycummins
0
160
Signal-Based Data Fetching With the New httpResource
manfredsteyer
PRO
0
120
今から始めるCursor / Windsurf / Cline
kengo_hayano
0
110
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
200
AIコーディングワークフローの試行 〜AIエージェント×ワークフローでの自動化を目指して〜
rkaga
1
930
Go1.24 go vetとtestsアナライザ
kuro_kurorrr
2
740
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
280

Featured

See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Optimising Largest Contentful Paint
csswizardry
35
3.2k
Writing Fast Ruby
sferik
628
61k
Typedesign – Prime Four
hannesfritz
41
2.6k
Being A Developer After 40
akosma
90
590k
A designer walks into a library…
pauljervisheath
205
24k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Pragmatic Product Professional
lauravandoore
33
6.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
29
2k

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 ross@rossta.net