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
1.5k
2

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

More Decks by Ross Kaffenberger

See All by Ross Kaffenberger
A Webpack Survival Guide for Rails Developers
Avatar for Ross Kaffenberger rossta
1
2.8k
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.4k
Enumerable's Ugly Cousin - GORUCO Microtalk
Avatar for Ross Kaffenberger rossta
0
470
Enumerator - Enumerable's Ugly Cousin
Avatar for Ross Kaffenberger rossta
1
590
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.9k
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
1年で人数1.5倍、PR数5.5倍増。 品質とアウトカムはどうなったか、 何が効いたか
Avatar for ike ike002jp
0
140
20260623_Loop Engineeringで自分の分身の問い合わせBotを作る
Avatar for ryugen04 ryugen04
0
220
JAWS-UG横浜 #102 AWSサ終供養LT会 成仏できない AWS サービスたち 〜本日、三体供養します〜
Avatar for maroon1st maroon1st
0
210
壊れたパーサから始める関数型設計と構成的なパーサ #fp_matsuri
Avatar for ライガー raiga0310
2
320
Generative UI & AI-Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
1
190
任せる範囲はこう広がった / How the Scope of AI Delegation Has Expanded
Avatar for nrs nrslib
1
260
Laravel Boostに学ぶ、AIにPHPを書かせる技術 〜OSSの実装から蒸留するエージェント制御の王道〜
Avatar for 武田 憲太郎 kentaroutakeda
3
460
AI がコードを書く時代における新卒エンジニアの仕事風景 (2026) / New Graduate Engineers in the Era of AI Coding (2026)
Avatar for sushichan044 sushichan044
0
220
ローカルLLMでどこまでコードが書けるか -縮小版 /　How much code can be written on a local LLM Shortened
Avatar for Naoki Kishida kishida
2
190
Hatena Engineer Seminar #37「言語モデルの活用に関する研究」
Avatar for SlashNephy slashnephy
0
520
どこまでゆるくて許されるのか
Avatar for tk3fftk tk3fftk
0
500
5分で問診！Composer セキュリティ健康診断
Avatar for コドモン開発チーム codmoninc
0
340

Featured

See All Featured
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
510
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
11
38k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.8k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
34k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.8k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
160
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
410
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
240
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
1.1k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.6k

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]