I'm thinking which frameworks should I use to port an existent application UI to a mobile friendly one.
I've seen Ionic and I was pretty happy with its UI and components until I noticed it requires Angular.js for its functionality.
My project is developed in Knockout.js over Node.js and I'm not planning to start using Angular at this point.
jQuery Mobile seems like another alternative to it but it seems its development its not as active and its community is not as big or as active.
Plus the UI is not native for each OS and it looks as good in big screens.
I've seen other alternatives (Onsen UI, Intel XDK, Sencha Touch, Kendo UI, Framework 7...) but none of them seem to be as popular and as active as Ionic and some of them still need Angular.js.
Isn't there any out of the box framework that doesn't require Angular.js and which provides not only the UI but also the touch features as Ionic does?
Bootstrap might not be at the same level as all of these frameworks.
I would suggest you Onsen UI. Since Onsen UI 2.0 release (at the moment in open beta) the framework is completely agnostic, which means that can work standalone. Nevertheless, it's also still compatible with some of the most famous frameworks like AngularJS 1.x (and Angular 2 in the future), ReactJS (see demo) and KnockoutJS.
Moreover, besides being compatible with iOS and Android, it's one of the few frameworks to be compatible with Windows platform (Windows Phone, Windows Universal App) and to implement Material Design! The learning curve is also very fast.
The community is not so small, as you can see from StackOverflow activity and Gitter Channel. Moreover, the developers are very active in the development, in the issues fix (almost 600 bugs fixed at the moment) and open to listen to the users suggestions.
Take a look at this article about Onsen UI 2.0 and give it a shot.
I suggest you should use any of these UI frameworks
http://www.idangero.us/framework7/get-started/
http://chocolatechip-ui.com/
Save yourself all the stress, Its independent of any Js framework and very simple to implement, just like Bootstrap.
I have actually used the first one. framework7
You can create Mobile Apps UI with Native Look & Feel For Web or Hybrid
Related
I am new to qooxdoo framework I have few questions,
In all the sample QX.Website apps provided there was no QXTheme defined in config.json, is it like themes are used in a different way instead of config.json or how?
Is qooxdoo is like replacement for jquery or will be used together with jquery. Since jquery has lot of plugins available. I am not finding qooxdoo as easy as jquery
3.QX.Desktop is desktop feel like website or it is a desktop application itself, same for qx.mobile too?
I am working on a POC it will be of great help.
QX Website
Is cross-browser library that can help you build lightweight websites.
It main features are DOM selector, BOM and HTML abstraction layers, cross-browser keyboard and pointer events. As well some network abstractions for REST service and web storage. Οther functionality is provided through modules. There is no theming option because theming is done by regular css.
You can see an overview of the modules here.
QX mobile
Is the attempt to enable developers use the same principals as in qx.desktop to create web apps that have that feels likes a native app or you can simply use cordova or something else to ship your application inside any store.
QX Desktop
Is the way to go if you are building a single page application.
It has the feeling of a desktop application but this is only theming and it runs in the browser it doesn't run on desktop.
TIPS
If you want to build a mobile app don't use qx mobile as I don't think is maintained appropriate anymore.
If you would like to have a more modern theme checkout the clean theme from sqville.
If your project have a lot of forms and think to use qookery as it will be easier. (Shameless plug I'm one of the contributors of qookery).
I do not know much about web tech and currently, I am planning my own project implementing web app + hybrid mobile app.
Based on my research, it seems many people use bootstrap, on the other hand for mobile, ionic seems one of the most popular ones.
web: bootstrap +
mobile: ionic
While planning it, I met an issue, i.e. how I can combine bootstrap source with ionic and its difficulty, and would it take many steps to modify code and apply for both sides.
So my question is
1. is it easy to combine bootstrap to ionic?
2. Is there widely used tool that is integrated for web and mobile application development?
Thanks in advance.
Bootstrap is meant to be a CSS library for creating responsive web, be it webapp or mobile. You can easily create a webapp using AngularJS as you mention, and let its responsiveness be driven by Bootstrap.
Ionic 1 is meant to be a mobile app development framework, not mobile web. It has got a lot more than just CSS styles; it creates hybrid native apps for Android, Apple and Windows platforms. Though it does just run fine on mobile screens as a webapp.
Ionic 2 has support for webapps so you can easily write your mobile app that can then be deployed either as a native app or on a web server.
Though on both versions of Ionic, you may choose to use Bootstrap for styling your elements but be aware that this won't replace Ionic's own scss. And it might create some unforeseen issues as you've pointed out.
Bootstrap is primarily for webapps running in browsers.
Ionic is targeted to run the applications in a webview using cordova. So, it contains many platform specific stylesheets, properties etc.
1. is it easy to combine bootstrap to ionic?
There is no point of combining both, as IONIC is providing everything you need from bootstrap. ( Element Stylesheets, Common Functions etc ).
2. Is there widely used tool that is integrated for web and mobile application development?
Angular JS is going to help here. You can reuse most of the angular code is both have the same functionality.
For IONIC 1 : You need Angular 1 and IONIC 2 is based on Angular 2.
I want to use Ionic Framework for my mobile website.
I wonder that is there any risk for run Ionic Framework on mobile browsers.
I'll only use framework's CSS and JS which includes modals, popups, menus etc.
I built a prototype and I tested it on all versions of iPhone and 2-3 versions of Samsung. I haven't seen any problem on these devices. But I want to learn all risks before I start to real project which includes static pages and quotation steps. I'll use UI router by using HTML5 pushstate.
To learn your opinions, makes me more confident.
Thanks in advance.
Kindest...
There are certain caveats to this:
1. Ionic doesn't have a web server, and its testing server uses UIWebview and will not allow for POST requests.
2. Ionic is more optimized for app that is resident on the device. There are certain capabilities (ngCordova plugins for camera...etc.) that won't be available on mobile web.
Your scenario ("framework's CSS and JS which includes modals, popups, menus etc.") - should be fine, since you're only using functionality within Webview. You'd have to build a custom JS library that would only include presentation layer features.
Our current web application for mobile is build with jquery mobile
https://www.bit2c.co.il/mobile
I would like to upgrade it with better ui, plus I believe that jquery mobile js and ui are not working smooth over IPhone 4. (the nav bars, header and footer, are refusing to stay fixed ).
So I did some research and found that mobile angular UI is working pretty well over different smart phones including IPhone 4.
My question is:
1.Is this framework well supported and will continue to grow ?
2.Is it working inside phonegap hybrid application ?
3.If using it means there is no need for jquery? and by that how all the functionality done with jquery is done with angular instead?
Please keep in mind I have little angular knowledge and I've seen there will be great change in angularJS 2.0. which leads me to concern in using this version.
Thanks !
If anything, Angular 2.0 is more mobile-aware than 1.3. My team has built a mobile-only application with Angular 1.3 and it works quite well. We've also wrapped it in Cordova to build native mobile apps, although there were more issues there due to third-party JavaScript. The main problem with starting a new app with Angular 1.3 today is that eventually Google will only push security fixes, and no new features will come to the framework. If you build a one-off app, that's fine, but if you're building a new product that will keep on evolving over the next 2 years, 1.3 is not the right choice anymore.
The main challenge I would say we have is that it takes a while to load upon the first page-load. We're a content site with little user "functionality" and while Angular has been good, I don't think it's the best solution for a plain content site; Angular is really meant for applications where you want users to interact with things on the screen without creating new pageloads for every click.
We plan to create a hosted web app with AngularJS. As UI Framework we found Ionic and Onsen to work well with AngularJS. Both of this frameworks promote that they are made particularly for Hybrid Apps. But us I understand correctly, both frameworks are based on web technologies. So what are the drawbacks when using the suggested UI frameworks for non Hybrid Apps? Is it mainly the Browser support?
Thanks
Well, both Ionic and Onsen are made particularly for Hybrid Mobile Apps. You just won't be able to use it even for tablet apps without customization (If I am wrong, please correct me) just because they target the limited viewport and incorporate phone UX patterns.
Also, they are made with PhoneGap in mind (the apps will be hosted in the WebView component), and addresses some common WebView problems, e.g GPU acceleration for better performance.
If you need just some UI framework for a simple Web App you'd better have a look at Twitter Boostrap or Zurb Foundation. For a complex case you may even consider Sencha instead of Angular.
There is a part of Ionic that expects the Cordova/PhoneGap Device plugin to be installed. It helps with displaying on Android and iOS appropriately, as well as increasing the size of header bars for iOS 7. That wont be an issue for web though, since you'll have the browser's "chrome" taking up that space.
You may loose some of the buttery smoothness in things like page transitions because the template files need to travel over a (often cellular) connection to the internet, but your app will most certainly work if built with Ionic or Onses over the web.
Things changed considerably over last few months.
Both frameworks now support splitview so they can be used for tablet devices. Subjectively Onsen UI has a better support (it is much more configurable), but Ionic is also not bad. This can translate to smaller desktop browsers screens.
You should also consider that Onsen UI has a dedicated desktop browsers support (all web-kit browsers). Ionic framework will also work on desktop browsers, but it was not fully tested or optimized for such environment.
Biggest problem here is that both frameworks were never meant to be used on larger screens. They look oversized and bloated. If you ever worked with jQuery Mobile (on desktop browsers) you will understand this problem.
There is nothing stopping you from doing that - it might even be a smart approach for a mobile first design approach. The advantage is that you could rapidly iterate an idea an then invest in a native or platform specific app depending on user feedback/metrics.
The main drawback would be the user expectations for your UI and application logic which are different for a web page and a native app. For example the back button will be duplicated in the browser and in your header. You could use some platform specific CSS or configurations to hide it. Then there is your application state and user data - will you save it in local storage, session or database? This depends on your app and best judgement.
There will be some browser issues which may not be addressed in the core of Ionic and Onsen because they are not targeted to work with IE6/7 (see angular browser support), for example, but you can resolve those by having a graded browser support policy.