Javascript Web-UI framework gezocht

[Sando]

Als ik een interface met wat opties en formuliertjes aan wil bieden, maar behalve dat het netjes is verder geen interesse heb in de specifieke layout, dan heb ik iets nodig om met code aan te geven van "hey, doe ff formuliertje hier, paar knopjes daar."

Bijvoorbeeld om een Raspberry Pi aan te sturen, een webapp te maken, of voor wat taken en scripts op een VPS.

Nu is er bijvoorbeeld ExtJS wat dit kan, maar ExtJS is een groot zwaar lomp framework wat nog veel meer doet. En stiekem is het bouwen van een GUI alleen best wel lastig in ExtJS zonder dure Ext Designer software aan te schaffen.

Tijdens het zoeken kom ik ook UKIJS tegen, wat veel zachter en simpeler lijkt te zijn en ongeveer doet wat ik wil. Maar dit project is al bijna 4 jaar verlaten, en de website (en tutorials) werken niet (meer).

Weten jullie nog open source frameworks in deze richting te noemen die as we speak nog ondersteund worden?

edit:

Voor de volledigheid, ik kom op andere forums wel eens een link naar MochaUI tegen, maar ten eerste werken veel voorbeelden (en de website zelf ffs) gewoon niet op mijn browser (Chromium) en dan houdt het snel op, maar ook is het gebaseerd op MooTools, heb ik nooit mee gewerkt.

Ik werk liever met jQuery, maar jQuery-UI is geen oplossing die ik bedoel, omdat het weliswaar het maken van UI elementen vergemakkelijkt, maar je nog steeds een groot deel van de html moet schrijven. En dat is dus niet de bedoeling.

[ Voor 25% gewijzigd door Sando op 18-09-2013 18:54 ]

[F.West98]

jQuery UI of -Mobile?
Zeker de laatste is voor simpele UI's

[johnkeates]

Dojo heeft Dijit, die kan dingen.

Interfaces kan je ook met Twitter Bootstap maken.

[Sando]

