Editor podobný Qt Designeru ale pro webové aplikace?

[Sheldonizátor]

Neví někdo, jestli existuje editor podobný Qt Designeru ze kterého by lezla webová stránka a který by ale měl i nějaké napojení na MVC framework a objekty a formuláře? Prostě podobně jako je tomu v Qt na desktopu, ale aby to jelo na webu v prohlížeči?

[Reklama]

[nn]

skus wt http://www.webtoolkit.eu/wt

[Sheldonizátor]

Otázku jsem měl možná zevšeobecnit, snažím se/potřebuji se z desktopu a hlavně backendu přeorientovat na web a frontend, tedy naučit se vytvářet webové aplikace které se připojují na backend a které mají tu vlastnost že při kliknutí někam se nenačte nová stránka ale jen se změní něco na obrazovce (to dělá ten AJAX a manipulace DOMem pomocí JavaScriptu) a pak to taky zareaguje na nějaké změny dat na serveru.

Nechce se mi věřit že neexistují zaběhaná řešení která by byla podobná různým form designerům známým z desktopů, třeba něco jako Swing, ale aby to fungovalo nad JavaScriptem a mělo to všechny běžné UI prvky z desktopu.

Třeba jsem našel: http://semantic-ui.com/elements/button.html ale to je jen šablona a není k tomu nic co by vygenerovalo nějaké formuláře a IDE které by dávalo na výběr z eventů a tak, potřeboval bych spíš nějaký framework. To se to opravdu vše dělá ručně v JavaScriptu přes onclick a podobně? Jako chápu že nějaký framework to tak bude dělat ale to se to běžně píše ručně?

Ze všech moderních věcí které se pro frontend používají je v současné době žijící Bootstrap, Foundation a taky třeba ta konkurence ve formě Semantic-UI. Ani jedno z toho není nijak svázáno s JavaScriptem, není to součástí žádného většího frameworku...

Našel jsem teď ještě http://dhtmlx.com vypadá to pěkně byť je to placené, ALE nikde na českém webu se o tom moc nepíše, všichni píšou o Bootstrapu, Reactu a Angularu, je tedy otázka jestli to neumře. Ale něco takového hledám. Když jsem dal v google hledat dhtmlx za poslední rok stránky pouze česky tak jsem našel ještě tohle:
http://devel.cz/otazka/co-vam-chybi-u-js-ui-frameworku
Pěkný seznam, má někdo přesdavu co z toho je a co není "jízda na mrtvém koni"?

V ideálním případě se developer naučí jeden webový framework a pro ten bude podpora dalších 10 let a neumře.

[nn]

Odpoved na tvoju otazku c.2 je twitter bootstrap a umriet to neumrie(maximalne to nieco nahradi a to asi az tak skoro nebude) ono to je teraz standart. Ak chces silou mocov daky framework mozes skusit http://webix.com/ alebo ine(napis si do google ui web framework napr).

[to_je_jedno]

twitter bootstrap ... ono to je teraz standart.

Co to ma spolecneho s prezidentskou vlajkou?

[Reklama]

[Daniel]

https://www.sencha.com/products/extjs/#overview
https://www.sencha.com/products/architect/#overview

[Ondrej Nemecek]

Je toho hodně, je spíš problém se zorientovat, vybrat si a ovládnout související technologie. S čím jsem přišel do styku (nicméně je to převážně z java světa):

ExtJS od Sencha https://www.sencha.com/products/extjs/ (v GPL verzi bývá bohužel dost bugů a opravy jsou přednostně v placené verzi)
Google GWT http://www.gwtproject.org/

Některé umožňují definovat datový model a administraci si nechat vygenerovat:

Lightadmin pro Spring/JPA  http://lightadmin.org/
Brightspot/DARI http://www.brightspot.com/

[Sheldonizátor]

Tady mám nějaký seznam věcí souvisejících s webovým developmentem. Ví někdo jak se to dělá v reálu, skutečně se ty aplikace lepí pomocí níže uvedených věciček? Přijde mi to hrozně roztříštěné, doporučí někdo něco z toho/má zkušenost?

Přehledy frameworků

