Here's a link to their demo. Basically, it's an online tool that implements a lot of the visio functionality.
I'm building an app that would require similar type of user interaction, dropping, moving, editing, resizing objects, interacting with grids and guides, etc.
Since the project is for my own learning purposes, I was wondering what are some of the things I should focus on or learn to be able to develop such high quality interfaces
Cheers
There's draw.io, a very similar tool, but with the source on github.
To build such a rich user interface is a big task.
Which is why there are lots of frameworks and libraries which have already developed rich user interface stuff such as:
Sproutcore
Cappuccino
ExtJS
Dojo
jQuery UI
Sproutcore and Cappuccino are for developing desktop style applications for the web and include very good user interface components. As well as maintaing application states and data models. ExtJS has a lot of these features and a very nice UI toolkit, as does Dojo.
Lucidchart I notice uses the Canvas drawing API as well so thats something you would need to look into for shape manipulation and creating flexible connections. Mozilla Developer Center has some good stuff on the canvas API.
I would start off by taking a look at the Raphael library.
It allows you to write pretty simple Javascript code to draw graphic elements in the browser, including pretty straightforward animations and draggable/clickable interfaces.
In all honesty, it's not going to be quick and easy to write something as complex as the site you linked to, but Raphael is the quickest way to get started with the basics.
And best of all, Raphael is even compatible with older versions of IE, so you don't have to worry about only being able to support the latest browsers (though of course you may want to do other stuff that does need other new features).
Hope that helps.
Related
We are starting new development on mobile devices. We want to do webapps (with strong offline behavior) and hybrid apps, and keep business logic the much as we can in JS.
After a long time googling around about Jquery Mobile and Sencha Touch, I am actually thinking that it is not what we need: we actually count with an incredible web designer, so we want to use his talent to create the screens. This go against JQuery Mobile and Sencha Touch philosofy, because is just what they do: UI interface.
So, if we want to use our own screens, is there any benefit in using JQuery Mobile or Sencha Touch for the business logic and/or back-end ? Wouldn't it be overkill and in the end worse in terms of performance ? Would it be too much work to do our own business/back-end framework (ajax, jsonp, localStorage, filesystem access, etc...).
The much I see, the most I think that the only think that I would need from Sencha Touch are transitions (Jquery Mobile ones are terrible)...
They are both good framework choices for building your web/mobile apps.
While the most obvious thing about JQuery Mobile and Sencha Touch is their UI (its the first bit you seen when you navigate to their examples), there is also a lot of useful framework stuff running in the background, for example:
Sencha Touch is a Javascript Object-Oriented framework that lets you re-use a lot of your code, it supports the Ext.util.Observable class for using custom event listeners, Ext.util.MixedCollection for list iteration, and the Ext.data.Store for very powerful data handling.
JQuery Mobile supports a whole rage of touch handling events that will allow you to easily provide functionality beyond basic DOM event functionality (click, hover etc), it also runs on jQuery which has support for custom event listeners using the jQuery.bind() method, iteration using jQuery.each() and powerful AJAX calls using the jQuery.ajax() method.
In short, you are getting a lot more out of one of these frameworks when you use it, not just the interface. There is a lot of useful functionality in each framework that you would otherwise have to create yourselves from scratch.
You can use a combination of smaller frameworks that will provide you both with DOM manipulation and AJAX and local storage for being able to work offline.
For DOM / Ajax / event handling:
Snack.js: http://snackjs.com/
xui: http://xuijs.com/
For local persistence:
store.js: https://github.com/marcuswestin/store.js
Lawnchair: http://westcoastlogic.com/lawnchair/
They will do their part and stay out of your way to give your app the appearance you want.
With jQuery Mobile you can just use the functionality you want as all the widgets are now decoupled:
http://jquerymobile.com/blog/
Download builder: In the works
Now that we’ve decoupled most of the UI widgets, we’ve set the stage
for there to be a download builder. This will let you build a custom
version of jQuery Mobile to only include the parts you need. For
example, you could just use the core files to add Ajax-based
navigation with pushState and leverage some of the touch events and
other utilities with a very lightweight build (roughly 10k). Or, you
could add in specific UI widgets like form elements, listviews, etc.
to create an optimized build. We’re aiming to have a download builder
tool launch as part of 1.0 final in some form. We’re working on a
dependency map now for all the plugins to support this tool.
https://github.com/jquery/jquery-mobile/tree/master/js
Just pull the functionality you want from the Repo
Some good answers were provided to this question so I won't step on their toes. I'll just say that I was in a very similar position as you. Designer created the screens, I hooked them up into jQuery Mobile. After much testing and many benchmarks I concluded jQM just wasn't there yet.
I chose Sencha Touch over a hodge podge and mashups of other frameworks and libraries simply because it does everything. You can even customize the UI to your liking, you'll just have to dive in to the CSS.
Now, I will point out a fundamental UI flaw... Your designer should be designing for the environment, meaning, they should have some sort of familiarity/understanding of the technology the design will be utilized in. That said, give your designer a break down of the chosen framework and how to design for it rather than against it. If the designer says no, then they are not the type of creative you need on your team. :)
I have personally liked Sencha Touch. With latest version 2.4.1 support BlackBerry too. Its a very good bet when want to build apps to support all 4 popular mobile platforms (iOS/Android/Windows Phone/Blackberry). With Cordova packing Sencha Touch Hybrid apps give a very native like experience.
Also, http://mobileangularui.com/ is a very good alternative.
I'd like to build a proof-of-concept web-based database manager (such as the desktop version in the screenshot below) that has the following features.
The schema will be provided initially through a flat file.
It seems like HTML5 might be an option. What about non-HTML? What about processing.js? Are there any libraries I could/should take advantage? Is there already a service I can tap into?
Any opinions or advice would be appreciated!
Edit
Primary goal of the project is the build a protoype of the UI.
For the events that you will need to control everything, I would suggest using jQuery. It can cut you javascript in half. Canvas/SVG would be easy enough to use to create the diagram above (could even pull it off in straight html using some creative css and a judicious application of div's). I've never used flash but I also don't see anything in your image here that couldn't be done in Canvas/SVG. If you do go with Canvas you will want to look into using a lib called ex_canvas which will make it all work fairly nicely on IE (my company has some canvas items that work in IE6 using ex_canvas). Also you will want to look at css-sprites (in case you haven't heard of them before) as they can aid in the load performance of your page.
I've decided to use http://raphaeljs.com for the project. This SVG library supports older browsers and given this application is highly interactive with the user, it makes sense for me in this project to use SVG over Canvas.
Disclaimer & Long Winding Question Approaching
I know topics like this have been beaten to death here so suffice to say I'm not asking about which framework is better, I don't really care about opinions on the better framework. They all do pretty amazing things.
The Question
Given that I have an existing web application, made of mostly regular HTML+CSS (jQuery where needed), which is the optimal framework to integrate a few "rich" pages into typically a regular stream of HTML.
Reason
I am trying to bring our proven application into the realm of awesome desktop like UI but I want to do it one small piece, one screen at time. But for our users, support personel and especially me taking it slow is the only option.
Also, with our branding requirements having a framework that just takes over the viewport isn't an option, it has to play nice with other HTML on the screen.
Imagine the example being a rich user manager in an otherwise plain HTML+CSS environment.
Experience Thus Far
Dojo + Dijit
Pros: The new 1.5 widgets plus the claro theme is the cure for what ails us. Dojo seems to be able to use markup to create the UI which is very appealing and has a fair amount of widgets.
Cons: Holy bloated lib Batman! Dojo seems to be enormous and I have to learn a custom build system to get it to stop requesting 4,800 javascript files. This complex empire of Javascript makes me believe I won't be able to create much that isn't already there.
ExtJS
Pros: Amazing set of widgets, does everything we could possibly want. Seems quick, every version brings new improvements.
Cons: I'm not sure how to use this without the entire display being EXT. I'm still building a web site, so I would prefer something that could integrate into what we already have. Some pointers here would be great.
YUI
Pros: Well, it's Yahoo isn't it? AWS console is downright wicked. Plenty of support and a giant community.
Cons: Well, it's Yahoo isn't it? AWS console is the only wicked thing. Complex for someone who's used to jQuery.
Help Me
I am willing to accept experience, links to ways to solve problems I've outlined, new toolkits (even though I'm pretty sure I've seen most by now) or even just advice.
Regarding ExtJS, it's pretty easy to start it in an existing div with something like this:
Ext.onReady(function() {
App = new Ext.Panel({...})
App.render('div-id')
});
The App panel can then have it's own layout manager.
This might be useful if you're familiar with jQuery, but not yet familiar with YUI 3 syntax: http://www.jsrosettastone.com/
Each of the libs you listed is excellent. When embarking on a larger scale project, the quality of a lib's documentation, community, and commitment to support become more relevant.
With Dojo, keep in mind that outside of dojo base, it only ever loads what you tell it to. But yes, without a built layer, that means it could easily end up requesting 50 JS files at startup for a large application using a bunch of widgets.
There are several pages in the reference guide documenting the build script: http://www.dojotoolkit.org/reference-guide/build/index.html
Rebecca Murphey wrote a nice blog post outlining an example app and build profile that you might find illuminative: http://blog.rebeccamurphey.com/scaffolding-a-buildable-dojo-application
If you get stuck, there's likely to be people in the Dojo IRC channel that can help.
RE ExtJS: I'm not sure what your exact situation is, but keep in mind that if you're intending to use it in commercial non-open-source software, you need to pay for licenses: http://www.sencha.com/store/js/
I'm a little curious as to why you think the size / number of requests is specifically an issue with Dojo though. I haven't used the others, but I'd expect it to be somewhat of a potential concern with any of them.
Browsing the Internet, I found the new Ample SDK JavaScript framework. From their about section:
Ample SDK is a standard-based cross-browser JavaScript GUI Framework for building Rich Internet Applications. It employs XML technologies (such as XUL, SVG or HTML5) for UI layout, CSS for UI style and JavaScript for application logic. It equalizes browsers and brings technologies support to those missing any.
Examples from their website look very promising.
Did anybody try using this framework in real projects? Which are the pros and cons of working with Ample SDK?
I'm mainly interested in your subjective real usage experience, and not in the information already available at their web-site.
Another very subjective opinion from the creator of Ample SDK ;)
Pros:
Standard technologies and APIs make it simpler to take off
Markup-based UI is easy to create and maintain
Good separation of concerns - UI, Logic and Style
Easy to create new UI elements and entire languages
Non-obtrusive - only takes over designated areas on the HTML page
Cons:
Does not aid well development of web-sites (for which jQuery is just enough), it is mainly suitable for client-side apps that run in browser and communicate only data with server.
We've used Ample in one of the components of our Enterprise Application.
Advantages we've experienced:
Programming against well established API's (DOM, Dom Events) led to better code readability, more stable implementation of the end product, no programming against specific browsers.
The development cycle was also reduced by up to 50% of our normal development time.
The ability to create custom namespaces for component markup helped us to created a library of common UIComponents that can easily be changed,modified and used in all our future products
The separation of the concerns of the UIComponents and the Application by creating a custom language itself is one of the big advantages. We now only focus on implementing the business logic instead of skinning components and fixing view related problems. The Q&A cycles we're also much shorter than normally because of the stability of the end product
Disadvantages.
Hardly any. the framework is really stable and so far we did not ran into any problems with Ample.
I used in one project for the moment: http://www.programma.tv/.
As for that experience, I did not use any "UI language" (except XHTML, of course) from the A-SDK, just the core. Also I wrote custom UI language ("channels", "days", "items" and some more elements) and that was really simple in case you know javascript well.
But: think twice before implementing your own UI language (i.e. custom components) - maybe it'll be faster use something from the A-SDK?
Anyway, if you'll ask me to choose one word to summarise my opinion, I'd choose this one: "SIMPLE".
I am going to start a new application which mainly consist NavigationPane, Grid, Toolbar. Layout should look like this demo page http://www.gwt-ext.com/demo/
I am quite confused which one to use in terms of writing less code, more performant, etc..
Could someone tell the pros and cons of all these technologies.
All the while I coded in javascript, so that way ExtJs seems to be the easy one for me to code. But I am curios to try GWT Ext, Is it true that it could do a lot just by writing few lines of java code.
For eg: To achieve the layout ( given in above gwt ext demo url), which one should I opt ExtJs or GWT Ext.
I read SmartGWT is relatively slower than GwtEXT. Does it have any advantage over GWT EXT. I am also looking for hibernate based data modules ( as my application is going to have many database calls). Anyone of SmartGWT or GWTExt has support for such modules. I came to know that smartgwt doesn't offer all of smartclient enterprise version functionalities, that we are allowed only a few of smartclient features. Will it be an issue?
Your response is highly appreciated.
The GWT-Ext main page now says
"GWT-Ext is no longer under active development and has been superseded by Smart GWT. Assistance will be provided to existing users of GWT-Ext looking to migrate to Smart GWT."
so why would anyone use it?
To write the least code, use SmartGWT Pro. It provides a wizard that allows you to just pick from a list of Hibernate entities you've created, and instantly you have the ability to perform all CRUD operations on that entity, no code required. Then you can add business logic.
The wizard:
http://www.smartclient.com/smartgwtee/showcase/#tools_hibernate_wizard
The link about is just screenshots, but there are several Hibernate samples in the showcase. See especially the Master-Detail Batch Load and Save sample.
As far as performance, real-world performance of most enterprise apps is dictated by how often the application has to contact the server. In this area SmartGWT has a large lead because of features like Adaptive Filtering (see the Featured area in the SmartGWT showcase).
Almost all reports we receive of SmartGWT being "slow" are due to having Firebug enabled. Disable Firebug and performance is fine, so normal end users will never perceive slowness.
About 6 months ago, we studied whether we would use ExtJS or GWT-Ext for an internal application. We wanted the back-end to be J2EE standard frameworks (struts, spring, hibernate for persistence, etc.). We ended up choosing ExtJS because it seemed to us that GWT was not stable enough (too many changes in the API that is still recent), and Ext-GWT was always lagging behind in development.
application which mainly consist NavigationPane, Grid, Toolbar.
Well, this tells us a lot about your app, doesn't it :)
I think it comes down to how good you are at either Java or JavaScript. They are quite a different languages you know :) But if you are well-versed at both but only used Ext JS, then picking up Ext GWT (or GWT Ext, if you meant that), shouldn't be such a great deal. And if that application you are planning is going to be as simple and small as your description of it, then it's probably a perfect opportunity to try out something new.
I use GWT-Ext and it is quite good especially if you don't mind tweaking things with JSNI to customize the already existing Ext widgets it is incredibly powerful. Unfortunately development is stagnant, so my future projects will probably be either in SmartGWT or Ext-GWT. SmartGWT is written by Sanjiv Jivan (same guy who wrote GWT-Ext) and it has most of the widgets we need. I must say most of the skins are quite dated except the Enterprise skin which looks good, but you can always roll your own skin.