Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting Lazy with Vue and PDFs

Ross Kaffenberger
January 16, 2019
Programming
2
1.2k

Getting Lazy with Vue and PDFs

I share the most important lessons learned while building a PDF Viewer in Vue.

Ross Kaffenberger

January 16, 2019
Tweet

More Decks by Ross Kaffenberger

See All by Ross Kaffenberger
A Webpack Survival Guide for Rails Developers
rossta
1
2.2k
What I look for in a Junior Developer
rossta
2
940
Progressive Web Apps on Rails
rossta
0
2.2k
Enumerable's Ugly Cousin - GORUCO Microtalk
rossta
0
300
Enumerator - Enumerable's Ugly Cousin
rossta
1
450
Recurring Events with Montrose
rossta
3
1.8k
Enumerable - How I Fell in Love with Ruby
rossta
20
4.5k
Create and Deploy an Ember App in 5 Minutes
rossta
7
3.6k

Other Decks in Programming

See All in Programming
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.7k
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
270
讓數據說話：用 Python、Prometheus 和 Grafana 講故事
eddie
0
350
C#/.NETのこれまでのふりかえり
tomokusaba
1
160
Pinia Colada が実現するスマートな非同期処理
naokihaba
2
160
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
2.2k
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
210
CSC509 Lecture 09
javiergs
PRO
0
110
WEBエンジニア向けAI活用入門
sutetotanuki
0
300
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.3k
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
1.7k
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
150

Featured

See All Featured
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Typedesign – Prime Four
hannesfritz
39
2.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
1.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Practical Orchestrator
shlominoach
186
10k
Documentation Writing (for coders)
carmenintech
65
4.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k

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]