I'm trying to bootstrap a Rich Internet Application, which will have a complex canvas (think: Visio), and should work according to these principles:
it would run in a browser
it would run on a tablet (Android or other)
supports complex drawing, drag & drop etc.
runs on its own (eg. without a server component) happily
can leverage conventional & touch UI as needed - user can draw a line with a mouse or using the touchscreen
I was thinking about using a Javascript framework and found ExtJS, whose demos I quite like and checking the API docs it seems it supports all the low level GUI stuff I need (think: Ext.draw package, especially Ext.draw.Sprite).
But then I also found Sencha Touch, which seems to be leveraging the same technology stack, only for the mobile. However the API is much more limited (no Ext.draw available), and only runs in Webkit browsers, as far as I can understand. But it supports touch-based interaction.
Is there a way to create an app that works in a browser but can also be "compiled" to native mobile/tablet code (eg. with PhoneGap)? Or is this just a dream and these two cannot mix at the moment?
PS. checked the other similar questions but they seem to be quite out of date.
Short answer: it is currently just a dream I'm afraid.
Long answer: Sencha Touch and ExtJS share a lot of underlying logic and are somewhat similar, but I would say you'd only be able to reuse 50% of your code, at most, when trying to port one to the other.
jQuery Mobile and jQuery UI share similar issues at the moment - they have both created nice mobile UI frameworks, which only support webkit browsers, meaning there's no easy way of developing rich apps that run in desktops and on mobile platforms. Hopefully these projects will merge their mobile and desktop frameworks at some point in the future to allow us to create apps that can be deployed across both without a massive rewrite. There will always be differences in the way mouse and touch screen events work but I wish that was the only thing we had to consider.
Extjs is for desktop application, while Sencha touch & touch charts are for mobile, eg. tablet or Android.
#JunkMyFunk is right, you'd only be able to reuse 50% of your code at most.
The definition of class is not the same between Extjs and sencha touch which means currently you can't mix Extjs with sencha touch, the namespace will conflict if you do that way.
Related
We developed an application 15 years ago with .NET.
Right now we are thinking about recoding it.
Our ideal requeriments are:
1. Multiplatform: tablet and PC (Mac, Linux, Windows)
2. Hosted at our own server so we could sell the application as a SAAS
3. Develop some parts of the application for mobile devices
4. Use of third party components: datagrid, appointment schedule, graphical charts.
We think we should focus our efforts on web tecnnologies because:
One language for all platforms, even we could use some of our code for requirement 3 using a responsive web design, so we have requirements 1,2,3 out of the box.
Our favourite development tool would be extjs because of the components it provides (requirment 4).
But our big problem is.... we are not sure we could a graphical part of our application with html5/extjs:
There are 40 images we should import, ideally svg because the user should interact with them (click, drag and drop) so some other images could render inside the original ones, as layers.
For each image we can draw from 0 to 20 images over it, and whatever combination of them is possible so the total number of images could be huge without layers.
Any framework we could use? Maybe raphaeljs? Any example with layers? Tutorial examples are too simple and we're not sure about performance issues.
Maybe another option could be C# & mono? Basic knowledge about C# or WPF in our team but not with mono or implementint it as a SAAS. Maybe we could use xamarin?
Requirement4 could be implemented using a Telerik control or similar but we have no idea about compatibility issues (requirement 1).
Maybe we are too ambitious?
Ext JS 4 supports SVG drawing out of the box: see Ext.draw.Component.
I want to start developing a mobile hybrid app using angularjs, css3 and html5. Was searching for a framework and found these two. Both are looking very nice however I was not able to get a good comparison between both of them. Can anyone please list down pros and cons for both.
A comparison between them in terms of scalable, out of the box components, speed and compatibility with Angular and devices targeted will be very helpful
One year has passed since both frameworks were released. Onsen UI is currently in stable 1.2 version while Ionic is in the last release candidate state.
I have worked with both of them so let me give you a short overview, I also wrote a much larger blog article, you'll find it at the end of this answer.
I won't go into much details about the core framework; if you have a previous AngularJS knowledge you will easily transition to Ionic or Onsen UI.
Both frameworks are built around AngularJS and they heavily depend on directives, you can also easily build your custom directives. Onsen UI also features a jQuery support (unnecessary if you ask me).
Both frameworks support Android 4+, iOS 6+ (some features are available on Android 2.3), Onsen UI also officially supports Firefox OS and desktop browsers. Ionic don't have an official desktop support, but it will still work (it will not be pretty, imagine ).
Ionic currently don't support Windows Mobile platform (it will have it in the future); Onsen UI support is currently in development (since November 2014).
Both frameworks support some kind of splitview feature so they can be used for table development.
Both frameworks have a distinctive beautiful looking flat UI. I prefer Ionic over Onsen UI look and feel, but this is a matter of personal taste. Both default themes look iOS 7 like.
Onsen UI supports native looking themes for Android and iOS. Ionic framework uses the same theme for all platforms, but some features will depend on the platform (for example tab look and feel)
Both frameworks have a working theme builder.
Ionic supports SASS while Onsen UI is built around Topcoat CSS library.
Both frameworks have a large widget support (directives)
Onsen UI has a better documentation. It is separated at two different locations. First one is “Components” where you can see different directives and each one has a working example you can use and replicate. Second part is a “Guide” where you are guided through the application creation process.
Ionic has a disorganized documentation (heavily fragmented). It lacks a real “getting started” tutorial, even if you have previous AngularJS experience. It shows you pieces, but not how to connect them correctly.
On the other hand Ionic has much larger community so you will easily find problem solutions.
Ionic framework has a great official forum + large StackOverflow community. At the same time, Onsen UI uses only StackOverflow as a help center (I would call this a fail).
Onsen UI has an HTML5 IDE called MONACA IDE (great tool), Ionic IDE is currently in production; you can participate in beta test.
Ionic has a growing 3rd party plugin community (for example date picker); I couldn't find any 3rd party Onsen UI plugin
I wrote a much larger article covering Ionic / Onsen UI changes, find it here.
Since both frameworks are pretty new and not very popular (yet!), I don't think anybody has taken the time to do an extensive comparison between the two. I don't even think the final set of out of the box components is determined by the developers themselves yet, active development is still going on.
As for compatibility, hybrid apps run in the native browsers of the devices where they are installed on. Both frameworks need CSS3, so old phones will never be supported by either of the frameworks.
The OnsenUI-tag here on StackOverflow is the only support OnsenUI offers (currently), and at the moment of writing there are 0 questions/answers. Ionic has a very active forum on their website + some questions/answers here on SO.
I think having an active community backing up a framework will eventually lead to a better framework. Therefore I'd go for Ionic. Personally, I find Ionic's standard-design more appealing as well, but you should judge that for yourself.
Ionic
more lean to Angular style like routes,controllers and template and it's structure is kind of complicated in first hand.
command like "ionic start myApp tabs" still don't available in onsenUI
Material Design like "Cardboard" are available
OnsenUI
simpler structure, easy to start
couple with Monaca IDE, some of features are only available only if you use Monaca. otherwise you have to create things by yourself.
supported ios8 design recently
Ionic has a more mature feature and CSS component set and out of the box. Injectable delegate services, representing the UI elements (directives) gives you more control over UI/UX interactions. The development community is (currently) very active and it's gaining traction.
I cannot properly speak to speed/performance between the two but know both are optimized for mobile.
As I develop more, I will report back with comparisons. Good luck.
Just started using ionic after some time native development. Must seriously say it has some great cli features! For example you can start your project from a gist in my opinion this is nice to have for poc's
Havent been able to test everything but what i've seen really impresses me!
It's well documented in there own way, active community and it keeps getting better.
Just wanted to share my thoughts for what it's worth
Im working in Ionic Framework during 1 year with a real project, i have created a game with Ionic, its very special because hybrid app is not best choice if you want create game. When you develop a game you need performance !
However if you develop simple game with few animation, its good.
Here is my game in playstore, its a memory game "Memory Party" :
https://play.google.com/store/apps/details?id=fr.jhaccoun
Why Ionic is a good choice :
very very very good documentation (tutorial, forum, article,...)
stable (ionic 1), you can find many apps in store
Easy to develop (ionic come with many tools to help the developer, you can develop and test in live in your phone without deploy thanks live reload
Many cordova modules are available
you don't need mobile skills, just angularjs, html, css...
Ionic provide beautiful components and you can custom the components if you like
I found Ionic the best for some reasons, like their community support and the documentation. I am still evaluating the onsen from a long time but still havent found the one unique thing that will drift me towards it compared to Ionic
I am using CI, but seriously considering a move to ATK4. The SaaS code I build always has to be desktop & mobile accessible, so recent projects have relied on Twitter's Bootstrap layouts to allow a good browser experience, regardless of screen size.
How does ATK4 handle mobile browsers, especially small screen like on phones? Is it really just a matter of the theme you choose with Theme Roller, and if so, are the any themes that are known for a both a good mobile & desktop experience with ATK4?
Agile Toolkit is targeted at the UI development, and primarily the desktop browser UI. The site is still usable on mobile devices, just like any jQuery UI site.
However, if you would like to use a different CSS engine, you are free to do so, simply change your shared.html file to have the necessary includes and you would need to write more templates. Well, you are writing templates right now anyway with CI, so it's pretty similar experience.
I'm looking for the best cross browser compatible swipe script for android, iphone and other touch phones. Has anyone used any of the available frameworks or have you used custom scripts? What is your experience with these?
SenchaTouch
jQTouch
Phone Gap
Unify Project
Any others? I am joining a mobile task force and would like to get more involved in one or more of these communities so I can provide some UI support.
Thanks,
Seth
First of all, let's sort out the apples and oranges.
PhoneGap and Appcelerator Titanium are NOT UI frameworks. They are both Web to Native bridging technologies. They provide JavaScript API's for mobile capabilities like accelerometer, contacts, GPS, telephony, etc. Also, they facilitate the creation of a deployable mobile app (versus a web page)
Sencha Touch, jqTouch, and jQuery Mobile are mobile UI frameworks that provide support for mobile UI concepts, like touch, swipe, transitions, small screen sizes, etc. They can run in a pure web page or be used in conjunction with PhoneGap or Appcelerator Titanium in a mobile app.
I'm not too familiar with the Unify Project, but it seems to be a bundle of PhoneGap plus their own UI framework.
Both Sencha Touch and jQuery Mobile are in early days, but already have some great capabilities and they're moving fast.
SenchaTouch is good, but be aware that it provides no native hardware support, so if you need access to the phone hardware, you will need PhoneGap or equivalent.
I hear good things about jqTouch, but haven't tried is personally.
Another option is Appcelerator. If you need to write an app for mobile devices, it is a really approachable framework. You write javascript code, and their machinery compiles it to the appropriate platform. Note that this is for writing apps that run on a mobile device directly, not for writing apps that run in a browser on a mobile device.
I found jqTouch to be great on top of the PhoneGap technology however you need to understand that all the "good looking" UI kits are built on HTML 5 and so far you'll be disappointed with the HTML 5 support from Android devices. You'd think Google would be on this like ants on syrup but you'd be wrong. The jqTouch works like a dream on almost all iOS based devices and quite poorly on most Android devices.
As for Titanium, it still appears and feels web based and there are no UI styles to my knowledge. This means it "attempts" to look native whereas with PhoneGap and JQT you can get a really nice theme. So if you want "snazy" then go PG and something else. Titanium is far more stable than JQT when you're building for iOS and Android so that is a plus but it would be really nice if they did some kind of theme engine.
note over time this answer will become irrelevant as Android improve their HTML 5 support and those UI frameworks become more stable :)
I've been developing a travel planning site - tripgrep.com - which is built on appengine, GWT and smartgwt, among other technologies. It is still early days, and the site is now working well on my development environment, which is either a windows or mac computer.
However, I am frequently talking up the website to my friends when we are at a bar or other venue, so I am standing there while they try to access the site via an iPhone, Android or Blackberry - I've witnessed all three. It has been painfully obvious that the browser based frontend takes a long time to download on a mobile device. I am pretty sure this is because of the javascript download for SmartGWT.
So, I would like to look at alternatives to SmartGWT.
What I like about SmartGWT is that it has a reasonable look and feel out of the box - I don't need to learn any design or css and it has an office application look. This is considerably better than the GWT built-in widgets, which just get a blue border. The better look-and-feel is why I went with SmartGWT early on. However, the slow load times are killing me on these mobile demos. So now I want a fast loading widget alternative that has good look-and-feel out of the box.
The features I care about are: tabs, good form layout, Google maps API integration, grid data viewing. If those are all available in a library that loads quickly on a mobile device, then that's the library I want.
Your best bet is probably just to use the standard GWT widgets and learn how to style them to your liking. SmartGWT's automatic styling is nice, but as you've noticed, it comes with a price.
Even GWT's standard widgets, which are lighter, could still be trimmed down for maximum speed, so if you're really adventurous you could roll your own light-weight widgets that do only what you need them to do.
You can try mgwt-also called mobile gwt...(available at http://code.google.com/p/mgwt/ )
You could write a wrapper for jqTouch... that would be cool.
Write a seperate View for your model, specifically for either a) mobile devices or b) iPhone speicfically (see "iui" f.ex.). That is the very best way to do it.