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

Getting Lazy with Vue and PDFs

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
430
Enumerator - Enumerable's Ugly Cousin
Avatar for Ross Kaffenberger rossta
1
560
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.8k

Other Decks in Programming

See All in Programming
Symfonyの特性(設計思想)を手軽に活かす特性(trait)
Avatar for ICKX ickx
0
110
AI時代のシステム設計：ドメインモデルで変更しやすさを守る設計戦略
Avatar for 増田 亨 masuda220
PRO
6
1.1k
LM Linkで(非力な！)ノートPCでローカルLLM
Avatar for 瀬尾佳隆 seosoft
0
280
一度始めたらやめられない開発効率向上術 / Findy あなたのdotfilesを教えて！
Avatar for Takashi Kokubun k0kubun
3
2.4k
2026-03-27 #terminalnight 変数展開とコマンド展開でターミナル作業をスマートにする方法
Avatar for SUZUKI Masashi masasuzu
0
250
Smarter Angular mit Transformers.js & Prompt API
Avatar for Christian Liebel christianliebel
PRO
1
100
Java 21/25 Virtual Threads 소개
Avatar for Sunghyouk Bae (Debop) debop
0
310
20260320登壇資料
Avatar for 松井遼(まついはるか) pharct
0
140
Claude Code Skill入門
Avatar for maya mayahoney
0
450
20260313 - Grafana & Friends Taipei #1 - Kubernetes v1.36 的開發雜記：那些困在 Alpha 加護病房太久的 Metrics
Avatar for ChengHao Yang tico88612
0
240
ベクトル検索のフィルタを用いた機械学習モデルとの統合 / python-meetup-fukuoka-06-vector-attr
Avatar for monochromegane monochromegane
2
590
Cyrius ーLinux非依存にコンテナをネイティブ実行する専用OSー
Avatar for n4mlz n4mlz
0
260

Featured

See All Featured
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
100
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
190
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.6k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
4
500
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
91
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
120

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]