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.5k

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.7k
What I look for in a Junior Developer
Avatar for Ross Kaffenberger rossta
2
1.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
420
Enumerator - Enumerable's Ugly Cousin
Avatar for Ross Kaffenberger rossta
1
550
Recurring Events with Montrose
Avatar for Ross Kaffenberger rossta
3
2.1k
Enumerable - How I Fell in Love with Ruby
Avatar for Ross Kaffenberger rossta
20
4.8k
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
atmaCup #23でAIコーディングを活用した話
Avatar for ML_Bear ml_bear
4
610
Oxlint JS plugins
Avatar for kazupon kazupon
1
1.1k
izumin5210のプロポーザルのネタ探し #tskaigi_msup
Avatar for izumin5210 izumin5210
1
340
AIプロダクト時代のQAエンジニアに求められること
Avatar for imtnd imtnd
1
440
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
Avatar for tetutetu214 tetutetu214
2
120
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
Avatar for Mulyu mulyu
3
1.8k
生成AIを使ったコードレビューで定性的に品質カバー
Avatar for Chiaki Okamoto chiilog
1
300
AIと一緒にレガシーに向き合ってみた
Avatar for nyafunta9858 nyafunta9858
0
330
Go1.26 go fixをプロダクトに適用して困ったこと
Avatar for Hiroki Kurasawa kurakura0916
0
210
ぼくの開発環境2026
Avatar for yuzneri yuzneri
1
280
猫の手も借りたい！ので AIエージェント猫を作って社内に放した話 Claude Code × Container Lambda の Slack Bot "DevNeko"
Avatar for naramomi7 naramomi7
0
190
Python’s True Superpower
Avatar for Hynek Schlawack hynek
0
180

Featured

See All Featured
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
160
Abbi's Birthday
Avatar for Violet Bock coloredviolet
2
4.9k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
2
260
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
250
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.6k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
310
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
67
37k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.1k

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]