Minimalistic HTML rendering

andywer commented 8 years ago

The subject

For very small scripts on small, straight-forward pages I would like to have a modern rendering solution. Preferably using ES6 template strings and small in size.

Would be really cool if it supported partial DOM updates (like React, so if I render a template twice and the 2nd time just one attribute of an element changes then only this attribute should be updated rather than deleting the DOM nodes and recreating everything from scratch). Like so:

import { html, mount } from 'minimalistic-rendering-thing'

const buttonLabel = 'click me'
const buttonType = 'submit'
const items = [ { label: 'Item 1' }, { label: 'Item 2' } ]

mount(html`
  <ul>
    ${items.map(item => html`<li>${item.label}</li>`)}
  </ul>
  <button type=${buttonType}>${buttonLabel}</button>
`, document.querySelector('.render-me'))

What got me thinking

From time to time I need to write very small web pages which require pretty dynamic functionality. I use Babel and Browserify or Webpack to compile the assets and in the code I use plain ES6 classes to write some small components to contain the code for dynamic rendering / manipulating DOM stuff.

Usual frontend rendering frameworks like React or Angular seem much to heavy for the very small stuff to me. I like to keep the small stuff small.

Would really like to have a cool solution to this topic for https://github.com/postcss/postcss-plugin-suggestion-box/issues/3.

Open questions

Is there such a thing yet? I would like to use it!
If not: How do you like my proposal?

Any input would be very much appreciated! :)

stoeffel commented 8 years ago

I think t7 solves this right? Or, do you have some features in mind that t7 doesn't over?

andywer commented 8 years ago

@stoeffel Yeah, I think t7 works for now! It would be nice to have

DOM diffs for partial updating
ES6 modules, so unused features don't get into the bundle (=> tree shaking)

But I think it's fine for now and it would make more sense to extend t7 instead of re-inventing the wheel :)

Thanks for the tip!

stoeffel commented 8 years ago

always glad to a of help 😃

andywer commented 8 years ago

I tried to use t7, but it actually is quite a bitch when it comes to bundling...

But I found something even cooler! FYI: https://github.com/substack/hyperx

stoeffel commented 8 years ago

oh yes, totally forgot about that. On May 4, 2016 17:47, "Andy Wermke" notifications@github.com wrote:

I tried to use t7, but it actually is quite a bitch when it comes to bundling...

But I found something even cooler! FYI: https://github.com/substack/hyperx

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/andywer/ideabox/issues/1#issuecomment-216908066

andywer / ideabox