@johnkeates Twitter Bootstrap, positieve dingen over gehoord dus ik heb er een goed gevoel bij, maar nooit zelf gebruikt. Lijkt het op jQuery-UI (in de zin van dat je alsnog pagina's moet schrijven - zie edit onderaan mijn vorige post)?

Dojo, daar was iets mee. Een tijdje terug heb ik een artikel over allerlei frameworks gelezen en Dojo kwam er niet goed uit. Weet niet precies waarom dat was, maar ik heb er een slecht gevoel bij.

@F.West98 Ik zal eens kijken naar jQuery-mobile. (Voor UI zie edit)

edit:

Ik zoek dus iets waarmee je (op wellicht een placeholder-div na) zonder html, puur en alleen met javascript, een complete GUI kunt maken.

[ Voor 15% gewijzigd door Sando op 18-09-2013 19:01 ]

[pingwings]

Tegenwoordig kun je met HTML5 al een hoop controls out of the box gebruiken.
Ja je zult wel zelf HTML moeten schrijven, maar dat is eenvoudig (net als de CSS bij een simpel formulier).

Ook validatie zit ingebakken in HTML5.
Je krijgt als bijkomend voordeel erbij dat het ook nog is goed werkt op telefoons (remote je raspberry aansturen).

[R4gnax]

Sando schreef op woensdag 18 september 2013 @ 18:59:
Ik zoek dus iets waarmee je (op wellicht een placeholder-div na) zonder html, puur en alleen met javascript, een complete GUI kunt maken.

Dat ga je buiten ExtJS niet vinden. (ExtJS vind ik zelf trouwens echt een vreselijke draak van een product.) Accepteer gewoon dat je vast zit aan HTML en CSS voor je structuur en layout en gebruik deze ook als zodanig. Dat wil niet zeggen dat je bergen layout hoeft te gaan kloppen en aan elkaar moet gaan rijgen met JavaScript. Je kunt ook gewoon MV* frameworks als Ember, Angular of CanJS gebruiken.

pingwings schreef op woensdag 18 september 2013 @ 20:18:
Ook validatie zit ingebakken in HTML5.

Validatie is nou typisch één van die dingen waar HTML5 tekort schiet zonder op JavaScript terug te vallen.

[ Voor 13% gewijzigd door R4gnax op 18-09-2013 20:28 ]

[Ramon]

Sando schreef op woensdag 18 september 2013 @ 18:59:
Ik zoek dus iets waarmee je (op wellicht een placeholder-div na) zonder html, puur en alleen met javascript, een complete GUI kunt maken.

Maar welk probleem los je hier mee op? Je wilt [snel] UI's maken zeg je. Dit kan uitstekend met twitter bootstrap, geen JavaScript voor nodig.

[Sando]

R4gnax schreef op woensdag 18 september 2013 @ 20:27:
Accepteer gewoon dat je vast zit aan HTML en CSS voor je structuur en layout en gebruik deze ook als zodanig.

Nee. Dat is nu juist exact het tegenovergestelde van wat ik vroeg.

Je kunt ook gewoon MV* frameworks als Ember, Angular of CanJS gebruiken.

Dat klinkt interessant, ik kende ze nog niet. CanJS geeft 504 trouwens dus die heb ik niet bekeken. Ember en Angular lijken me (handige) templating frameworks. Maar niet wat ik zoek. Want html.

Ramon schreef op woensdag 18 september 2013 @ 21:21:
[...]
Maar welk probleem los je hier mee op?

Srsly?

Het probleem dat ik alles in javascript wil doen en me niet bezig wil houden met html en css. Daar zoek ik een framework voor.

Ik zit nu op ExtJS. Dat doet wat ik wil, maar is lomp en voor mijn doeleinden veel te bloaterig en lastig te hanteren.

Zo is UKIJS al lichter en simpeler, maar dit is ook oud en onbekend en unmaintained.

Ter verduidelijking, check bijvoorbeeld eens deze mockup email app. Kijk daarna eens naar de html.

[RM-rf]

YUI zou ook een optie zijn,
http://yuilibrary.com/

ontwikkeld door Yahoo, alhoewel ik enkel met een oudere variant gewerkt heb, was mijn ervaring (en ergernis) idd ook dat het vrijwel losstond van het (correct) gebruik van HTML...
(en ja, het was imho ook zwaar en bloated)

Echter, ik zie juist wel een groot voordeel erin dat je bv voor GUI elementen, forms en andere controls gewoon allereerst goed HTML gebruikt, en hooguit javascript en eventueel CSS als 'extra' layer hier overheen gelegd wordt...
Dat maakt het uiteindelijk veel inzichtelijker, beter onderhoudbaar (mits de code gewoon correcte en semantische html5 is)

[ Voor 4% gewijzigd door RM-rf op 19-09-2013 10:06 ]

[Cyphax]

RM-rf schreef op donderdag 19 september 2013 @ 10:04:
YUI zou ook een optie zijn,
http://yuilibrary.com/

ontwikkeld door Yahoo, alhoewel ik enkel met een oudere variant gewerkt heb, was mijn ervaring (en ergernis) idd ook dat het vrijwel losstond van het (correct) gebruik van HTML...
(en ja, het was imho ook zwaar en bloated)

Echter, ik zie juist wel een groot voordeel erin dat je bv voor GUI elementen, forms en andere controls gewoon allereerst goed HTML gebruikt, en hooguit javascript en eventueel CSS als 'extra' layer hier overheen gelegd wordt...
Dat maakt het uiteindelijk veel inzichtelijker, beter onderhoudbaar (mits de code gewoon correcte en semantische html5 is)

Dan heb je ook http://alloyui.com/, die is gebaseerd op YUI. Is ook het bekijken waard.

[The_Ghost16]

Kendo UI is ook een goede optie. Ik gebruik deze zelf ook en ben er erg over te spreken. Heeft aardig wat controls en buiten een placeholder div en wat configuratie via javascript hoef je verder niks te doen.

http://www.kendoui.com

[TheNephilim]

Sando schreef op donderdag 19 september 2013 @ 00:14:
[...]

Srsly?

Het probleem dat ik alles in javascript wil doen en me niet bezig wil houden met html en css. Daar zoek ik een framework voor.

Ik zit nu op ExtJS. Dat doet wat ik wil, maar is lomp en voor mijn doeleinden veel te bloaterig en lastig te hanteren.

Zo is UKIJS al lichter en simpeler, maar dit is ook oud en onbekend en unmaintained.

Ter verduidelijking, check bijvoorbeeld eens deze mockup email app. Kijk daarna eens naar de html.

Ik ben bang dat je toch zelf in ieder gevalk HTML moet gaan schrijven hoor. Het mail voorbeeld dat je noemt, heeft wellicht een lege start, maar met JavaScript word gewoon HTML opgehaald. Ik denk niet dat er iets is wat je zo even in JS kunt coden en dan ineens passende HTML output.

JS gebruiken voor het afhandelen van de actions/requests/etc en zelfs serverside zoals NodeJS kan prima. Maar automagisch de juiste HTML uitspugen, zonder er wat voor te doen... ik ben benieuwd

[Blue-eagle]

Hoe complex moet het worden? Ik gebruik bijvoorbeeld de Chrome plugin "Postman" om tegen mijn API's aan te praten. Een lading calls in een collectie, simpel. Volledig REST-ful in te stellen, headers aan te passen, etc.

Als het puur voor eigen gebruik of test doeleinden is kan je daar waarschijnlijk mee uit de voeten Mocht je veel complexer gaan doen dan dat, dan zou ik overgaan op Backbone. Hoe dan ook ga je een markup taal nodig hebben. Zelf regel ik het meeste tegenwoordig server-side met .jade templates. Je ontloopt HTML sowieso niet makkelijk.

[Sando]

TheNephilim schreef op donderdag 19 september 2013 @ 13:25:
Maar automagisch de juiste HTML uitspugen, zonder er wat voor te doen... ik ben benieuwd

Nou, ik develop voor sommige klanten in ExtJS en dat doet precies dat. Alleen dat "zonder er wat voor te doen" is een beetje denigrerend naar iets wat je niet kent. Natuurlijk moet je er iets voor doen. Frameworks zijn ervoor om de boel wat makkelijker te maken, niet om te toveren. Maar zoals ik al eerder zei is ExtJS veeel te lomp voor een klein project.

UKIJS is was vziw het zelfde: Nee, je hoeft geen html te kloppen. Dat doet het framework.

Goh ik dacht dat iedereen wel van dat soort zaken op de hoogte was en mij wat bij kon bijbrengen over nieuwe handige moderne andere WebUI frameworks, omdat ik al te lang zit vastgeroest in dat oude lompe ExtJS. Maar het lijkt erop dat ik iets nieuws verkondig waar nog weinig mensen van gehoord hebben: WebUI's maken zonder html te schrijven.

Blue-eagle schreef op donderdag 19 september 2013 @ 14:28:
Ik gebruik bijvoorbeeld de Chrome plugin "Postman" om tegen mijn API's aan te praten.

Hey bedankt voor de tip, dat Postman is inderdaad wel handig!

Voor test-doeleinden dan. Uiteindelijk wil ik toch voor hobby- danwel werkdoeleinden een specifieke interface maken zonder html te hoeven schrijven.

Mocht je veel complexer gaan doen dan dat, dan zou ik overgaan op Backbone.

Ik ontwikkel zelf in node.js en gebruik client side veel jQuery. Maar het probleem met Backbone.js is dat ik niets kan vinden waar het mij kort en bondig uitlegt wat de meerwaarde is.

jQuery doet dat heel goed (en o.a. daarom is het ook zo populair). Kleine code-snippets en een live voorbeeld. Van dynamische truukjes totaan ajax-calls. In één oogopslag is het al cool. Maar iemand moet die saaie en droge uitleg van Backbone even hip maken met wat live voorbeeldjes erbij.

Hoe dan ook ga je een markup taal nodig hebben.

Daar ben ik het niet mee eens, zie ExtJS. Maar ik zoek dus iets beters voor kleinere en simpelere dingetjes. Het hoeft ook alleen maar layout en forms te kunnen maken. Functionaliteit schrijf ik wel in iets anders.

Verder bedankt voor de tips iedereen!

RM-rf schreef op donderdag 19 september 2013 @ 10:04:
YUI zou ook een optie zijn,
http://yuilibrary.com/

Je zegt zelf zwaar en bloated, dat is jammer en wel vaker het lot van een framework dat al wat langer bestaat. Maar inderdaad moet je gewoon een html-document hebben. In die zin doet het me erg aan jQuery denken (maar dan anders), een soort van concurrent. Het is anders, maar niet beter (imo).

Cyphax schreef op donderdag 19 september 2013 @ 10:13:
[...]
Dan heb je ook http://alloyui.com/, die is gebaseerd op YUI. Is ook het bekijken waard.

Die ken ik niet! Daar ga ik nog even naar kijken.

The_Ghost16 schreef op donderdag 19 september 2013 @ 10:18:
Kendo UI is ook een goede optie. Ik gebruik deze zelf ook en ben er erg over te spreken. Heeft aardig wat controls en buiten een placeholder div en wat configuratie via javascript hoef je verder niks te doen.

http://www.kendoui.com

Dat klinkt goed, en in je uitleg lijkt het exact wat ik zoek. Maar het is commercieel. Dan valt het voor mij af. Uit principe. Geen discussie.
Of is het dual licensed zoals ExtJS?

[ Voor 34% gewijzigd door Sando op 19-09-2013 17:55 ]

[Sando]

De tussenstand

Naar aanleiding van tips, google, eigen ervaring en wat hear-say.
Bij de mij onbekende frameworks heb ik me alleen een beetje ingelezen. Als het veel geschikter is dan ik denk, kom gerust even met een linkje naar een artikel of voorbeeld.

Web-UI frameworks

• Hulp bij widgets (je moet nog steeds htdocs schrijven)
  • jQuery
    • jQuery-tools http://jquerytools.org/
    • jQuery-ui http://jqueryui.com/
      • Meest populaire keus, veel info beschikbaar. Veel slordigheidsfoutjes (IMO).
  • Prototype
    • Script.aculo.us http://script.aculo.us/
      • Soort jQuery voor Prototype. Prototype + Script.aculo.us = jQuery. En dan nog niet eens UI.
  • YUI (Niemand kent het maar we gebruiken allemaal de YUI-compressor)
    • YUI library http://yuilibrary.com/
      • Soort jQuery-ui.
    • AlloyUI http://alloyui.com/
      • Soort geavanceerde jQuery-ui.
      • YUI schijnt bloated en lomp te zijn, weet niet of je dit wilt gebruiken.

• Hulp bij templating (je moet nog steeds htdocs schrijven)
  • Ember
    • http://emberjs.com/
  • Angular
    • http://angularjs.org/

• Layout frameworks (komt een beetje in de buurt van wat ik zoek*)
  • PureCSS
    • http://purecss.io/layouts/
  • Twitter Bootstrap
    • http://getbootstrap.com/getting-started/

• Web-UI framework!!1 (framework verzorgt html, dit is wat ik zoek*)
  • UKIJS www.ukijs.org
    • Oud en dood, valt af
  • KendoUI http://www.kendoui.com/
    • Commercieel, valt af
  • ExtJS http://www.sencha.com/products/extjs
    • Lomp, zwaar, bloated, ingewikkeld
    • Te ingewikkeld voor kleinere/simpele projecten

*) Wat ik zoek:

