Is there a simple convention over configuration application framework that is javascript based, which looks and feels like a rich client side application, out-of-the-box? For example, there is GWT... But it is heavy weight (i.e. it requires compilation).
More specifically, given that tools like JQuery continue to gain popularity - are there any vanilla CSS + JQuery application frameworks that (again, like GWT), just "work" out of the box, with intuitive and natural layout managers similar to those defined by the GWT/Swing toolkits ? These parts of any such framework might be driven by a high level js wrapper.
Since JQuery is modular, and modularity has its benefits, the above may not be a fair expectation. Java is quite modular, but by picking a stack (hibernate + Spring + JSP, for example) we can simplify java development. Is there such thing as a common JQuery stack for full service front end development ?
The closest thing I have found so far to embody this are :
GWT
SproutCore (recent discovery which I haven't done too much with).
FLEX related technologies.
I'm sure other approaches to High level web / CSS / js / html5 programming exist- what are they? Although its that many js tools exist, it's not clear which ones are low level DIY ones (for DOM hackers) and which ones are the (less flexible) pre packaged frameworks that "just work".
UPD: 2014 answer
It's great to see insane progress in the field, be sure to check out the following frameworks:
EmberJS
AngularJS
KnockoutJS
It's virtually impossible to recommend a specific one without being opinionated but you can find plenty of comparison articles on the web and related questions here on SO.
From your description, the top 2 frameworks for RIA (Rich Internet Application) development that I would suggest are:
ExtJS. A rich and mature framework with a big community and lots of complementary tools. Gives you OOP-like class system, an event system, a pretty rich and flexible library of widgets (with layout managers) and lots of other cool abstractions, just check out their website. Very good an extensive documentation. They also have a product named Sencha GXT (ex ExtGWT) if you want interoperability with GWT, they've been doing it for quite a while.
Dojo Toolkit. Another robust framework, quite similar to ExtJS but probably more lightweight (which is framework's strength, they use AMD to define/load modules)
Also worth noting that the second one is free for commercial use and the second one isn't. I suggest you to look at what these two frameworks have to offer out of the box and decide which one better suits your needs.
Other less popular (someone please correct me if I'm wrong) and generally smaller frameworks that have some community around them are:
Sproutcore. that you've mentioned
YUI. RIA framework maintained by Yahoo. ExtJS was originally created as extension to YUI.
qooxdoo. I'm not familiar with the framework but I've seen people recommend it. The description on the website looks promising.
These are the the frameworks that can help you architect "serious" single-page rich web applications. I should note that jQuery isn't generally suitable for such projects as a core. If what you want is more like library of widgets built on top of jQuery then you should check out jQuery UI but there's lots of other similar toolkits.
Also, check out these similar threads on SO:
free and open source alternative to extjs
What are alternatives to ExtJS?
Related
I am starting a new web application for reporting measurements to engineers. The main components I need are:
grids
charts
maps
I have investigated the following javascript solutions:
ext js
dojo
jquery
Dojo seems to be a good all-in-one solution but I am wondering why it is not widely used?
Which widget libraries are suggested for each one of these components(grids. maps, charts) ?
It typically depends on the nature of your application - is it intranet/enterprise or consumer?
High traffic, global websites have a different set of requirements compared to enterprise/intranet based apps, specially from a performance and footprint angle.
Assuming yours is an enterprise/non-consumer-market app, both extjs and Dojo will do well given that you want datagrids and charts
THey are similar in their approach to widgets (separation of data and view, encapsulation, widget classes, inheritance etc).
I suggest looking at the dojo nightly tests and extjs demos to ensure the library you choose has the features you need. Dojo nightly and demos: http://archive.dojotoolkit.org/nightly/dojotoolkit/
extjs: http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/
extjs is commercially licensed (so it is somewhat more polished) whereas Dojo is full open-source driven by community effort.
Dojo is actively being evolved though and dojo 1.7 has some nice enhancements like AMD
While there is lot of documentation for Dojo, you should be ready to look at multiple places to get answers - dojocampus, docs, nightly tests, widget source code, and of course, stackoverflow :-) - I have found it fun to learn the whole system and also contribute back to the community, the good thing is the widget system is extensible with many extension points, so you can override and customize what you want.
We use Dojo extensively in many departments in my large enterprise company and it has proved to be a good overall solution. Dojo is also backed and supported by IBM. Also, Sitepen offers commercial support for Dojo and has key dojo committers on its team.
JQuery is great for doing DOM manipulations, transitions etc and is lightweight and fast. Jquery UI offers widgets and there are lot of plugins available - but you will need to figure out the licensing model as plugins are typically separately licensed and also be willing to thoroughly test and modify them/create new plugins/widgets to ensure they fit your need.
http://square.github.com/crossfilter/
Maybe this one? It just went open source some weeks ago.
Another free JavaScript libraries you could use :
Paper.js
Raphael.js
Both of them should provide enough functionnalities for your needs.
I'm looking to modernize my web development with some cool libraries, but there are so many tools that do different things, often with overlap, that it is hard to decide.
I'm not interested in one framework but more in a combination of various tools that work well together. I've looked at resets and normalizers, boilerplates, HTML frameworks, and grid framework, CSS authoring frameworks, CSS frameworks, Javascript frameworks, DOM manipulation, AJAX, resource-loading, feature detection and UI libraries, Javascript toolkits, server-side pre-processors and client-side pre-processors, and framework generators; It's beautiful chaos.
Also I'm looking forward to using SASS and Coffeescript or something similar so a combo including those would be nice.
Update:
I've decided on JQuery for DOM manipulation and I would also appreciate some kind of kickstarter/bootstrapper.
Depends for what. Use what you know best!
However, here are a few recommendations...
The Feather-Weights
For quick, no frills and no overthinking development, I'd recommend:
Underscore for general JavaScript Development
BackBone for client/server communication (using jQuery or Zepto.js for AJAX calls) and designing your models and event buses
Jasmine for JS testing
SASS for cooler CSS
HTML Frameworks, what's that? :)
CoffeeScript is indeed great, if you want to go down that road. If you are interested in CoffeeScript, you may want to look at Google's Dart as well, but it's fairly recent.
The Heavy-Weights (Batteries Included)
If you're building a rather complex web-application (speaking more along the lines of thousands of lines of code here), you need to take it up a notch and in that case I'd recommend you look at:
The Dojo Toolkit
Sencha's ExtJS
The whole Google Closure Tools stack
Dojo and Closure can be integrated in complex build systems and their compilers will allow for a good modularization of your codebase while keeping it easy to produce a strongly optimized deliverable. They also both contain their own module loading system, so you won't need additional libraries like Require.JS, and will only load the parts you explictly tell them too if you use a custom build. But be warned, they're definitely more hands-on and have a steeper learning curve.
The Google Closure Tools are definitely very comprehensive and are as batteries included as it gets, but they do not necessarily make development easy for you: they give you the power, but you need to know what you are doing.
Bootstrappers / Kickstarters
Some solutions offer to "kickstart" your project and to prepackage for you a collection of some of the above tools, sometimes offering you some customization, so you can easily get started and don't need to maintain your own kickstarter up to date with new versions:
Bootstrap
Foundation
HTML5Boilerplate
Kickstart
Skeleton
WARNING: I haven't really tried these kickstarters extensively myself.
Obviously, the answer here depends greatly on what you're building. If you're really getting into front-end engineering and making single-page web apps, I'd recommend reading Addy Osmani's blog. Recently, he's been blogging and giving a lot of talks about javascript MVC/MVP/MVVM systems, as well as scaling javascript apps.
If you want a laundry list, read this article where he gives his ideal stack:
Backbone.js for lightweight MV*
Require.js + AMD + RequireJS text add-on (to assist with external template management)
Backbone.js LayoutManager (if you require some more intelligent layout management)
jQuery for DOM manip.
Handlebars.js for templating, unless you're doing something simple, in which case, opt for Underscore's Micro-templating
r.js for handling script optimization
Jasmine + Jenkins for testing and CI
Node.js + Express (speaking of Node, Miller Medeiros has an excellent write-up on how to use it as a build script)
MongoDB as a noSQL data-store
This is surprisingly close to what I use myself and I can attest to the quality of these libraries and this as a whole-stack solution.
jQuery for JavaScript. Many great UI plugins for UI controls in addition to the code jQuery API that hides the browser differences in the DOM.
Angular JS - Awesome. MVC Framework, great for quick SPA's
jQuery - DOM manipulation - good for effects (fading, toggling etc.)
Don't rely on it too much though.
Angular JS, jQuery - Some argue they work well together.
Backbone.js
Ember.js
React.js - Uses JSX, not JS, but pretty much the same thing
<script type='text/jsx'>
//JSX
</script>
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I've been working as a flex dev for many years, building really complex apps. With all the recent hype, I'm interested in learning HTML5.
What I like about the Flex framework is it's a consistent, coherent, complete stack for building RIA's. I like that it has a broad set of components out-of-the-box, and a framework for extending and building really complex, heavily customized & skinned components.
Are there similar frameworks out in the HTML5 space?
From the searching I've done, I see there's tonnes of useful .js scripts out there which provide nifty components, effects, etc. However, I haven't been able to find a solid js framework with a mature and architected component library.
This worries me that in building a complex application, I may end up writing lots of plumbing code to wire together disparate components.
I know that HTML5 is still in it's infancy, so if there are promising frameworks that I should be keeping an eye on, I'd like to know about 'em.
My shopping list of ideal framework requirements would be as follows:
Solid component architecture (including lifecycle events)
Extensible
Layout managers
Browser agnostic
Support for data binding
Support for complex Skinning
Abstraction of services layers & protocols (ie., SOAP / JSON / XML services are all a type of IRemoteService)
Along with the UI framework itself, what frameworks exist in the Javascript space for
MVC architectures. (Similar to Parsley, or Maté in the Flex world)
Dependency Injection
Unit testing
If you're a Flex dev, then might be be interested in checking out both the desktop and mobile versions of the Sencha Frameworks (my company): Ext JS for desktop apps and Sencha Touch for mobile/tablet apps.
Ext JS is focused on desktop web apps that can work all the way back to IE6, so there's not much room to be "HTML5"y although where we can we are (our new charting stuff uses Canvas, SVG or VML depending on the browser it finds itself on).
Sencha Touch is focused on Android, iOS, Blackberry and IE9(?) mobile browsers, so we get to use all the CSS3, localStorage, etc. etc. that you can shake a stick at. If you're looking for a test case of what you can do when you start with an assumption of a modern browser then this is it.
Ext JS & Sencha Touch is components all the way down. The best overview of both components and layouts is this article that was written for Ext JS 2, although the component and layout model hasn't changed much for Ext JS 3. Layouts are getting a rewrite for Ext JS 4 - which will have its first beta this month - to make them more like the CSS3 flexbox layout system.
Extensibility is the outgrowth of having a proper component model. Ext JS has a bunch of user extension components that can be mixed and matched. A good example of a professional after market component is Ext Scheduler. There's also a good tutorial on how to create components.
Data binding: UI components are bound to stores, so multiple UI elements are updated with new data as it changes. You can read the store API reference to get a sense of how it works.
Complex skinning - Sencha Touch has an excellent theming system which is being ported to Ext JS 4 - but Ext JS 3 and 2 are a little more involved to theme due to IE6 compatibility requirements (you have to generate images)
Services layers are abstracted with data proxy, which is extended for JSON, Http, XML etc.
Sencha Touch and Ext JS 4 have a (simple) MVC architecture. Ext JS 3 and below does not.
Here's a good write-up on dependency injection in Ext JS (but it should generalize to Touch)
For unit testing, we recommend Jasmine - which came out of Pivotal Labs.
Ext JS and Sencha Touch are pretty widely used - Ext JS mostly for corporate apps, but there are lots of big companies using it like Salesforce, Marketo and more for externally focused users. Sencha Touch has a nice gallery of apps from our latest dev contest, you should check it out.
If you care about tooling, we also have a GUI drag and drop Designer and a CSS3 animation tool (the latter in developer preview)
The HTML5 Boilerplate may be interesting to you. http://html5boilerplate.com/
I'm not sure about JS frameworks for MVC or Dependency, but for unit testing Dojo's Harness (due to new user restrictions I can't post a second link, but it should be easy to find) is pretty powerful. I'd take a look at more of Dojo's stuff as they do some pretty cool work with JS
Sproutcore is a javascript application framework. It is fully MVC with a rich key-value observing/binding infrastructure that reduces the amount of plumbing code you need to write, if you use it correctly. It supports most of your requirements:
"Solid component architecture (including lifecycle events)" -- every view has a bunch of lifecycle events.
"Extensible" -- Sproutcore supports mixins, and has its own 'convert prototypal inheritance' to classical inheritance stuff so you feel like you are creating classes in JS.
"Layout managers" -- You lay out your own views, where they are, how big they are. There are SplitViews which you can resize, and nest, but this might be one area where SC does not meet your requirements (although you can easily implement view resizing via observing)
"Browser agnostic" -- it is pretty browser agnostic, like any other JS framework will be.
"Support for data binding" -- very extensive binding infrastructure. If you bind a view field to a model field, it will update when the model is changed.
"Support for complex Skinning" -- skinned via css like any other web app if you don't like the default theme.
"Unit testing" -- SC comes with a qunit test harness in place. When you use the SC command line tool to create a class (be it an M, a V, or a C) the tool creates a test stub for you.
'HTML5' -- sort of a nebulous concept to start. SC definitely supports generating an html5 app manifest in the build tools. There are frameworks available for writing to browser local storage. I think more html5 capabilities will come online in the near future.
The NPR app on chrome app store and this sudoku app are both SC apps.
I think you might like the Sencha Framework which complies with some of the things you are looking for.
I'm in the same boat as you.
All the js frameworks I found require a lot of CSS to make them half as good as native flex.
Most of the newer js frameworks give up on older browsers.
Funding and cool demos may make meteor the long term js framework winner.
I like the simplicity of angularJs
here's a good comparison of some popular ones
http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/
I would like your opinion about these two frameworks. I like a lot the features of ExtJS, but recently I saw SmartClient and it seems to be great too, and free (its Client side features) for commercial projects. I tried a little of SmartClient and it seems to be easier than ExtJS, and it has a better documentation tnan ExtJS.
BUT.. I didn't work with any of these frameworks and maybe I'm wrong. That's why I would like the opinion of people who has worked with them.
And BTW.. how does the license of ExtJS work? you've to but one license for each developer and then you're able to develop and sell every app you want or you have to buy a license for each app you sell?
Thanks in advance for your help.
This has been pretty well covered on SO. Specifically here and here.
Ext JS is licensed per developer not per app.
I'm an Ext JS developer so I'm partial to Ext, but I have no opinion of SmartClient good or bad. If licensing is the most important criterion SmartClient might be better for you. If you want to weight the technical merits see the links above, or even better evaluate them both based on your own needs.
I use SmartClient and am quite happy with it and the support provided by Isomorphic. The U/I widgets aren't the nicest out there, but you can see that they've been around for some time by the richness of their API.
It's also quite easy to roll out your own custom controls when the built-in ones don't suit your needs. For example, we integrated Raphael pie chart SVG drawings inside custom Isomorphic canvas classes. We also integrated Mondrian/JPivot analytical technologies which are legacy JSP pages, using Smartclient's HtmlFlow control. It's quite powerful what can be achieved.
One thing I regret about Smartclient versus other technologies such as jQuery, is a clearer separation between the work a web designer does versus the work a developer/programmer does.
With Smartclient, it's mostly done thru code, even the layout of components. There's no HTML per say. They've separated very well the skinning (css), but that's about it. Everything else needs to be done by a developer/programmer thru Javascript code. Smartclient is good for single-page apps.
I can't speak for ExtJS as I haven't used it real production environments, but in the end I think it all boils down to the licensing model and programing/design model you want to be using.
I have used both, and I would recommend Ext for the following reasons:
Layout flow is much easier, especially with the design tools.
The UI Builder from Isomorphic lacks the usability that the tool from Ext offers
The Javascript performance was better with Ext
CSS is easier to use with the Ext framework
Editing CSS/Themes/Skins in SmartGWT/SmartClient is major surgery (very tedious and time consuming)
Widgets are similar but "prettier" in Ext
Forum administrators on both sites can be "snippy", however premium support did not change
this on the Isomorphic site. They are rude and condescending even when you pay.
Ext has a dedicated MVC framework. The Isomorphic framework does not.
SmartClient charting DOES NOT support negative number values
Before starting new GUI for our new project arrival, I made some research.
Here are my findings (remove spaces from "http: // "; bcoz stackoverflow is preventing me to do so :)):
Prototype framework favorable links:
http://en.wikipedia.org/wiki/List_of_Ajax_frameworks
http://www.javabeat.net/articles/12-comparison-of-ajax-frameworks-prototype-gwt-dwr-and-1.html
http://www.devx.com/AJAXRoundup/Article/33209
Dojo framework favorable links:
http://blog.creonfx.com/javascript/dojo-vs-jquery-vs-mootools-vs-prototype-performance-comparison
jQuery framework favorable links:
http://blog.creonfx.com/javascript/mootools-vs-jquery-vs-prototype-vs-yui-vs-dojo-comparison-revised
Test speed of different RIA frameworks:
http://mootools.net/slickspeed/#
More comparasions:
http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
http://jqueryvsmootools.com/#conclusion
Out of all these findings I started using SmartClient 5. Initially we faced some issues but as SmartClient matures I find it interesting in many terms:
1. APIs doc help and examples
2. Flexible controls
3. Forum
Today I am working on SmartClient 8 and few on my GUIs are in production running successfully. Actually the great help with SmartClient is that you find every thing at one place. No need to dug many other sites that is hard to do for any other open source RIA framework.
So my choice is no doubt SmartClient.
Thanks
Shailendra (shaILU)
I would prefer Jquery UI. Which is supported well by community. By combining plugins you can get similar -if not better- screens provided by extJS and SmartClient.
I'm working on a Java EE project right now, using lots of javascript function, but only using jQuery library.
I would like to know if anybody has some experience with this, used a Javascript framework with Java before, and tell me what would be the best way to do it, and best tool to do it.
Also, part of requirements are that I want to use the Framework to make it easy to handle the events, and to define a state machine for the website. I was looking a sproutcore, but couldn't find any information on how to use it inside a Java EE project.
For pure frontend compilation, there are several options, darioo mentioned Google Web Toolkit, though this is all very low level and thus harder to roll into out of the box. There are several GUI frameworks out there based on GWT.
Ext GWT
Smart GWT
Vaadin
Out of those three I hear our Java devs are most happy with Vaadin, though it's quite hard to create really customized (your average funky website with never before seen features...) frontend apps with these frameworks and you will long back for the expressive freedom JS toolkits like jQuery have to offer in a lot less code.
Then there are hybrids (JSP based), allowing more freedom in you frontend files (aka. frontend developers can tinker with it without knowing Java). Java code doesn't compile JS, but offers out of the box solutions you can tinker with in the JSPs.
JSF2 (uses YUI)
Spring Roo (uses Dojo JS framework)
Spring Roo scaffolds an entire frontend provides/uses the Dojo framework. JSF2 was/is looking nice as well according to our Java devs, though wwhen looking at the website, the angst of Oracle seeps in.
Both Dojo and YUI are quite expansive and mature JS frameworks specialised for large JS projects. Whereas jQuery is nicer for smaller JS projects with a rather flat architecture.
Ignoring Java based solutions, you can always fall back to YUI, Dojo or even MooTools for more architecture options.
You can also stick with jQuery, but imo. you need to be happily insane and masochistic (aka. frontend/JS developer) to maintain large scale JS/Html/CSS projects. jQuery is a nice toolkit, but as a framework, it offers meager architectural/structural solutions, you will have to devise them yourself by mixing and matching it with other small toolkits like RequireJS.
My best advice would be, build your app without JS first, using page refreshes and whatnot. Then apply a JS layer and build Ajax services for that layer. That way, your views and JS solution are losely coupled and theoretically, you can always switch frameworks without touching your JSP's too much.
If you already know Java, Google Web Toolkit is the most Javascript centric framework out there that I'm aware of.
Note: it's not just another Javascript library like jQuery, but a full blown framework with set rules you must adhere to. By writing Java code, it will generate Javascript for you that's highly optimized for speed, size and multiple browser compatibility.