JavaScriptaření: drátujeme, překládáme, spojujeme

V dnešním Javascriptaření si ukážeme rovnou dvě knihovny, které pomohou při vytváření editorů schémat či grafů, představíme si běhové prostředí pro JavaScript založené na SpiderMonkey, ukážeme novou objektovou knihovnu pro canvas, překladač z Pythonu do JS, další nadstavbu nad WebGL i šablonovací nástroj.

Seriál: Javascriptaření (9 dílů)

  1. Javascriptaření: hrajte si s funkcemi! 31.1.2011
  2. ECMAScript Strict mode ve Firefoxu 4 8.2.2011
  3. Javascriptaření: nejen jQuery živ je JavaScriptař 8.3.2011
  4. Javascriptaření: fyzika, grafika a společenská konverzace 23.3.2011
  5. JavaScriptaření: drátujeme, překládáme, spojujeme 31.3.2011
  6. Javascriptaření: ukažte mi, označte mě, opravte mě 13.4.2011
  7. Kontrola JavaScriptu s JSLint a JSHint 14.7.2011
  8. Základní vzory pro vytváření jmenných prostorů v JavaScriptu 10.10.2011
  9. Javascriptaření: překladače, pakovače 9.11.2011

WireIt

Pokud chystáte webovou aplikaci, v jejímž rámci potřebujete interaktivně navrhovat schémata, diagramy a podobné věci, oceníte WireIt.

WireIt používá k vykreslování canvas. Grafickým prvkům definuje přípojné body (terminals), mezi kterými může uživatel definovat spojení („prodrátování“). Graficky je tento spoj reprezentován definovaným způsobem (lomená čára, křivka, prověšený kabel apod.)

Knihovnu WireIt můžete použít například k návrhu elektronických schémat, vývojových diagramů, mindmap, zkrátka jako základní editační nástroj všude tam, kde je potřeba graficky reprezentovat vztahy mezi entitami a interaktivně s nimi manipulovat.

Joint

Knihovna Joint.js je velmi podobná předchozí. (Jedna zajímavost: knihovna má svůj původ v ČR a autor s ní uspěl v druhém ročníku soutěže VIP, pořádané sdružením CZ.NIC.)

Knihovna umožňuje pohodlné vykreslování diagramů do webových stránek a spojování jejich prvků pomocí spojnic. Knihovna je postavena nad knihovnou  Raphaël, určenou pro vykreslování vektorové grafiky v SVG/VML, takže funguje ve všech hlavních prohlížečích. Knihovna umožňuje nejen diagramy vykreslit, ale i interaktivně měnit, přetahovat objekty myší či měnit průběh spojnic pomocí záchytných bodů. Rovněž umožňuje navěsit na takové události vlastní obslužné rutiny, takže je možno ji využít např. pro webové CASE nástroje.

JSLibs

Čím dál větší množství nástrojů začíná být vytvářeno jako JS knihovny. Pokud je ale nechcete použít v prohlížeči, budete potřebovat běhové prostředí, které umožní Javascript spouštět i mimo prohlížeč (něco jako umožňuje technologie Windows Script Host). Pravděpodobně nejznámějším zástupcem JS runtime je Node.js – CommonJS prostředí, zaměřené na síťovou komunikaci.

JSLibs používají JS engine SpiderMonkey, resp. TraceMonkey/Ja­egerMonkey, a k němu přidávají sadu knihoven a wrapperů k různým nástrojům třetích stran, např. zlib, SQLite, libjpg, libpng, OpenGL či Ogg Vorbis.

JSLibs se skládají z malého programu jshost/jswinhost, kterým lze spouštět JS soubory, a z řady modulů, které jsou do jisté míry nezávislé na jshost a lze je využít i ve vlastních aplikacích, které využívají SpiderMonkey. (Při případném zabudování do vlastního SW mějte na mysli, že JSLibs jsou k dispozici pod licencí GNU GPL 2)

oCanvas

S knihovnami, které pracují nad canvasem a zabalují grafické prvky do objektů, jsme se už seznámili – příkladem budiž např. již zmiňovaný Raphaël. Knihovna oCanvas jde ještě o kousek dál za běžné kreslení. Samozřejmě umožňuje popsat grafické prvky a pracovat s nimi jako s objekty, ale navíc umožňuje definovat těmto prvkům např. timeline či animace.

Knihovna oCanvas rovněž ošetřuje události z uživatelského rozhraní, takže je vhodná pro použití v interaktivních grafických aplikacích či v hrách (i když to není čistě herní knihovna).

pyCow

Projekt PyCow přesahuje z běžného javascriptaření k Pythonu. Jde o určitou obdobu Google Web Toolkitu, který překládá programy napsané v Javě do webové podoby HTML/CSS/JS.

PyCow je pythonský modul, který překládá programy v Pythonu do JavaScriptu. K zajištění pokročilejších vlastností používá knihovnu MooTools. Za určitých podmínek je s pomocí PyCow možné vyvíjet skripty pro prohlížeče v Pythonu.

SceneJS

Minulé Javascriptaření představilo jednu z nadstaveb nad WebGL. Tentokrát tu máme obdobnou nadstavbu – SceneJS. SceneJS definuje 3D „scénu“ pomocí JSON objektů a pomocí API umožňuje s těmito objekty manipulovat.

Kromě samotných operací s grafikou a prvky scény nabízí SceneJS i sadu utilit (pro optimalizaci scény, validaci objektů apod.) a mechanismus pro komunikaci pomocí zpráv.

Mustache.js

Závěr bude patřit šablonovacímu systému s poetickým názvem Mustache. Tento nástroj umožňuje přesně totéž, co jiné šablonovací nástroje v jazycích jako PHP, Python či Ruby. Příklad:

var view = {
  title: "Joe",
  calc: function() {
    return 2 + 4;
  }
}
var template = "{{title}} spends {{calc}}";
var html = Mustache.to_html(template, view);

Mustache lze použít ve webových stránkách a jeho pomocí generovat HTML např. z dat, získaných pomocí AJAXem, ale zajímavější bude asi možnost použití v serverové aplikaci, např. v Node.js.

Začal programovat v roce 1984 s programovatelnou kalkulačkou. Pokračoval k BASICu, assembleru Z80, Forthu, Pascalu, Céčku, dalším assemblerům, před časem v PHP a teď by rád neprogramoval a radši se věnoval starým počítačům.

Zdroj: https://www.zdrojak.cz/?p=3466