CODEWITHSUNDEEP
androidhtmlcsscordova
user3991417
user3991417

Reputation:

Hybrid application development (PhoneGap, Cordova, Ionic) under the hood

I am trying to understand how everything works, but have some questions about this topic.

I will explain how I understand this stuff.

First of all lets start from Cordova this is platform that translates JS,CSS,HTML files into native app. But stop this is not exactly the true.
Really it just puts all html, css files into asset folder only thing that such platform does is creates custom WebView specific for the platform, configures it, binds all required plugins to it and sets default page to open.
Everything else is just web development except hook methods provided by platform plugins which help to access native features like GPS,Camera through java calls from WebView.
So all other stuff is up to specific native web-core to handle and support features like HTML5, CSS3 ... If for example WebKit implementation of specific android version doesn't support such features, you cannot do something to get it working rather than update low level core of Android.

So I have following questions.

  1. What are platforms like Onsen UI, Ionics, Sencha ... Official websites say HTML5 Hybrid Mobile App Framework and UI Components for PhoneGap & Cordova. Why keyword HTML5 is used everywhere, this is just feature of native browser core nothing more, if browser doesn't support all these platfroms and frameworks are useless.

  2. What do special these platform provide to be Mobile-hybrid specific. I understand that PhoneGAp and Cordova provides plugins and some proxies for communicating with native API, but in case of UI frameworks this is just css,js, html files ? Why I can't use them in default PC browser ?

  3. What is the purpose of installing such platform and frameworks for example through npm for instance npm install onsenui, why I can't just simple copy js files to my project directory ? I understand that some platforms use css-preprocessors to compile pseudo-css files into css files, but in case of absence of such tools.

Please tell me where I am wrong and answer my questions. I would be grateful for any help

Upvotes: 4

Views: 338

Answers (1)

James Parsons
James Parsons

Reputation: 6047

1) All of the libraries / frameworks you mentioned in your first question are a little different.

  • Ionic provides a UI framework (i.e. controls) to be used in hybrid apps as well as angular services to interact with the UI controls provided. It essentially gives you an entire stack on which to build you hybrid app.

  • Onsen UI is another UI framework smaller and slightly more library agnostic than Ionic. Onsen does provide Angular bindings and services for their UI, but also works with plain old vanilla JS or jQuery. The upcoming version also supports React bindings.

  • I cannot say too much about Sencha (I have not used it), but it is as well UI framework. Snecha, however, uses their own JS framework called ExtJS.

The use of the keyword HTML5 is more likely to advertise that the UI framework is using modern web technologies (Flexbox, etc.). I (and please someone correct me if I'm wrong) believe that that may be just a marketing ploy.

2) Technically, none are Hybrid specific. You are correct in believing that they can be used in a desktop browser environment. That being said, the UI components are designed for mobile and would not look very appealing on desktop. They are best suited for Hybrid apps and mobile web apps. Ionic is even pushing for progressive web apps and plans on extending support for desktop (including electron).

3) Installing these frameworks via a package manager is a matter of convenience as well. You easily could copy the files over (Ionics's website explains that you can do this). and manually compile the styles, but it's more work to get things working correctly. Some, like Ionic have a CLI installed through NPM, but the framework is typically installed via bower. It also makes it easy to upgrade when a new version is released. Overall, you could ask, why use package managers for any language / platform, and it comes down to organization and conveniences.

I hope I answered all your questions, and if not please leave a comment.

Upvotes: 4

Related Questions