building an web app, that should be converted to mobile app? - mobile

I am building an webapp, like a normal webpage with html, css, javascript - and php/mariadb for the backend.
When it is done, I also want an mobile app, containing the same features. Is it possible to convert my webapp to mobile app both for android and ios, without rewriting all my code? Or is their some framework or language, that is better to use then others?
Any pointers much appriciated. Thanks

Yes there are frameworks that allow you to create cross platform apps, like Flutter (Dart language) or React Native (JavaScript language). You can run it on various operating systems.

Related

reactjs for both web and mobile applications

I need to develop the application which will be same for mobile app and web application. I was researching on reactjs.
Can I convert my reactjs code for web-app to react native for mobile application? The way we do in ionic framework(angular)
You can definitely use cordova \ phonegap in order to create an app out of your website, which will make it hybrid but not native (suitable for most site types)
You cannot 'convert' or re-transpile your code to react-native. You have to re-build it using react native. It will be much easier ofcourse because you have a running react system, but still.
I would recommend trying the first option. Good luck!

How the React Native cross platform?

To me a mobile cross platform framework is node.js + sencha touch. You write business logic with node.js, sencha touch for mobile ui.Then you can build this code base to native ios or android. I think under the hood, it use Phonegap to build. So how does this work with React Native. I read that there are React Native for IOS and React Native for Android. Are there two code base? For example, let say I have need to write a mobile app display currency and time zone base on location. With this app, there are two requirements
Same business logic for get timezone and currency base on location. Do not want to have these logic in two places for Android and IOS.
Two UI view. 1 for android, and 1 for IOS. Are these what react native for IOS and for Android distinct themself?
How many codebase do I need to have two write such an app as above?
As far as I know react-native is all about
"learn once - write everywhere"
and to
enable you to build world-class application experiences on native
platforms using a consistent developer experience based on JavaScript
and React.
You can write code for apps with single (JavaScript) codebase. + You can have different UI views, even in same JS file (even tho it's recommended to split them in two JS files ending with .ios.js and .android.js and they will be smartly used for IOS from .ios.js and for android from .android.js file).
If you decide to go with react-native here is official documentation: https://facebook.github.io/react-native/ . And here you have tutorials, basic (starter) components and other helpful stuffs https://github.com/jondot/awesome-react-native#tutorials .
Few articles for writing cross-platform apps with react-native:
https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/
https://www.infoq.com/articles/react-native-introduction
https://www.quora.com/What-is-it-like-to-build-a-cross-platform-mobile-application-using-React-Native .
Hope it helps :)

Developing mobile front-end after browser version complete

Assuming I have already built out my application's server-side backend in PHP 7/ Laravel and browser front end in Angular JS... what frameworks should I use when I then want to start developing iOS and Android native apps?
How can I avoid redundant code (DRY) on different frameworks when hooking new mobile apps into my already existing backend?
Most of the information that I find on this subject mentions implementing WebViews (HTML5/JS) in the native app. I also found Apache Cordova for "cross-platform development." https://cordova.apache.org/docs/en/latest/guide/overview/
I've been using Ionic Framework for the past year and it has been pretty decent
http://ionicframework.com/

Create a mobile webapp with Angular

I'm currently learning Angular JS and plan on creating a website using RESTFul to communicate with the server (which will be in Node.js).
I would like to know how to proceed to "convert" this website into a mobile app.
I saw tools like Apache Cordova but I have no mobile developing experience so I don't really know how all of this works.
I saw other tools like Ionic and ngCordova (created by Ionic) but I don't get the point, Angular is just a JS script to insert in my HTML page right ?
So why would I need something like Ionic ? Isn't Apache Cordova enough ?
Ionic is a webframework that makes use of apache cordova in the back.
Cordova is used for mobile app programming in javascript and will compile your javascript code to native code for android, iOS, ...
AngularJS is used for making development of Single Page Web Applications more delightful by offering many nice code features for programming MVC apps.
Ionic now at the end, puts it all together by offering you user interface components that will look native on all mobile devices + the browser. And on top offers you angular js modules that make working with webapps easier (e.g. navigationHistory ...)
If you start new and want to create a nifty mobile application, I would start with ionic. It comes with a lot of css or sass that makes it feel / look native and of course you can change everything to your needs. To access phone features (e.g. location, camera ...) cordova steps in. I suggest doing this guide, that will take you through your first ionic app.

Cross platform mobile app / server architecture

I work on a team that supports a mobile web site. It's a typical web app in that it's pages of forms that submit and retrieve data from a server. Back end currently JSF.
It's working fine but there's a strong want to start leveraging more of the native device's components and features (namely messaging/alerts and UI widgets). Given the number of platforms we're trying to support (iOS, Android, BlackBerry, Symbian [yuck] and potentially Windows 7) PhoneGap seems to be the first thing I should spend some time looking at.
I think I have a good grasp on how it works (broadly speaking) in that it allows you to use HTML CSS and JS then builds a native app that 'wraps' around your code and offers up a JS API into the device's native widgets and features as needed.
What I'm not so clear on is how one would use it in a client/server type of interaction. Could we use PhoneGap to create a front end UI that would still talk live to our servers? If so, could we leverage standard AJAX/JSON/XML type technologies to send and receive the data or are there hidden hurdles I'm not aware of in doing that with a solution like PhoneGap? In otherwords, does the webview within the PhoneGap app work just as WebKit would in that we can make an AJAX call, get some data, and update the DOM?
Or is there a different type of framework I should be looking at?
A example summary explanation of what we're looking for would be: We'd like our current web application to be able to launch a native date picker on the device and receive alerts but still interact with our servers as our current mobile web site does.
As user731077 says, yes, PhoneGap can do all of that. There's a number of potential methods you could use to do so in the Javascript code of your PhoneGap app. Here's a few to check out.
XMLHttpRequest object, but I'd suggest one of the below choices that handles cross browser inconsistencies
jQuery ajax()
xui.js xhr() (my choice)
zepto.js ajax()
xui.js and zepto.js are my suggestions as they are basically stripped down versions of jQuery optimized for mobile web development. I'm partial to xui.js because its the framework commonly used by the PhoneGap guys themselves.
your every question has a YES answer :)

Resources