Writing the least amount of different source codes for a mobile app + web site

[devOp]

Hi all,

I want to create an application which will need a website as well.
What I'm looking for is how to make as few different source codes as possible. My definition for a "source code" is a code for a single platform/service.
What needs to be done is as follows:

1) Mobile app - there's a need for: iOS version, Android version, Windows phone version, web service, database.
2) Website - client and server side, database.

My priorities are from highest to lowest:

1) As few source codes as possible.
2) Fastest learning curve as possible for my knowledge (will be described next)
3) Cheapest.

My knowledge: C# (Xamarin is a possibility), Java, Native Android, a bit of Spring, a bit of PHP, a bit of MySQL.

If there's a need to learn some technologies - for example ASP.NET, HTML, CSS, Javascript - I'll do it. I heard you can somehow create a web site and then turn it into a cross platform mobile application like PhoneGap or Ionic, which means you might be able to get a single source code for everything - is it true?

What do you think is the best option in my case?

 

[BobF]

C# (Xamarin is a possibility)

 

I started with Xamarin and it's a nice product for creating native apps. But it's a pretty expensive solution for targeting multiple platforms unless your client-side code is small enough to fit within the code size limit for Xamarin's free level. However, once I realized all the major browsers were going to support WebGL I switched to JavaScript because it will allow me to cover both the web and mobile platforms with a single code base. Xamarin allows you to use a single code base for mobile platforms, but you'll still need a web solution. Theoretically, much of your Xamarin code could be ported to Silverlight for the web solution (both are based on C# and have mostly the same APIs), but Chrome dropped support for Silverlight this year (and Firefox plans to drop support for it next year) so Silverlight is no longer a good choice.

 

You can write your web app in JS and then reuse the code in PhoneGap/Cordova for mobile. Note that if you're creating a graphically intensive app, such as a game, then you may need WebGL which introduces further considerations. You can use PHP, or whatever you wish, on the server side.

[devOp]

I started with Xamarin and it's a nice product for creating native apps. But it's a pretty expensive solution for targeting multiple platforms unless your client-side code is small enough to fit within the code size limit for Xamarin's free level. However, once I realized all the major browsers were going to support WebGL I switched to JavaScript because it will allow me to cover both the web and mobile platforms with a single code base. Xamarin allows you to use a single code base for mobile platforms, but you'll still need a web solution. Theoretically, much of your Xamarin code could be ported to Silverlight for the web solution (both are based on C# and have mostly the same APIs), but Chrome dropped support for Silverlight this year (and Firefox plans to drop support for it next year) so Silverlight is no longer a good choice.

 

You can write your web app in JS and then reuse the code in PhoneGap/Cordova for mobile. Note that if you're creating a graphically intensive app, such as a game, then you may need WebGL which introduces further considerations. You can use PHP, or whatever you wish, on the server side.

 

Hi Bob,

After thinking about it, I've decided that the website is actually more important than the app as what I want to build is a share of information between people in tables so it's more of a website than an app.

Could you please elaborate on how to create a responsive website which will work on both desktop and mobile screen sizes? The only thing right now I do know about web development that it should be done with HTML5 and CSS3. I'm not sure about which kind of Javascript to learn (simply go directly to learning Jquery? Ajax?). Or can I do it even much faster using WordPress and then I don't really need to know many of the other stuff? maybe using bootstrap (which I'm still not sure even what it is)?

[mattstyles]

I dont mean to sound negative, but I dont want to hash your expectations of what you will be able to achieve, but, currently you are way off being able to create anything but the most trivial of things hacked together from whatever sources you can find. I'm only mentioning it because programming for the web is hard—fragmentation (supporting multiple platforms, which is absolutely necessary), undefined screen sizes, JS is a bag of temperamental crayons, CSS is great but everything is global so hard to maintain and HTML/DOM is heavy, plus, you're learning at least 3 separate disciplines (HTML, CSS, JS). So, with that out of the way, and I only mention it because this road is hard and you have to be committed, here are some things that will hopefully help you out:

 

Ajax is a way for JS to talk to a service via http. jQuery is a library built on top of JS, i.e. jQuery is JS. jQuery makes things easier many times although with modern browsers there is no place for it anymore, its most useful features have easy-to-use (often identical) 'native' equivalents. I say 'native' in quotes because nothing is native is JS, by 'native' JS I mean, functions and features that the language supports. If you are learning, absolutely DO NOT us jQuery, it will hide implementation features and only hamper you in the long-term—learn how to code proper vanilla JS and then you'll have the knowledge about whether to adopt jQuery for your project or not.

 

The easiest way to make a site responsive is via CSS. CSS is not a silver bullet for this, but read up on media queries and about using percentages. i.e an element with a width of 100% will fill the horizontal portion of the screen, or its parent element, yes, this is confusing but it is easily grasped with practise, but, what this means is that it is full-width on both desktop and your phone, however, and this is a biggy, your design probably will not work like this across all devices.

 

There are about 4 million JS frameworks (you think I'm joking, well, I'm not exaggerating by much) with new ones appearing every quarter. My single sole biggest piece of advise: steer clear until you have an intermediate grasp of JS (depending on your aptitude and smarts you're probably talking 18-24 months before you approach intermediate, of course, if you have good experience of other languages you can cut that time down, but JS has many quirks that are only learnt through painful experience, it is an 'organic' language, not a thoroughbred, although it is evolving well currently). Frameworks bring their own idioms to JS, and if they are good they should hide many of the more painful things about using JS whilst encouraging good practises, this sounds great but if you dont know why they are structured the way they are then you are going to be banging your head against a brick wall. With great power comes great responsibility (yada yada yada).

[BobF]

I've decided that the website is actually more important than the app

 

That's probably good since it's easier to make a web site discoverable than to make a mobile app discoverable (although still difficult in either case).

 

Could you please elaborate on how to create a responsive website which will work on both desktop and mobile screen sizes? The only thing right now I do know about web development that it should be done with HTML5 and CSS3.

 

These are big topics. If you're new to HTML and CSS then I would recommend reading up on it a little first to save yourself time in the long run. Maybe take a look at the "Head First" series of tech books. Then you can google "responsive design" and find lots of good info about that.

 

I'm not sure about which kind of Javascript to learn (simply go directly to learning Jquery? Ajax?)

 

Learn JavaScript before concerning yourself with frameworks and libraries, like jQuery. "JavaScript: The Good Parts" and "JavaScript: The Definitive Guide" are two good books to help get you up to speed. Note that JavaScript, particularly in regard Object Oriented design, is very different from the other C based languages you may be used to. Programmers from other languages often dislike JS at first, but come to love it once they gain experience with it and see how rich and flexible it is.

 

When writing JS you will likely miss having a compiler point out your errors, especially after you've wasted a chunk of time debugging a coding problem that a compiler would have pointed out instantly. I highly recommend using a JS linter to help alleviate the absence of a compiler. Personally, I like writing JS in WebStorm because it has as-you-type JS linting built-in which will catch many syntax errors.

 

can I do it even much faster using WordPress

 

WordPress is a great platform for creating websites, especially if you will be regularly adding new content to the site. If you use WordPress then consider also getting a WordPress theme framework such as Genesis or Woo Themes. Those theme frameworks provide a nice selection of WordPress themes to choose from with responsive design built-in. If you go this route it will allow you to get a nice site up and running quickly, but understanding HTML, CSS, and JS is still necessary for modifying the site and creating your web app. Note that WordPress includes jQuery, so there is little reason not to use it.

 

maybe using bootstrap (which I'm still not sure even what it is)

 

Bootstrap is a popular GUI framework for building web app interfaces. It may save you time and effort in building a nice looking, functional web app.