Misschien helpt het als ik nogmaals (wat uitgebreider) aangeef waarom ik geen html wil schrijven. Altijd als de html een ondergeschikte rol heeft, bijvoorbeeld omdat het slechts om een interface gaat voor iets belangrijkers (e.g. het aanzetten en controleren van een machine), heb ik geen interesse in design. Hoewel het er wel gewoon netjes moet uitzien.

Als je toch html gaat kloppen dan leert de ervaring dat je altijd een zekere tijd kwijt bent aan mierenneuken. Een beetje dit, beetje dat, zus, zo, en dan ziet het er redelijk uit. Nog wat meer mierenneuken en nog wat meer. Dan is het perfect.

Ik heb helemaal geen zin om die tijd er in te steken, want het is van ondergeschikt belang.

jQuery-ui lijkt leuk, maar je moet de pagina om de widgets heen nog in elkaar mierenneuken. En bovendien weet ik uit ervaring dat het erg slordig is. "Knopje op het ene element heeft opeens andere padding dan op het andere element" achtige slordigheidjes. Keer 10. Moet je je daar weer mee bezighouden.

Ik vermoed (van horen zeggen, zelf nog niet gebruikt) dat Twitter Bootstrapper me het meest op weg gaat helpen als ik met zo min mogelijk moeite en zonder interesse in het visuele aspect mijn eigen html wil schrijven, en anders toch weer bij ExtJS uitkom. Maar de kans is groot dat de tijd die ExtJS development kost niet opweegt tegen het zelf schrijven van html met bijvoorbeeld Twitter Bootstrapper.

