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
530
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
理論と実務のギャップを超える
Avatar for kmuto eycjur
0
120
複雑化したリポジトリをなんとかした話　pipenvからuvによるモノレポ構成への移行
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
1k
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
Avatar for Takeru Hayasaka takehaya
8
1.6k
止められない医療アプリ、そっと Swift 6 へ
Avatar for MEDLEY, INC. medley
1
150
その面倒な作業、「Dart」にやらせませんか？ Flutter開発者のための業務効率化
Avatar for YomEngine yordgenome03
1
110
技術的負債の正体を知って向き合う / Facing Technical Debt
Avatar for irof irof
0
150
チームの境界をブチ抜いていけ
Avatar for tokai235 tokai235
0
160
Writing Better Go: Lessons from 10 Code Reviews
Avatar for Konrad Reiche konradreiche
0
200
バッチ処理を「状態の記録」から「事実の記録」へ
Avatar for HideyukiKitao panda728
PRO
0
140
CSC509 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
330
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
Avatar for aokirishima aokswork3
0
220
All About Angular's New Signal Forms
Avatar for Manfred Steyer manfredsteyer
PRO
0
110

Featured

See All Featured
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
32
2.3k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
139
7.1k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.6k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.2k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.5k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
4
680

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]