Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Getting Lazy with Vue and PDFs

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

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.6k
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.3k
Enumerable's Ugly Cousin - GORUCO Microtalk
Avatar for Ross Kaffenberger rossta
0
400
Enumerator - Enumerable's Ugly Cousin
Avatar for Ross Kaffenberger rossta
1
540
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
ID管理機能開発の裏側 高速にSaaS連携を実現したチームのAI活用編
Avatar for Atsushi Kawamura (atzz/a2c) atzzcokek
0
240
GISエンジニアから見たLINKSデータ
Avatar for nokonoko1203 nokonoko1203
0
110
開発に寄りそう自動テストの実現
Avatar for Hiroki Iseri goyoki
2
1k
AIエージェントを活かすPM術 AI駆動開発の現場から
Avatar for gyuta gyuta
0
430
複数人でのCLI/Infrastructure as Codeの暮らしを良くする
Avatar for Shoma Okamoto shmokmt
5
2.3k
Cap'n Webについて
Avatar for Yusuke Wada yusukebe
0
140
ハイパーメディア駆動アプリケーションとIslandアーキテクチャ: htmxによるWebアプリケーション開発と動的UIの局所的適用
Avatar for Ryota Nakamura nowaki28
0
420
Navigation 3: 적응형 UI를 위한 앱 탐색
Avatar for Sungyong An fornewid
1
350
LLM Çağında Backend Olmak: 10 Milyon Prompt'u Milisaniyede Sorgulamak
Avatar for Selçuk Usta selcukusta
0
120
ゲームの物理 剛体編
Avatar for Fadis fadis
0
350
実はマルチモーダルだった。ブラウザの組み込みAI🧠でWebの未来を感じてみよう #jsfes #gemini
Avatar for n0bisuke n0bisuke2
3
1.2k
Claude Codeの「Compacting Conversation」を体感50%減！ CLAUDE.md + 8 Skills で挑むコンテキスト管理術
Avatar for Kazuki Murahama kmurahama
0
290

Featured

See All Featured
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.1k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.6k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
KATA
Avatar for Megan Lloyd mclloyd
PRO
33
15k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.1k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
355
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.8k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k

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]