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

Getting Lazy with Vue and PDFs

Ross Kaffenberger
January 16, 2019
Programming
2
1.3k

Getting Lazy with Vue and PDFs

I share the most important lessons learned while building a PDF Viewer in Vue.

Ross Kaffenberger

January 16, 2019
Tweet

More Decks by Ross Kaffenberger

See All by Ross Kaffenberger
A Webpack Survival Guide for Rails Developers
rossta
1
2.3k
What I look for in a Junior Developer
rossta
2
960
Progressive Web Apps on Rails
rossta
0
2.2k
Enumerable's Ugly Cousin - GORUCO Microtalk
rossta
0
320
Enumerator - Enumerable's Ugly Cousin
rossta
1
470
Recurring Events with Montrose
rossta
3
1.8k
Enumerable - How I Fell in Love with Ruby
rossta
20
4.6k
Create and Deploy an Ember App in 5 Minutes
rossta
7
3.6k

Other Decks in Programming

See All in Programming
PSR-15 はあなたのための ものではない？ - phpcon2024
myamagishi
0
410
Amazon Nova Reelの可能性
hideg
0
230
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
950
HTML/CSS超絶浅い説明
yuki0329
0
200
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
2.6k
Androidアプリのモジュール分割における:x:commonを考える
okuzawats
1
280
令和7年版 あなたが使ってよいフロントエンド機能とは
mugi_uno
11
5.5k
Alba: Why, How and What's So Interesting
okuramasafumi
0
220
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
630
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
910
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
200
functionalなアプローチで動的要素を排除する
ryopeko
1
440

Featured

See All Featured
The Language of Interfaces
destraynor
155
24k
Code Review Best Practice
trishagee
65
17k
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.4k
Gamification - CAS2011
davidbonilla
80
5.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Building an army of robots
kneath
302
45k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
174
51k
Being A Developer After 40
akosma
89
590k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k

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]