Comment by jondubois | Hacker News Reader

Comment by jondubois | Hacker News Reader

Parent Full thread

I heard about SkateJS a long time ago. It looks like it has kept evolving. Reading the docs now, it looks very, very similar to Google's Polymer framework.

Polymer is even mentioned here https://github.com/skatejs/skatejs#vs-polymer but the comparison appears to be partially out of date - Like SkateJS, Polymer only updates the elements which changed - Even when rendering lists; it won't re-render the entire list if only one element changed.

It seems the main benefits over Polymer are customizable template languages and support for more different package managers...

I really like how every component in Polymer is essentially an HTML template with its own sub-DOM. I also like the way Polymer lets you specify dependencies in components as <link rel="import" href="..."> tags.

Polymer is like the inverse of React; React components are source files with template markup embedded inside them while Polymer components are template markup files with source code embedded inside them. I find Polymer's approach cleaner and more readable because all the source code is concentrated in one place. I don't know what the equivalent is for SkateJS...

Yeah, the comparisons need updating. I'd prefer not to have them because you're then subject to keeping your README up to date with everyone you compare to but some people have asked for them. I'm torn.

That said, yes, Polymer does only change the parts of the DOM that need updating but there's still a fundamental difference in that Skate re-renders using a virtual DOM whereas Polymer keeps track of the elements that need updating and uses observables. Observables require you specify how they should behave depending on how you expect them to be set. Even so, sometimes you have to manually trigger them to update in order for your component to update. Skate relies on the same principle React does: you update a property, you re-render. The major difference here being that Skate checks references by default in updated() (like shouldComponentUpdate()) thus only re-rendering if necessary.

As jpnelson mentioned, Skate is more React-like than Polymer-like in its API, but it's still not 1:1 due to the specs. Some things like componentWillMount() don't translate because connectedCallback() is fired after the element is connected to the document. They're all different libraries; direct comparisons are hard.

FWIW, I'm not trying to downplay other libraries, either. Polymer is a great library and a major source of inspiration, just like React is.

I was commenting like how this looked like Polymer and then saw this.

I like Polymer, but it's not as popular as (i think) it should be.

Html & Javascript files are only loaded inside the component, and once they are loaded they sttay in it's "dom". So it doesn't mean, everything is loaded at once.

I think https://poly-mail.appspot.com/ is a nice example of a Polymer app ( email and login with Google fyi)

We've been communicating with them pretty closely actually! We're aiming to use the same polyfills so that the community can share the benefits of that.

With the imports it's a slightly different paradigm – in the way that you put it, Skate is more similar to React's approach where the template is embedded in the source.

Someone has made this more idiomatic to the spec: https://github.com/tmpfs/trucks. FWIW, we are looking at decoupling Incremental DOM in a way where custom renderers can be created, so one could create a <template /> renderer.

It's not immediately obvious, but you could create a custom element with Skate that takes it's content and creates a new custom element definition from it, similar to how Polymer 1 worked. This approach was discussed as being implemented in custom elements v2, but is closed to see what frameworks come up with: https://github.com/w3c/webcomponents/issues/136. This is totally something that could be done with Skate, though.

This looks interesting.

I'm currently using the component support in Knockout which looks pretty similar in function.

    ko.components.register('my-widget', {
        viewModel: require('../../components/my-widget/my-widget'),
        template: require('fs').readFileSync(__dirname + '/../../components/my-widget/my-widget.html', 'utf8')
    });

This then allows me to use <my-widget></my-widget> in the HTML, params can be passed down with params="{someObject}".

It's a very different way of building applications but I like it, makes for clean markup and seperation of concerns.

I generally like the approach but long term I'm not sure about the future of KO, this looks like it offers very similar functionality in a more compatible way, also I love your documentation, it's thorough and clear!.

Reply on news.ycombinator.com