What is main feature of Sencha Touch over jQueryMobile I don't understand.
as per my knowledge about this two technology:
1) jQueryMobile have very simple data attribute feature for design app for cross mobile platform but as compare to Sencha Touch.
2) Sencha Touch have new concept and their structure to implement designing for page is very difficult compare to jQuery Mobile.
Then What is significance of Sencha and jqueryMobile and What is their own area in Which they both play role significantly ?
Intro
Unlike jQuery Mobile Sencha Touch (just like App Framework) is made specifically to work on mobile platforms and it is highly optimized. Where jQuery Mobile is made to work equally on desktop and mobile devices and it is not optimized like Sencha Touch. This is not bad for jQuery Mobile but it also means jQuery Mobile is not best solution form mobile hybrid applications.
Good side of Sencha Touch
It is several times faster then jQuery Mobile, you can find several benchamark articles if you google a bit. From my experience Sencha Touch mobile applications works much much smoother then jQuery Mobile ones. Again this is not an attack on jQuery Mobile, Sencha is highly optimized not to mention build to run only on web kit browsers.
Much better application packaging system then Phonegap which is usually used with jQuery Mobile
Did I say it is FAAAAAAST, a little bit slower then App Framework but still extremely fast.
Excellent documentation with huge number of tutorials and video examples.
vs. the bad
Unlike jQuery Mobile don't expect Sencha Touch to work on a desktop browsers. First it is optimized to work on a smaller devices and it will work only on web kit browsers which makes it unusable for Firefox, IE8+ ....
It uses complex and alien syntax, specially to someone coming from jQuery Mobile or jQuery like syntax.
Development application is a paid app so you need to expect initial expenses.
Don't expect native app feeling, mobile apps made with HTML5 will never have 100% native feel.
Unlike Sencha official documentation jQuery Mobile is still much more represented on the internet
Final advise
If Sencha Touch is not something you are willing to spend time on and jQuery Mobile is too sluggish for you, consider using PhoneJS or Kendo UI. Unlike Sencha Touch, they are built on jQuery, but unlike jQuery they are fast as Sencha Touch.
There is also a jQuery fork, special for mobile devices called Zepto.JS. You have a lot of extra mobile events like swipe and it's a lot smaller and faster than the regular jQuery lib. Downside is that you don't have the UI elements like you have in Sencha Touch or jQuery Mobile, but you have a lot of freedom. And it's MIT licensed. I like that a lot.
Related
I would like to use the same HTML markup for both mobile and full size viewing modes. Do you think I should follow jQuery mobile's anatomy convention regardless? Eg. data-role="page", etc. mixed with full-size markup
I think you should use responsive themes regardless using jquery or anything.
Responsive web design (RWD) is a web design approach aimed at crafting
sites to provide an optimal viewing experience—easy reading and
navigation with a minimum of resizing, panning, and scrolling—across a
wide range of devices (from mobile phones to desktop computer
monitors)
In my opinion, you should go for CSS3 to handle page layout for your targeted screen sizes. jQuery mobile will not get fit for desktop view(UI look and feel). go for different styling for desktop view and mobile view.
jquery mobile is a framework that makes webpages look like native apps.
You use it to enhance your 'standard' HTML based webpages, so it's like adding on another layer to your webpage that makes it feel and operate like a native mobile app.
It is possible to use it for both desktop and mobile browsers, and for simple implementations even use the same basecode to do this.
See Mobile Graded Browser Support here for supported browsers:
http://jquerymobile.com/gbs/
Also the HTML markup used on mobile browsers and desktop browsers is the same markup, so technically there is no 'full-size markup'.
jquery mobile Enhances HTML, it is not a replacement for it.
In one of my website I use Twitter Bootstrap 2.3. I love its responsive behaviour, media queries in mobile devices. But it lacks of mobile features (especially linked listviews) So I need to use a framework that would handle mobile version of my website.
After some research I found that jquery mobile, sensa touch, jqtouch, iui, mobilize.js, zepto are possible candidates.
What would be your recommendation for a javascript framework/plugin for mobile pages, that would work well with twitter bootstrap ?
Possible related questions:
Bootstrap list view like jqm
twitter-bootstrap vs jquery-mobile
Using Bootstrap with jQuery Mobile
Also read this: Twitter Bootstrap Navbar: [Left Button -— Center Text -— Right Button]? II
I think i should be possible to build a mobile interface with Twitter's Bootstrap (3). And yes you're right (linked) listviews will miss. Maybe check http://getbootstrap.com/components/#list-group first. Of course you will need to write some code to handle the actions.
Other points to consider: Navigation and page structure. Frameworks like jQuery mobile serve more pages on one url, see: http://jquerymobile.com/demos/1.0a2/#docs/pages/docs-navmodel.html while sencha use a MVC approach. Consider http://getbootstrap.com/javascript/#tabs (or http://getbootstrap.com/javascript/#scrollspy maybe) to mimic such structures.
Other examples, see: How to make a JS horizontal content slide from px to % responsive a nice interface with TB by #boblet which adopt to mobile very well now: http://bootply.com/73715. David Panzarella started a clean mobile navbar with icons: Bootstrap 3 RC2 Navbar with Multiple Collapses And a alternative mobile navigation stucture can be found here: Toggle sidebar on mobile device with Twitter Bootstrap 2.x
Good luck
If you are ready to mess up with Bootstrap and other several frameworks together then make sure you have sound knowledge in jQuery, JavaScript, CSS.
Each framework has their own way of enforcing styles etc, so if you are to combines multiple platforms together, you will often encounter issues such as the expected style from expected framework is not being applied.
I’d recommend you to stick with jQuery Mobile. jQuery Mobile 1.3 has great deal of Responsive design concepts. In the release notes itself they’ve mentioned that they are working hard to support Responsive designs. Read the official documentation provided by jQuery Mobile. This will give you a good head start.
Disclaimer : I have used only Twitter Bootstrap and jQuery Mobile. But I’ve heard from people other Mobile frameworks are not as flexible as jQuery Mobile. Also remember Sencha touch is very fast compare to jQuery Mobile but bit difficult for absolute beginners to get started.
I would recommend iUI since i'm working on it (eh eh) and because it's more or less an empty canvas you can "draw" whatever you want on.
JQuery Mobile or Sencha are nice, but they come with dozens or buttons & UI elements you might not need for a website. It's even getting a mess if you want to give a custom look to your mobile website when everything is predefined.
afaik, Zepto is only a lighter JQuery, so that wouldn't solve you linked listviews issue that much...
Please, give a try to my iUI v2 project, Emy, that you can try here:
http://www.emy-library.org/demos/
Still a few bugs to fix but i'm damn close to the initial release. Big difference compare to iUI are HTML5 syntax, custom animations, full documentation and WindowsPhone support.
http://www.emy-library.org/documentation/1.0/getting-started.html
Cheers!
I'm working on a few html5 screens which will be embedded inside native mobile apps (for ios and android).
I obviously don't want to reinvent things here, and would like to use a stable framework on the javascript side of things.
I tried using JQuery Mobile but it is way more than I need, plus they kind of force you to do things their way.
All I need is to have an element which can be (vertically) scrolled by swiping (without visible scrollbars), but I couldn't find how that can be done with JQM easily (without all of their widgets, themes and defaults).
I also tried jGestures but it did not work at all.
Any ideas what will be the best approach?
Thanks.
Update
I found this jquery plugin which does what I need: https://github.com/ifightcrime/touch-scroll
You can use -webkit-overflow-scrolling: touch; which uses the native inertia scrolling built into the phone. Works really well. There is a scrollbar, but I'm sure some clever positioning could solve that.
More info here: http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/
And here: http://fioravengi.blogspot.co.uk/2011/06/implications-of-ios-5-webkit-overflow.html
Hope that helps :)
edit: Sorry, just realised you need it to work on android. I doubt this does. For iOS though this works a treat. So, half an answer!
I'm building a draggable timeline of sorts for a new project using some simple jquery ui features and have run into a problem regarding mobile devices.
Namely, drag and drop just doesn't work on touch screen devices like that. I've noticed any video players you pull up run proprietary plugins on your phone so moving the timeline around is not an issue. But, seeing as I'm not really doing video, I was hoping for some sort of work around.
Thoughts?
You could try to use JQuery Mobile Drag and Drop
See here for some documentation.
NOTE Using JQuery mobile will work on some phones, but not all phones. Older Blackberries, HTC Phones, and many other ones cannot handle many JQuery Mobile calls. Look at this page for more information on compatability
I know there are a number of frameworks to help make web applications on Mobile Safari/Webkit look and behave like native applications (eg, jQTouch), but are there any more light-weight libraries that help out at a slightly lower-level?
eg, I might want to add some animations on certain touch events to reproduce an iPhone style swipe.
I don't want to create an iPhone web application as such, just enhance an existing site with a few special touch events.
It's not so difficult to create this stuff by directly using the touch events that the device provides, but some of the iPhone animation styles are quite complex to reproduce. eg, the bounce when you get to the end of a scroll bar, etc... Just wondering if anyone has done the work and wrapped it up into an open source library.
This doesn't answer your question completely, but since you mentioned bounce scrolling specifically, TouchScroll was just released on Tuesday.
I am looking for the same thing, JavaScript frameworks free from IE stuff..
So far
XUI
http://code.google.com/p/xui-js/
SLY
http://github.com/digitarald/sly
Coming Soon
jQuery for touch devices (not jqtouch) http://jquerymobile.com/2010/08/announcing-the-jquery-mobile-project/
http://zeptojs.com/ is all you want.
It's jQuery trimmed for webkit mobile. Excellent library with (brand new) great documentation. Handles ajax, dom selection, touch events. Does not have UI components.
Very lightweight.