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

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.7k
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
430
Enumerator - Enumerable's Ugly Cousin
Avatar for Ross Kaffenberger rossta
1
550
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.8k
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
どんと来い、データベース信頼性エンジニアリング / Introduction to DBRE
Avatar for nnaka2992 nnaka2992
1
280
new(1.26) ← これすき / kamakura.go #8
Avatar for utagawa kiki utgwkk
0
2.2k
ポーリング処理廃止によるイベント駆動アーキテクチャへの移行
Avatar for Seitaro Fujigaki seitarof
3
1k
Agentic AI: Evolution oder Revolution
Avatar for Lars Roewekamp mobilelarson
PRO
0
160
CSC307 Lecture 13
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
320
コーディングルールの鮮度を保ちたい / keep-fresh-go-internal-conventions
Avatar for NAGATA Hiroaki handlename
0
190
ふつうの Rubyist、ちいさなデバイス、大きな一年
Avatar for bash0C7 bash0c7
0
840
encoding/json/v2のUnmarshalはこう変わった：内部実装で見る設計改善
Avatar for Hiroki Kurasawa kurakura0916
0
400
nuget-server - あなたが必要だったNuGetサーバー
Avatar for Kouji Matsui kekyo
PRO
0
230
AWS×クラウドネイティブソフトウェア設計 / AWS x Cloud-Native Software Design
Avatar for nrs nrslib
15
3k
Railsの気持ちを考えながらコントローラとビューを整頓する/tidying-rails-controllers-and-views-as-rails-think
Avatar for MOROHASHI Kyosuke moro
5
390
Goの型安全性で実現する複数プロダクトの権限管理
Avatar for ishikawa-pro ishikawa_pro
1
250

Featured

See All Featured
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
470
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
210
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
300
New Earth Scene 8
Avatar for Sydney Stone popppiees
1
1.7k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
2.4k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.4k

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]