5 ms·

Imba includes syntax for tags (scroll down to "Tags"), virtual DOM diffing, event handling (with touch support). Yes, React is not a language in itself, but the

by judofyr 11y ago

Imba includes syntax for tags (scroll down to "Tags"), virtual DOM diffing, event handling (with touch support). Yes, React is not a language in itself, but there's quite big overlap in what Imba does and what React+JSX does. You build UI components like this: tag event < div def render <self> <h1> event.title <p> "Happening on {event.dateString}"

shadowmint 11y ago
No. Read what I wrote again. You just wrote a template. That's like JSX. You ALSO need a library to do the virtaul dom stuff and/or data binding to write an application. React. !=. JSX. What you have here is a programming language that compiles to javascript and has an inbuilt templating language. So does ES6; `${hi}`. That's a fundamental building block, not a replacement for a high level framework, like react.
- mintplant 11y ago
  I can only conclude that you're so focused on aggressively dismissing this person's work, in the typical HN fashion, that you didn't actually read the comment you responded to, or any of their other responses throughout this thread. You say: >You ALSO need a library to do the virtaul dom stuff and/or data binding to write an application. OP says: >Imba includes syntax for tags (scroll down to "Tags"), virtual DOM diffing, event handling (with touch support). >Although Imba was started before React it should be noted that it didn't include virtual diffing until React showed that it worked.
  - chc 11y ago
    judofyr's comment that you're quoting was posted after shadowmint's.
    - coldtea 11y ago
      TFA however, which has examples of that stuff, was posted before shadowmint's. If he was unsure about what he saw in those examples, then he could always refrain from pissing on the project until he had more information.
    - mintplant 11y ago
      The second quote, maybe, but the first comes directly from the comment shadowmint is responding to here.
      - shadowmint 11y ago
        Its great how you can edit comments isn't it? Both quotes were edited. Still... I suppose that my original post remains the top here says something. Cant reedit something with no parent. too bad. ;)
    - girvo 11y ago
      Sure, but it's in the damned article.
- coldtea 11y ago
  Please RTFA.
findjashua 11y ago
just so i understand this correctly - you also handle diffing & patching the virtual dom? If so, a few questions: 1. how much of the speedup is due to replacing JSX, and how much due to replacing the diffing algorithm. 2. how do you improve on the diffing speed, is it due to immutable data structures underneath, or something? 3. do you also provide mount/unmount hooks for the components?
tobr 11y ago
Any plans for SVG support? I'm getting errors when using <svg>, but maybe there's some way to make it work?
creamyhorror 11y ago
I find the structure of an Imba app rather intriguing; the view+rendering (i.e. tags) almost looks like an upgraded HTML/HAML (possibly akin to EnyoJS). http://imba.io/#/examples/todomvc/app.imba http://imba.io/#/examples/todomvc/app.imba (this annotated app is illuminating, and ought to be put upfront on your site if possible) The methods are clean and readable: tag #app def dirty persist render def add title if title.trim TodoList.push(TodoItem.new(title.trim)) dirty self And the view+rendering (literally the whole "upgraded-HTML" of the app) is so compact: def render var all = TodoList var active = all.filter do |todo| !todo.completed var done = all.filter do |todo| todo.completed var items = {'#/completed': done, '#/active': active}[hash] or all <self> <header.header> <h1> "todos" <new-todo-input.new-todo type='text' placeholder='What needs to be done?'> if all:length > 0 <section.main> <input.toggle-all type='checkbox' :change='toggleAll'> <ul.todo-list> for todo in items <li[todo]@{todo.id} .completed=(todo.completed) .editing=(todo.editing) > <div.view> <label :dblclick=['edit',todo]> todo.title <input.toggle type='checkbox' :change=['toggle',todo] checked=(todo.completed)> <button.destroy :tap=['drop',todo]> <edit-todo[todo].edit type='text'> ($$(.todoapp) or $$(body)).append #app I'd enjoy being able to code a SPA like this, I think - nice work! If something this clean is already possible in some other language/framework/library, I'd love to hear about it (since I haven't been following recent JS developments closely). edit: @judofyr, the Scroller example app doesn't work for me on Firefox 40.0.2 on Win 8. It works in Chrome.
- gosukiwi 11y ago
  How does it handle data binding?
  - creamyhorror 11y ago
    It looks similar to React's one-way data flow - that render method produces the whole app view, and refers to all the necessary variables. When an event occurs [e.g. the user types text to add and hits enter]: - the appropriate method is called [e.g. add] - which mutates the state [e.g. TodoList.push(TodoItem.new(title.trim))] - and then render is called, which updates the view/DOM So in a sense it's not really data-binding, IMO - instead, the render method contains the entire view + view logic, and it gets called each time the state is changed.

