NutritionScore Calculation Details HTML Template

[areeshatariq]

Description:
HTML Template has been created for Nutrition Score Calculation Details using Template::Toolkit
The template file is used for the presentation purpose only, while all the logic has been kept in /lib/ProductOpener/Display.pm

Related issues and discussion: #2416

[stephanegigandet]

Note for reviewers: @areeshatariq is working on using a template engine for the HTML code generated by Product Opener. Copying here Areeesha's message in #productopener on Slack:

"I've opened a Pull request on HTML Template of Nutrition Score Calculation Details. Started with Nutrition Score as it was a more independent module. We used Template::Toolkit for this. What do you think of the approach and how the template looks?"

[VaiTon]

Suggested change

	my $config = {
	my $config = {

Also, aren't these config we can use for every template? Can't we put them outside of the sub?

[CharlesNepote]

That's a VERY good start, thank you @areeshatariq!

The Template::Toolkit is not as usable as I would like, but it's a good enhancement.

PROs:

• I'm able to read the template and work on it easily (for example, I would like to add CSS classes or ids to some paragraphs)
• the template is/can be prettified for better readability and ease of use (indentation etc.)

CONs:

• Github doesn't provide syntax highlighting for the template

Questions:

• is it possible to insert comments in the template that won't be rendered in the HTML: I think it's very important to let back-end devs document some things
• is it possible to validate HTML code during the pull request workflow
• shouldn't we avoid conditionals IF-THEN-ELSE as much as we can: e.g.

  [% IF is_beverage %]
    <p> [% lang('nutriscore_is_beverage') %] </p>
  [% ELSE %]
    <p> [% lang('nutriscore_is_not_beverage') %] </p>
  [% END %]

shouldn't we compute a nutriscore_beverageness in the back-end?

[areeshatariq]

is it possible to insert comments in the template that won't be rendered in the HTML: I think it's very important to let back-end devs document some things

Yes we can insert comments that won't be rendered in the HTML

shouldn't we avoid conditionals IF-THEN-ELSE as much as we can: e.g.

  [% IF is_beverage %]
    <p> [% lang('nutriscore_is_beverage') %] </p>
  [% ELSE %]
    <p> [% lang('nutriscore_is_not_beverage') %] </p>
  [% END %]

shouldn't we compute a nutriscore_beverageness in the back-end?

Yes, we did try to avoid as many conditions as we can to make the template easier to understand. I'll add this If Else to the back-end. Thank you

[VaiTon]

Apart from the minor issues highlighted, very good job!

[stephanegigandet]

• shouldn't we avoid conditionals IF-THEN-ELSE as much as we can: e.g.

  [% IF is_beverage %]
    <p> [% lang('nutriscore_is_beverage') %] </p>
  [% ELSE %]
    <p> [% lang('nutriscore_is_not_beverage') %] </p>
  [% END %]

shouldn't we compute a nutriscore_beverageness in the back-end?

That's a very good question @CharlesNepote .

@areeshatariq changed it to:

[% beverage_view %]

It does make the template simpler, but we lost the connection to the string id in the .po file. That's another interesting question: should we try to put the calls to lang () to internationalize the strings in the template, or should we try to do all the calls to lang() in the Perl code.

The next statement is interesting too:

[% IF is_fat %]

[% lang('nutriscore_proteins_is_added_fat') %]

[% END %]

We need the if statement because we don't want the

to be generated in the Perl code.

We could to the call to lang() in Perl though, and pass the translated message directly, in the "is_fat" variable (instead of just passing 0 or 1).

[% IF is_fat %]

[% is_fat %]

[% END %]

[stephanegigandet]

CONs:

• Github doesn't provide syntax highlighting for the template

@CharlesNepote , @areeshatariq : there is a simple solution to that: rename the .tt file in .html :) (it's in the /templates/ directory so it's obvious it's a template).

I just tried it, we have HTML highlighting in github: https://github.com/openfoodfacts/openfoodfacts-server/blob/areesha-stephane-wip/templates/nutrition_score.html

and also in the text / code editors:

[Ban3]

I added github syntax highlighting as HTML for the templates (per suggestion from @stephanegigandet). If there's a better option than HTML, see here how to configure it.

[stephanegigandet]

I added github syntax highlighting as HTML for the templates (per suggestion from @stephanegigandet). If there's a better option than HTML, see here how to configure it.

Thanks @Ban3 . We probably will have templates for dynamically generated JS code as well (and possibly CSS). So I think the simplest thing is just to rename the template so that they have extension of what we are generating. /templates/nutriscore.html (instead of .tt)

[hangy]

We probably will have templates for dynamically generated JS code as well (and possibly CSS).

AFAIK, it is usually recommended to not create JS/CSS on-the-fly, but to use techniques like unobtrusive JS and to use selectors efficiently. 🙂

So I think the simplest thing is just to rename the template so that they have extension of what we are generating. /templates/nutriscore.html (instead of .tt)

The templates are not valid HTML/CSS/JS, so that working syntax highlighting basically depends on how forgiving the parser is. 🤷‍♂️