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.3k

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.3k
What I look for in a Junior Developer
rossta
2
960
Progressive Web Apps on Rails
rossta
0
2.2k
Enumerable's Ugly Cousin - GORUCO Microtalk
rossta
0
320
Enumerator - Enumerable's Ugly Cousin
rossta
1
470
Recurring Events with Montrose
rossta
3
1.8k
Enumerable - How I Fell in Love with Ruby
rossta
20
4.6k
Create and Deploy an Ember App in 5 Minutes
rossta
7
3.6k

Other Decks in Programming

See All in Programming
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
630
DMMオンラインサロンアプリのSwift化
hayatan
0
190
functionalなアプローチで動的要素を排除する
ryopeko
1
210
Azure AI Foundryのご紹介
qt_luigi
1
210
快速入門可觀測性
blueswen
0
500
php-conference-japan-2024
tasuku43
0
430
Внедряем бюджетирование, или Как сделать хорошо?
lamodatech
0
940
CQRS+ES の力を使って効果を感じる / Feel the effects of using the power of CQRS+ES
seike460
PRO
0
240
オニオンアーキテクチャを使って、 Unityと.NETでコードを共有する
soi013
0
370
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
940
Beyond ORM
77web
11
1.6k
Stackless и stackful? Корутины и асинхронность в Go
lamodatech
0
1.3k

Featured

See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
870
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Six Lessons from altMBA
skipperchong
27
3.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Thoughts on Productivity
jonyablonski
68
4.4k
Code Review Best Practice
trishagee
65
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
192
16k
The Language of Interfaces
destraynor
155
24k
A Philosophy of Restraint
colly
203
16k

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]