$30 off During Our Annual Pro Sale. View Details »

Getting Lazy with Vue and PDFs

Ross Kaffenberger
January 16, 2019
Programming
2
1k

Getting Lazy with Vue and PDFs

I share the most important lessons learned while building a PDF Viewer in Vue.

Ross Kaffenberger

January 16, 2019
Tweet

More Decks by Ross Kaffenberger

See All by Ross Kaffenberger
A Webpack Survival Guide for Rails Developers
rossta
1
2k
What I look for in a Junior Developer
rossta
2
870
Progressive Web Apps on Rails
rossta
0
2.1k
Enumerable's Ugly Cousin - GORUCO Microtalk
rossta
0
260
Enumerator - Enumerable's Ugly Cousin
rossta
1
380
Recurring Events with Montrose
rossta
3
1.5k
Enumerable - How I Fell in Love with Ruby
rossta
20
4.4k
Create and Deploy an Ember App in 5 Minutes
rossta
7
3.6k

Other Decks in Programming

See All in Programming
TypeScript_コンパイラの内側に片足を入れる
ryounasso
1
220
アーキテクチャ刷新の現場 / Scene of architectural renewal
nrslib
6
930
Scala Left Fold Parallelisation - Three Approaches
philipschwarz
PRO
0
280
JavaScript なしで動作するモダンなコードの書き方
azukiazusa1
14
9.7k
GoにおけるCall Graphを用いた 大規模コードベースの影響調査
ffjlabo
0
270
ユーザー登録とログインフォームにautocomplete属性を使いましょう
ivanova1991
2
1.7k
Comment choisir les « bons » composants open source ? (Capitole du Libre 2023)
pylapp
0
110
エンジニアもUIを作るならユーザーについて知ろう！
ohakutsu
1
120
ポイントサービス設計の異常な挑戦 または我々は如何にして心配するのを止めてドメイン駆動設計を愛するようになったか - NIFTY Tech Day 2023
niftycorp
0
130
Python機械学習勉強会in新潟のロゴが無いので、生成AIで作ってみましょう / osc2023niigata
kasacchiful
0
220
カスタマーサポートの信頼性向上 〜社内ツールにおけるSRE活動〜 - NIFTY Tech Day 2023
niftycorp
0
120
壓力測試大冒險：解鎖應用程式的隱藏性能之謎
marcustung
0
140

Featured

See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Fireside Chat
paigeccino
18
2.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
352
21k
It's Worth the Effort
3n
180
27k
Reflections from 52 weeks, 52 projects
jeffersonlam
342
19k
Building Flexible Design Systems
yeseniaperezcruz
317
36k
[RailsConf 2023] Rails as a piece of cake
palkan
17
3.2k
The Web Native Designer (August 2011)
paulrobertlloyd
78
2.7k
Producing Creativity
orderedlist
PRO
335
38k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
500
140k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
177
10k

Transcript

  1. Ross Kaffenberger
    @rossta
    Getting Lazy
    with Vue and PDFs

    View Slide

  2. Ross Kaffenberger
    @rossta
    Building a
    PDF Vue-er

    View Slide

  3. #dadjokes

    View Slide

  4. View Slide

  5. • ross kaffenberger @rossta

    View Slide

  6. rossta.net/vue-pdfjs-demo

    View Slide

  7. View Slide

  8. PDF.js fetching

    View Slide

  9. View Slide

  10. PDF.js rendering

    View Slide

  11. View Slide

  12. PDF.js in Vue

    View Slide

  13. View Slide

  14. View Slide

  15. Problem: Large PDFs

    View Slide

  16. •Lazy render: draw to
    canvas when visible
    •“Infinite” scroll: fetch
    pages in batches

    View Slide

  17. Iteration #1: Math!

    View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. Problem: Vue cannot
    watch $el properties

    View Slide

  27. Manual work

    View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. Next iteration:

    View Slide

  33. IntersectionObserver!

    View Slide

  34. View Slide

  35. View Slide

  36. Advantages

    View Slide

  37. •no $el property tracking
    •less code, fewer bugs
    •easier to extend

    View Slide

  38. Akryum/vue-observe-visibility

    View Slide

  39. Lesson:
    Opt for Vue-friendliness

    View Slide

  40. View Slide

  41. Lesson:
    Be curious and flexible

    View Slide

  42. rossta/vue-pdfjs-demo

    View Slide

  43. @rossta
    rossta.net/talks
    [email protected]

    View Slide