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.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
410
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
안드로이드 9년차 개발자, 프론트엔드 주니어로 커리어 리셋하기
Avatar for Seungmin 마량 maryang
1
150
ELYZA_Findy AI Engineering Summit登壇資料_AIコーディング時代に「ちゃんと」やること_toB LLMプロダクト開発舞台裏_20251216
Avatar for 株式会社ELYZA elyza
2
860
Jetpack XR SDKから紐解くAndroid XR開発と技術選定のヒント / about-androidxr-and-jetpack-xr-sdk
Avatar for にー兄さん drumath2237
1
230
AI時代を生き抜く 新卒エンジニアの生きる道
Avatar for coconala_engineer coconala_engineer
1
490
実はマルチモーダルだった。ブラウザの組み込みAI🧠でWebの未来を感じてみよう #jsfes #gemini
Avatar for n0bisuke n0bisuke2
3
1.4k
Python札幌 LT資料
Avatar for t3tra t3tra
7
1.1k
Cap'n Webについて
Avatar for Yusuke Wada yusukebe
0
160
CSC307 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
710
Rubyで鍛える仕組み化プロヂュース力
Avatar for muryoimpl muryoimpl
0
260
Basic Architectures
Avatar for Denys Poltorak denyspoltorak
0
150
生成AIを利用するだけでなく、投資できる組織へ
Avatar for pospome pospome
2
430
Giselleで作るAI QAアシスタント 〜 Pull Requestレビューに継続的QAを
Avatar for Tadashi Shigeoka codenote
0
330

Featured

See All Featured
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
0
370
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.2k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
115
100k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
76
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
400
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
8k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
240
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
410
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.4k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
120

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]