I'm starting a HTML5 mobile application with HTML5BoilerPlate as a template and I cannot find a lot of resources regarding the best practises for HTML5 mobile development. I am looking for stuff such as:
- navigation using tab bar controller
- navigation between view
- how to best handle content ? (is it better to use several divs within the content div and only show one div at a time ?)
In fact, I'd like to understand some of the things done in Google Latitude.
Is there any good beginners guide for those items ?
You have to implement a lot more of the logic around these 'controller' components. Some of the classes that might be present in iOS development are not in HTML5. You either need to roll your own or use an existing framework.
Navigation between views is handled programmatically. You would need to do it yourself, by implementing components that can animate to/from the screen, or use one of the readily available frameworks like Sencha Touch or jQuery Mobile.
It depends on how you want the visual flow to work. I know that Sencha Touch adds in the divs lazily so not to take up as much memory. I guess the trick here is to experiment to find the best implementation that suits your needs (and then write a blog article).
SixRevisions has a pretty good article on getting started in general HTML5 programming. Some other articles, here, some good tips here, and Apple's docs.
The best beginner guide that I found for Sencha Touch was their examples included with the source code. They have an example for just about every UI control they ship and multiple applications that will gently introduce you to the framework. Other resources include their Vimeo Channel, their forum, and their docs.
Also, you can probably pull up a mobile site and take a look at how they are implementing their code using Chrome/Safari's developer toolbar. You may have to emulate a user agent string of a mobile browser though.
We have released a Mobile Boilerplate and the documents in the associated wiki are definitely something you should look into for info about this.
While not guides, I would HIGHLY recomend looking into either the Sencha Touch or JQuery Mobile HTML5 Mobile Frameworks. They, combined with HTML5 Boilerplate, will do more to bootstrap your project then just HTML5 Boilerplate alone.
Related
We have a requirement to build app with as much common codebase as possible, that works on desktop and mobile platforms (Android, iOS, Windows Phone). Also, the app on mobile platforms should act like an app (so not mobile-friendly website), with access to camera, position, and an icon.
Having looked at all the options and finding some or the other quirks, I decided on having webapp/site on browser and PhoneGap to base the mobile app on.
Now, as far as my understanding goes, sticking the codebase of browser webapp/site in Phonegap base structure should work for the mobile app. Of course, some minor changes may be warranted.
However, I also saw that relying only on phonegap and barebones HTML5 tech (without any UI framework) would need a lot of time and would be tiresome.
So I looked around for a UI framework and found - JQuery Mobile, Sencha Touch, Kendo UI, etc. jQuery Mobile, while could work in desktop browsers too, would not give me a grid-like system to position elements. The rest of them seem to work only on mobile platforms - they did not boast about it working/scaling on desktop browsers.
So, is there any common library/framework that can provide - CSS animations, grid-like system for positioning, etc.?
It's not an "answer" so much as an idea for a method. Perhaps try creating what you need from a desktop perspective first using bootstrap so it's mobile first. Then maybe make use of something like jquery mobile for the bare bones navigation and structure in the app. You can then pull in your page content via ajax using the same code/layouts from your "desktop version" (which will of course have a mobile friendly view/layout since it's written using bootstrap).
You'll likely have to either create an api for serving up the content for your app or else find some other way to differentiate the app from the desktop site on the server side so you know where they request is coming from, but it seems do able.
After some testing and verifications on browser and phonegap, I chose the following combination:
Yahoo's purecss library for grid system and basic widgets. Its awesome with the only pain that Google Search on it gives ambiguous results.
Reactjs to manage the view logic. This was the biggest pain in my previous project having only used jQuery, turning my whole project into a huge jQuery soup. React is extremely clean compared to that.
superagent probably, for AJAX requests to fetch server data. Extending this, I haven't yet decided to employ a model-like library that handles the state; may be I dont need one. I will decide as the project moves on.
hand-coded CSS with some common sense so that I learn something and dont waste my time in finding an all-in-one library. _The only necessary rule here is to weed out older best practices when you are looking for something. For example, in order to center something, the transition method is the best technique.
We have to build an app which should run on iOS and android. For expenses reason we decided to to it with html5 and phonegap.
Now we have to decide which mobile framework we wann use for it. I know there are already a lot of this issues and I also already did a lot of research. But I'm still not sure which one we should pick.
I've heard a lot down side points from Jquery mobile, but on the other hands it seems there is nothing really better, beside senche touch, out there.
What are your experience, what whould you suggest?
I'm looking forward hearing your opinion
(let me now if you need further information for evaluating)
Thanks
Building PhoneGap with Bootstrap and AngularJS is a breeze.
AngularJS provide a really nice separation between Route, Model, View, and Controller. Learn Angular directives and stop writing spaghetti js dom interaction code.
Bootstrap, though not as nice as jQM for mobile features (maybe until v3), still provide a nice starter CSS such as (navbar, fixed top, bottom, etc...) And if you know your css, then I think Bootstrap is more flexible than jQM. Combine with some nodejs build script to compile your less file to css and you are all set. Glyphicons is also a good starter set of asset/images.
I am sure you would have done a lot of research on this but from my experience I would suggest you to take a look at Sencha Touch + Phonegap combination.
The reason why I opted for Sencha Touch over Jquery Mobile is that the JM is quite sluggish when it comes to page transition and animation. Whereas, Sencha Touch provides you all-in-one place regarding building a rich mobile app with HTML5, CSS and Javascript. The only thing about ST is that you might require to learn some Ext JS which is used by Sencha Touch to create components. They do have a lot of documentations which you can refer to.
You can refer these links to kickstart on Sencha:
https://github.com/senchalearn
http://www.sencha.com/learn/touch/
All the best! :)
We have just started working with PhoneGap in my studio and we are using Backbone.js + Handlebars.js and Bootstrap or Ratchet depending on the case. It seems to work very well.
If you want some more resources on that I will suggest you start with
http://coenraets.org/blog/2013/05/top-10-performance-techniques-for-phonegap-applications/
http://coenraets.org/blog/2013/05/architecting-a-phonegap-application-video-slides/
http://coenraets.org/blog/2013/06/sample-mobile-phonegap-application-with-backbone-js-and-ratchet/
Really good resources.
Where do I start to learn how to make mobile web apps? I am interested in the design and effects/animations used to make them look somehow native. There must be some difference in the css, html maybe javascript from regular web appplications with regard to screen sizes etc.
I am a Java developer so usually I use templates, but I am fairly experienced with css, html...but I don't feel very updated on mobile web apps.
If you want to develop cross platform mobile application using HTML,Javascript then you can try Phonegap. With Phonegap you can create single application which will run on Android,iOS,Blackberry,Bada,Windows,Symbian etc.
To learn android :
http://www.vogella.de/articles/Android/article.html
http://developer.android.com/resources/tutorials/hello-world.html
Phonegap can be a good choice as you are familiar with HTML,Javascript.
I think the easiest way to give a mobile web-app a very close approximation to native behavior and look is to use jQuery Mobile and even the associated ThemeRoller. It's all very well documented, and the site also had great resources for learning.
jQuery Mobile is obviously based on jQuery, but is tailored to be consistent yet configurable across mobile platforms.
I highly recommend using some kind of framework.
There are several.
Sencha Touch: Very comprehensive. You don't have to worry about writing any HTML or CSS, since the framework generates it. Sencha Touch provides a Java-like pseudo-class structure, and good documentation.
JQTouch: Rather basic.
JQuery mobile: Somewhat in the middle.
The-M-Project: Lesser known, but looks promising. Haven't tried it myself.
All of these offer widgets that come with the required CSS/JS for animation and native looks, so no need to worry about that.
I realize that some people think it is crazy to re-implement all the UI functionality of HTML in a canvas-based framework (and there are some stackoverflow questions that suggest this), but is anyone actually working on a library like this?
To clarify, the library would render all UI elements like edit boxes, labels, buttons, combo boxes, list views, etc. on the canvas directly. There would be no HTML or CSS.
I stumbled upon this idea today. Found the library Zebra. Haven't tried it out yet.
https://zebkit.org/
For web apps I think this makes perfect sense. HTML/CSS is just not good enough to create stable apps easily. The DOM and layouts are just too quirky and the performance too low.
What we need is something like Silverlight but without the plugin. Stable components and a great framework.
Canvas apps could be made just as accessible as html web apps. Probably more so even.
Perhaps WebGL is even better, its performance is definitely better than Canvas if done properly.
Thunderhead was a mozilla experiment built along with bespin (now skywriter).
From the project description:
Thunderhead is a Mozilla Labs experiment to explore a JavaScript-based
GUI toolkit that works with DOM elements and canvas to render
components.
The problem is accessibility, canvas just isn't.
I've just reviewed zebkit.com today. Amazing and absolutely not crazy, rather essential. Try running most DOM node trees on a mobile device and you will soon know this is true. Then in contrast run the Zebkit kitchen sink demo and be shocked. You might have to reconsider your projects approach.
Coming from Java to HTML5 I definitely see some nice OOP at play in the Zebkit API, it is needed to provide the simple canvas some powerful structure. Also I really like the JSON support, it acts much like a CSS format for the canvas. Using JSON this way fits well into the Web Component mindset and the practicality of HTML partials. There are a lot of goodies in this API.
In the end all ways of producing graphics for the Web render pixels anyways. Maybe we have just added to many abstractions between the logic we what to produce and the end screen to realize this fact. With Zebkit it feels like your almost working at the native level, plus it adds in all the graces of Javascript and JSON, sweet indeed. Plus your free to mix and match in DOM as desired.
Now there is Flutter's CanvasKit renderer. Google docs is moving to Canvas.
I have been assigned to build a mobile web application. I have found two ways to develop that (there might be hundred other ways to do that, but I am aware of these two): jQuery Mobile and HTML 5.
Which one should I use? The application will be a normal web app, like a shopping web app or a user management system.
I am looking for compatibility in different phones and great UI with fast processing.
So, the ways I know is JQuery mobile and HTML 5.
Which one should I use?
It's not a case of using one or the other - you use both to create a solution.
HTML5 provides the framework to present your content, whether it is text, images, video, audio, or any mixture of the above.
jQuery (Original or Mobile) is used for "Progressive Enhancement", that is to provide additional functionality, features or flair to the HTML5 framework.
To ensure the best compatibility across the majority of devices, you want to have a website which is usable without the jQuery enhancement. Then, once you have that, you can use jQuery (and/or standard javascript) to add the "nice-to-have"s, like animations, AJAX interactions, geolocation, etc.
Lucanos is right in the sense that HTML and jQuery aren’t alternatives. (Browsers display HTML, and then you write JavaScript — possibly using a framework like jQuery — to manipulate that HTML in custom ways where necessary.)
However, if you‘re using “HTML5” in the Apple sense of the word (i.e. to describe HTML5, CSS3, and browser-specific extensions to CSS), then there are some choices to make — e.g. some WebKit-based mobile browsers support CSS animations, which should perform faster than JavaScript animations.
I’m not familiar with jQuery Mobile — it might well use CSS animations when they’re supported, and simulate them when they’re not, meaning you get wider compatibility without much runtime performance cost.
But for mobile, personally I think you’re better off picking the most popular platforms (i.e. iOS and Android), and writing to their capabilities, without bothering with a framework like jQuery Mobile. That way you serve most of the market with less effort (and thus serve them better), rather than making everyone download jQuery Mobile just to serve a few older phones that’ll get binned in a year or two anyway.
Disclaimer: this depends entirely on your target market. If they all use old phones, write to the capabilities of those phones.