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?
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
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
edit: @judofyr, the Scroller example app doesn't work for me on Firefox 40.0.2 on Win 8. It works in Chrome.
- 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.
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.
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.
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.
Still... I suppose that my original post remains the top here says something. Cant reedit something with no parent. too bad. ;)
You build UI components like this: