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.3k

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.2k
Enumerable's Ugly Cousin - GORUCO Microtalk
Avatar for Ross Kaffenberger rossta
0
350
Enumerator - Enumerable's Ugly Cousin
Avatar for Ross Kaffenberger rossta
1
490
Recurring Events with Montrose
Avatar for Ross Kaffenberger rossta
3
1.9k
Enumerable - How I Fell in Love with Ruby
Avatar for Ross Kaffenberger rossta
20
4.6k
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
エンジニア向けCursor勉強会 @ SmartHR
Avatar for Yuki Horikoshi yukisnow1823
3
12k
Instrumentsを使用した アプリのパフォーマンス向上方法
Avatar for hinakko hinakko
0
230
Flutterでllama.cppをつかってローカルLLMを試してみた
Avatar for sakuraidayo sakuraidayo
0
120
「理解」を重視したAI活用開発
Avatar for FastDOCTOR fast_doctor
0
270
Enterprise Web App. Development (1): Build Tool Training Ver. 5
Avatar for Koichi NAKAGAWA knakagawa
1
120
AIコーディングの理想と現実
Avatar for Tomohisa Takaoka tomohisa
35
37k
Improve my own Ruby
Avatar for monochrome sisshiki1969
0
100
VitestのIn-Source Testingが便利
Avatar for taro taro28
8
2.4k
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
Avatar for MinoDriven minodriven
8
1.9k
Boost Your Performance and Developer Productivity with Jakarta EE 11
Avatar for ivargrimstad ivargrimstad
0
780
ニーリーQAのこれまでとこれから
Avatar for Nealle nealle
2
160
サービスレベルを管理してアジャイルを加速しよう！！ / slm-accelerate-agility
Avatar for TomoyaKitaura tomoyakitaura
1
200

Featured

See All Featured
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
13k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
6
530
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
45
9.5k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
693
190k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
61k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
780
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.7k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
53
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
32
5.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]