How to create PDF editor with NodeJS and React in 6 weeks
One of our clients asked me about the possibility to create a tool for salespeople to help them to create brochures, catalogs, and other printed materials. The idea was quite simple. Create a template with placeholders and allow users to fill placeholders with images, text logos, etc. The solution was required to be implemented as a Web application accessible from tablets and desktops.
My first estimate was about a month of work for one developer plus some QA, management, and deployment/delivery activities. My developers as usual told me that I’m a dreamer, and we will have issues with PDF and typography printers for sure and need much more time. But finally, we found that I was right.
Our goal was to create a PDF on the server based on the template. Thus, we had two modules: a template-based editor to allow the user to fill the template and a template renderer to produce PDF.
As far as its web application, the only way was to implement an editor with HTML/JS. On the server side, we were free of any limitations and were able to use any technology. There are a lot of different templating solutions for PDF, but I felt that we will have significant problems with the preview of printed material in the browser and how it will be actually rendered to PDF and printed. After a short discussion, we decided to use ReactJS to build our own templating engine and editor. There were several reasons for this:
1. The editor was quite simple, but with some very specific requirements. There were no editors which exactly meet our requirements, and customization was estimated as more expensive than custom development from scratch.
2. With ReactJS we can use the same code base for generating HTML/CSS versions of printed material on the server and client. One of the most amazing features of ReactJS is a possibility to render HTML on the server (with NodeJS) side with exactly the same code. It helped us many times when clients asked about SEO-related things at the end of the project.
As a result, we had a ReactJS component that ideally meets requirements and produces client preview and real material with exactly the same code on back-end and front-end.
The only thing we have to do was convert HTML to PDF on the server. One of the most popular or maybe the only one working good solution for HTML to PDF conversion is PhantomJS and the corresponding wrapper for NodeJS html-pdf.
All these technologies allowed us to build highly efficient solutions. Of course, there were some unpredictable issues with not enough RAM for huge documents, with the Phantomjs process that stuck, with RGB to CMYK conversion. But in general, we delivered working brochures editor with the first set of requirements (including user management, document library management, and many others) with one customizable template of printed materials tested and deployed to the client’s environment in 6 weeks. The only thing that allowed us to do it was the correct selection of technologies and a team of professional PM, BA, QA, and developers in Kvinivel.