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

Getting Lazy with Vue and PDFs

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Ross Kaffenberger Ross Kaffenberger
January 16, 2019
Programming
1.6k
2

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

More Decks by Ross Kaffenberger

See All by Ross Kaffenberger
A Webpack Survival Guide for Rails Developers
Avatar for Ross Kaffenberger rossta
1
2.8k
What I look for in a Junior Developer
Avatar for Ross Kaffenberger rossta
2
1.1k
Progressive Web Apps on Rails
Avatar for Ross Kaffenberger rossta
0
2.4k
Enumerable's Ugly Cousin - GORUCO Microtalk
Avatar for Ross Kaffenberger rossta
0
490
Enumerator - Enumerable's Ugly Cousin
Avatar for Ross Kaffenberger rossta
1
600
Recurring Events with Montrose
Avatar for Ross Kaffenberger rossta
3
2.1k
Enumerable - How I Fell in Love with Ruby
Avatar for Ross Kaffenberger rossta
20
4.9k
Create and Deploy an Ember App in 5 Minutes
Avatar for Ross Kaffenberger rossta
7
3.8k

Other Decks in Programming

See All in Programming
数年滞っていたダークモード対応をおよそ2週間で完了させる
Avatar for Kazuki Chigita chigichan24
0
200
関東Kaggler会_NVIDIA_Nemotron_コンペ_振り返り
Avatar for rick rick_ds
0
780
ALB ログから Trace を気合で繋げる技術
Avatar for Hayato Kawai fohte
7
840
承認済みなのに差戻しできてしまうバグ、型で潰せます
Avatar for SHINCHI Takahiro shinchit
0
130
進化を続けるGo toolsの現在地 / The Current State of Ever-Evolving Go Tools
Avatar for hond hond0413
0
280
AWS Transform Custom による Spring Boot 2.xから4.xへのVerUp
Avatar for Satoshi Kaneyasu satoshi256kbyte
2
120
Go 1.27からのGODEBUG / Go 1.27 リリースパーティ #go127party
Avatar for mazrean mazrean
0
270
DroidKaigi 2026 「個人開発という実験場: Android エンジニアが手にする4つの自由」
Avatar for SlashNephy slashnephy
0
180
VibeCodingからAgenticWorkflowへ
Avatar for starfish719 starfish719
0
1.1k
AIを上手に使っていこうとしたら越境せざるを得なくなった話 〜実践1年で見えた境界を越えなければならない理由と進め方〜 / Crossing borders with AI
Avatar for TomoyaKitaura tomoyakitaura
2
910
My Marp Sample
Avatar for Shota Inoue sinoue0108
0
140
「つくるAI」だけではバグは見つからない　～テストに必要な「見つけるAI」を分離させる戦略～
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
0
220

Featured

See All Featured
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
500
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
320
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
700
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
12
39k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
290
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.3k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
560
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
590

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]