Write a Chapter: "Front End UI Libraries"

[gvn]

We need to codify best practices for writing UI components that are reusable across all our codebases and stack variants.

[gvn]

Initial thoughts:

• Reduce dependencies as much as possible (especially on large libraries such as Angular). Every front end dependency adds weight to the consuming application.
• Use vanilla DOM. jQuery is great for app specific code, but for libraries you should avoid it.
• Register libraries with npm (Bower is nice too if you're making a non-Webmaker ecosystem specific library...)
• Register libraries with a standard prefix/namespace (mofo-?) to avoid polluting npm/Bower.

[gvn]

Would love to hear thoughts from @gesa and @k88hudson

[jbuck]

After doing login 3 times I honestly think it's a goddamned fool's errand.

The problem basically boils down to CSS. It's a big global variable that each potential consumer of your UI blob modifies. If you're using the same CSS base in every consumer then you might have a chance to make it work the first time you implement it. Otherwise it's a shitshow.

If we're going to write UI blobs that we expect to work across platforms then we need to write them in one of two ways: 1) a completely hostile environment, where we inline every single style with !important or something equally ridiculous 2) a completely clean environment, aka an iframe. this will probably have mobile issues though.

[gvn]

I have done CSS "namespacing" in the past where everything for a component's CSS is nested under a wrapper ID (eg: #webmaker-login .thing). It's not a perfect solution, but it does keep collisions down...

[gesa]

I'm a strong supporter of namespacing css with a wrapper ID

[gvn]

Also, I do think that if we wrote login with vanilla DOM instead of the Angular+Shim approach we'd be in a far better place. What we have now is a serious maintenance problem and we should try our best to avoid ever getting into that situation again.