Building a hybrid app, where to start? - android

I know it's kind of an 'open' question to ask but I simply don't know where to start. Let me first tell you a bit of my experience/background so you know the level I'm at:
Build cd-roms with Lingo back in the days
Started web/front end development in the HTML3.2 era and kinda left off when XHTML was hot
Worked with Javascript 1.2 up till around 1.6 and later started working with Jquery
Actionscript up to 2.0, building websites and games
Did quite a bit of PHP/mySQL development. Build custom CMS' and later Drupal module development
All this was during internships or as a freelancer, everthing self thought by the help of books and such
So now I'm stuck with this idea to build myself an app. I've decided it should be an hybrid app as my target audience is very small but 60% is iOS and I don't want to leave out Android. Also I've been getting familiar with HTML5/CSS3 and started working on components for my app.
The basic concept for the app is that it's a layer on top of Google functionality: profile, calendar, circles and hangouts. Users will (eventually I hope) be able to create events for other users to rsvp to, they will be able to add eachother as buddies and chat about the events. A small step functionality wise but a huge step for me :)
I'm thinking of using the Crosswalk project for the Android version to counter the biggest issues around hybrid app development.
I've been reading up for the last months in preparation and the more I read the less I seem to know. Here's the stuff I think I should know more about;
Node.js
Gulp.js
Dev environment to work in (I once worked in Homesite, later Dreamweaver - don't laugh)
Packaging tools, etc etc.
Crosswalk project
Now I am not looking for some drag and drop software package to build an app in 3 days. I don't want to take the easy route per se, I don't mind a bit of a learning curve. I work on a Win8 machine, I know this isn't optimal but I can't change this.
Now where should I start? I was thinking NPM myself but you guys might think otherwise. Any good books on the stuff you think I need to learn to get me going?
Thanx for the advice!

I can share my experience with Cordova.
I work like full-stack developer and i'm quite expert to build responsive website, so the natural step to approach mobile dev was try Cordova.
First You can start to build HTML document totally responsive and try as webpage on your target devices.
A cool stuff, targeting mobile devices, is that You can use new CSS3 directive, without worry for compatibility with old browser.
First I installed Cordova following this tutorial.
https://ccoenraets.github.io/cordova-tutorial/create-cordova-project.html
Opening the folder /www on your project you can edit your app like a website, and you can also debug with the browser like a normal site.
To enhance the feature you will find a lot of plugins ready on github to extends the native functionality at the Cordova/phonegap project.
I suggest you also to build using onsen http://onsen.io/ a framework that let you use mobile UI easily.
Last tip that i can give you, if you target Android is try your apps on virtual machine, i use Genymotion https://www.genymotion.com/ that is much more fast then SD<
Good luck with your first app!

As you can imagine, there are a lot of framework where you can start.
Looking on your skills, maybe is better to use JS/HTML/css stack, but in this case, you will create an hybrid app in a webview.
In my opinion, webview applications quality it's only acceptable, but because of his productivity, in some cases could be the best decision.
Another good alternative is react-native. This framework allows to create a native application using javascript. React has his own markup language, is very similar to html. JS code is executed on native device using an embedder javascript engine, instead of webview, so, performances and experience can be compared to native applications.
And, at the end, my alternative, a framework I've made to write native UI and share business logic for each platforms. You can take a look on aj-framework https://github.com/bfortunato/aj-framework

Related

Developing in Android Studio versus Framework (e.g PhoneGap)

I wanted to get a more experienced opinion on something I recently found out. A couple of months ago I set a goal to build myself a mobile app, and the first thing I did was go to developer.android.com and begin reading documentation on how to go about doing this.
I've invested a lot of time in understanding Android Studio and how to make simple apps (and I'm just now getting the hang of it all), but I just recently read about frameworks like PhoneGap(which let web devs who know HTML,CSS, and Javascript make apps too).
Before learning Android, I taught myself web dev through the Odin Project, which taught me a fair amount of HTML, CSS, and Javascript (little iffy on this language, but I'm sure it's something I could pick up easily since I already have a bit of experience).
I'm wondering what you guys feel are the limitations of using these frameworks and whether I should switch over to them, as opposed to continuing with Android since things are beginning to click for me.
Thanks!
I have developed apps for both Android and Phonegap. Phonegap takes advantage of your web development experience and lets you build mobile apps with ease. But it's not a replacement for Android API itself. A good phonegap application requires knowledge about web development and Android API.
However if your aim is to develop an android application, and you are comfortable with web development and Android, I would advice to take Android API.
Phonegap as wonderful as it is for web developers, and startups who can't afford to have dedicated resources for Android, iOS separately, has its limitations.
Performance : Phonegap app's performance is not at par with a native
android application.
Functionality : As one would expect you can't have all the functionality support a native android application has.
Look : You could easily tell apart a phonegap application from a native one. Given phonegap renders all the content in a webview, the look of native ui elements is lost
I think you will always need access to the native API to make good apps.
At least the navigation should be native, so that your app has the look and feel that the user expects, and so that stuff like the back button get correctly handled for you.
Even if there is some plugin that does that for you in a perfect way, I believe it's beneficial to know how Android works.
In the end, frameworks like PhoneGap add a layer inside your app rather than removing one, and it's always better to understand what goes on inside your app.
So the time that you've spent learning native Android won't be lost.
However, it makes sense to use HTML/JS if you want to share code between different platforms.
I think this article from Basecamp shows a very compelling example: https://signalvnoise.com/posts/3743-hybrid-sweet-spot-native-navigation-web-content.

