Hello Fellow developers,
I am embarking on a new journey to develop HTML5/JS web site and looking a ways to reuse the same code for Mobile App (Would like to use it using PhoneGap or Appcelerator). The requirement is to develop once which can be used on desktop, and smartphones, but project sponser wants more secure way to handle data on smartdevices and hence we would like to choose this approach. Now my questions is
Can we reuse and architect the solution this way to reuse HTML5/jQuery code on Mobile within Appcelerator or Phonegap?
If yes, what percentage of rework will be required to support on mobile devices?
If no, what could be alternatives?
thanks all for your guidance.
(1).
If your current desktop website interact with server-side in webservice way,everything will be done very easy. Even you can directly modify the *.java in src\com\ like this:
super.loadUrl("http://balabalabala.com");
With phonegap wrap, your app can be access right now.
If not, you will need spend time in implementing the server-side interfaces for client-side.
(2).
You need to refactor your static html page with some javascript framework for mobile(such as jquery mobile,sencha touch).
Using them to make your phonegap app more simalar with native app.
That takes time too.
The 2 things above are what you need rework.
I hope you are planning to build a mobile website. If so, its very easy to convert it to a PhoneGap app with may be only 5% changes provided your website uses only HTML5,JS and CSS. Its not possible to run a a website written in serverside languages such as PHP, ASP.NET, ruby etc. Some important items to keep in mind:
start development of website and app together. test with mobile browser and phonegap so that you can fix issues as and when they arise.
use a mobile HTML5 based framework like Kendo UI Mobile/ jQuery Mobile etc for developement
so that you dont spend time fixing all the mobile related UI stuff.
Wherever you are using PhoneGap features, check whether you are running on PhoneGap or else fall back to the browser feature.
Related
I'm thinking of using ionic for my project but in the beginning I'd like to only have a webapp without going to an app. Like what framework7 allows. But the information I gathered seems to indicate that this is not possible or fully supported by ionic.
Could someone share some experience to say if it's possible and how hard it is?
For ionic2 it is possible:
add codova platform browser
upload files under platforms/browser/www
point it in browser
done
Note: Plugins that depends on device will not work in browser (for instance camera etc..), the rest will work fine, so keep your app usable even without device plugins
It is possible to port your Ionic app as a mobile website.
Its basically an angular app with added benefits of Ionic ecosystem. This ecosystem includes nifty set of directives of mobile first ui components, js library for interactions (pull to refresh / slide etc) and other such things that compliments your app to make it look and feel like using a native app.
It really shines at accessing native components of your device (camera, location, battery info etc) using js apis (cordova.js). But it isn't of any use when you are building a mobile website with ionic. So, you could write platform specific code to support both web and native in conjunction. You could make the most of cordova.js when you start building your native apps. Else, leave it plain vanilla for your mobile site.
I have ported my ionic app as a web app to serve my audience on mobile browsers (also plan to roll out native apps soon) and I have not faced any major challenges so far. It truly has mobile first experience.
If making a single page desktop website is your sole objective, you should probably go for standard angular bootstrap web apps. Ionic isn't meant for it.
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.
I am an Acquisition Editor for IT books. I am thinking of developing a book on developing HTML5 apps with Appcelerator Titanium. Does it make sense to have a book dedicated to developing HTML5 apps? if yes, what would you like to see in the book?
If your target it's iOS or Android I suggest you should work with JavaScript and generate a native app. Also you can run any HTML code in a Titanium Web View component but I don't recommend it.
But if you want to reach other mobile OS you can also use Titanium but you'll need to create a web app.
Take a look at this article:
http://developer.appcelerator.com/blog/2011/09/titanium-sdk-for-mobile-web-beta-1.html
Mobile Web dev has been improved a lot since that article was posted. Check this http://docs.appcelerator.com for the latest documentation of what Titanium can do.
It would be very niche book and not be useful for most people. With Titanium you can:
write javascript code agains the Ti api, in which case at runtime native UI elements are invoked.
use a web view to load a normal website, which can contain an html5 app. But then you are only using Titanium as a wrapper around a website. There is some value in this approach, as you can use Titanium to invoke the device's hardware functions in response to actions in the web view.
It's probably better to do 1. Why render a table in a web browser when you can just render a table? Some people probably have used the approach in 2, but I'm guessing they are few and far between.
If you want to use html5 techs to develop a mobile app, you are better off with Sencha Touch 2.
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 need to know the best suited mobile frameworks which greatly exploits the functionalities of HTML5. Some of the choices I have are:
PhoneGap
JQuery Mobile
Sencha Touch
Can you friends just guide me based on the experience you have with mobile apps development
Thanks
Some specific facts that might help you would be to compare the documentation for each of the frameworks. I've found that how a mobile framework is documented is the number 1 thing that is important to me when i get deep into it. So here are the links to each of the documentations.
PhoneGap
JQuery
Sencha Touch
Consequently, you may want to familiarize exactly WHAT constitutes a "mobile" framework. For example, i use both phonegap AND sencha touch. So take some time to read up on exactly what's what. Sometimes you can use multiple frameworks together.
Not exactly a framework, you may want to try Tiggr Mobile Apps Builder - http://gotiggr.com. It's a cloud service for building HTML5 and native apps. The builder uses jQuery Mobile, and PhoneGap (for native).
Note: I work for Exadel, the company behind Tiggr.