🔥

Тред (Влад Шилов)


Продолжаю историю про PDF: Наступил 2018, у нас стало 1,8 млн юзеров и наш support был завален письмами от пользователей о том, что они заполнили резюме, глядя на превью, а потом скачали PDF, в котором контент по-другому "влезал" на страницы А4 и вообще число страниц другое. 👇 pic.twitter.com/hK2s1Ybrxh
Треды четверга. Тема: «Используем JS для рендеринга и live-превью PDF». Про проблемы с Puppeteer и большинством JS-библиотек для генерации PDF: twitter.com/jsunderhood/st…

PDFkit, PDFmake и jsPDF не подошли, так что мы решили потестировать проект React-PDF, за которым уже некоторое время наблюдали. По аналогии как, например, React-Native является рендерером для мобильных приложений, так React-PDF — react-рендерер для PDF. react-pdf.org pic.twitter.com/6B7a6qviAC
React-PDF. Краткий обзор: twitter.com/jsunderhood/st…

React-PDF хорош тем, что упрощает верстку сложных PDF-файлов, делая его максимально похожим на верстку HTML-страниц c использованием React. Только вместо HTML-тэгов вы используете компоненты, которые предоставляет сам React-PDF. Например, View вместо div и Text вместо span. pic.twitter.com/noE3Yj0Bbs
React-PDF. Что тут вместо HTML-тэгов. Как работает разделение на стрнаницы: twitter.com/jsunderhood/st…

В рендеринге сложных PDF-ок безусловно помогает то, что React-PDF работает именно на React, так как это дает возможность использовать различные функции облегчающие процесс разработки. Например, мы используем контексты и хуки для более легкой работы с переводами и данными. pic.twitter.com/W9xJly9bMV
React-PDF. Нужен ли тут вообще React: twitter.com/jsunderhood/st…

Хотя рендеринг в React-PDF, по сути, не имеет отношения к вебу и браузерам, стилизация там делается с помощью CSS, а значит учить отдельно ничего не надо. Причем поддерживается много свойств и, в целом, все работает почти так же, как в браузере. react-pdf.org/styling pic.twitter.com/uriwsub70E
React-PDF. Стилизация компонентов с помощью CSS: twitter.com/jsunderhood/st…

Без ложки дёгтя конечно никуда. Давайте расскажу про минусы React-PDF и про проблемы, с которыми столкнулись в процессе работы... 👇
React-PDF. Минусы: twitter.com/jsunderhood/st…

React-PDF у нас работает не только в браузере, но и в микросервисе. Мы собираем webpack-oм тот же самый код, импортируем его в serverless-функции и деплоим все это на Vercel. С марта 2019 микросервис делает по 300GB PDF-файлов в месяц и ни разу не "падал". pic.twitter.com/84cdgL9vKl
Серверный рендеринг: twitter.com/jsunderhood/st…