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.4k
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
370
Enumerator - Enumerable's Ugly Cousin
Avatar for Ross Kaffenberger rossta
1
520
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
Dart 参戦！！静的型付き言語界の隠れた実力者
Avatar for Kuno Ayana kno3a87
0
160
kiroでゲームを作ってみた
Avatar for 入井 啓太 iriikeita
0
140
AIのメモリー
Avatar for watany watany
12
1.2k
知って得する@cloudflare_vite-pluginのあれこれ
Avatar for chimame chimame
1
140
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜（奥田りさ）The Basics of Agent Development with ADK — A Demo-Focused Introduction
Avatar for RisaTube risatube
PRO
6
1.4k
ソフトウェア設計とAI技術の活用
Avatar for 増田 亨 masuda220
PRO
25
7.3k
画像コンペでのベースラインモデルの育て方
Avatar for tattaka tattaka
3
970
Amazon Q CLI開発で学んだAIコーディングツールの使い方
Avatar for matsukada licux
3
170
構文解析器入門
Avatar for ydah ydah
7
2k
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
Avatar for ShuyaKinjo shuyakinjo
0
180
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
Avatar for Aki Nakahara akinko_0915
0
180
iOS開発スターターキットの作り方
Avatar for akidon0000 akidon0000
0
230

Featured

See All Featured
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
25
1.8k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
301
21k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k

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]