Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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.6k
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
400
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
「コードは上から下へ読むのが一番」と思った時に、思い出してほしい話
Avatar for HideyukiKitao panda728
PRO
38
26k
251126 TestState APIってなんだっけ?Step Functionsテストどう変わる?
Avatar for Takumi Abe east_takumi
0
320
안드로이드 9년차 개발자, 프론트엔드 주니어로 커리어 리셋하기
Avatar for Seungmin 마량 maryang
1
110
dotfiles 式年遷宮 令和最新版
Avatar for masawada masawada
1
770
宅宅自以為的浪漫：跟 AI 一起為自己辦的研討會寫一個售票系統
Avatar for 高見龍 eddie
0
500
Findy AI+の開発、運用におけるMCP活用事例
Avatar for starfish719 starfish719
0
220
Giselleで作るAI QAアシスタント 〜 Pull Requestレビューに継続的QAを
Avatar for Tadashi Shigeoka codenote
0
180
ID管理機能開発の裏側 高速にSaaS連携を実現したチームのAI活用編
Avatar for Atsushi Kawamura (atzz/a2c) atzzcokek
0
230
新卒エンジニアのプルリクエスト with AI駆動
Avatar for Yuta Fukunaga fukunaga2025
0
220
令和最新版Android Studioで化石デバイス向けアプリを作る
Avatar for Sora Arakawa arkw
0
400
AIコーディングエージェント（Gemini）
Avatar for kondai kondai24
0
220
【CA.ai #3】ワークフローから見直すAIエージェント — 必要な場面と“選ばない”判断
Avatar for SatoAoaka satoaoaka
0
240

Featured

See All Featured
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
7.9k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.8k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.6k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
390
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k

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]