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

Getting Lazy with Vue and PDFs

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

Other Decks in Programming

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