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

Getting Lazy with Vue and PDFs

Avatar for Ross Kaffenberger Ross Kaffenberger
January 16, 2019
Programming
2
1.4k

Getting Lazy with Vue and PDFs

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

Avatar for Ross Kaffenberger

Ross Kaffenberger

January 16, 2019
Tweet

More Decks by Ross Kaffenberger

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

Other Decks in Programming

See All in Programming
Blazing Fast UI Development with Compose Hot Reload (droidcon London 2025)
Avatar for Márton Braun zsmb
0
220
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
300
登壇は dynamic! な営みである / speech is dynamic
Avatar for Daichi KUDO da1chi
0
360
CSC509 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
270
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
Avatar for N Akita nakita628
0
330
Developer Joy - The New Paradigm
Avatar for Holly Cummins hollycummins
1
370
Blazing Fast UI Development with Compose Hot Reload (Bangladesh KUG, October 2025)
Avatar for Márton Braun zsmb
1
230
CSC305 Lecture 11
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
300
One Enishi After Another
Avatar for Koji SHIMADA snoozer05
PRO
0
160
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
Avatar for kasacchiful kasacchiful
0
310
オープンソースソフトウェアへの解像度🔬
Avatar for うたもく utam0k
17
3.2k
Amazon Verified Permissions実践入門 〜Cedar活用とAppSync導入事例/Practical Introduction to Amazon Verified Permissions
Avatar for MURAKAMI Masahiko fossamagna
2
100

Featured

See All Featured
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.7k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
7
650
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.7k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.7k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
185
22k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
44
7.8k

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]