4 ms·

Handlebars templates have a runtime dependency (even when precompiled). Svelte does not. Also, a precompiled Handlebars template is just a function for outputt

Handlebars templates have a runtime dependency (even when precompiled). Svelte does not. Also, a precompiled Handlebars template is just a function for outputting an HTML string (with a runtime dependency). By comparison, the compiled Svelte output is a dependency-free JavaScript module for a dynamic view, which knows how (and when) to granularly update the browser DOM in response to state changes. It's unprecedented. Check out the output from this SVG Clock demo: https://svelte.technology/repl/?gist=44e20b4e0224617d228e3c38c119ee76 https://svelte.technology/repl/?gist=44e20b4e0224617d228e3c3...

majewsky 10y ago
Tried to click the link, but the REPL is apparently so advanced that it won't even display the source code in Firefox.
- rich_harris 10y ago
  The Svelte compiler uses some ES2015 features (for...of, etc) that aren't currently supported in all browsers. It's designed primarily for use in Node.
  - theasker 10y ago
    Also doesn't work on Safari 9. Why not transpile the Svelte compiler to ES5 so it will run on all browsers? Otherwise devs may get the impression Svelte generated applications will not work on all browsers.
    - majewsky 10y ago
      Exactly. My main gripe is that it won't even display the source code. I would be okay with the execution part of the REPL not working, but this just creates the impression that Svelte literally cannot display a block of text without ES6.
      - theasker 10y ago
        I don't want to be too harsh on the Svelte author. It's a minor inconvenience. The guy did some incredible work - he wrote all of this code in a week. I'll look at the REPL code to see if there's a simple fix. All the levels of indirection, code generation and bundling may take a while for my non-Rich-Harris brain to sort out.
ricardobeat 10y ago
"Please open this page in a larger screen!"
bryanlarsen 10y ago
Svelte has a runtime dependency too, it's just bundled into the output. Everytime I've used handlebars I've bundled the runtime into my final application file. But I do it myself so it only gets bundled once rather than N times like it would be for svelte.
- ricardobeat 10y ago
  See the `update` method in the output of the Hello World example: update () { text1.data = root.name } This is the entire DOM manipulation code for this component. There is no runtime library. The trick here is that the generated code is aware of exactly what DOM updates are needed. Instead of a large, general-purpose reconciliator like React's, you have specialized code for changing the DOM, generated from your templates.

majewsky 10y ago

Tried to click the link, but the REPL is apparently so advanced that it won't even display the source code in Firefox.

rich_harris 10y ago
The Svelte compiler uses some ES2015 features (for...of, etc) that aren't currently supported in all browsers. It's designed primarily for use in Node.
- theasker 10y ago
  Also doesn't work on Safari 9. Why not transpile the Svelte compiler to ES5 so it will run on all browsers? Otherwise devs may get the impression Svelte generated applications will not work on all browsers.
  - majewsky 10y ago
    Exactly. My main gripe is that it won't even display the source code. I would be okay with the execution part of the REPL not working, but this just creates the impression that Svelte literally cannot display a block of text without ES6.
    - theasker 10y ago
      I don't want to be too harsh on the Svelte author. It's a minor inconvenience. The guy did some incredible work - he wrote all of this code in a week. I'll look at the REPL code to see if there's a simple fix. All the levels of indirection, code generation and bundling may take a while for my non-Rich-Harris brain to sort out.

ricardobeat 10y ago

"Please open this page in a larger screen!"

bryanlarsen 10y ago

Svelte has a runtime dependency too, it's just bundled into the output. Everytime I've used handlebars I've bundled the runtime into my final application file. But I do it myself so it only gets bundled once rather than N times like it would be for svelte.

ricardobeat 10y ago
See the `update` method in the output of the Hello World example: update () { text1.data = root.name } This is the entire DOM manipulation code for this component. There is no runtime library. The trick here is that the generated code is aware of exactly what DOM updates are needed. Instead of a large, general-purpose reconciliator like React's, you have specialized code for changing the DOM, generated from your templates.