Na YouTube je k dispozici videozáznam z včerejšího Czech Open Source Policy Forum 2024.
Fossil (Wikipedie) byl vydán ve verzi 2.24. Jedná se o distribuovaný systém správy verzí propojený se správou chyb, wiki stránek a blogů s integrovaným webovým rozhraním. Vše běží z jednoho jediného spustitelného souboru a uloženo je v SQLite databázi.
Byla vydána nová stabilní verze 6.7 webového prohlížeče Vivaldi (Wikipedie). Postavena je na Chromiu 124. Přehled novinek i s náhledy v příspěvku na blogu. Vypíchnout lze Spořič paměti (Memory Saver) automaticky hibernující karty, které nebyly nějakou dobu používány nebo vylepšené Odběry (Feed Reader).
OpenJS Foundation, oficiální projekt konsorcia Linux Foundation, oznámila vydání verze 22 otevřeného multiplatformního prostředí pro vývoj a běh síťových aplikací napsaných v JavaScriptu Node.js (Wikipedie). V říjnu se verze 22 stane novou aktivní LTS verzí. Podpora je plánována do dubna 2027.
Byla vydána verze 8.2 open source virtualizační platformy Proxmox VE (Proxmox Virtual Environment, Wikipedie) založené na Debianu. Přehled novinek v poznámkách k vydání a v informačním videu. Zdůrazněn je průvodce migrací hostů z VMware ESXi do Proxmoxu.
R (Wikipedie), programovací jazyk a prostředí určené pro statistickou analýzu dat a jejich grafické zobrazení, bylo vydáno ve verzi 4.4.0. Její kódové jméno je Puppy Cup.
IBM kupuje společnost HashiCorp (Terraform, Packer, Vault, Boundary, Consul, Nomad, Waypoint, Vagrant, …) za 6,4 miliardy dolarů, tj. 35 dolarů za akcii.
Byl vydán TrueNAS SCALE 24.04 “Dragonfish”. Přehled novinek této open source storage platformy postavené na Debianu v poznámkách k vydání.
Oznámeny byly nové Raspberry Pi Compute Module 4S. Vedle původní 1 GB varianty jsou nově k dispozici také varianty s 2 GB, 4 GB a 8 GB paměti. Compute Modules 4S mají na rozdíl od Compute Module 4 tvar a velikost Compute Module 3+ a předchozích. Lze tak provést snadný upgrade.
Po roce vývoje od vydání verze 1.24.0 byla vydána nová stabilní verze 1.26.0 webového serveru a reverzní proxy nginx (Wikipedie). Nová verze přináší řadu novinek. Podrobný přehled v souboru CHANGES-1.26.
Odkazy
26.9.2015 14:11
| Přečteno: 2567×
| Web
| 
| poslední úprava: 28.9.2015 10:27
Dnešný blog bude tak trochu o benchmarkoch a tak trochu o porovnaní kódu ReactJS a reactor.js (názov reactor bol zvolený pred zverejnením ReactJS).
Obe knižnice majú podobnú filozofiu. Asi najväčší rozdiel je v šablónach - nemám napísaný kompilátor, takže DOM sa musí zatiaľ zapisovať priamo do kódu.
Ako ukážku práce s oboma knižnicami som zvolil jednoduchú TODO aplikáciu. Začneme HTML kódom:
<!DOCTYPE html> <html> <head> <title>TODO</title> <meta charset="utf-8" /> </head> <body> <h1>TODO</h1> <div id="container"></div> <script src="react.js|reactor.js" type="text/javascript" charset="utf-8"></script> <script src="todo_reactjs.js|todo_reactor.js" type="text/javascript" charset="utf-8"></script> </body> </html>
AbcLinuxu.cz
ITBiz.cz
HDmag.cz
AbcPráce.cz
// react.js
var PRIORITY_MAP = {
1: 'Nízka',
2: 'Stredná',
3: 'Vysoká'
};
var Table = React.createClass({
getInitialState: function() {
return {todo: [], count: 0};
},
render: function() {
return (
<TABLE border="1">
<THEAD>
<TR>
<TH>
Úloha (počet: {this.state.count})
</TH>
<TH>Priorita</TH>
<TH></TH>
</TR>
</THEAD>
<TodoList data={this.state.todo}></TodoList>
</TABLE>
);
}
});
var Edit = React.createClass({
render: function() {
return (
<DIV>
<INPUT ref="input" type="text" />
<SELECT ref="priority">
<OPTION value="1">Nízka</OPTION>
<OPTION value="2" selected="selected">Stredná</OPTION>
<OPTION value="3">Vysoká</OPTION>
</SELECT>
<BUTTON type="button">Pridať</BUTTON>
</DIV>
);
}
});
var Item = React.createClass({
render: function() {
return (
<TR className={"priority-" + this.props.priority}>
<TD>{this.props.task}</TD>
<TD>{this.props.priority_text}</TD>
<TD>
<A ref="remove" href="#" onClick={this.removeItem}>Odstrániť</A>
</TD>
</TR>
);
}
});
var TodoList = React.createClass({
priorityText: function(priority) {
return PRIORITY_MAP[priority];
},
render: function() {
var self = this;
return (
<TBODY>
{this.props.todo.map(function(todo) {
return <Item key={todo.id} task={todo.task} priority={todo.priority} priority_text={this.priorityText(todo.priority) id={todo.id}/>;
})}
</TBODY>
);
}
});
// --- skompilované ---
var Table = React.createClass({
displayName: "Table",
getInitialState: function() {
return {todo: [], count: 0};
},
render: function render() {
return React.createElement(
'TABLE',
{ border: "1" },
React.createElement(
'THEAD',
null,
React.createElement(
'TR',
null,
React.createElement(
'TH',
null,
"Úloha (počet: ",
this.state.count,
")"
),
React.createElement(
'TH',
null,
"Priorita"
),
React.createElement('TH', null)
)
),
React.createElement(TodoList, { todo: this.state.todo })
);
}
});
var Edit = React.createClass({
displayName: "Edit",
createTodoItem: function() {
createTodoItem();
},
render: function render() {
return React.createElement(
'DIV',
null,
React.createElement('INPUT', { ref: "input", type: "text" }),
React.createElement(
'SELECT',
{ ref: "priority" },
React.createElement(
'OPTION',
{ value: "1" },
"Nízka"
),
React.createElement(
'OPTION',
{ value: "2", selected: "selected" },
"Stredná"
),
React.createElement(
'OPTION',
{ value: "3" },
"Vysoká"
)
),
React.createElement(
'BUTTON',
{ type: "button", onClick: this.createTodoItem },
"Pridať"
)
);
}
});
var Item = React.createClass({
displayName: "Item",
removeItem: function() {
var index = undefined;
var self = this;
todoList.forEach(function(listItem, i) {
if (listItem.id === self.props.id) {
index = i;
}
});
if (index !== undefined) {
todoList.splice(index, 1);
todoTable.setState({count: todoList.length, todo: todoList});
}
},
render: function render() {
return React.createElement(
'TR',
{ className: "priority-" + this.props.priority },
React.createElement(
'TD',
null,
this.props.task
),
React.createElement(
'TD',
null,
this.props.priority_text
),
React.createElement(
'TD',
null,
React.createElement(
'A',
{ href: "#", onClick: this.removeItem },
"Odstrániť"
)
)
);
}
});
var TodoList = React.createClass({
displayName: "TodoList",
priorityText: function priorityText(priority) {
return PRIORITY_MAP[priority];
},
render: function render() {
var self = this;
return React.createElement(
'TBODY',
null,
this.props.todo.map(function (todo) {
return React.createElement(Item, { key: todo.id, task: todo.task, priority: todo.priority, priority_text: self.priorityText(todo.priority), id: todo.id });
})
);
}
});
// reactor.js
var PRIORITY_MAP = {
1: 'Nízka',
2: 'Stredná',
3: 'Vysoká'
};
var templates = {
'table':
E('TABLE', [
E('@border', '1'),
E('THEAD', [
E('TR', [
E('TH', [
E('#text', 'Úloha (počet: '),
E('#text=count', '0'),
E('#text', ')')
]),
E('TH', [
E('#text', 'Priorita')
]),
E('TH')
])
]),
E('TBODY=todolist', [
])
]),
'edit':
E('DIV', [
E('INPUT=input', [
E('@type', 'text'),
]),
E('SELECT=priority', [
E('OPTION', [E('@value', '1'), E('#text', PRIORITY_MAP[1])]),
E('OPTION', [E('@value', '2'), E('@selected', 'selected'), E('#text', PRIORITY_MAP[2])]),
E('OPTION', [E('@value', '3'), E('#text', PRIORITY_MAP[3])])
]),
E('BUTTON=submit', [
E('@type', 'button'),
E('#text', 'Pridať')
])
]),
'item':
E('TR', [
E('@class=priority_class', 'priority'),
E('TD', [
E('#text=task', '')
]),
E('TD', [
E('#text=priority', 'Normálna')
]),
E('TD', [
E('A=remove', [
E('@href', '#'),
E('#text', 'Odstrániť')
])
])
])
};
var widgets = {
'item': Reactor.Widget({
template: templates.item,
construct: function() {
var self = this;
this.component.elements.remove.onclick = function() {
self.modelInstance.remove(self.modelInstance.indexOf(self.data));
return false;
}
},
update: function(data) {
this.component.set.task(data.task);
this.component.set.priority(PRIORITY_MAP[data.priority]);
this.component.set.priority_class('priority-' + data.priority);
}
})
};
Šablóny v reactorj.js sú podstatne jednoduchšie, neumožňujú použiť žiadnu logiku. Logiku je možné obaliť do inštancie Widget. Widget okrem iného podporuje automatickú aktualizáciu elementov pri zmene modelu (v tomto príklade túto vlastnosť nepoužívam).
// react.js
var todoTable = undefined;
var addTodo = undefined;
var todoList = [];
var next = 0;
var tableContainer = undefined;
var editContainer = undefined;
var createUi = function() {
tableContainer = document.createElement('DIV');
editContainer = document.createElement('DIV');
document.getElementById('container').appendChild(tableContainer);
document.getElementById('container').appendChild(editContainer);
todoTable = React.render(
React.createElement(Table, null),
tableContainer
);
addTodo = React.render(
React.createElement(Edit, null),
editContainer
);
};
var loadList = function() {
todoList.push({task: 'test', priority: '1', id: next});
todoTable.setState({count: todoList.length, todo: todoList});
next++;
};
var createTodoItem = function() {
var task = React.findDOMNode(addTodo.refs.input).value;
var priority = React.findDOMNode(addTodo.refs.priority).value;
if (task) {
React.findDOMNode(addTodo.refs.input).value = '';
todoList.unshift({task: task, priority: priority, id: next});
todoTable.setState({count: todoList.length, todo: todoList});
next++;
}
};
createUi();
loadList();
// reactor.js
var todoTable = undefined;
var addTodo = undefined;
var todoList = undefined;
var createUi = function() {
todoTable = Reactor.Etree(templates.table);
_.id('container').appendChild(todoTable.tree);
addTodo = Reactor.Etree(templates.edit);
_.id('container').appendChild(addTodo.tree);
};
var createList = function() {
todoList = new Reactor.ListModel();
new Reactor.ListView(
todoTable.elements.todolist,
todoList,
widgets.item
);
};
var registerEvents = function() {
todoList.signals.inserted.connect(function() { todoTable.set.count(todoList.list.length) });
todoList.signals.removed.connect(function() { todoTable.set.count(todoList.list.length) });
addTodo.elements.submit.onclick = createTodoItem;
};
var loadList = function() {
todoList.insert({task: 'test', priority: '1'}, 0);
};
var createTodoItem = function() {
var task = addTodo.elements.input.value;
var priority = addTodo.elements.priority.value;
if (task) {
addTodo.elements.input.value = '';
todoList.insert({task: task, priority: priority}, 0);
}
};
createUi();
createList();
registerEvents();
loadList();
Veľkosť a zložitosť kódu je porovnateľná.
| react.js | reactor.js | rozdiel |
|---|---|---|
| 120 riadkov | 127 riadkov | 6% kódu viacej |
Vo svojich projektoch si môžem dovoliť implementovať len to, takže rozdiel vo veľkosti knižnice asi nikoho neprekvapí.
| react.js | reactor.js | ušetrené |
|---|---|---|
| 600572 B | 14474 B | 97.59 % |
Pre mňa sú dôležité 3 operácie - vytvorenie inštancie, modifikácia a prístup k elementom.
// react.js
var suite = new Benchmark.Suite;
var tbody = document.createElement('TBODY');
var todoItem = React.render(
React.createElement(Item, null),
tbody
);
suite.add('Get reference', function() {
var ref = React.findDOMNode(todoItem.refs.remove);
});
suite.add('Set state', function() {
var priority = '1';
todoItem.setProps({
priority: '1',
task: 'Text',
priority_text: PRIORITY_MAP[priority]
});
});
suite.add('Construct', function() {
var tbody = document.createElement('TBODY');
var todoItem = React.render(
React.createElement(Item, null),
tbody
);
});
// reactor.js
var suite = new Benchmark.Suite;
var tbody = document.createElement('TBODY');
var todoItem = new widgets.item();
todoItem.construct();
tbody.appendChild(todoItem.component.tree);
suite.add('Get reference', function() {
var ref = todoItem.component.elements.remove;
});
suite.add('Set state', function() {
todoItem.update({
priority: '1',
task: 'Text'
});
});
suite.add('Construct', function() {
var tbody = document.createElement('TBODY');
var todoItem = new widgets.item();
todoItem.construct();
tbody.appendChild(todoItem.component.tree);
});
| reactor.js | ReactJS | rozdiel | |
|---|---|---|---|
| Firefox 40.0.2 | |||
| Referencia | 468 576 053 ops/sec ±0.41% | 73 369 577 ops/sec ±0.58% | 6.39x rýchlejšie |
| Nastavenie stavu | 481 925 ops/sec ±1.94% | 1 746 ops/sec ±7.29 | 276x rýchlejšie |
| Vytvorenie inštancie | 8 713 ops/sec ±10.67% | 726 ops/sec ±3.40% | 12x rýchlejšie |
| Google chrome 44.0.2383.0 | |||
| Referencia | 30 791 589 ops/sec ±0.36% | 22 138 994 ops/sec ±0.37% | 1.39x rýchlejšie |
| Nastavenie stavu | 265 029 ops/sec ±0.77% | 2 364 ops/sec ±6.80% | 112x rýchlejšie |
| Vytvorenie inštancie | 6 869 ops/sec ±22.28% | 973 ops/sec ±3.69% | 7x rýchlejšie |
Tiskni
Sdílej:
26.9.2015 14:12
mirec | skóre: 32
| blog: mirecove_dristy
| Poprad
Použité zdrojáky.
26.9.2015 15:29
Bystroushaak | skóre: 36
| blog: Bystroushaakův blog
| Praha
26.9.2015 15:41
mirec | skóre: 32
| blog: mirecove_dristy
| Poprad
Zatiaľ mám akurát gist na githube. Proxy modely nad ListModelom majú hnusné API, ktoré by som najradšej prekopal. Vlastne je tam tých škaredých vecí, ktoré by som najradšej od základu prepísal viacej. Po stabilizácii API vytvorím repozitár.
Trochu offtopic .. pri programovaní v JS ma prekvapila jedna vec. Skoro všetko, čo píšem je rýchlejšie vo firefoxe, ale cudzie knižnice sú naopak zvyčajne rýchlejšie v chrome.
26.9.2015 21:03
FoxVK | skóre: 1
| blog: Nora linuxáka
27.9.2015 01:08
Bystroushaak | skóre: 36
| blog: Bystroushaakův blog
| Praha
27.9.2015 19:08
mirec | skóre: 32
| blog: mirecove_dristy
| Poprad
Ale vreckový firefox (fenec) je skutočný vreckový lišiak ;)
27.9.2015 09:19
mirec | skóre: 32
| blog: mirecove_dristy
| Poprad
UI komponenta je funkce, ktera na vstup dostane stav a vrati HTML. Kdyz chci provest nejakou zmenu v UI, na DOM nesaham, ale upravim stav a reknu o tom Reactu. Ten se pak postra o update UI.
To je blbosť. Pôvodne som mal napísaný vlastný šablónovací jazyk (pôvodne fork t.js, ale akosi sa na to nabalilo automatické escapovanie, filtre atď), komponenty generujúce html pri zmene stavu ... ale celé som to zahodil. Je jednoduchšíe veľkú časť 10kB knižnice než je to u 500kB knižnice. To, že je to blbosť som už zistil na vlastnej koži keď to síce fungovalo pekne, rýchlo, ale robil som chatovaciu aplikáciu a akosi som potreboval aby sa zoznam užívateľov (select s optionmi) negeneroval vždy znovu keď niekto príde / odíde z chatu. Jednoducho to bolo blbé keď som si vyberal príjemcu a zrazu sa select vymazal a vytvoril na tom istom mieste, zmizol selection a celkovo je to nepríjemné keď počas výberu zmizne menu. Preto react.js potrebuje pri generovaní listu key, ktorý sa následne využíva na diffovanie listu. Ja takéto implicitné magické hodnoty nemám rád, preto to isté u mňa zabezpečuje dvojica ListModel a ListView. ListModel je v podstate obyčajný obalený zoznam ktorý má operáciu vloženia na určené miesto, odstránenia z určitého miesta a presun. Ďalej má 2 signály - inserted a removed (move sa dá rozložiť na tieto 2). ListView sa jednoducho zahákne na ListModel a vytvára / maže komponenty. Komponenty musia byť obalené do widgetu, čo je ľahká vrstva ktorá má ešte na starosti aktualizáciu jednotlivých položiek. Takže ListView nerobí nič iné len reaguje na vloženie / vymazanie, widget sa pri zmene modelu (napr. zmena mena užívateľa) mení sám. Samozrejme inicializovať sa to musí explicitne (funkcia createList), ale zvyšok už je rovnako pohodlný ako s reactom.
Iný príbeh je ak si list neskladám sám, ale chcem ho trebarz aktualizovať z nejakej restovej služby. Na to mám triedu AutoListModel (v podstate je to len proxy na ListModel) a tá funguje takto:
var todoList = new Reactor.AutoListModel();
new Reactor.ListView(
element,
todoList,
widget
);
var zoznam = [];
todoList.setData(zoznam);
zoznam.push({id: 1, ...});
todoList.setData(zoznam);
AutoListModel si už automaticky urobí diff podľa id a do modelu správne pridá / odstráni / presunie / upraví prvky. V podstate robí to isté čo react.js, ale musím ho inicializovať ručne, takže môj kód je o pár riadkov dlhší (< 10%).
27.9.2015 09:46
mirec | skóre: 32
| blog: mirecove_dristy
| Poprad
Ešte aby to nebolo zle pochopené .. nie som spokojný ako je u mňa implementovaný ListView, ListModel ... ale je to prvé riešenie, ktoré ma napadlo pri poslednom projekte. Predchádzajúce riešenia som nezverejňoval, lebo to bolo už dávno implementované lepšie v iných knižniciach. Automatická efektívna zmena DOM podľa modelu ako to mám implementované v súčasnosti prináša výkon porovnateľný s vanilla js. Preto som sa rozhodol zverejniť fragmenty kódu práve teraz. Kým to bude ako-tak učesané tak to ešte zopár projektov potrvá.
27.9.2015 13:08
mirec | skóre: 32
| blog: mirecove_dristy
| Poprad
Nepochopil jsem co presne je blbost.
Blbosť je generovať html. Môj kód tak nefunguje, react.js tak nefunguje, len sa navonok tak tvári.
Kouzlo Reactu je, ze nemusim pouzivat specialni tridy jako ListView, ListModel nebo AutoListModel.
To je vec ktorá sa mi na reacte nepáči. Namiesto pohodlného ListView-u, ku ktorému mám nejaké API musím v react.js pracovať so surovým array-om. Je to vecou preferencií, keby sa mi páčil prístup react.js nemám dôvod písať niečo iné.
Ano, neni to vzdy stejne rychle jako vanilla JS, ale porad rychlejsi (nekdy radove) nez Angular a Ember.
Angular a Ember sú katastrofa. Obojstranné bindingy nemám rád. Rýchlosť je mizerná. Je to obrovské, monštrózne zložité a ako bonus celý angular prepísali.
react.js tak nefunguje, len sa navonok tak tváriAno, tak jsem to myslel, ze React generuje reprezentaci html.
Vzdy staci funkce, ktera prevede stav na HTML - neni treba psat kod pro upravu takro vygenerovaneho HTML, o vse se postara React.To funguje, pokud máte malá data. Pokud budete mít milióny položek, tak to nebude zrovna efektivní.
<div data-ov="mojeview/view">
Counter:
<span data-ov="counter"><strong data-ov=".num">1</strong> <span data-ov=".unit">meter</span></span>
</div>
var model = oswin.model({
url: { get: '/some/url' },
data: { // Udava strukturu dat modelu a vychozi hodnoty
counter: {
num: 3,
unit: 'meters'
}
},
members: {
ctor: function() {
console.log('This is a constructor');
},
// Tady je mozne definovat dalsi vlastni promenne a funkce modelu, etc...
}
});
var instance = model.make(); // Nova instance modelu
instance.view('mojeview'); // Automaticky si najde v DOM element oznaceny data-ov="mojeview/view"
// a navaze ostatni elementy pod nim podle jejich znacek na svoje data
instance.get(); // Nacte data z get URL
instance.data.counter.units = "potatoes"; // Zmeni data. Zmena se automaticky projevi i v DOM
instance.$('counter.num') vrátí jQuery kolekci, která reprezentuje data.counter.num ve view, čili to je ten <strong> element), controller (opět pomocí podobných značek v HTML - nemusí se nikdy vázat ručně žádné callbacky), "kolekce" - tj. třeba vypysování různých seznamů, které jsou opět definované čistě v HTML, dále knihovna obsahuje minimalistický router a pár utilit. Má to asi 8kb gzipped.
27.9.2015 12:24
mirec | skóre: 32
| blog: mirecove_dristy
| Poprad
Osobně se mi moc nezamlouvá, když musím psát HTML v JS nebo nějak vytvářet DOM z JS.
Ani mne ;) ReactJS to má vyriešené dá sa povedať pekne, ale strašne hnusne 
. V podstate renderovať react šablóny na serveri je možné len pomocou node kvôli tesnej závislosti s javascriptom. Ich šablóny vyzerajú ako zápis DOM, ale nie je to zápis DOM Nie je možné zapísať class="trieda", namiesto toho sa musí zapísať className="trieda" čo znemožňuje 1:1 mapovanie medzi atribútmi šablóny a DOM atribútmi. Ja si dovolím namiesto šetrenia pár nanosekúnd volať priamo setAttribute. V budúcnosti asi napíšem preprocesor na html s pár značkami na vloženie obsahu z kontextu, ktorý mi vygeneruje príslušný js kód a serverový renderer, ktorý mi umožní renderovať šablóny na serveri v ľubovoľnom jazyku (bez ntnosti mať node na serveri) a odosielať ich ako fallback pre crawlery, alebo browsery s vypnutým js. Keď tak nad tým rozmýšľam možno by nebolo zlé dovoliť použitie ListViewu priamo v šablóne čím by sa zredukoval duplicitný zliepací kód na serveri (fallback rendering) a u klienta.
27.9.2015 13:31
mirec | skóre: 32
| blog: mirecove_dristy
| Poprad
přístup k jQuery
Inak pozor na jquery a prístup k data. V prípadoch keď používateľ môže nastaviť data je správanie jQuery dosť nebezpečné. Stačí napríklad v tomto kóde zmeniť použivateľské meno na false a hrabnuť zlým spôsobom na length a hneď všetky zoznamy userov, v ktorých sa vyskytuje užívateľ false prestanú fungovať:
$('<div data-username="false"></div>').data('username').length
Od istej doby sa v rozsiahlejších projektoch vyhýbam jQuery kde sa dá. U malých projektov kde chce klient rýchlo niečo zbúchať je mi to jedno.
Volil jsem ten přístup, že napíšu vše komplet v HTMLja to delam presne obracene, pouzivam SmartClient a vsecho co delam je JS. Jako kdybych psal pred 20 lety ve VisualBasicu
28.9.2015 08:58
mirec | skóre: 32
| blog: mirecove_dristy
| Poprad
Nechcel som tam dávať to isté HTML 2x, takže sa tam má includnúť súbor podľa toho, či sa použije reactor alebo react. Asi som v prvom scripte zabudol bodku