Evaluate a front-end JS templating library

alexgibson commented 5 years ago

Description

Bedrock pages don't have a whole lot of state to manage in general, but there are a few areas when we do often rely on conditional content. Sometimes these types of pages can be a challenge to code and make changes to, because critical logic is often split between templates (localized markup), CSS (state class hooks) and JavaScript (logic to trigger state).

These types of things could potentially be easier to code & reason about, if we used a lightweight, front-end templating library.

Example scenarios:

Page displays a different CTA to Firefox vs non-Firefox visitors (e.g. sticky headers).
Page display a different CTA if signed-in vs signed-out of Firefox Sync.
Page displays a different CTA depending on geo-location.
Page has some non-trivial logic and needs to reflect changes in the UI.

We should do an evaluation of:

if this makes sense for bedrock.
which (if any) libraries might be suitable for our needs.
which chosen library should we use as a standard.

Some notes:

It would need to be both lightweight & fast.
It would need to meet our browser support needs.
It would need to meet accessibility standards.
It would need to work with our L10n toolchain.

:yellow_heart: Success Criteria :yellow_heart:

[ ] A library is agreed upon by front-end engineers as being something both usable, desirable & performant.
[ ] An example of a page using chosen library is available to test in a branch / on demo.

:heavy_exclamation_mark: Risks :heavy_exclamation_mark:

[ ] Can have a learning curve.
[ ] Can have performance implications.

Tasks

[ ] Evaluate popular libraries.
[ ] Make a formal recommendation.
[ ] Publish a branch / demo as proof of concept.

hoosteeno commented 4 years ago

@amychurchwell do you think this issue is still likely to get attention in the current sprint?

amychurchwell commented 4 years ago

@hoosteeno was not planning to give this attention before the 22nd. Will begin work on this in the next sprint if that works.

ejregithub commented 4 years ago

Let's discuss a schedule for this.

alexgibson commented 4 years ago

@amychurchwell hi, is this something you're still working on? I can update the roadmap if you need more time on this. I'm curious if we reached a recommendation, as I can think of a few areas this might be useful for in the future.

amychurchwell commented 4 years ago

@alexgibson hi! yes, this got a little buried in the shuffle unfortunately. I can kick this back up tomorrow and get it in a place for discussion/recommendation so we can close it out. What other areas can you think of this being used for? It could affect the libraries/frameworks in the write up.

alexgibson commented 4 years ago

We have some upcoming tasks related to removing legacy jQuery code from pages. For example, the contact pages feature a mobile navigation menu that gets rendered using JS: https://github.com/mozilla/bedrock/issues/8383

amychurchwell commented 4 years ago

I'd like to finish this up after the work in https://github.com/mozilla/bedrock/pull/8391 is complete, if that works for the team?

alexgibson commented 3 years ago

This issue got a little old, so I'm going to close and file a fresh issue to revisit this work.

mozilla / bedrock