Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Getting Lazy with Vue and PDFs
Ross Kaffenberger
January 16, 2019
Programming
2
280
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
Share
More Decks by Ross Kaffenberger
See All by Ross Kaffenberger
rossta
1
1.5k
rossta
2
730
rossta
0
1.6k
rossta
0
150
rossta
1
240
rossta
3
850
rossta
20
3.1k
rossta
7
3.5k
Other Decks in Programming
See All in Programming
zsmb
1
120
sullis
0
120
zsmb
2
110
hr01
0
1.6k
kyonmm
2
2.1k
yamotuki
0
130
rishitdagli
0
180
kazuki19992
0
440
inoue2002
0
270
hirotokirimaru
1
400
nauleyco
0
210
muttsu_623
0
480
Featured
See All Featured
sstephenson
144
12k
lara
172
9.5k
brad_frost
156
6.4k
bkeepers
52
4.1k
marktimemedia
6
330
rmw
11
740
chriscoyier
684
180k
nonsquared
81
3.3k
danielanewman
200
19k
smashingmag
283
47k
samanthasiow
56
6.3k
cromwellryan
101
5.9k
Transcript
Ross Kaffenberger @rossta Getting Lazy with Vue and PDFs
Ross Kaffenberger @rossta Building a PDF Vue-er
#dadjokes
None
• ross kaffenberger @rossta
rossta.net/vue-pdfjs-demo
None
PDF.js fetching
None
PDF.js rendering
None
PDF.js in Vue
None
None
Problem: Large PDFs
•Lazy render: draw to canvas when visible •“Infinite” scroll: fetch
pages in batches
Iteration #1: Math!
None
None
None
None
None
None
None
None
Problem: Vue cannot watch $el properties
Manual work
None
None
None
None
Next iteration:
IntersectionObserver!
None
None
Advantages
•no $el property tracking •less code, fewer bugs •easier to
extend
Akryum/vue-observe-visibility
Lesson: Opt for Vue-friendliness
None
Lesson: Be curious and flexible
rossta/vue-pdfjs-demo
@rossta rossta.net/talks ross@rossta.net