I'm going to develop a mobile version of my webapp. Most documentation I've read suggests one of the following approaches:
create a separate domain (m.example.com)
using conditional css style sheets, but serve the same html
I'd like to take a completely different approach. I'm using MVC, and would decide which template to render on the server side. My model and controller will be the same, the domain will be the same, but the html will be served differently for mobile users.
Has anyone tried this? Any pitfalls to this approach?
Perhaps you should take in consideration that the user might want to view the original site from his mobile phone.
The wonderful thing about option 1. (create a separate domain(m.example.com)) is that the user can choose between the original and mobile version.
A personal example is when using todoist. I don't like the mobile version but, they are not forcing me to use it.
Hope that helps!
Related
As we are now a days fond of bootstrap css which helps in compatiblity. My question is how exactly it deals with the loading as we have more load to the desktop apps and less to mobile. So according to me the css is handling through #media-screen object stylings with toggling of display and alignment. But even if we control the display from client side css or js. Server side will do its task of loading, So whether both desktop website and mobile website are taking the same amount of dataload.
Why am i asking this is if there is same amount of dataload, ill rather choose Android app instead of bootstrap for the fast performance.
Its important to remember that Bootstrap is a client side framework for helping to create responsive websites. You're right in that the same amount of stuff will be sent down the pipe regardless of the device that is used. This is true for any website that just uses client side frameworks to render for mobiles, such as jQuery Mobile.
If your application is big and complex then you may be better off serving up a different page for those mobile devices using Server side technologies. We use the Microsoft .Net stack which can render different views/scripts/css depending on a number of parameters to do with device. You can still use the Bootstrap framework, but maybe render less in the DOM, or have a smaller version of Bootstrap. You could even try a different framework such as the super tiny Pure framework.
Another alternative like you said is to build a native app. This will generally (if you make it right) be faster that what you can achieve in the browser, but you need to be careful that it is actually providing something useful to the user to encourage them to install it. If you are just using it to make it easier to make your website then you're doing it wrong, but if you are building a highly complex app that can leverage some of the extra functionality you can use in a native app then it may be a good way round it.
Without a real question there isn't a huge amount more than my own experience to draw on here, and there is no real right answer to how you go about it, but in answer to the question of how it deals with loading, client side frameworks can't really change what is being loaded without serious customisation or using some server side technology to deliver different pages altogether.
As a beginner wanting to become more familiar with the android platform, I wanted to create a web client for a website.
Something similar to https://play.google.com/store/apps/details?id=com.krinsen.javadocreader&hl=en
However, I am confused about how the author created the custom UI for the java docs.
To my understanding, there are 2 ways to do this.
One approach is with WebViews. I quickly prototyped a sample of this but I believe (correct me if I'm wrong) that I can't change the UI of the WebView and will have to view the page from the perspective of a browser. Unfortunately, this does not look very well as the website was not mobile optimized and there are inconsistent spacings and odd whitespace.
The second approach is to manually create each View using the different layouts provided by android (LinearLayout, TableLayout, etc). This should create a more custom mobile experience as I can manually construct how each page will look. However, this seems time-consuming as I will need to manually create a different UI page for each page of the website. Also I am confused as to how to pull the data from the website as each new view in the new UI will need the content from the website. Do I need to do HTML parsing to pull the content or is there a better way in the android sdk? What is a good approach that android developers take to extract the different forms of content from a website to redisplay on a android client?
Finally, since I have a very beginner understanding of this situation, am I correct in assuming that most likely the creator of the application mentioned above did something similar to the second approach I mentioned?
What is a good approach that android developers take to extract the different forms of content from a website to redisplay on a android client?
I think the best way is to provide an API for native application. Parsing HTML might look nice untill you need to suppport every change in your HTML page. But if you are not the owner of web-site there is no other choise if only you don't contact owners and ask for an API.
I am currently developing a native android app. My app has a lot of activities. I want to develop native android app. But in some case, I want to use a webview where the entire layout is just a webview. Not linear or relative or another layout, just a webview. All of the images and other things running in HTML. All of screen will run in HTML5.
So, I can partially transfer my app into iphone app or other platforms. This is the benefit of this way to me.
But I don't know. Is this way better? What will the performance be? What is the disadvantages of converting to an HTML5 app?
Can you explain?
There is a very good presentation about this very topic.
Performance: You are adding an additional layer in between, A webkit engine cannot always match native (and sometimes hardware accelerated) rendering performance.
Disadvantages: One is that the API use is limited, you can bind a page's JavaScript to Native code, but not all functionality is available.Though you might want to have a look at capabilities of Cordova project. Another is that emulating complex widgets via JavaScript will slow down the page.
Portability: Indeed is a great advantage, that's why PhoneGap and Cordova are popular. Though many like Facebook App etc have switched to native App for better performance.
The approach you require actually depends on your requirements. This may be my personal rant but IMHO: a markup can be only twisted so far, it can't out-perform industrial grade GUI programming setups as of yet.
Cons WebView
Can't use full performance of device, Since web view form an extra layer.
Web view can't listen all user event.
You can't fully share or save data from your web view to app.
Take more time to load. Other we get all things in a simple API and can be rendered.
Changing a simple fields in page need to load full page again.
Online required, can't extend offline features.
Orientation changes and full screen make difficulties.
Pros of using Web view
One page for both android and IOS.
I think the main advantage is the ability to make changes without the need for each user to update the app on his device, because all the pages are on your server.
No wait for app store approval for updation.
Some Techniques
Native elements TOGETHER with WebView. I think it will be much better, as there are a lot of functions that can't be done with WebView only. The combination of the two is much more recommended.
Rendering from locally, Create an assets directory for HTML files – Android internally maps it to file:///android_asset/ (note singular asset). So you can feed your web view form locally even if you are offline.
I think -by using this way- your app quality will be weak and app will be hard to use because the webview object not having a lot of tools that you can make it be compatible with android. e.g you can't share or save data from your webview to app. whatever that reference on your app what need and what dosen't need, by the way i tried to develop an app with html but it was bad.
I would like to create an application that support in both Android and iPhone.
It will be a interactive system for people to chat,share photos, etc.
So, it will consist lo-gin system, and all information for users will stored in mysql.
The question is here, should I write two sets of code for Android and iPhone or use some cross platform tools such as Phonegap + jQueryMobile for development.
1)I am wondering if html + css + javascript can complete all the functions that I want to include in this application if I use Phonegap.For example, how to handle the data transfer when loading data from db, should I create many .html for different pages. And the performance of using Phonegap...
2)Also, how about the time of development. Suppose there is one developer for Android, and one for iPhone. If we develop separately, we cannot help each other. On the other hand, web may be easier and we can research on this together.
3)Then, for the UI, it is easier for native language. But it is much difficult for web to make the things like mobile application.
I have asked a lot of questions. But I really think about this kind of issue for a long time and this is the time for me to have the decision.
Can anyone help me and give me some idea? Really thx....
Consider these Factors & Make your own wise decision,
which coding technique are you familiar with (HTML, CSS, JS) or (Java, C#).
For your First Question about data transfer from db,(your question is not clear internal db or server side db) if internal db Here is My QuestionI couldn't find the solution with the given answers, Help me if you can solve the same.(if you are talking about server side db) both for native & Cross platform it has to be achieved by API's
Time of Development is less in PhoneGap, when consider for both platforms since you are coding for both platforms simultaneously.
UI is Easier in Native ONLY when you go with Default styles,
For example consider yourself adding a Customized Button in *.png format.
you are gonna add single button multiple times in multiple sizes. If you wanna achieve clicked or Hover Effect you are Gonna add 2 more Customized Buttons. Which makes totally 3 images for single click for single Screen & Single Orientation, to achieve Correct Quality, u have to add same image in different sizes in ldpi, mdpi, hdpi, x-hdpi, no-dpi which finally brings you 5x3=15 images for single Button.(imagine the size of your app). Finally you have to add few lines of Codes to achieve Clicked effect
The same can be achieved in CSS with few lines of Codes(hardly 5 KB). Many animations also can be achieved easily with js.
UI can be changed when ever you want with change in few lines of codes.UI - PhoneGap Wins your app runs in Browser, both Android & iOS use the same browser engine Webkit, but still significant differences even in Webkit
Here are few more issues in PhoneGap,
Performance Native wins. In PhoneGap your browser has to load js, CSS which gives you notable delay, which cannot be ignored. If you want awesome UI go with CrossPlatform. To achieve performance choose Native.
Finally time to take decision.
It depends on what your requirements are. Evaluate if all your requirements are possible with Phonegap. For a list of supported features see: http://phonegap.com/about/features
Note that you can only use the native phone functionality that phonegap provides.
The development time depends on various factors, such as complexity, size of project and developer skill. I think the main difference here is developer skill, as the complexity and size of project are the same.
This is a tradeoff you have to make. An example phonegap application can be found here:
http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/
1.If you build application using cordova with more page, you app will get slow and some time it will get more bugs of design. So it
is better if you use single html page with different dives for each
pages and use "display: none;" from your java script or JQuery to
show and hide you current pages.then your application will more
fast.
there a lot of plugins in cordova those are supporting for both iOS and android so you don't need a iOS developer or android
developer if you have proper html and css design like responsive web
site.
UI won't be problem if you build a responsive html pages using bootstrap
I want to make an app for android that updates via the internet so the information in the app is always current. What is the best way to implement this?
I understand I will need the information stored somewhere?
And I will need to be able to access it and read it into the app?
I am not looking for specific code so much as a general way this could be implemented.
As an example think of a weather app that must pull weather data from an online source.
Thanks
In general you could achieve what you want in one of the following ways (both are popular methods and used in many apps):
Implement a web service layer to pull the data from the server back to your application. In Android, this is normally done via JSON based REST API. JSON is used nowadays as the data is regarded more compact that XML and it's easier to deal and manipulate in Android.
Note that it's common to implement caching in phone local storage if the data is not updated frequently.
Most of the time, the authoritative data is stored in the server
With this method, you could arrange the layout freely on your app. However, you need to write Java code to arrange the layout
You could also add better interactivity especially if you are thinking that your UI will have a lot of touch interfaces or animation
Other way you could do this is by developing a mobile HTML webpage that you could embed in Android via Webview. A simple tutorial is available on Android's website
This method will retrieve HTML from the server, the same way your desktop browser retrieves HTML. The only difference is that the HTML is mobile optimized. Good example of mobile optimized HTML is gMail from Google
Using this method, unless you have full control of the server side, you don't necessary can control the layout as the server is the one that generates the HTML
A lot of times that interactivity is reduced with this approach though Javascript framework such as Sencha and others are quickly reducing the interactivity gap between native code (#1) and using HTML