In most desktop web applications I've ever worked on you need a server-side web framework. The server-side web framework (Struts, Spring MVC, etc) has some kind of controller for processing requests and then a templating engine (Velocity, JSP, etc) for generating dynamic content.
Now I am starting to work on mobile web applications and all the discussions I see revolve around selecting a UI framework (jQuery Mobile, jQTouch, Sencha Touch, etc) but I don't see any discussion of what is happening on the server-side to actually process HTTP requests or to generate the HTML, CSS, and JavaScript.
Does this mean that most mobile web applications do not use a server-side web framework... meaning the server serves static content, the majority of the interactive behavior is coded in JavaScript, and the only server-side code is REST services that the JavaScript client loads?
If I wanted to use a server-side web framework would that be a bad idea? What problems would I face? Does anyone have a recommendation on web framework that would be a productive platform and not "get in the way" of mobile UI frameworks like jQuery mobile?
NOTE: The developers I work with mostly come from enterprise Java backgrounds, however, I wouldn't limit it to only Java-based web framoworks. There are other frameworks out there that have roots in Java that could be considered (Grails, Lift, etc).
A good question for sure and I will answer it this way. The current trend is to build a lot of interactivity into the front end. There are several reasons for this. Some do it because it's the new thing to do, others do it because they're trying to replicate the desktop experience. In the end, there is only one goal for any given web project and that is to create Best and Most Sustainable User Experience.
That being said, there would be server side technologies to avoid and that would be any of that generate the front end for you but are not using jQuery. Over 45% of all websites today use jQuery and if you select something else, you will be instantly at odds with the prevailing mobile frameworks. (GWT, IceFaces, I'm looking at you).
Probably the safest and most flexible way to go would either be using a Spring based implementation or Prime Faces. Spring Mobile is worth looking at. Prime Faces actually implements jQuery Mobile and is theme-able using Theme Roller.
In general, it really doesn't matter what backend framework (if any) that you use so long as you're pushing good markup. The browser doesn't care and the only thing that user's care about is a good experience. So, pick whatever will make your devs happy for the backend so long as it doesn't get in the way.
As for front end frameworks, yes, their popularity is increasing because they do tend to standardize some of the best practices in mobile. There are many many comparisons of jQuery Mobile vs Sencha vs jQTouch. I'll leave you to figure which is best for your project but would certainly use either jQuery Mobile or Sencha because the community of support around these is massive and you're less likely to look like the many shabby, home-grown mobile sites that tried to do it from scratch when they didn't have the experience to pull it off. It's just sad. My personal recommendation is jQuery Mobile because it's covers such a wide range of devices and (provided you stick to the standard page-by-page model) will degrade gracefully for even the crappiest of feature phones and still be functional but look amazing on smartphones.
To your question of just using a RESTful design with JavaScript loading everything and managing state. There are many that are doing that and it's certainly a snappy experience but you'll be instantly limiting who can use it to people who's mobile browsers support good JavaScript. You'll be looking at only supporting iOS, Android 2.2+, BlackBerry 6+, and Windows Phone 7+. All others will likely have significant difficulty viewing your site. Carefully consider your audience before moving to an implementation like that. If your site wont work without JavaScript and your primary clients are in the corporate world... what happens when the latest Black Hat conference exposes a weakness in the company phones and out of conservative risk mitigation (paranoia), they push a security policy to everyone's phones that disables JavaScript. This kind of thing happens all the time. So, consider your audience.
Take a look to ItsNat, ItsNat invites you to think in client JavaScript but coding in Java and executed in server generating the same JS code to the client.
The difference with GWT is, Java W3C DOM code is executed in server and JS is automatically generated, meanwhile GWT is executed in client, server data must transported to client.
Related
We have a requirement to build app with as much common codebase as possible, that works on desktop and mobile platforms (Android, iOS, Windows Phone). Also, the app on mobile platforms should act like an app (so not mobile-friendly website), with access to camera, position, and an icon.
Having looked at all the options and finding some or the other quirks, I decided on having webapp/site on browser and PhoneGap to base the mobile app on.
Now, as far as my understanding goes, sticking the codebase of browser webapp/site in Phonegap base structure should work for the mobile app. Of course, some minor changes may be warranted.
However, I also saw that relying only on phonegap and barebones HTML5 tech (without any UI framework) would need a lot of time and would be tiresome.
So I looked around for a UI framework and found - JQuery Mobile, Sencha Touch, Kendo UI, etc. jQuery Mobile, while could work in desktop browsers too, would not give me a grid-like system to position elements. The rest of them seem to work only on mobile platforms - they did not boast about it working/scaling on desktop browsers.
So, is there any common library/framework that can provide - CSS animations, grid-like system for positioning, etc.?
It's not an "answer" so much as an idea for a method. Perhaps try creating what you need from a desktop perspective first using bootstrap so it's mobile first. Then maybe make use of something like jquery mobile for the bare bones navigation and structure in the app. You can then pull in your page content via ajax using the same code/layouts from your "desktop version" (which will of course have a mobile friendly view/layout since it's written using bootstrap).
You'll likely have to either create an api for serving up the content for your app or else find some other way to differentiate the app from the desktop site on the server side so you know where they request is coming from, but it seems do able.
After some testing and verifications on browser and phonegap, I chose the following combination:
Yahoo's purecss library for grid system and basic widgets. Its awesome with the only pain that Google Search on it gives ambiguous results.
Reactjs to manage the view logic. This was the biggest pain in my previous project having only used jQuery, turning my whole project into a huge jQuery soup. React is extremely clean compared to that.
superagent probably, for AJAX requests to fetch server data. Extending this, I haven't yet decided to employ a model-like library that handles the state; may be I dont need one. I will decide as the project moves on.
hand-coded CSS with some common sense so that I learn something and dont waste my time in finding an all-in-one library. _The only necessary rule here is to weed out older best practices when you are looking for something. For example, in order to center something, the transition method is the best technique.
I recently got into an interesting debate on native applications vs html5 applications, specifically about performance and battery usage. Disclaimer: I tend to favor HTML.
The other person made the argument that native will always be better on battery because the mobile browser has to parse the dom, css, and javascript. I would tend to agree that JS - even well written JS - can be murder on a mobile battery. But I'm not so sure about dom parsing.
So let's take that part out of the equation - I prefer to take a document, not app based approach, e.g. a web "site" vs a web "application." Take a really simple type of site - a blog. This blog just has bootstrap.css and no javascript. Would a native mobile blog application be better on the battery than chrome?
You might want to read this article on o'reilly regarding battery life vs. computation.
Would a native mobile blog application be better on the battery than chrome?
That depends entirely what you want to achieve. A 'bare' application is generally faster and less demanding that a feature rich application.
I was wondering that if I want to make apps for both iOS as well as Android is it worth it to get into learning the whole HTML-CSS-JavaScript route or should I learn their native SDKs?
Exactly how much will HTML5 be the future I guess Im wondering. Is it going to really replace the native mobile app?
I know noone has a crystal ball but Im just seeking input from more experienced/or more senior developers.
Much appreciated.
The reality is that HTML5 will never be a realistic replacement for native applications built in iOS and Android, as it is not powerful or robust enough to do so. Additionally, using HTML5 will only work for you if you intend to create very simple apps. Even then, you will run into problems.
Consider for example the Table view in iOS. It can be highly optimized for speed and interaction in a way that will always surpass a third-party, remote solution such as HTML5. Note that the table view is one of the simplest things you will do when creating an iOS app.
Additionally, knowing Java (Android) and Objective-C (iOS) will be beneficial to you in the long run in terms of your development career.
There is one real exception: if your app is going to be the native representation of a web app (ie. Facebook) then it does in fact make sense to go with a largely web approach (HTML5/Javascript/CSS). In fact, that is exactly what Facebook did. However, even Facebook experienced a very buggy and crash-prone existence on mobile devices for the better part of a year.
In conclusion, I know of no application developer who seriously considers HTML5 as a contender for the building of mobile applications (other than for heavily web-based apps with web-like functionality). The dream, of course, is that HTML5 will be a "silver bullet" or a "golden hammer" for developers, ushering in a brave new age in which we are able to focus on learning one set of technologies for all sorts of devices. Unfortunately, it is merely a dream. At least for now.
I want to start building hybrid HTML5 mobile apps; build the core functionalities via HTML5, then wrap this with a native layer for iOs, Android, BB..etc
After some research: I found I need to be familiar with plenty of technologies, namely: HTML5, JS, CSS3. Other technologies/frameworks I was advised to be familiar with: JQuery for Mobile, Sencha touch, Node.JS, Backbone.JS, PhoneGap..etc
Till now I just know the basics of HTML5, JS & CSS.
My question is:
Is there a "single" place (Book/Tutorial/Screen casts) where I can find a walkthrough Tutorial that deals with some of these technologies and guide me to building hybrid HTML5 apps (Maybe on iOs for example)..
I would want to learn the mentioned technologies among these, yet I am pretty keen on learning them in the context of building a hybrid mobile app and not on separate basis. I much prefer learning by doing real work (The app in the Tutorial/Book/Screen cast here) rather than learning each technology on its own.
Much appreciate your answers.
Omar
OK, let me expand my original answer:
HTML is short for hypertext markup language.
It is used to specify how to display STATIC content via the HTTP protocol, vulgo web.
HTML5 is version 5 of the HTML language specification, and is a RECOMMENDATION to a standard, but not really a standard by itsself.
CSS is used to apply advanced STATIC formatting to STATIC text/images, such as alternating background colors for even/odd rows in a table, text-flow, text-direction, size, boldness, font etc..
To make static content DYNAMIC, you need JavaScript.
JavaScript is a scripting language, that runs in the webbrowser of a vistor (client) to the website. Theoretically, it is meant to behave the same on each browser, but in reality, Microsoft used unfair competition and intentionally crippled the JavaScript implementation in it's browser (Internet Explorer), by diverging from the ECMA standard, and by implementing proprietary features, to stifle competition (Netscape) and make it impossible to develop compelling web applications, for example online office software.
JavaScript, the client-side programming language, is complemented by PHP/ASP.NET/JSP, which are programming languages & frameworks that run on the server, and are there to dynamically create static pages, for example by filling in data from a database, and to process and save user input, such as orders, payment, emails, feedback, etc, and to process input from HTML forms (input masks).
JQuery is a JavaScript framework.
That mainly means, it's a library of JavaScript functions that were designed to provide often-needed functions that do the same on each browser, effectively bypassing the anticompetitive practises of software vendors such as Microsoft and Apple.
It also provides basic functionality for event handling, graphics and AJAX (asynchronous JavaScript and XML), and functions for serializing/deserializing JSON (JavaScript object notation).
JQuery for Mobile is a version of JQuery optimized for mobile devices, such as Android or the iAnything. So are Sencha touch, Node.JS, Backbone.JS, etc.
The difference between HTML 5 / and HTML4/XHTML is mainly that HTML5 provides a so-called "unified" way to embed audio video. Which is not necessarely true, because each browser supports different audio and video formats, and there is NOT ONE audio & video format that is universally supported across all browsers.
HTML 5 also provides the very useful WebSockets, which basically allow you to make client-server applications on the web. Since this would enable compelling web applications and office applications that would be on par with Microsoft Office, Microsoft hasn't implemented WebSockets in the standard browser. It's available as separate plugin, which basically nobody bothers to download, which means one cannot use web sockets anytime soon if the web application should work with internet explorer. Additionally, HTML5 is only implemented by IE9+, and not by IE8. IE9 however is only available for operating systems newer than windows XP (vista, 7, 8). Which means one cannot install IE9 on Windows XP (35 percent of current windows installations, Windows makes up 85 percent of the desktop market).
To embed web applications on mobile phones, you need to embed your applications in a embedded WebBrowser. For Android, the interface to the embedded browser is called WebView, and you need to learn the Java programming language to use it. For Apple, I have no idea whether they have such a thing at all, but I'd suppose they have, though it's probably going to be more complicated, since that's Objective C, and not Java. Since I have neither a iPhone nor an Apple computer, I cannot tell you anything about it, except that it's crap because it doesn't support Flash, and that it costs 10 times more than what it's worth..
Screencasts, you'll probably find on youtube, if there are any.
Again, google search will provide you with the necessary answers if you have a specific question.
My question is: Is there a "single" place (Book/Tutorial/Screen casts)
where I can find a walkthrough Tutorial that deals with some of these
technologies and guide me to building hybrid HTML5 apps (Maybe on iOs
for example)..
Yes, http://www.google.com/ncr
You know, it has a wonderful search box for just about any problem...
Other good pages:
http://www.w3schools.com/html5/default.asp
http://www.w3schools.com/js/
http://docs.jquery.com/Tutorials
Here is an update on this question, as building hybrid apps have come a long way in three years.
I would start with looking into Phonegap, or the Adobe owned version called Cordova. This is a very popular route in quickly developing and distributing hybrid cross platform mobile apps. So popular in fact many other frameworks are built around the Cordova framework to give it a more native feel, such as
Ionic - this is by far the most popular, it's open source (free) and my favorite as I find the quickest and easiest to work with. In addition they have great documentation and great pre-builds. It's command line interface framework that works combines the Cordova, Bower (a package/plugin manager), Grunt and Angular JS frameworks into one powerful and quick CLI. If you are unaware of these frameworks they're definitely worth looking up if you're looking into building web or hybrid apps.
Mobile Angular UI - is an HTML 5 framework which uses bootstrap 3 and AngularJS to create interactive mobile apps.
Titanium - is a "complete" solution for creating hybrid mobile apps with all you need in one place with there downloadable program Titanium studio
Telerik - a website based program similar to Ionic and titanium for rapid development
Those are great places to start. If you don't already have a subscription to Lynda.com I would highly suggested it. The subscription is roughly $25 a month depending on your location. They have hundreds online video courses that can run a few hours long and are very great I giving you a good scope and how-to do many projects and understanding many frameworks. teamtreehouse.com is another great tutorial tool they have a lot smaller selection of videos better more in depth and hands-on and will work with many other frameworks with in the project.
You want to learn how to develop a hybrid app that works with multiple platforms such as android, iOS, Windows, etc. This means you need to learn PhoneGap and Cordova(preferred). These are almost the same, one really is part of the other.
Google both phonegap and cordova, install the packages (requires a little bash command line knowledge). It is relatively quick and easy to get the example HelloWorld app in both Phonegap and Cordova.
After that? well, you will have to learn HTML, CSS, javascript at minimum for the web side of a hybrid application. The native side (Android, iOS, etc.) will require learning Android Studio/java for android, or Xcode/swift for iOS.
Everything you want to learn is either on youtube.com for free, or Udemy, Udacity, Lynda. Some sites you will have to pay for, but its WORTH IT.
I have been assigned to build a mobile web application. I have found two ways to develop that (there might be hundred other ways to do that, but I am aware of these two): jQuery Mobile and HTML 5.
Which one should I use? The application will be a normal web app, like a shopping web app or a user management system.
I am looking for compatibility in different phones and great UI with fast processing.
So, the ways I know is JQuery mobile and HTML 5.
Which one should I use?
It's not a case of using one or the other - you use both to create a solution.
HTML5 provides the framework to present your content, whether it is text, images, video, audio, or any mixture of the above.
jQuery (Original or Mobile) is used for "Progressive Enhancement", that is to provide additional functionality, features or flair to the HTML5 framework.
To ensure the best compatibility across the majority of devices, you want to have a website which is usable without the jQuery enhancement. Then, once you have that, you can use jQuery (and/or standard javascript) to add the "nice-to-have"s, like animations, AJAX interactions, geolocation, etc.
Lucanos is right in the sense that HTML and jQuery aren’t alternatives. (Browsers display HTML, and then you write JavaScript — possibly using a framework like jQuery — to manipulate that HTML in custom ways where necessary.)
However, if you‘re using “HTML5” in the Apple sense of the word (i.e. to describe HTML5, CSS3, and browser-specific extensions to CSS), then there are some choices to make — e.g. some WebKit-based mobile browsers support CSS animations, which should perform faster than JavaScript animations.
I’m not familiar with jQuery Mobile — it might well use CSS animations when they’re supported, and simulate them when they’re not, meaning you get wider compatibility without much runtime performance cost.
But for mobile, personally I think you’re better off picking the most popular platforms (i.e. iOS and Android), and writing to their capabilities, without bothering with a framework like jQuery Mobile. That way you serve most of the market with less effort (and thus serve them better), rather than making everyone download jQuery Mobile just to serve a few older phones that’ll get binned in a year or two anyway.
Disclaimer: this depends entirely on your target market. If they all use old phones, write to the capabilities of those phones.