Přejít k navigační liště

Zdroják » Různé » JavaScriptaření: drátujeme, překládáme, spojujeme

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

Články Různé

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.

Nálepky:

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.

Komentáře

Subscribe
Upozornit na
guest
3 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
blizzboz

mno a ako je to s reálnou použiteľnosťou tých grafických knižníc? nemohli by ste k článku pridať aj nejakú tabuľku kompatibility medzi prehlaidačmi?

Cpt.Nemo

Jak je to s kompatibilitou s dalšími JS knihovnami (jQuery, DoJo, ExtJS apod.) ?

MikZ

Handlebars.js jsou postaveny nad Mustache a jsou rychlejší s pár funkcemi navíc – https://github.com/wycats/handlebars.js

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.