Phonegap VS Steroids. Did I choose well?

I want to develop an App for Android ann iOS. It is a very simple App where there are almost no server connections and it is pretty simple. The only things is that it will have many animations.
I thought that would be a good idea to choose Phonegap instead of a native application because it is multiplatform and it is very much easy to develop for a web developer like me.
But, when you read in the web you see a lot of people who say that it is really slow, that buttons doesn't react inmediatly and more things.
So first I would like to ask, Will the phonegap performance be enough for this kind of App.
And secondly, I have found Steroids. It looks great because it takes Phonegap and make it native. But it sounds too well, I mean, you have all of Phonegap with more performance, I guess it should have some problems.
So, could I use Stereoids instead of Phonegap to increase the performance? What it worse of Steroids?
Greetings and thanks.
Full disclosure, I'm an AppGyver employee and am of course inherently biased towards the Steroids platform, but here's a quick rundown of why you should choose us over PhoneGap:
Theoretically, anything that can be done in PhoneGap can be done in Steroids as well. In reality, there are a few lingering problems with some custom plugins that might require some tweaking to work through our Build Service, but core Cordova plugins are supported.
Steroids provides Native UI features to make your app virtually indistinguishable from an actual native app. We've gone to great lengths to ensure that the end user would not be able to tell a Steroids app from a fully native one. This includes eliminating the delay between button taps and the app reacting, as well as providing ready-made implementations for drawers, modals, tab bars and all the goodies that you would find in a native app, but have to build by hand in a PhoneGap app. Admittedly, this feature set is currently only available for iOS, but our Android support is catching up fast with the first UI features being in internal QA at the moment and more coming soon!
Our qr code system makes demoing (and developing) apps insanely fast compared to having to constantly rebuild and install demo versions of your app. Just download the AppGyver Scanner, generate a share code and scan, and your app is now running on your phone.
We provide support for a Chromium-based Android client, which blows the old Android WebViews out of the water in terms of performance and cross-platform compatibility. Once again, this is still a very young property, so full support for all Steroids features is not there yet, but Android is currently our top priority, meaning things will improve fast.
I am glossing over the details quite a bit here, but this should give you a general idea of what we feel makes our product great!

Hybrid apps for iOS/Android/Windows 8

