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
280

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.5k
B0169a78f851962058d63337ad0147d6?s=48 rossta
2
730
B0169a78f851962058d63337ad0147d6?s=48 rossta
0
1.6k
B0169a78f851962058d63337ad0147d6?s=48 rossta
0
150
B0169a78f851962058d63337ad0147d6?s=48 rossta
1
240
B0169a78f851962058d63337ad0147d6?s=48 rossta
3
850
B0169a78f851962058d63337ad0147d6?s=48 rossta
20
3.1k
B0169a78f851962058d63337ad0147d6?s=48 rossta
7
3.5k

Other Decks in Programming

See All in Programming
4047c64e3a1e2f81addd4ba675ddc451?s=48 zsmb
1
120
99d4c0ed3c8027ea1c37b53d6441d042?s=48 sullis
0
120
4047c64e3a1e2f81addd4ba675ddc451?s=48 zsmb
2
110
5c588fdfe782f92fa6b081903edd82bb?s=48 hr01
0
1.6k
405fe9ab689473f267e2cfbd95f78c75?s=48 kyonmm
2
2.1k
7e9e111546b163cc05d517eec128c04f?s=48 yamotuki
0
130
0d7c1e828ec0afbf29c0d37702c4637d?s=48 rishitdagli
0
180
Ca91df01df9ee53c57b8c5a81aeec889?s=48 kazuki19992
0
440
3cfad86677c5966ecfe9b81955fa3489?s=48 inoue2002
0
270
04df7340898eac3a0536d3b47c55501c?s=48 hirotokirimaru
1
400
8c870088e1f657062e661fdaf5ce6ec3?s=48 nauleyco
0
210
1c2b62114ede7d8cb897bf19b999d233?s=48 muttsu_623
0
480

Featured

See All Featured
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
144
12k
245cee81a9c424266e5e401d844ea881?s=48 lara
172
9.5k
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
156
6.4k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
52
4.1k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
6
330
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
11
740
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
684
180k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
81
3.3k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
200
19k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
283
47k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
56
6.3k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
101
5.9k

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