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.4k
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.2k
Enumerable's Ugly Cousin - GORUCO Microtalk
Avatar for Ross Kaffenberger rossta
0
350
Enumerator - Enumerable's Ugly Cousin
Avatar for Ross Kaffenberger rossta
1
500
Recurring Events with Montrose
Avatar for Ross Kaffenberger rossta
3
1.9k
Enumerable - How I Fell in Love with Ruby
Avatar for Ross Kaffenberger rossta
20
4.6k
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
primeNumberでのRBS導入の現在 && RBS::Traceでinline RBSを拡充してみた
Avatar for Manami Nakamura mnmandahalf
0
240
TSConfig Solution Style & subpath imports to switch types on a per-file basis
Avatar for South maminami373
1
170
Agent Rules as Domain Parser
Avatar for Yoda Keisuke yodakeisuke
1
260
❄️ tmux-nixの実装を通して学ぶNixOSモジュール
Avatar for Mutsuha Asada momeemt
1
120
Practical Domain-Driven Design - Workshop at NDC 2025
Avatar for Mufrid Krilic mufrid
0
120
ts-morph実践：型を利用するcodemodのテクニック
Avatar for ypresto ypresto
1
510
少数精鋭エンジニアがフルスタック力を磨く理由 -そしてAI時代へ-
Avatar for 株式会社Rebase_エンジニアリング rebase_engineering
0
120
Parallel::Pipesの紹介
Avatar for Shoichi Kaji skaji
2
810
事業KPIを基に価値の解像度を上げる
Avatar for Nealle nealle
0
190
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
Avatar for mizdra mizdra
PRO
3
2.2k
AI Coding Agent Enablement in TypeScript
Avatar for Yuku Kotani yukukotani
16
6.6k
JSAI2025 RecSysChallenge2024 優勝報告
Avatar for kami unonao
1
360

Featured

See All Featured
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.6k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
42
2.3k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
6.5k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.4k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.3k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.4k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
52
7.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 ross@rossta.net