I hope this question is specific enough. I have a client for whom I made an iOS native app and an Android native app (same app, different platform). It's a fixed pixel design (I made this work for Android somehow:) and it works on iPad, iPhone and most Android devices (with some letterboxing). Now I am asked to write the same app for the Windows store and they want me to use HTML and JavaScript. My question is, when I use HTML and JavaScript, would it be "easy" for me to use this code into some sort of hybrid solution (PhoneGap, etc)? The app doesn't need much complicated functionality but does need to support push notifications on iOS and it needs to be able to play videos, preferably HLS. Any advice on what the best hybrid solution and do hybrid solutions allow you to build for Windows 8?
I'm a cross-platform developer working on PhoneGap and Titanium Appcelerator. The correct answer is "It depends". Currently the state of cross-platform development is not very recommendable. Yes, you can write plugins for PhoneGap and it does support windows phone but you will have a ridiculously hard time getting them to communicate with each other properly. I learnt this from experience.
If it was a hacking/hobby project to further the cause then I would say go for it but for a time-bound client project like yours, I would recommend against cross-platform solutions and go native instead. Plus native always gives considerably better control, speed and ease of development. You will probably develop it faster in native than cross platform anyway. I've played around with windows SDK and it seems easy to use and well-built with good documentation and you can use C# which is similar to Java since you have already used it on android.
You can also build windows 8 desktop apps using html and javascript natively but this isn't present in windows phone 8 yet.
As I mentioned, If you don't need too many native controls, then you can go cross-platform. For your requirements, it can be done. If you have already developed android and ios apps and only need windows app now, then going native would be easier. But if you have to make all 3 then you can go cross platform if your requirements are restricted to what you mention. Here's a good quora thread that discusses the pro's and cons:
http://www.quora.com/Is-Titanium-good-for-developing-iPhone-apps
Take a look on Xamarin
Main idea - they brings real native code for all platforms.
They have instruments to compile C# code that it can be used at all platforms
For example you should create UI in XCode (for iPhone) and use ModoDevelop to create DAL/BLL, then you can re-use C# code base over all other platforms
They have cross-platform iPhone/Android/WP7/W8 samples on GitHub
Also see Q&A on Stackoverflow tagged Xamaring
We are starting to build multiple apps for multiple clients both in IOS and Android native platforms. The problem is we are going completely native which is taking too much time.
I would like to look at the linked in method (http://arstechnica.com/information-technology/2012/10/a-behind-the-scenes-look-at-linkedins-mobile-engineering/) which is a more hybrid approach using HTML and native code.
The problem is I don't think Phonegap is that good - good for prototyping but maybe not for full versions of apps as it can be a bit slow and a bit buggy.
I would like to look into doing a model where we create like 65% HTML and 35% native to that device (like linked in)
Would anyone have any suggestions for this? Would people say we need a massive development team to pull such an approach off?
I welcome thought:)
Thanks

Android: PhoneGap vs Webview

