Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Getting Lazy with Vue and PDFs
Search
Ross Kaffenberger
January 16, 2019
Programming
2
1.2k
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
A Webpack Survival Guide for Rails Developers
rossta
1
2.2k
What I look for in a Junior Developer
rossta
2
930
Progressive Web Apps on Rails
rossta
0
2.2k
Enumerable's Ugly Cousin - GORUCO Microtalk
rossta
0
290
Enumerator - Enumerable's Ugly Cousin
rossta
1
440
Recurring Events with Montrose
rossta
3
1.7k
Enumerable - How I Fell in Love with Ruby
rossta
20
4.5k
Create and Deploy an Ember App in 5 Minutes
rossta
7
3.6k
Other Decks in Programming
See All in Programming
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
リハビリmruby
kishima
1
160
Mastering Developer Experience: A Roadmap for Success 【開発生産性Conference 2024】
findyinc
1
380
유연한 Composable 설계
l2hyunwoo
0
380
ドメイン駆動設計の実践
masuda220
PRO
17
5.2k
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
【Go言語】ジェネリクス
tomo1227
0
170
Trial
cairolibrary720
1
130
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
219
8.8k
We Have a Design System, Now What?
morganepeng
46
7k
A Modern Web Designer's Workflow
chriscoyier
689
190k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
Making the Leap to Tech Lead
cromwellryan
127
8.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
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
[email protected]