Use react as a full view library

[rogierslag]

When I came across this library I immediately thought of another project we did before (gennie) which defers the generation of pdf documents to another service. We'd like to do the same with email.

Since React is already a state of the art view library, it makes sense to add all the view stuff to react and let it render server side. The HTML can then be returned to the client.

There are a few issues though:

1. Some methods are not importable, since they are never exports. Some internals could be exposed as e.g. helpers
2. There is some weird magic with attributes and defaultAttributes. Im currently unable to render white text since it will always revert to black (even though its defined in the props)
3. Rendering of string content is annoying (PR already submitted)

I might try to address some of these myself, but I just wanted to give you a heads up on this ;)

P.S. Project is located @ inventid/mannie

[arnaudbreton]

Thanks @rogierslag for the heads up. Glad to help where we can on that! I'm not deep in React but I'm sure @iRyusa @robink and @lohek could help!

[seanconnollydev]

I am 100% on board with this. It would be much easier to compose components and add logic that would otherwise need to be handled with handlebars or some other parser. Creating custom components would (should) be easier as well because it removes the need for all the boiler plate that presently exists.

[iRyusa]

Hey @rogierslag,

With the 1.3 MJML can be used either server-side or client-side thanks to @lohek 's work on this.

1. We're ok to open the internal API of MJML but we need to understand what you want to do with it. Feel free to open a PR so we can discuss it.
2. I guess this is a weird bug with parentColor that has been removed in 1.3: see #105 for more informations.
3. Already merged and will ship with 1.3 too! We can't use plain React for MJML because of some attributes or markup that React doesn't support that well. So that's why cheerio (jquery now on browser) becomes handy.

I hope I answered your questions!

[rogierslag]

What we'd like to achieve is similar to the project at https://github.com/inventid/gennie. Here one can simply define templates using HTML. At the start of the application, a server is started to which you can POST data. The server will get the template, enter the posted data, and return a full PDF. This avoids having that logic in our inner applications.

We'd like to do the same here:

1. Define a react template (we currently use HTML + rivets but truth be told: we want to ditch that a lot)
2. Listen to a HTTP POST, pass the body (the JSON) as a prop to the template
3. Render the template to static HTML
4. Pass the MJML internals over it
5. Return the resulting HTML to the requester, which can directly create an HTML email from it

Advantages would be that:

1. We can effectively reuse components of our frontend React stack in our emails
2. All of our developers can start to create beautiful email, not just the ones which happen to know how HTML was done in 1995
3. We extract the logic as well from the inner applications, so they can just request an HTML representation based on a template name and some JSON

By running it as a service we mostly gain less coupling between the applications and mjml itself. We do not need to have mjml installed everywhere, we do not need to deploy our templates everywhere. Instead there is one authorative service which handles all of this.

TLDR: I think this project is excellent to start building something like this! :+1:

[seanconnollydev]

@rogierslag, I recently spun up a small node service very similar to the one you are describing. We're using MJML to abstract away all of the convoluted HTML that you would normally need to write and handlebars for variable expressions, conditionals, iterators and the like. It works fairly well, but the process of creating reusable MJML components is still too cumbersome in my opinion. There is a lot of boilerplate and wire up that is not obvious to understand. What I would like to see is an alternative method for rendering MJML from a React component. Something like:

const htmlOutput = mjml.react2html(MyComponent(props));

// where MyComponent might look like:

import React from "react"; import {MjText} from "mjml";

export default class MyComponent extends React.Component{ render(){ return (

{this.props.myText}

);

}

[rogierslag]

That would be insanely awesome indeed! Do you happen to have the service somewhere on Github? I'd :heart: to take a look

[arnaudbreton]

Hi @rogierslag @sconno05 could you please reach out me at dev@mailjet.com? I may have a solution for you.

Best.

[gad2103]

any movement on this? this is a show stopper for me too.

[rogierslag]

we have built a prototype on https://github.com/inventid/mails

It's not considered production ready yet, but deems to already be doing the job very well!

[LoicMahieu]

Hi Really interested by the idea! I think mjml is really great but is missing of "templating" feature. React could do the job:

return (
  <mj-invoice format="0,00.00€" intl="name:Product Name">
    {items.map(item => (
      <mj-invoice-item {...item} />
    ))}
  </mj-invoice>
)

@rogierslag Repository not found. Do you have a new url ? I'll be happy to contribute.

[ngarnier]

Hey guys,

While we see the point of such a feature, we don't think it is the role of MJML to support templating. There are mature templating languages out there that can be used with MJML and will actually do the work better. MJML's primary objective is to abstract the complexity of email HTML, not to support any logic (as HTML doesn't either).

Hopes that makes sense to you!

PS: @LoicMahieu, I think the repo from @rogierslag's you're looking for is here: https://github.com/inventid/mannie

[rogierslag]

We have a stable version available on https://github.com/joostverdoorn/maily. It includes examples.

I agree MJML shouldnt handle the templating. The great thing about React is that its scope is limited, so we can use these libraries in combination with each other. Templating can be done outside of react

[rogierslag]

We have moved the library to https://github.com/inventid/maily and have it running in production successfully for months now. Thanks for the awesome job!

[ngarnier]

hey @rogierslag, awesome, thanks for the update :-).

We'll actually release soon a community page to feature cool contributions/tools built by the community and Maily is definitely on the page! We'll also feature a few companies using MJML and would love to feature Inventid, please send me an email at ngarnier@mailjet.com if you want to be part of this 😺