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

Odebírat
Upozornit na
guest
3 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
Zobrazit všechny komentáře
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

Přístupnost není jen o splnění norem: nový pohled na inkluzivní design

Přístupnost a inkluze možná nepatří mezi nejžhavější témata digitálního světa – dokud o nich nezačne mluvit Vitaly Friedman. Na WebExpo 2024 předvedl, že inkluzivní design není jen o splněných checkboxech, ale hlavně o lidech. S energií sobě vlastní obrátil zažité přístupy naruby a ukázal, že skutečně přístupný web je nejen možný, ale i nezbytný.

Efektivnější vývoj UI nebo API: Co si odnést z WebExpo 2025?

Různé
Komentáře: 0
Jak snadno implementovat moderní uživatelské rozhraní? Které funkce brzdí rychlost vašeho webu? A kdy raději sami přibrzdit, abychom využitím AI nepřekročili etické principy? Debatu aktuálních dev témat rozdmýchá sedmnáctý ročník technologické konference WebExpo, která proběhne v Praze od 28. do 30. května. Který talk či workshop si rozhodně nenechat ujít? Toto je náš redakční výběr z vývojářských hroznů.

Zapřáhněte AI jako nikdy předtím. Květnová konference WebExpo přivítá hvězdy technologického světa

Od 28. do 30. května 2025 promění pražský Palác Lucerna na tři dny technologická konference WebExpo. Na programu je více než 80 přednášek a workshopů od expertů z celého světa. WebExpo tradičně propojuje vývojáře, designéry, marketéry i byznysové lídry a nabízí praktické dovednosti, strategické myšlení a přináší nejnovější trendy nejen v oblasti AI.