Alleen heb ik moeite te geloven dat zoiets handigs als html-loos html schrijven à la ExtJS/KendoUI(?) niet veel populairder is en dat er echt geen frameworks voor zijn die ik nog niet ken.

[ Voor 25% gewijzigd door Sando op 19-09-2013 18:55 ]

[R4gnax]

Sando schreef op donderdag 19 september 2013 @ 18:40:
Alleen heb ik moeite te geloven dat zoiets handigs als html-loos html schrijven à la ExtJS/KendoUI(?) niet veel populairder is en dat er echt geen frameworks voor zijn die ik nog niet ken.

Deze aanpak is niet veel populairder omdat het eindresultaat performance-wise een complete domper is.

[Sando]

Ah kijk, ik heb al wat alternatieven gevonden waar ik nog nooit van gehoord heb die lijken te doen wat ik zoek.
Qua uiterlijk lijkt het erg (gejat?) van ExtJS, maar de code is wat simpeler.

DHTMLX - http://dhtmlx.com/

Net als ExtJS is dit ook dual license, €€ voor closed source, gratis voor open source.

edit:

En QuickUI - http://quickui.org/

Maar enkele voorbeelden werken niet out of the box op mijn Chromium dus het valt meteen af. Misschien is het ook verouderd?

edit:

