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.3k
Enumerable's Ugly Cousin - GORUCO Microtalk
Avatar for Ross Kaffenberger rossta
0
380
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
The State of Fluid (2025)
Avatar for Simon Praetorius s2b
0
190
令和最新版手のひらコンピュータ
Avatar for KOBA789 koba789
14
8k
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
Avatar for NakamuraTakumi nyatinte
6
720
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
Avatar for Itaru Ota ota1022
5
1.8k
AI OCR API on Lambdaを Datadogで可視化してみた
Avatar for Nealle nealle
0
170
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
Avatar for Tomohisa Takaoka tomohisa
0
210
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
Avatar for Ryo Okubo syucream
2
680
Amazon Q CLI開発で学んだAIコーディングツールの使い方
Avatar for matsukada licux
3
190
画像コンペでのベースラインモデルの育て方
Avatar for tattaka tattaka
3
1.8k
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
Avatar for Nealle nealle
0
320
kiroでゲームを作ってみた
Avatar for 入井 啓太 iriikeita
0
180
実践 Dev Containers × Claude Code
Avatar for Yuto Akiba touyu
1
240

Featured

See All Featured
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
695
190k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Done Done
Avatar for chrislema chrislema
185
16k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
21k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k

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]