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
1k
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
S3静的ホスティング+Next.js静的エクスポート で格安webアプリ構築
iharuoru
0
220
リストビュー画面UX改善の振り返り
splcywolf
0
130
サービスクラスのありがたみを発見したときの思い出 #phpcon_odawara
77web
4
630
AHC045_解説
shun_pi
0
470
プロダクト横断分析に役立つ、事前集計しないサマリーテーブル設計
hanon52_
2
390
サービスレベルを管理してアジャイルを加速しよう！！ / slm-accelerate-agility
tomoyakitaura
1
170
AI Agents with JavaScript
slobodan
0
220
Deoptimization: How YJIT Speeds Up Ruby by Slowing Down / RubyKaigi 2025
k0kubun
0
490
State of Namespace
tagomoris
4
750
Qiita Bash
mercury_dev0517
1
190
Do Dumb Things
mitsuhiko
0
420
MCP調べてみました！ / Exploring MCP
uhzz
2
2.2k

Featured

See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Into the Great Unknown - MozCon
thekraken
37
1.7k
Six Lessons from altMBA
skipperchong
27
3.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.1k
Speed Design
sergeychernyshev
29
880
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
740
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
13
1.4k
The Invisible Side of Design
smashingmag
299
50k
The Art of Programming - Codeland 2020
erikaheidi
53
13k

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]