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
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
390
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
Atomics APIを知る / Understanding Atomics API
Avatar for TOMIKAWA Sotaro ssssota
1
160
しっかり学ぶ java.lang.*
Avatar for nagise nagise
1
410
オフライン対応！Flutterアプリに全文検索エンジンを実装する @FlutterKaigi2025
Avatar for JaiChangPark itsmedreamwalker
2
240
AI駆動開発ライフサイクル(AI-DLC)のホワイトペーパーを解説
Avatar for Yasutomo Hariu swxhariu5
0
1.2k
予防に勝る防御なし（2025年版） - 堅牢なコードを導く様々な設計のヒント / Growing Reliable Code PHP Conference Fukuoka 2025
Avatar for Takuto Wada twada
PRO
39
13k
問題の見方を変える「システム思考」超入門
Avatar for panda_program panda_program
0
300
Amazon Bedrock Knowledge Bases Hands-on
Avatar for Kono konny0311
0
150
ソフトウェア設計の課題・原則・実践技法
Avatar for 増田 亨 masuda220
PRO
20
13k
ゼロダウンタイムでミドルウェアの バージョンアップを実現した手法と課題
Avatar for つっつん wind111
0
210
Tangible Code
Avatar for chobishiba chobishiba
3
690
歴史から学ぶ「Why PHP？」 PHPを書く理由を改めて理解する / Learning from History: “Why PHP?” Rediscovering the Reasons for Writing PHP
Avatar for shiro seike seike460
PRO
0
160
CSC509 Lecture 13
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
260

Featured

See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
34
2.3k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
KATA
Avatar for Megan Lloyd mclloyd
PRO
32
15k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.1k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.2k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k

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]