by judofyr 11y ago

shadowmint 11y ago

No. Read what I wrote again. You just wrote a template. That's like JSX. You ALSO need a library to do the virtaul dom stuff and/or data binding to write an application. React. !=. JSX. What you have here is a programming language that compiles to javascript and has an inbuilt templating language. So does ES6; `${hi}`. That's a fundamental building block, not a replacement for a high level framework, like react.

mintplant 11y ago
I can only conclude that you're so focused on aggressively dismissing this person's work, in the typical HN fashion, that you didn't actually read the comment you responded to, or any of their other responses throughout this thread. You say: >You ALSO need a library to do the virtaul dom stuff and/or data binding to write an application. OP says: >Imba includes syntax for tags (scroll down to "Tags"), virtual DOM diffing, event handling (with touch support). >Although Imba was started before React it should be noted that it didn't include virtual diffing until React showed that it worked.
- chc 11y ago
  judofyr's comment that you're quoting was posted after shadowmint's.
  - coldtea 11y ago
    TFA however, which has examples of that stuff, was posted before shadowmint's. If he was unsure about what he saw in those examples, then he could always refrain from pissing on the project until he had more information.
  - mintplant 11y ago
    The second quote, maybe, but the first comes directly from the comment shadowmint is responding to here.
    - shadowmint 11y ago
      Its great how you can edit comments isn't it? Both quotes were edited. Still... I suppose that my original post remains the top here says something. Cant reedit something with no parent. too bad. ;)
  - girvo 11y ago
    Sure, but it's in the damned article.
coldtea 11y ago
Please RTFA.

findjashua 11y ago

just so i understand this correctly - you also handle diffing & patching the virtual dom? If so, a few questions: 1. how much of the speedup is due to replacing JSX, and how much due to replacing the diffing algorithm. 2. how do you improve on the diffing speed, is it due to immutable data structures underneath, or something? 3. do you also provide mount/unmount hooks for the components?

tobr 11y ago

Any plans for SVG support? I'm getting errors when using <svg>, but maybe there's some way to make it work?

creamyhorror 11y ago

I find the structure of an Imba app rather intriguing; the view+rendering (i.e. tags) almost looks like an upgraded HTML/HAML (possibly akin to EnyoJS). http://imba.io/#/examples/todomvc/app.imba http://imba.io/#/examples/todomvc/app.imba (this annotated app is illuminating, and ought to be put upfront on your site if possible) The methods are clean and readable: tag #app def dirty persist render def add title if title.trim TodoList.push(TodoItem.new(title.trim)) dirty self And the view+rendering (literally the whole "upgraded-HTML" of the app) is so compact: def render var all = TodoList var active = all.filter do |todo| !todo.completed var done = all.filter do |todo| todo.completed var items = {'#/completed': done, '#/active': active}[hash] or all <self> <header.header> <h1> "todos" <new-todo-input.new-todo type='text' placeholder='What needs to be done?'> if all:length > 0 <section.main> <input.toggle-all type='checkbox' :change='toggleAll'> <ul.todo-list> for todo in items <li[todo]@{todo.id} .completed=(todo.completed) .editing=(todo.editing) > <div.view> <label :dblclick=['edit',todo]> todo.title <input.toggle type='checkbox' :change=['toggle',todo] checked=(todo.completed)> <button.destroy :tap=['drop',todo]> <edit-todo[todo].edit type='text'> ($$(.todoapp) or $$(body)).append #app I'd enjoy being able to code a SPA like this, I think - nice work! If something this clean is already possible in some other language/framework/library, I'd love to hear about it (since I haven't been following recent JS developments closely). edit: @judofyr, the Scroller example app doesn't work for me on Firefox 40.0.2 on Win 8. It works in Chrome.

gosukiwi 11y ago
How does it handle data binding?
- creamyhorror 11y ago
  It looks similar to React's one-way data flow - that render method produces the whole app view, and refers to all the necessary variables. When an event occurs [e.g. the user types text to add and hits enter]: - the appropriate method is called [e.g. add] - which mutates the state [e.g. TodoList.push(TodoItem.new(title.trim))] - and then render is called, which updates the view/DOM So in a sense it's not really data-binding, IMO - instead, the render method contains the entire view + view logic, and it gets called each time the state is changed.