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.4k
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.2k
Enumerable's Ugly Cousin - GORUCO Microtalk
Avatar for Ross Kaffenberger rossta
0
350
Enumerator - Enumerable's Ugly Cousin
Avatar for Ross Kaffenberger rossta
1
500
Recurring Events with Montrose
Avatar for Ross Kaffenberger rossta
3
1.9k
Enumerable - How I Fell in Love with Ruby
Avatar for Ross Kaffenberger rossta
20
4.6k
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
#QiitaBash TDDでAIに設計イメージを伝える
Avatar for sigma ryosukedtomita
2
1.6k
Efficiency and Rock 'n’ Roll (Really!)
Avatar for Holly Cummins hollycummins
0
600
Devinで実践する！AIエージェントと協働する開発組織の作り方
Avatar for Masahiro Nishimi masahiro_nishimi
6
2.6k
Building an Application with TDD, DDD and Hexagonal Architecture - Isn't it a bit too much?
Avatar for Mufrid Krilic mufrid
0
370
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
Avatar for Masayuki Izumi izumin5210
12
6.4k
TypeScript だけを書いて Tauri でデスクトップアプリを作ろう / Tauri with only TypeScript
Avatar for tris tris5572
2
540
MLOps Japan 勉強会 #52 - 特徴量を言語を越えて一貫して管理する, 『特徴量ドリブン』な MLOps の実現への試み
Avatar for Tomohiro Tani taniiicom
2
570
JSAI2025 RecSysChallenge2024 優勝報告
Avatar for kami unonao
1
380
Interface vs Types ~型推論が過多推論~
Avatar for Hiroki Omote hirokiomote
1
230
DevDay2025-OracleDatabase-kernel-addressing-history
Avatar for oracle4engineer oracle4engineer
PRO
7
1.6k
Zennの運営完全に理解した #完全に理解したTalk
Avatar for Yusuke Wada wadayusuke
1
140
Practical Domain-Driven Design - Workshop at NDC 2025
Avatar for Mufrid Krilic mufrid
0
130

Featured

See All Featured
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
178
9.7k
It's Worth the Effort
Avatar for 3n 3n
184
28k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
28
5.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
34
2.3k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
159
23k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
41
2.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
15
890

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]