I have been researching PhoneGap and I'm now at an impasse and need some advice. I know that PhoneGap essentially 'converts' html5,css,JS sites to 'apps' for distribution, which leads me to my question:
Why wouldn't one simply utilize a webview within an activity to do the same thing and keep the app native?
The advantage of PhoneGap is that it provides APIs that enable your HTML/javascript to interact with the phone (e.g. camera, accelerometer, media etc.)
These APIs are standard across multiple devices (iOS, Android, WinPhone, Blackberry etc.). So you can write one set of HTML/javascript and deploy to multiple platforms.
If you just created a WebView you would not have the PhoneGap APIs and you would need to build containers on each platform you were interested in.
Good question I have searched me too, because we went in Phonegap solution and I think it is a wrong way for us.
The long story:
That is very true if you write once a UI with web developer skills than not needed to know native language and it compile, and ready for testing.
Web developers are more so higher the demand => developer price even cheaper.
When the client want a Milestone 1 for his great idea it will ask a few company, freelancers about development price and time. If is a very basic application version with Phonegap you will have the less development cost( off if your web dev skills are the same laver as platform dev skills) with webView at second place and last one the native.
The client is satisfied with app result buit with Phonegap and want to get more investors so it will make a presentation, where they are asking more features.
At Milestone 2 you will add a few features. Some are easy command line install and you get it, some aren't. Maybe you will be unlucky as you want a combination of 2 existing plugin with a few extras. The conclusion will be: you have to develop a plugin. At this point is already a very big sign of interrogation which is cheaper: the Phonegap + Phonegap plugin or a WebView. If you need 5 existing plugin and your has a little modification, than still Phonegap. But if you need only 1 plugin, only yours, than the web view is the proper way. There are also cases which makes the Phonegap stucture useless. Also there is a problem with version control system under Phonegap if you develop web files, and native code too: some are regenerating at each build time some not. Still is expensiver the native platform. Now the required features are developed. The client will make a demo for investors, where will be visible execution speed with this new features. Or here they will require optimisation, runtime speed-up or after publish to market they will see some are running with low end phones and not the ultimate, which ws used at demos and they will decide to go to Milestone 3 : speed up.
At optimisation, speed up (Milestone 3) you will decide as you need native GUI. After all GUI developed with web now you will need to throw out at fence and implement the side, maybe some parts need even NDK to speed up. No way to be good here with Phonegap. But you have hired web developers, or contracted that company. Now go back to that company , developers which can make native code. They will not start from 0, so they need to analyse the code, refactor and your development price will go up at least with 50% as you would start it from 0 with native.
Good Question, you still could use webview for that but you won't be able to access native functions like ringtone, camera, and all that, however, the app done that way will be regarded as a native app.

Appcelerator vs Android SDK