En AmpleSDK - http://www.amplesdk.com/

Hoewel je alsnog markup in XUL(?) moet schrijven. Maar het is in ieder geval zonder gemierenneuk (zie uitleg onderaan mijn vorige post).

edit:

En nog even hierop terugkomend:

johnkeates schreef op woensdag 18 september 2013 @ 18:52:
Dojo heeft Dijit, die kan dingen.

Ik heb er even mee gespeeld, en Dijit is inderdaad ook in de richting van wat ik zoek. Je moet nog minimale markup maken maar Dijit regelt bijna de volledige layout.

Echter in wat grotere voorbeelden merk ik al dat het veel trager is op mijn netbook dan bijvoorbeeld ExtJS applicaties. Heeft vast iets te maken met:

Sando schreef op woensdag 18 september 2013 @ 18:59:
Dojo, daar was iets mee. Een tijdje terug heb ik een artikel over allerlei frameworks gelezen en Dojo kwam er niet goed uit. Weet niet precies waarom dat was, maar ik heb er een slecht gevoel bij.

Plus dat ik het niet lekker vind schrijven.

[ Voor 86% gewijzigd door Sando op 20-09-2013 03:50 ]

[Sando]

edit:

Ik edit net mijn dubbelpost leeg, wordt ie opnieuw gepost.
Trippelpost.

edit:

Als je eenmaal een paar weet dan wordt googlen naar alternatives steeds makkelijker. Nog een:

Echo3 - http://demo.nextapp.com/echo3csjs/

Beetje traag alleen. Voelt een beetje als OS/2 Warp
Ik zit er vast naast want dat heb ik al bijna 20 jaar niet gebruikt.

edit:

SproutCore - http://sproutcore.com/
Lijkt interessant.

edit:

QooxDoo - http://qooxdoo.org/

