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

Getting Lazy with Vue and PDFs

Avatar for Ross Kaffenberger Ross Kaffenberger
January 16, 2019
Programming
2
1.4k

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.5k
What I look for in a Junior Developer
Avatar for Ross Kaffenberger rossta
2
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
390
Enumerator - Enumerable's Ugly Cousin
Avatar for Ross Kaffenberger rossta
1
530
Recurring Events with Montrose
Avatar for Ross Kaffenberger rossta
3
2k
Enumerable - How I Fell in Love with Ruby
Avatar for Ross Kaffenberger rossta
20
4.7k
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
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
Avatar for Sobolev Nikita sobolevn
0
160
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
Avatar for Sobolev Nikita sobolevn
0
150
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
Avatar for TOMIKAWA Sotaro ssssota
2
1.2k
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
Avatar for Takashi uhucream
0
110
CSC305 Lecture 01
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
400
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
Avatar for MinoDriven minodriven
23
12k
Let's Write a Train Tracking Algorithm
Avatar for Chris Trott twocentstudios
0
220
どの様にAIエージェントと 協業すべきだったのか？
Avatar for Takepepe takefumiyoshii
2
610
明日から始めるリファクタリング
Avatar for ryounasso ryounasso
0
110
プログラマのための作曲入門
Avatar for CHEEBOW cheebow
0
540
『毎日の移動』を支えるGoバックエンド内製開発
Avatar for yutautsugi yutautsugi
2
180
複雑化したリポジトリをなんとかした話　pipenvからuvによるモノレポ構成への移行
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
770

Featured

See All Featured
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
36
2.5k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.9k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
237
140k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
11
880
Visualization
Avatar for Eitan Lees eitanlees
148
16k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
10k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k

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]