Try to use jsx to create HTML about diff2html

[pbu88]

Hi! Been inactive for a while since I was on holidays :) I see a lot of activity around, very cool!

I strongly support the idea to move the html to a template, will make the code much cleaner. Do you have a particular library in mind? I quick googled jsx but didn't got immediate feedback on how to use it from node.js. For diffy I used Mozilla Nunjucks and I really liked it. It was very similar of template systems I've used before (Django templates, Jinja, etc) and very lightweight too. Can you share your thoughts? :)

Cheers

[rtfpessoa]

Hi @pbu88, I already worked a bit on it in branch react-jsx-html.
In that branch I already have a small html part that works both for the browser and for inclusion in other node plugins.

What I used was a mix of react and jsx. The idea of what I did was to write html, and then use the react html to jsx transpiler. In the end I am requesting the jsx to give me the html strings from the html written before.

With this combination, I can create reusable html components that are parameterized. Check here for more details.

Other resources:

• https://facebook.github.io/jsx/

Take a look and see what you think compared to Mozilla Nunjucks, I will try to look at Mozilla Nunjucks in the meantime.

[pbu88]

Interesting! Will take a look, thanks!

[pbu88]

Hi! I took a look at JSX and React. I think that that library is too huge and tries to accomplish a lot more than what we might need here, for example, is designed to keep the html and the data in javascript in sync (like other MVC frameworks in js) and a lot more, and using it just to create tiny html templates that don't need to keep sync with a javascript model is rather overkilling.

I think we need to separate/isolate the html, in a way that can be overridden or modified via config, but I think we can accomplish that with something simple. Take a look at #47, I moved them into their own methods with arguments and in my point if view it started to look a lot simpler and isolated.

Changing all our files for jsx and using react might be too much for what we need here.

What do you think? Merry christmas and happy new year btw :)

[rtfpessoa]

Regarding the PR I think it makes sense to separate the components and for that reason I already merged it.

Regarding the JSX + React, the idea is that I really hate to append strings to create the HTML, using the JSX transpiler and the React html generator we can have a better looking HTML without using the complexity of the react framework.

Do you have any other easier alternatives? I already looked into Mozilla Nunjucks but it is a complete templating language, and in the end we will need to separate the JS from the HTML. Using react we can mix it without making it too weird to write.

[pbu88]

Yeah, concatenating the strings is a real pain. I'm not sure on how to follow on this though. When I saw the branch this is being worked on I found it a bit intimidating to start dealing with .jsx files but that is just me, maybe is not a big issue.

Another option (to avoid concatenating) might be move the html string to a external file. Either with .html extension (more like a template approach) or to a .jsx extension .this way normal javascript files will be .js and the .jsx will be very clear that they are a template somehow. I'm just thinking out loud :)

[rtfpessoa]

@pbu88 I think the idea of the file templates could be interesting, it is always good to separate ui from, the code. My only concern is for it to not get more complex.

Can we do it with Mozilla Nunjucks?

We would need at least to have some templates and be able to include them inside each other (something like imports)

How is the integration of Mozilla Nunjucks with node?

Do you know any better alternative to do some experiences?

[pbu88]

The integration is very straight forward. I'll come up with a prototype and we can decide if we like it or not. I personally like the idea, at the end of the day what we have are embedded templates in code, so if we move it to its own template file it can add simplicity and a way to override them. I'll come up with something and we can discuss further.

[rtfpessoa]

Hogan.js was choosen for the HTML templating language.