"Despite being a pure JavaScript framework, qooxdoo is quite on par with GUI toolkits like Qt"

[ Voor 177% gewijzigd door Sando op 20-09-2013 04:07 ]

[Sando]

edit:

dubbelpost

edit:

Laat ik deze dubbelpost dan even gebruiken voor de tussenstand.

Dat ga je buiten ExtJS niet vinden. Accepteer gewoon dat je vast zit aan HTML en CSS

Ik ben bang dat je toch zelf in ieder gevalk HTML moet gaan schrijven hoor.

Client-side javascript Web-UI frameworks

• UKIJS www.ukijs.org
  • Oud en dood, valt af
• KendoUI http://www.kendoui.com/
  • Commercieel, valt af
• ExtJS http://www.sencha.com/products/extjs
  • Dual-licensed - free for GPL use
  • Lomp, zwaar, bloated, ingewikkeld
  • Te ingewikkeld voor kleinere/simpele projecten
• DHTMLX
  • Dual-licenced - free for GPL use
  • http://dhtmlx.com/
  • http://dhtmlx.com/docs/products/docsExplorer/samples.shtml
• QuickUI
  • Werkt niet goed op Chromium, valt af
  • http://quickui.org/
• AmpleSDK
  • Markup in xul
  • http://www.amplesdk.com/
• Dijit
  • Dojo-based. Dojo is traag en lomp.
  • http://dojotoolkit.org/
• Echo3
  • OS/2 Warp gevoel.
  • http://demo.nextapp.com/echo3csjs/
• SproutCore
  • Interessant
  • http://sproutcore.com/
• QooxDoo
  • Interessant: Quite on par with GUI toolkits like Qt
  • http://qooxdoo.org/demo

Legenda:
Twijfel
Valt af
Kandidaat

Mocht iemand dit topic lezen die ervaring heeft met één of meerdere van de groene frameworks, dan hoor ik graag je mening.

[ Voor 110% gewijzigd door Sando op 20-09-2013 04:36 ]

[Daspeed]

Nooit mee gewerkt, maar volgens mij ook html-loze UI:
http://enyojs.com/sampler/

Edit --> ik herinner me ook cappuccino:
http://www.cappuccino-project.org/
Maar die is nogal gericht op ontwikkelen met Apple-smaakje.

[ Voor 46% gewijzigd door Daspeed op 20-09-2013 13:39 ]

[Sando]

Cappucino werkt met Objective-J, schijnt te lijken op C, is vermoedelijk net zo'n learning curve (of nog groter) als voor het eerst met ExtJS werken.

EnyoJS kende ik nog niet, en voldoet inderdaad aan de criteria. Persoonlijk vind ik de output echter niet mooi en niet relaxed werken. Het is geschikter voor tablets, maar het blijft subjectief. Toch bedankt voor de tip. Ik heb hem op mijn lijstje Frameworks voor mobiel gezet. Handig om te onthouden, maar niet wat ik op dit moment zoek.

Mobile UI Framworks

• jQuery-mobile
• Sencha Touch
  • http://www.iui-js.org/
• Jo-app
  • http://joapp.com/
• jQT
  • http://jqtjs.com/
• EnyoJS
  • http://enyojs.com/sampler/

[ Voor 3% gewijzigd door Sando op 20-09-2013 15:46 ]

[Jogai]

Kendo UI heeft ook een open source versie hoor. Wel wat beperkter dan de volledige versie maar mogelijk wel genoeg. Geld ook voor wijmo, heeft ook een gpl versie.

Hier nog een hele lijst met toolkits: http://uiwidgets.t7interactive.com/#/ Misschien zit er iets bij?

[Sando]

Wow nog meer. Bedankt voor de link!

Het is wel lastig om te kiezen. Natuurlijk vallen een aantal af om objectieve en subjectieve redenen, maar verder moet je er eigenlijk mee gewerkt hebben om de beste keus te maken.

En ook vervelend dat veel van die half-commerciële half-open frameworks (e.g. wijmo) nergens duidelijk aangeven wat het verschil is. Wijmo spreekt bijv. nergens over (gedeeltelijk) FOSS.