Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Emails and PDFs with React

Building Emails and PDFs with React

Did you ever need to generate PDFs or e-mails? Was it fun? I guess not. Maybe the solution is in the tools you are already using. Taking advantage of React server-side rendering you can make the process less painful and the code easier to maintain.

We will be discussing the complexities of building emails and PDFs as well as going through two real case studies to explain how we managed to ship these functionalities.

TLDR; React components benefits can be used outside a typical web application. "Good enough" is fine. Ship it!

OUTLINE:

Emails:
- Problems: text-only emails, consistency, tables.
- Idea: SSR with the benefits of components
- Case study: Séntisis emails
- Using components to remove complexities
- Demo repo and how to use it
- Behind the scenes

PDFs:
- Problems: complexity, styling
- Initial idea: SSR using components + wkhtmltopdf
- Case study: Séntisis reports
- Demo repo and how to use it
- Doing it better: using a headless browser
- Conclusion and with an ending "Dancing Hopper" GIF

Fernando Agüero

November 22, 2017
Tweet

More Decks by Fernando Agüero

Other Decks in Programming

Transcript

  1. Multi-part_MIME Multi-part mime refers to sending both an HTML and

    TEXT part of an email message in a single email
  2. Components The Grid component handles the row and the cells

    to always generate a valid HTML table.
  3. Components Nested tables get complex and can lead to non-valid

    HTML, causing email parsers to break the layout.
  4. Components The Grid component can be used as a wrapper

    or by using its Cell and Row components.
  5. Components Once we are able to stop thinking about tables,

    we can move forward and continue creating our emails as a typical React application.
  6. Usage 1. npm install 2. npm run build 3. node

    example/weather.js 4. Enjoy your generated email
  7. npm run build Transpile our React code with Babel to

    get rid of the JSX and the ES6 imports
  8. Behind_the_scenes 1. Fetch weather API for the example 2. Create

    a React element with the API data by rendering it on the server
  9. Behind_the_scenes 3. Add styles and the React element in a

    placeholder 4. Return the generated HTML 5. Save or send the email
  10. Production Steps: • Create a new layout React component •

    Pass props to that layout • Send email
  11. Benefits 1. It’s a React app: same tooling, live reload

    2. Remove complexity with wrappers: <Grid /> 3. Ability write logic in the templates
  12. • Open Source command line tool • Renders HTML into

    PDF • Uses the Qt Webkit rendering engine • Headless (does not require a display service)
  13. Usage 1. npm install 2. npm run build 3. node

    example/invoice.js 4. Enjoy your generated PDF
  14. Behind_the_scenes 1. Build your components 2. Render the HTML on

    the server 3. Pass the HTML to wkhtmltopdf Similar to react-emails
  15. “Puppeteer only works with Chrome and it uses the latest

    version of Chromium. In non-testing use cases, Puppeteer provides a powerful but simple API because it’s only targeting one browser”
  16. “Puppeteer bundles Chromium to ensure that the latest features it

    uses are guaranteed to be available.” package.json
  17. Takeaways • React components benefits can be used outside a

    typical web application • “Good enough” is fine • Ship it
  18. Takeaways • React components benefits can be used outside a

    typical web application • “Good enough” is fine • Ship it