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.3k
What I look for in a Junior Developer
rossta
2
980
Progressive Web Apps on Rails
rossta
0
2.2k
Enumerable's Ugly Cousin - GORUCO Microtalk
rossta
0
330
Enumerator - Enumerable's Ugly Cousin
rossta
1
470
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.6k

Other Decks in Programming

See All in Programming
DROBEの生成AI活用事例 with AWS
ippey
0
130
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region！
maroon1st
1
140
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Formの複雑さに立ち向かう
bmthd
1
720
ARA Ansible for the teams
kksat
0
150
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
第3回 Snowflake 中部ユーザ会 - dbt × Snowflake ハンズオン
hoto17296
4
360
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
The Pragmatic Product Professional
lauravandoore
32
6.4k
A designer walks into a library…
pauljervisheath
205
24k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
It's Worth the Effort
3n
184
28k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
The Cost Of JavaScript in 2023
addyosmani
47
7.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]