TodoMVC(http://todomvc.com/)
* Todo List aplikace implementovaná pomocí mnoha různých frameworků

RAD Designery

Mají GUI designer který umožní graficky vytvářet uživatelské rozhraní.

CrossUI (http://www.crossui.com/)
* RAD GUI builder/designer pro JavaScript
* generuje JavaScript
* ukázka online builderu: http://www.crossui.com/RAD/Builder.html
* Licence pro 1 developera $399, pro 5 developerů: $1499
* vypadá na první pohled pěkně, ale méně známe

DHTMLX (http://dhtmlx.com)
* RAD GUI builder/designer pro JavaScript
* generuje JavaScript
* ukázka online builderu: http://dhtmlx.com/docs/products/visualDesigner/live/
* vypadá na první pohled pěkně, ale méně známe

Eclipse RAP (http://www.eclipse.org/rap/)
* remote application platform
* vše v Javě
* designer ve swingu
* napojení na server side
* licence: EPL (Eclipse Public License)
   
Sencha - Ext JS (https://www.sencha.com/products/extjs/)
* framework od Sencha
* cena licence (min. 5 developerů): $1995

SmartClient (http://www.smartclient.com/)
*http://stackoverflow.com/questions/4064578/extjs-or-smartclient

Vaadin (https://vaadin.com/)
* velmi svázán s ekosystémem Javy

Frameworky

Nemají GUI designer, ale představují komplexnější řešení, řeší i napojení
na JavaScript objekty, případně komunikaci se serverem a ne jenom vzhled aplikace.

Knockback (http://kmalakoff.github.io/knockback/)
* MVC Framework kombinující KnockoutJS a BackboneJS
* řeší napojení grafických komponent na zdroje dat
* řazení a ukládání kolekcí
* podpora ORM
* lokalizace

Web Toolkit (http://www.webtoolkit.eu)
* programování uživatelského rozhraní pomocí C++ bez nutnosti znát JavaScript
* vlastní HTTP server pro integraci do aplikace postavený nad C++ knihovnou Boost::Asio, tedy VELMI rychlý
* Licence: GPL zdarma (pro nás nepoužitelná)
           komerční

Dojo toolkit (https://dojotoolkit.org)
* velká ucelená sada knihoven usnadňující programování v JavaScriptu
* Dojo/Dijit - ovládací prvky, tlačítka, tabulky
* Dojo/Query - alternativa k jQuery
* Dojo/MVC - model, view, controller framework
* simulace tříd a dědičnosti, request/response, ...
* podpora pro lokalizaci/multijazyčnost
* náročné na naučení

Ember JS (http://emberjs.com/)
* framework na vytváření webových aplikací
* používá šablony handlebars
* MVC Framework
* spolupracuje s jQuery
* směrování

Angular JS (https://angularjs.org/)
* MVC framework od Google
* deklarativní vytváření znovupoužitelných komponent

Knihovny

Mají menší záběr, usnadňují práci programátora který si vše musí vše udělat sám.

jQuery (https://jquery.com/)
* knihovna pro JavaScript zjednodušující manipulaci s DOMem
* pozor, jQuery NENABÍZÍ žádné napojení na cokoliv, pouze umožňuje dynamicky nastylovat HTML elementy
* nějaký příklad který někdo udělal (ale to jde i v čístém JS): http://desktop.sonspring.com/

jQueryUI (https://jqueryui.com)
* sada grafických komponent pro JavaScript

ZeptoJS (http://zeptojs.com/)
* stejné rozhraní jako jQuery, ale jen 10kb po minifikaci
* funguje pouze v moderních prohlížečích, Internet Explorer 10+

SammyJS (http://sammyjs.org/)
* malý a jednoduchý javascriptový framework

Bootstrap (http://getbootstrap.com/)
* známá sada hotových šablon pro vytváření responzivního webu (přizpůsobuje se mobilu i desktopu)
* https://bootstrapbay.com/blog/bootstrap-editors/
* https://www.zdrojak.cz/clanky/k-cemu-je-dobry-bootstrap-frontend-frameworky/
* https://jdsteinbach.com/css/stop-abusing-bootstrap-foundation/

Foundation (http://foundation.zurb.com/)
* známá sada šablon a grafických prvků pro HTML

Semantic UI (http://semantic-ui.com)
* sada šablon a grafických knihoven
* spolupracuje s jQuery

UI Kit (http://getuikit.com/index.html)
* sada grafických komponent pro HTML

Polymer (https://www.polymer-project.org/)
* sada grafických komponent pro HTML

DevExpress (https://www.devexpress.com/)
* Web Development: http://js.devexpress.com/WebDevelopment/
* free trial
* cena: $499.99

JavaScript - závislosti mezi moduly

RequireJS (http://requirejs.org/)
* načítání závislých modulů, definice závislostí
* AMD - asynchronous module definition

Browserify (http://browserify.org/)
* definice závislostí mezi moduly



Nástroje - Programy které usnadňují život programátora nebo řeší další problémy spojené s vývojem.

NPM - node package manager (https://www.npmjs.com/)
* umožňuje stáhnout a instalovat JavaScriptové knihovny a další programy
* původně správce závislostí pro NodeJS (serverside javascript), postupně se ale používá i na další věci

Bower - browser package manager (http://bower.io/)
* umožňuje stáhnout a instalovat JavaScriptové knihovny, zaměření na client-side věci které běží v browseru
* instalace pomocí NPM

Grunt (http://gruntjs.com/)
* automatizace buildu pro JavaScript
* rozdělení zdrojového kódu JS do více souborů (třeba i jedna třída/funkce na soubor)
* běží na pozadí a automaticky kompiluje výsledý javascript z menších souborů
* může spouštět další programy (např. automatické formátování kódu při uložení)

Gulp (http://gulpjs.com/)
* alternativa ke Gruntu
* https://www.zdrojak.cz/clanky/gulp-vs-grunt-souboj-bez-viteze-a-porazeneho/

Google Closure Compiler (https://developers.google.com/closure/compiler/docs/gettingstarted_app)
* kompiluje JavaScript do JavaScriptu
* kontrola JS kódu, optimalizace, minifkace, obfuskace

Microsoft TypeScript Compiler (http://www.typescriptlang.org/)
* nadstavba nad JavaScriptem od Microsoftu
* jazyk který je nadmnožinou JavaScriptu => veškerý validní JavaScript je zároveň TypeScript
* podpora modulů, tříd, dědičnosti
* rozdělení kódu do více souborů které se zkompletují do jednoho výsledného JavaScriptu

Google Traceur Compiler (https://github.com/google/traceur-compiler)
* umožňuje psát kód v nejnovější verzi JavaScriptu ES6 a zkompilovat ho tak aby fungoval i ve starších prohlížečích


Knihy a články - užitečné odkazy
* Mozilla Developer Network - ukázky a příklady (https://developer.mozilla.org/)
* JavaScript Design Patterns (http://addyosmani.com/resources/essentialjsdesignpatterns/book/)
* Patterns For Large-Scale JavaScript Application Architecture (http://addyosmani.com/largescalejavascript/)

* http://hackflow.com/blog/2015/03/08/boiling-react-down-to-few-lines-in-jquery/

[Lucas]

Ano, vývoj webového UI je nechutně roztříštěný a kromě toho, že budeš znát ode všeho něco, s tím momentálně moc nenaděláš. Tedy v případě, že se tomu chceš věnovat jako UI developer. Pokud hledáš jenom něco pro vlastní potřeby, tak si prostě něco vyber a to používej.

Do budoucna by situaci mohl zlepšit na nejnovějších standardech stavějící Polymer, který ale momentálně trpí tím, že není úplně dotažený, má neúplnou dokumentaci a existuje spousta zmatků mezi verzemi. Až tohle všechno doladí, tak to bude super věc, momentálně je to spíš pro dobrudružnější povahy.

V současnosti bych osobně sáhl po Reactu, pro automatizaci Gulp a jestli máš zájem používat ES6(což silně doporučuji, výborná záležitost), tak místo Traceur zkus spíš Babel, ten je podstatně dál a generuje lepší kód. Na TypeScript zapomeň, to je slepá ulička, radši se koukni na Flow.

[perceptron]

proc je typescript slepa?

[Lucas]

Protože už není k ničemu potřeba. Všechny někdejší největší táháky(jako třídy nebo moduly) jsou v ES6. Pokud už chci používat ES6, tak použiju kompiler, který podporuje všechno a ne jenom malou část, jako TS. No a nakonec pokud jde o typovou kontrolu, tak třeba právě oproti Flow působí TS dost neohrabaně. V dnešní době prostě nevidím důvod, proč bych měl TypeScript vůbec zvažovat, nic tak převratného mi nenabízí.

[Future IDE]

Chybí ti v tom seznamu React. To je budoucnost webového UI. Na všechny ostatní frameworky se vykašli. Budeš ještě potřebovat jednu nějakou knihovnu pro jednoduchou manipulaci s DOM, na to použij jQuery. Nic víc nepotřebuješ.

[andy]

Aj oracle ma take klikacie udelatko, myslim ze oracle web forms sa to vola, ale to neches pouzit, ver mi .
Najblizsie ku qt designeru ma podla mna vaadin (spolu s guava eventbus). Programuje sa to ako desktopova appka. Komponenty formularov posielaju cez ajax eventy a tahaju data zo servera bez refreshu stranky. Pouziva to coraz viac javovych projektov na take tie BE formulare, lebo je to super a setri to cas (https://vaadin.com/success-stories). Nechapem to s tym zviazanim s javou. Ako to urobis, tak to budes mat. Servisy mozes mat aj v c++ a iba ich volat, to je uz na tebe, ale imho tym nic neziskas. Neuviedol si, ake mas predstavy ohladom servera (dedikovany/nejaky hosting atd). Aj .net ma nejake RAD webove formulare..

Co sa tyka zabehanych rieseni, ano je ich viac ako v c++ svete. Ale to neznamena, ze nie su zabehane. V c++ vlastne tych GUI kniznic az tak vela nie je.. Ale aj v c++ mozes ist cez WinAPI, vsetko si to nakodit podla seba, alebo pouzijes qt..

[Sheldonizátor]

No už si zkouším hrát s http://reactjs.net 

Výhodou .NET vidím v tom že se asi půjde snáze napojit na běžící exe server napsaný v Delphi který má nějaká rozhraní v COMu, z Javy se to asi dělá špatně, i když možná se pletu...

[Ondrej Nemecek]

V javě jsem na volání com s úspěchem použil com4j https://github.com/kohsuke/com4j Z .tlb se vygenerujou .java třídy, které se přeloží a které pak slouží jako proxy pro com volání. Pohodlí, s jakým se to pak v javě používá odpovídá použitému com rozhraní. Pokud je dobře navrženo, je to komfortní. Používal jsem to lokálně na 64b Win7.

Existuje ještě http://www.j-interop.org/ kde lze volat com i z linuxu, ale na zprovoznění mi asi scházely podrobnější znalosti, jak com vlastně funguje, nedokázal jsem debugovat, proč mi neběží spojení.