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
540
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
Reactive Thinking with Signals and the Resource API
Avatar for Manfred Steyer manfredsteyer
PRO
0
120
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
480
CSC305 Lecture 11
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
320
data-viz-talk-cz-2025
Avatar for Leonardo Collado-Torres lcolladotor
0
110
ドメイン駆動設計のエッセンス
Avatar for 増田 亨 masuda220
PRO
15
7.3k
Node-REDのノードの開発・活用事例とコミュニティとの関わり(Node-RED Con Nagoya 2025)
Avatar for 404background 404background
0
110
Kotlinで実装するCPU/GPU 「協調的」パフォーマンス管理
Avatar for matuyuhi matuyuhi
0
240
TransformerからMCPまで（現代AIを理解するための羅針盤）
Avatar for MIKIO KUBO mickey_kubo
7
5.9k
なんでRustの環境構築してないのにRust製のツールが動くの？ / Why Do Rust-Based Tools Run Without a Rust Environment?
Avatar for TOMIKAWA Sotaro ssssota
14
47k
業務でAIを使いたい話
Avatar for hnw hnw
0
220
マンガアプリViewerの大画面対応を考える
Avatar for kk__777 kk__777
0
440
HTTPじゃ遅すぎる！ SwitchBotを自作ハブで動かして学ぶBLE通信
Avatar for Shoichi Ochi occhi
0
140

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
710
Designing for Performance
Avatar for Lara Hogan lara
610
69k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
10
900
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.8k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
658
61k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.7k

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]