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

Getting Lazy with Vue and PDFs

B0169a78f851962058d63337ad0147d6?s=47 Ross Kaffenberger
January 16, 2019
Programming
2
340

Getting Lazy with Vue and PDFs

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

B0169a78f851962058d63337ad0147d6?s=128

Ross Kaffenberger

January 16, 2019
Tweet

More Decks by Ross Kaffenberger

See All by Ross Kaffenberger
B0169a78f851962058d63337ad0147d6?s=48 rossta
1
1.6k
B0169a78f851962058d63337ad0147d6?s=48 rossta
2
740
B0169a78f851962058d63337ad0147d6?s=48 rossta
0
1.6k
B0169a78f851962058d63337ad0147d6?s=48 rossta
0
160
B0169a78f851962058d63337ad0147d6?s=48 rossta
1
250
B0169a78f851962058d63337ad0147d6?s=48 rossta
3
910
B0169a78f851962058d63337ad0147d6?s=48 rossta
20
3.2k
B0169a78f851962058d63337ad0147d6?s=48 rossta
7
3.5k

Other Decks in Programming

See All in Programming
14d83dc17e2c893d7564b609ff8da4ca?s=48 techharmony
0
160
E7151ab8219e76672f7a7691dd2c88e6?s=48 seike460
7
2.2k
Dc5157c1e1b11923f4cdd210ee27d4af?s=48 patorash
0
130
5155c9bc5b30d9e2a8fd677695887861?s=48 kaonash
2
1.9k
0063efb4c7066273b877fdabcdcd15b3?s=48 dora1998
0
170
80728f01bc074c5c2f0d4859258bd793?s=48 ickx
3
630
0e6b2b5b4861d0e4b136527c0d7d428e?s=48 imk2o
0
200
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
2
250
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
2
330
Acd2f6f7498ea41881e161e191aa7c02?s=48 yattom
31
10k
Ee398a67f5017cc2ad5c02d67d10e516?s=48 doyaaaaaken
1
320
5c588fdfe782f92fa6b081903edd82bb?s=48 hr01
1
4.3k

Featured

See All Featured
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
66
3k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
20
1.3k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
242
21k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
88
3.4k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
322
53k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
204
37k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
61
9.9k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1346
200k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
22
2.2k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
54
3.5k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
80
4.2k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
94
5.5k

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