JSON-based record editing

😻 @crepererum

📅 2015-07-06

Deposit

JSON editor

⊕ auto-generated forms

⊕ only valid input

⊕ no worries about types

⊖ very verbose layout

⊖ horrible performance

1 record with ≈2300 authors

>30sec for rendering!

Slowness

Append to DOM

var target = document.getElementById('rendered');
for (var i = 0; i < data.length; ++i) {
    target.appendChild(generate(data[i]));
}

var target = document.getElementById('rendered');
var fragment = document.createDocumentFragment();
for (var i = 0; i < data.length; ++i) {
    fragement.appendChild(generate(data[i]));
}
target.appendChild(fragment);

Data handling

/* data.length === 1000 */
for (var i = 0, ii = data.length; i < ii; ++i) {
    listform.add(genHTML(data[i]));
    listform.revalidate();
}
/* listform.validate = function() {
    var json = listform.value();
    validator.execute(json);
} */

for (var i = 0, ii = data.length; i < ii; ++i) {
    listform.add(genHTML(data[i]));
}
listform.revalidate();

\text{O}(n^2)

\text{O}(n^2)

\text{O}(n)

\text{O}(n)

Iterate over array

for (var i = 0; i < data.length; ++i) {
    doWhatever(data[i]);
}

for (var i = 0, ii = data.length; i < ii; ++i) {
    doWhatever(data[i]);
}

Iterate over keys

for (var k in obj) {
    doWhatever(obj[k]);
}

var keys = Object.keys(obj);
for (var i = 0; i < keys.length; ++i) {
    doWhatever(obj[keys[i]);
}

for (var k in obj) {
    if (obj.hasOwnProperty(k) {
        doWhatever(obj[k]);
    }
}

JQuery queries

$('#mycell .field').each(function() {
    $(this).css('color', 'red');
}

var fields = document
    .getElementById('mycell')
    .getElementsByClassName('field');

for (var i = 0, ii = fields.length; i < ii; ++i) {
    fields[i].style.color = 'red';
}

JQuery element creation

var e = $('<div>');

var e = document.createElement('div');

Style handling

element.style.color = 'red';

element.className = 'alert';
// OR
element.classList.add('alert');

.alert {
    color: red;
}

// OR
.myform .alert {
    color: red;
}

// OR
.somerow > .alert {
    color: red;
}

// OR
input.alert {
    color: red;
}

Event Listeners

$(".author").bind("click", function () {
    alert(this.id);
})

var _f = function () {
    alert(this.id);
};
var _all = document.getElementsByClassName('author');
for (var _i = 0; _i < _all.length; ++_i) {
  _all[_i].addEventListener('click', _f.bind(_all[_i]));
}