I am developing a mobile application using PhoneGap / Cordova, and have embedded maps in certain parts of the application to display location to the user. However, when the application is opened, all the maps on the app initialise simultaneously. This causes major performance lag on the app, as well as eats alot of data.
A button is used to open each specific part of the app, and the maps are embedded in these containers. Is there a way to restrict the maps from initialising until a button is clicked?
Your help is greatly appreciated :)
Thanks
This is a broad question, your problem is based in how your views are rendered, and the design pattern of your application. In some frameworks, the views are rendered only when they are invoqued, another save the data in cache, or all are rendered.
Maybe your problem is only in the part that you are initializing the maps, so you only have to move the initialization to the moment that you display that concrete view, but you should look at some frameworks to learn about views, memory and cache management.
Related
I always wonder how apps like Airbnb, Flipkart, and Swiggy update their UI on the fly. Even if I didn’t update the app, Flipkart shows different UIs during festivals, while Swiggy always changes its UI based on the device location.
How I implement this in my react-native-app?
Webview is the solution?
Kindly help me..
Thanks
There are multiple ways you can go about doing this.
One way would be to use WebViews as you've mentioned, this would make it trivial to change the interfaces as it's entierly controled in the servers. But the main issue with this approch will be performance and non native look and feel. These are the two main advantages of using React Native over hybrid frameworks in the first place and therefor, it wouldn't make much sense to use WebViews everywhere. But if there's a small slice of your application that updates regularly(ex - terms of service) you could use a WebView to do the custom views.
A more common way that's low effort would be to have all the code in place for the different looks, but use feature flags to toggle different views. This would work the same way that a dark theme would work. The amount of customization we can do this way is limited because we need to code everything ahead of time.
Another way is to use server driven UIs. With this approch, you will have a pre defined templates in the client that you them populate on run-time with data from the server. For a very simple example, you could have a header image that could be populated with a seasonal greeting image. But instead of simple things like images, this can be much more visible chagnes as well. (ex - List view instead of Grid View)
One more involved way would be to use code push. This would allow things like seasonal UI changes. But this requires a lot more setup and might not provide the best user experience.
Webview is best because this way you can change the UI and the business logic or UI handling logic.
But you have to develop a minimum architecture for that.
Here is my way.
Develop Host layer to use camera, shared preference, file system etc.
Develop a communication layer which will be responsible for communication between your webview and the host layer so that your webview can access all the required device platform(eg. android or ios) features which can not be normally accessed directly from webview.
So now you can render whatever UI(by HTML and CSS) you want, you can put whatever logic you want via javascript also now you can access all the required device features you really need.
So, now you are the king of your app.
Just you have to keep updating the UI or logic in server when you really need.
Some cons are there like
webview in android is different than our normal browser. Some required features are not available.
Its behaviors is different in different API level. So you have to test it very well. For testing, you can use Genymotion.
It does not work well in some old devices/APIs.
Look and feel really matters. But smart design can fix that problem.
If you want your whole app in a single webview then you have to compromise with page transition feature of android or ios. But again smart animation design will fix that.
But this is just a working solution not a smart solution for server driven UI.
I have used some server driven UI frameworks. But they seems to be overhead and lacks some features.
So there should be a framework by which we can render native UI dynamically from server with corresponding business logic change feature and accessibility of all the possible device functionalities.
A few months before I started to develop a Server driven UI framework. I did it little bit. But due to lack of time I really could not complete it.
If someone interested to contribute in this project feel free to contact with me.
I have a solid idea and architecture for this project.
This framework can create a revolution in the world of app development.
email: bedmad82#gmail.com
I am trying to list some items in a way very similar to Play Store, currently I am using a Webview and managed to do something similar looking, but performance wise it is very slow.
I'm wondering if Play Store also uses a Webview and gets data from a mobile website like I did, or Play Store uses some sort of widget/view/component to achieve this task, possibly natively. It seems on slow or zero internet connection, the application frames+names are still displayed, and only the images do a lazy load, possibly contributing to much smoother application performance while still capable of listing lots of apps on scrooldown. Here is the Play Store page I'm trying to emulate on my application:
There is a video that explains the theory behind the new Google Play design. No code though. But it is very interesting.
Basically they are using Cards as their main building blocks.
Cards are organized into clusters.
And everythings rests on top of a Canvas.
You can check out the presentation slides here.
Easiest to implement this kind of screen with a GridView Tutorials for using it (there are tons of others too):
http://www.mkyong.com/android/android-gridview-example/
http://www.androidhive.info/2012/02/android-gridview-layout-tutorial/
There is also a GridLayout in Android. The difference between the two components is explained clearly in this post: GridView VS GridLayout in Android Apps
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.
My team and I are currently working on an app (both iOS & Android) which uses a lot of the functionality of one the web apps we implemented. The web application (ASP.NET) basically renders and creates dashboards (of custom dimensions, specified by the end user). The dashboards use different libraries for the widgets (FusionCharts, GoogleCharts, standard .NET controls...)
Anyway, part of the functionality of the mobile app is to display the dashboards specific to each user. The question is: what is the best way to approach this requirements?
We've brainstormed here and came up with a couple:
One is to generate a screenshot of the dashboard on the .NET application and display that screenshot on the mobile app. However, this approach is very basic and does not provide any interactivity.
Another consists of recreating each dashboard on the mobile apps. The problem with this is that it involves recreating everything from scratch and issues related to inconsistencies between the 2 versions of dashboard (mobile version vs web version) will arise.
Loading the dashboard on the mobile app using the URL of the dashboard.
Personally, I think the 3rd approach is the most suitable, since there not much coding needed, we just load the existing dashboard using their respective URLS.
The question is, how do we handle dashboard that are too wide..(height is not a problem since the user experience of scrolling up and down is not bad, but having to scroll left and right is not a good experience imo).. As far as I know, the width on iPhones is 320px (right?) so how do we handle a situation where we have a dashboard that is 1000px wide?
Is this a good approach for this requirement? Any other possible approaches?
Any feedback would be greatly appreciated!
Thanks
Sounds like CSS Media Queries could be what you're after. Take a look at this example.
I'm fairly new to Android, but have done lots of Java/JSP development and HTML over the last 10 years. So I'm not real familiar with what Android can do. With this current project I'm working on, I'm going to have to read XML/XSLT files and display them in an Adroid application. However, there are a couple caveats:
1. The links in the page should be handled within my own app and not the default web browser (except external links)
2. The XSLT will be stored locally, with the XML retrieved online.
I don't want to waste hours trying to fit a square peg in a round hole if anyone has already done something like this and knows what to do.
Thanks.
Use a webview.
From the documentation:
A View that displays web pages. This class is the basis upon which
you can roll your own web browser or simply display some online
content within your Activity. It uses the WebKit rendering engine to
display web pages and includes methods to navigate forward and
backward through a history, zoom in and out, perform text searches and
more.
It will render your html like the browser, but you have plenty of ways to control its behavior and the presentation of it in your app.
It is very easy to get started with, a good start is the google Hello, WebView tutorial