I have been looking at appcelerator it seems pretty fine! Without a doubt, one of the advantages of appcelerator is its support for multi-platform. I am interested in building an android app and maybe a iphone app later on. So it is not crucial to support multiple platforms at the moment.
If you disregard supporting multiple platforms and just focus on android development. Is appcelerator still advantageous? Does it lack any features of "Android sdk"?
(When I say "Andorid sdk" I mean development with Eclipse with native Android sdk, if it makes any sense)
We looked at Appcelerator when starting our Android project. We knew we would have to do an iOS client next, so Appcelerator was enticing.
We decided not to go that route because it doesn't support all the native features of each device.
For example, we decided early on that our user interface in Android would need a widget. No support for that in Appcelerator, as it's specific to Android. [This was a few months back -you may want to check again].
Compromising on the user interface was too much for us. We decided to go with C/C++ for the app logic and use Android SDK for the user interface.
Our apps now have two pieces: C/C++ as much as possible to the "brains" and the native (Android/Cocoa Touch) for the UI to take advantage of the UI experience.
Works of course for platforms that can integrate C/C++.
The parting advice: design your user interface first, then find a tool that can implement it. Users have high expectations of the UI in portable devices. Compromising on it early on may be the KOD for your project.
[EDIT] Every so often I see an upvote for this question. I would like to update with what we learned in the past two years:
Using C/C++ for the common parts of our application has paid off. It does require a slightly more complicated build process, but the savings are gigantic if the piece of code being shared is complex (as in our case).
For the user interface piece we are beginning to look into hybrid apps (some UI elements in HTML). There are still debates out there about HTML interfaces (Facebook and LinkedIn are two that move to native code for the UI), but also some reports that when chosen carefully it works. There is a great talk from Flipoard on that; with slides here.
UPDATE Oct/2014
In March/2014 Smashing Magazine published an excellent article comparing native iOS, native Android, PhongeGap (Cordova) and Appcelerator Titanium. They show the development of a simple app in each environment.
This is the last part of the series. At the top of this part there are links to the previous parts of the series and at the bottom there is the comparison of the approaches. There are also interesting comments from readers at the end.
UPDATE May/2015
Still get an upvote for this question every so often, so I would like to share what we have done since I wrote the first part of the answer.
We are now working on a project that also has a web client. We have now the iOS client, the Android client, plus the web client.
JavaScript is the natural choice for the web client.
Since we want to share as much code (at the business logic layer) across these clients, it means we need to find a way to run the JavaScript code in iOS and Android.
And that's what we ended up doing.
This is a summary of how we handle it:
For all clients: all data structures are defined with Google's protobuf. This allows to automatically generate the serialization/deserialization code for iOS and Android.
iOS: run the JavaScript code with the help of JavaScriptCore (a good overview here).
Android: run the JavaScript code with the help of Google's V8 engine.
The bridge between JavaScript and the iOS/Android layer can be a bottleneck, especially the serialization of the objects. We had to optimize a few things and learned a few lessons to stay out of trouble.
Generally the experience has been positive. We saved significant amount of time by sharing the code across all clients.
If I had to start another project like this one (that requires sharing code with web and mobile clients), I would also take a look at what Google did for inbox. It wasn't available when we started. Looks promising.
UPDATE August/2015
And the world keeps turning...
I would also take a good look at React Native if I had to start a new mobile app now.
It's based on JavaScript, bridging web and mobile development more easily.
There is a great tutorial in Ray Wenderlich's site.
UPDATE February 2016
My shortlist for cross-platform development is down to two:
ionic
React Native
I've been paying more attention to ionic because our web app uses AngularJS and so does ionic (Cordova + AngularJS). React Native will force the team to learn another framework (of course the argument is the opposite if your web app uses React).
Nevertheless, I'd seriously consider React Native, even having to learn another framework, because of the reported performance and look-and-feel of the app. From React Native's site:
With React Native, you can use the standard platform components such
as UITabBar on iOS and Drawer on Android
If you are starting now, I recommend you take the time to at a minimum complete their tutorials so you get a better feeling of each framework. Each tutorial can be complete in one to two hours:
ionic tutorial
React Native tutorial
For a simpler approach: Smashing Magazine just published (at the time I wrote this update) a good article showing how to use the native navigation elements to make the app feel (well...) native, while using web views to render the content. The article goes into the details of how to make the HTML/CSS usable in the mobile devices (it's not just pushing the HTML/CSS you already have).
If you only focus on develop apps for Android platform, I recommend you should use native Android (Eclipse + Android SDK as you said) instead Titanium.
Reason: Titanium is suitable if
You want to develop apps quicly, or
Your apps is simple, or
You see Java is so difficult (maybe :p ), so you choose the easier (Javascript of Titanium).
And here is the reasons why you should use native Android instead Titanium:
You want to develop a complex app, or
You want to customize app appearance. It's very important. Imaging you make an app for client, and they need their app to be customized for more eye-catching. Choosing Titanium means you must use their control, which lacks of ability to customize. It'd be better if using native Android that you can customize everything you want.
that is a very difficult question to answer without any specifics regarding the requirements of the application.
I would suggest you take a quick look at the API documentation of Appcelerator to see what the framework provides and also take a moment to list the basic requirements of your application and then determine what tool will be best for your project.
I think you are onto a good start using Appcelerator, since it uses JavaScript, etc. Easy to learn, but good examples. It will also enable you to use the same code and reach iPhone,iPad apps. Learning to use just the Android SDK is more complicated. Even then you still need to develop later iPhone etc apps. If you come from a web background this makes sense. There are good video's for quick learning. Good Luck
My experiences with Appcelerator seem to suggest they are more of an iOS shop. Their toolset for Android is, IMHO, quite lacking. ADT supports visual UI building and debugging on device, which Titanium Studio does not. There has been a bug filed about this for several months now, and it continues to be delayed. If your focus is Android, use Google ADT or MOTODEV Studio for Android. These IDEs are quite nice and are used by professionals.
The above answer presents a great way to develop mobile apps. DO NOT COMPROMISE ON A HIGH-QUALITY USER EXPERIENCE.
Lacking of bluetooth support is a huge deficiency for Appcelerator and no one gives a clue about roadmap.
edit : appcelerator now have BT support in Tizen 3.1
Well, in the new version of appcelerator (APPCELERATORSTUDIO 4.0) you can have alloy projects, and something like css files for your UI (tss), so in fact they are really customizable.
Greatings
Appcelerator has a lot of support and it really easy to use. It supports 100% of native api calls now. They have really good documentation too.

Categories

Resources