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.3k
Enumerable's Ugly Cousin - GORUCO Microtalk
Avatar for Ross Kaffenberger rossta
0
380
Enumerator - Enumerable's Ugly Cousin
Avatar for Ross Kaffenberger rossta
1
530
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 Hiroki Iseri goyoki
1
120
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
Avatar for mazrean mazrean
1
100
旅行プランAIエージェント開発の裏側
Avatar for Ippo Matsui / 令和トラベル ippo012
1
460
コンテキストエンジニアリング Cursor編
Avatar for kinopee kinopeee
1
730
AHC051解法紹介
Avatar for eijirou eijirou
0
640
あのころの iPod を どうにか再生させたい
Avatar for orumin orumin
2
2.5k
Google I/O recap web編 大分Web祭り2025
Avatar for kponda kponda
0
2.9k
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
Avatar for NakamuraTakumi nyatinte
7
960
Infer入門
Avatar for r1ru riru
4
1.6k
TanStack DB ~状態管理の新しい考え方~
Avatar for じょうげん bmthd
2
350
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
Avatar for 74th(Atsushi Morimoto) 74th
8
3.3k
パッケージ設計の黒魔術/Kyoto.go#63
Avatar for kadota kyohei lufia
2
290

Featured

See All Featured
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
236
140k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.5k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k

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]