search

skyglobal / web-toolkit

[DEPRECATED] Please use sky-uk/toolkit
https://github.com/sky-uk/toolkit
BSD 3-Clause "New" or "Revised" License
24 stars 35 forks source link

Provide templates for rendering components in applications #178

Open charypar opened 10 years ago

charypar commented 10 years ago

It would be quite nice to have for each component a template in some language supporting both front-end and back-end rendering (like Jade or Handlebars).

The rationale behind the idea would be that the toolkit is used in dynamically generated pages, that are built either on the server or in the browser by javascript and the developers are forced to write the HTML to follow the toolkit's structure. Instead they could import the template and only pass in the data they want to render (like the contents of an accordion, or video ID, image source URLs, etc...).

That way when/if the toolkit changes the HTML for any reason, the templates in applications get updated with the toolkit version.

It means having a slightly different distribution available, or rather having the templates as a separate build output.

Toolkit itself could also use the templates for the various places that render the components (on the site, in test files...).

What do you think?

bjfletcher commented 10 years ago

Hey @charypar :) be interested to see good examples of this practice - esp with popular web frontend UI toolkits.

charypar commented 10 years ago

I'll definitely look for some examples. I'm only really familiar with Twitter bootstrap which doesn't do this. I'll report back with my findings :)

charypar commented 10 years ago

Whew. So I looked at about 30 different projects fitting into the category of CSS/UI frameworks and surprisingly NONE of them does it, although MOST of them have extensive documentation showing, sometimes vast (e.g. http://ink.sapo.pt/ui-elements/), HTML fragments you basically need to copy and paste to your code.

YUI uses moustache templates internally for some UI components (like the calendar picker). I also found an interesting project - http://semantic-ui.com - which avoids the problem in a nice way by letting you use any tags and only doing all the magic with clases. The structure of the markup is still given though, so it's not completely solved.

One perfect example where I feel the need for templates the most is a paginator component most frameworks have. That is almost exclusively generated dynamically, it has a fairly complex logic and minimal inputs (current page and total pages). The way you'd use it, would then be (exampe in ruby)

render_template 'paginator', pages: 15, current: 4, context: 5

I think this is something every single developer using the component does anyway. Similarly for something like tab control

render_template 'tabs', items: [{label: 'First tab!', content: '<h1>First Pane</h1><p>Some content</p>'}, ...]

And if the markup should change, you'd have an added benefit of not having to do anything.

To be absolutely clear, I don't advocate getting rid of plain HTML snippets. Definitely not, that should stay as it is, but the various docs and tests and all could be generated from a single source template