🎯 Web Components across Open Food Facts

[teolemon]

Candidates for WebComponents

• Webcomponent for tag editing (labels, categories, stores, origins, countries)
• Webcomponent for multilingual field editing (product_name, ingredients_text, packaging_text)
• Webcomponent for monolingual field editing (quantity, portion)

Done

• Mobile app promo: feat: add support for mobile badges openfoodfacts-explorer#357 (review)
• Donation campaign
• feat: Implement Knowledge Panels Component [ Initial Version ] #35

Issues related to web components across Open Food Facts

Hunger Games

• Expose and Use Webcomponents (and possibly openfoodfacts-nodejs)

OFF explorer

• Implement nutrition editing

Folksonomies

• Convert this folksonomy_frontend code to a WebComponent

Nutri-Patrol

• Integrate Nutri-Patrol, our new moderation tool https://github.com/openfoodfacts/nutripatrol

Search-A-Licious

• Add support for Search-A-Licious
• Investigate separating state from components in the web-components
• add a range facet component for few values (a, b, c…)

Knowledge panels for facets

• 🎯 What can I work on (Knowledge Panels for Facets)

[Kout95]

Ask me if you want to take task to avoid duplicates :)

[Kout95]

@teolemon Why you want to do that in webcomponent :

Create a Web Component mimicking the main website Footer
Create a Web Component mimicking the main website Header
Create a Web Component mimicking the main website Product list
Create a Web Component mimicking the main website Product card

[teolemon]

@Kout95 unsure if it's the right way technically, but visual consistency and not reinventing the wheel each time.

[Kout95]

@teolemon I believe web components are better suited for adding elements with logic. In our case, we have two main interests:

• Reusability
• The ability to easily implement JavaScript and templating in our legacy Perl server.

However, I am hesitant about implementing these elements as web components because:

• They will only be used on the server.
• They have almost no JavaScript.
• We cannot easily use CSS from libraries.
• Templating in Perl is powerful enough to handle many cases without reinventing the wheel.
• It adds more complexity to manage and customize than the benefits of abstracting JavaScript code from the MVC framework.