
Hybrid apps: Do not copy. Do get inspired. Avoid reimplementing native UI - mattmark
http://www.makehybridapps.com/2014/06/21/do-not-copy-do-get-inspired-avoid-reimplementing-native-ui/
======
Pacabel
This "your UI shouldn’t mimick [sic] the native style of the platform" advice
reminds me of what we used to hear when using Java and Swing a decade ago.

It resulted in a bad user experience then, and I think that still holds true
today. Swing apps never felt right on any platform, even when using a native
theme. It's probably no different for apps built using Cordova, too.

~~~
mattgreenrocks
This advice sounds more like sour grapes disguised as best practices. I
believe a similar excuse was trotted out with Swing ("Swing is it's own
platform!"). Users didn't care, they hated the non-native, slow,
accessibility-unfriendly Swing apps, which they perceived as bloated and low-
quality largely due to the feel.

I can't help but chuckle at the fact that we're making literally the same
mistakes we made eight years ago while claiming progress.

------
nchlswu
> Secondly, your UI shouldn’t mimick the native style of the platform.

hmm..?

> After all, it’s another case of copying the looks and the two reasons
> mentioned earlier apply here too. It still is time-consuming and distracts
> you from thinking about your user’s actions.

From a development perspective this may be true, but from a usability/UX
perspective, this definitely isn't. It's not just about copying.

~~~
sp332
It's one thing if you think about your users' needs and decide that copying
native style is helpful. It's different if you just mimic the native style
without thinking about whether it's what your users need.

------
ntaso
I found the performance of PhoneGap still lacking. Currently, I develop a very
simple app with Impact.js, which is an HTML5 game engine and can be deployed
with Ejecta. However, I don't do a game, more like a calendar app.

The downside is: You can't use any HTML/CSS elements for building the UI.
Because Ejecta supports only the canvas element.

The plus side is: If you manage to make a basic UI like in a "game" with
canvas only, you'll get near-native performance, since Ejecta implements an
OpenGL-enhanced canvas element.

~~~
malandrew
The performance problems are not the fault of Cordova in the newest version
which can be configured to use to the newest version of Chrome on android
devices. Instead performance issues are the result of inefficiently
manipulating DOM. Try famo.us with phonegap and you'll be able to overcome the
performance issues you're seeing.

disclaimer: I work for famo.us, but trust me here. do a proof of concept of
something with cordova and famo.us that in you prior experience was poor with
just cordova alone.

~~~
ryanpetrich
Or avoid unnecessary DOM updates and use only opacity and 3D transforms in
your animations to get the same performance as famo.us

~~~
malandrew
Basically. Although, any way you slice it you're going to want something
(famo.us, some future alternative that uses the same same techniques or your
own solution that uses the same techniques), because letting the logic that
manages opacity and 3D transforms to be mixed in with your app logic code is
poor encapsulation. Honestly, it would be great if the browser makers realized
the value of a low level scene graph API to permit people to create solid app-
like experiences while also preserving semantic HTML structure within the
leaves of the scene graph.

------
miles_matthias
Like every tool, you need to know the pros/cons and be able to apply them to
your situation. Unless your goal is to make a super simple app that has 100%
coverage across all mobile devices, Phonegap shouldn't be the tool you use.

The market share of phonegap in hybrid apps is depressing to me. It's not hard
to learn the Apple/Google sponsored way of doing things and then progressively
decide when to bring in html/css in a webview.

I even open sourced a starting point I've used on my apps that I'm hoping will
get more people to avoid using phonegap and learn iOS / Android:
[http://imbed.github.io/](http://imbed.github.io/)

Refs: [http://dojo4.com/blog/why-phonegap-sucks](http://dojo4.com/blog/why-
phonegap-sucks) [http://dojo4.com/blog/imbed-for-
android](http://dojo4.com/blog/imbed-for-android)

~~~
ChikkaChiChi
Please point me to a place where I can understand how to do Objective C in a
"not hard to learn" sort of way.

There is way too much going on in XCode that a web developer wouldn't get or
understand without having broad strokes glossing over the Interface, file
structure, or behaviors included therein.

~~~
malandrew
Over and over again I keep hearing people recommend the Big Nerd Ranch guide
to Objective-C. I've briefly looked at it myself, but never got into iOS
development so didn't pursue it seriously. With that in mind, I found it to be
a very approachable resource, but that also comes with the caveat that any way
you slice it, you're going to have to become familiar with computer science
and programming language concepts and "ceremony" that you previously never had
to worry about with JavaScript. The notation/syntax is heavily influenced by C
and C++, and its those concepts that "bog" you down until you realize their
role in the code you're writing. Basically, I'm not entirely certain there is
a 100% "not hard to learn" sort of way, since every resource is going to have
to expose to language features where you are asking yourself "why can't this
be as simple as JavaScript, the untyped/dynamic interpreted language I know
and love."

~~~
ChikkaChiChi
While I was partially playing Devil's Advocate, I'd would definitely agree up
to the point where you said JS is simple. I personally think it's awful and we
should all collectively feel ashamed that Javascript tends to be the first
"code" anyone dips their toe into when starting out in our field.

I've never wanted for better guides, books, and tutorials online for any of
the languages I've gotten into. Specifically Golang and Java have both been
much more approachable for me in recent months because I feel like I don't
need a degree in rocket surgery just to open the IDE.

Maybe that's my problem. I'd rather not have to learn an IDE at the same time
I'm having to learn a language. Now that I think about it, I also hated VS
(but not Eclipse or the Jetbrains products).

Thanks, Doc ;) I think I just figured out my big problem!

------
supercoder
Yes, avoid _reimplementing_ native UI.

But _use_ native UI where possible.

------
resca79
Interesting article. I think that the slowness of webviews has much value than
we can image. This guarantees to Apple, Google etc to have a total controll
over apps distribution, in other words a Fast WebView is equal to minus money
for them.

~~~
eloisant
Not really, most editors will still want to be in the app store / play store
even if they can release a pure web app. From a marketing point of view
releasing "an app in appstore/play store" has a lot of value vs releasing "a
mobile web app"

Also, iOS and Android since 4.4 have pretty good performances in the webviews.

~~~
resca79
the point is not the releasing to AppStore but the download from app store.
You could release a webApp to appstore but not download it from the store.

------
free652
Hybrid apps aren't production ready due to performance issues. May be weebkit
was fixed in the latest build of Android 4.4, but that excludes the majority
of users. The adoption of the newer builds in the android market is much
slower than iOS.

Only 18% of users right now have 4.4, for comparison 14% are still using 2.3.

~~~
mox1
I would 100% disagree. The average "app" can most definitely be written in
cordova / phonegap with jquerymobile / Intel App Framework or another MOBILE
framework and run fine.

I've spent the last few months implementing a plain cordova app with Intel App
Framework , google maps api v3, some css3 transitions, etc.

I've tested it on everything from Android 2.3.6 to 4.4, all work fine, no
performance issues. Same on iOS.

Now if you are taking something you've written for a desktop (and are using
desktop frameworks) or something that starts doing crazy DOM manipulation (or
adds "shadow dom's", etc) then yes you might see a performance problem...

Additionally, if you are talking a physics enabled HTML5 game, that might be
an issue. But a plain old app with some basic functionality will run fine. If
it doesn't , YOUR doing it wrong.

------
captainbenises
I implemented a little bit of animation and a 'native-esque' SPAM button in my
app Herenow. I used css3, and to be honest, it doesn't feel quite native
because the webview isn't as fast as a native control would be. Looks are
easy, feel is hard.

[http://www.herenowapp.com/](http://www.herenowapp.com/)

~~~
nbartlomiej
Author of the blog post here. From my experience, achieving a native feel with
a hybrid app on e.g. iOS isn't that hard. There are constraints, true. But it
can be done.

My strategy is to use GPU-accelerated CSS transitions, test often on the real
device and see how others are doing it, e.g. in UI frameworks (onsen ui,
framework7, ratchet, etc).

~~~
jondot
Incidentally i spend the last 2 weeks going through various Android devices,
and iOS devices, various javascript frameworks and various CSS frameworks.

I'm happy to see others having opinions on this subject.

Essentially i did the research for these combinations:

[Android devices]x[iOS devices]x[js frameworks]x[CSS frameworks]

It was hard and tiresome but the conclusion - same as yours - iOS works very
well for cordova/phonegap. Android is a no-go!.

Among the frameworks I checked: backbone, ember, angular, ionic, topcoat and
various other CSS frameworks.

All were slow on Android. Also discovered 4.4 introduces worse performance
(acknowledged by google) which is solved with crosswalk. However crosswalk
brings many bugs to the table itself.

Really disappointing - currently I'm opting out and going Native.

~~~
ColinCera
Allow me to suggest taking a look at QML/Qt Quick. I've only recently started
working with it, but so far the UI performance is excellent and for someone
experienced with HTML/CSS layouts and JavaScript it's quite easy to pick up.
(Also, FWIW, it's more enjoyable than twiddling with CSS.)

------
ChikkaChiChi
I'm going to go ahead and assume that most developers don't have access to the
millions of dollars in market research, analytics, focus groups, design
theory, etc. etc. etc. that Google and Apple do.

Why would we abandon an aesthetic (that as of the L preview) that is two of
the best and cleanest looking interfaces on the planet?

------
grrowl
Implementing a pixel-perfect design in a webview-based Cordova app was a
nightmare on Android 4.0—4.3. I'm glad 4.4+ has native Chromium webviews, but
I wasn't advocating web-based packaged apps before and I can't see myself
doing it again.

------
elwell
Just curious, has anyone tried to use React (or Om) for their html5 mobile
app?

