Why use <ion-input> instead of <input> - ionic-framework

What is the reasoning behind using a <ion-input> instead of just a normal <input> element?
This question also regards using Ionic components in general. Why not just use my own components? I am aware that Ionic have different styles for some of the components, but if I want a same looking input on both android and ios, then couldn't I just use a normal <input>?

Ionic framework itself is a library of rich UI components, which unifies development experience by making codebase: platform agnostic. So developers can focus on one code base, Ionic component takes care of adapting its look to the native platform. Ionic components natively provide rich UI, platform continuity, easy navigation & event handling, native access & theming.
You can read more in detail here.
Developers choose Ionic framework in technology stack so one don't have to write custom styling/code for each platform.
Instead if you are using basic html tags, then you are even better off putting Ionic in your technology stack as you are just reinventing the wheel & writing custom code for each platform (iOS, Android, Electron, Browser, Mobile, Tablet) for styling & event hanling.

UI Components
For those completely new to Ionic app development, it can be helpful to get a high-level understanding of the core philosophy, concepts, and tools behind the project. Before diving into complex topics, we'll cover the basics of what Ionic Framework is, and how it works.
UI Components
Ionic Framework is a library of UI Components, which are reusable elements that serve as the building blocks for an application. Ionic Components are built with web standards using HTML, CSS, and JavaScript. Though the components are
pre-built, they're designed from the ground up to be highly
customizable so apps can make each component their own, allowing each
app to have its own look and feel.
More specifically, Ionic components can be easily themed to globally change appearance across an entire app.
customizing the look, please see Theming.

Related

Iconic's ability to support complex web applications

Ionic was built with mobile in mind - creating a good mobile experience using web technologies. You start out with a web app, so there is the possibility to use it for all 3 platforms. However I’ve never seen anything that resembles a complex web application that uses iconic for both the web and mobile. Will it support the ability to use 3rd party controls such as complex grid controls that may only be used on the web and not in the mobile apps. I’m trying to decide if we use ionic just for mobile and have a completely separate code base for our web application. Any invites would be greatly appreciated!
Basically everything that works on the web also works on mobile devices built with Ionic.
Ionic creates a WebView where javascript code runs. you can use capacitor or cordova to manage native functionality.
So if you have web developers you can do anything you could do as "Mobile Web" but in an app.
Now you can also choose whether to use react, angular or vue.
For example using Ionic with react you can use the VirtualDom and develop exactly as if you were using react on the web.
Instead, using for example React Native you will be forced to use a set of react components (or write new ones) but you will not have the VirtualDom available.
However you can also integrate native code, which Ionic doesn't support.
There are a lot of articles online that cover the subject by comparing competitors:
From Ionic
So yes, you can use all javascript libraries!

Does Material-UI support react-native

Material-UI v0.18.7 docs example has a build for ios/android, but it is not clear to me if it also works for react-native. While I could make it work for react (web), I could not make it work for react-native.
Is it possible to run the docs example for react-native ?
PS: If it doesn't work for react-native, then why do the ios/android build exist ?
android and ios was only folders for poc, and that implementation has react-native 0.17 version only, react native changed a lot through the time and now has ^0.47 version.
As I see, previous roadmap of working with react native included writing of native components and reorganisation of project,. So material-ui 0.18.7 does not support react-native,
As they wrote, there are a lot of troubles:
Bringing the web API to the native
We gonna have to make sacrifices, I'm expecting some web feature to be really hard to implement on native, for instance, the CSS media queries, the CSS animations. (advanced CSS rules)
Handling missing native API in the web
Some of the missing web API features is around touch handling, scroll & infinite list view, native components like a DatePicker or a Drawer.
So, it is only included in roadmap, check out discussion about it here:
https://github.com/callemall/material-ui/issues/593

Difference between react and ionic framework

I have read some docs and i do not really understand what are the differences between react and ionic frameworks.
Is one of them made from the other ?
I have to store local data. I suppose one of them is just web and javascript so data is only stored on server ? Or is it possible to do local storage with both of them.
Is it possible to host the app on a web server without having a "real" app ?
Thanks
Hi I think that you are a little bit confused. I hope this clarify your doubts:
Ionic framework is a set of tools for create Hybrid apps using html/css and javascript, It is build using apache cordova and Angular 1. In the other hand you have React a library for build rich UX(User experience) web apps.
Ionic is not build on react. They are different purpose tools but you can use that together (Using IONIC 2).
In both cases you can use local storage, but if you want to store data in servers you have to build your own backend to provide data to the app They are front end oriented frameworks(no server side)
You can put Ionic code on a server it is simple JavaScript and HTML but this is not the purpose of the framework and if you do it, you loose the native apis of the device. In the case of React it is just a library and you can use it in an existing project using HTML and Javascript or build your app entirely with it.
You have a long road ahead, hope this help you.
Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile apps. They are essentially small websites running in a browser shell in an app that have access to the native platform layer.
React Native is the next generation of React – a JavaScript code library developed by Facebook and Instagram, which was released on Github in 2013. React Native lets you build mobile apps using only JavaScript.
They have their own way of functioning, below are few points on their differences:
Ionic is a regular web app, written using HTML, CSS, and JavaScript, but it runs in a webview embedded in a native app instead of in a stand-alone mobile browser
React Native has a completely different architecture: instead of writing your UI using web technologies, it uses the React component model to render to native views.
Ionic is a Cordova based app that wrap current web app into a mobile application. It uses the android existing web view to render the app so the file size is quite small
Meanwhile react native create bridge between JavaScript and native component.
When it comes to memory usage, Ionic framework uses more than react native apps
The Ionic app is slower at loading videos because it needs to download from other server, while in react native, it caches the tiles so it loads faster.
When it comes to integration, react native can use every client based JavaScript modules from npm (node package manager) whereas Ionic uses only the Cordova-based code.
Ionic is a framework that creates an idea of writing code only once
React native is not a write once and run anywhere framework, but is popularly touted as a “learn once, write anywhere” framework
Ionic Framework app needs to use device features and APIs through Apache Cordova plugins.
With react native you can access any device component or API
Based on the points above, you can see the difference in their functionalities, so if you want to go for something that creates performant iOS and Android apps that feel at home on their respective platforms ten you can opt for React Native.
And, if you are targeted at building hybrid mobile apps, Ionic is the best choice!

Best framework to create mobile applications?

I'm looking for a Framework to create mobile applications, if possible writing all code in Java. The idea is create for all mobiles Android, iOS, Windows Phone etc.
I found: Sencha, Vaadin and others.
What's the best ?
if you need to build cross mobile application you can use phonegap http://phonegap.com/ it is better you can use javascript and HTML and CSS to build applications.
Xamarin is another great one. I think you're asking the wrong question though. There isn't really a BEST one, its more what fits into your style. Some might say phonegap is the best, but you can't use code behind in phonegap only HTML CSS and JavaScript. So you gotta find what works best with what you want to do.
Also, look up chrome web apps. You can now develop apps using chrome rendering engine and usual html css and other web based code types and package into apps for the different os app stores.
Everyone is talking about Ionic, I am using it and I love it. Here are some slides to introduce you.
I would use ionic framework, is based on apache cordova, and use AngularJS. If you dont know AngularJS you have other alternatives like goratchet made by bootstrap creators. The only 'problem' is that you'll have to use javascript, html and css, not Java.
I am using ionic framework as well. The best part is you do simple command like ionic build ios to have an ios version of your app, as well as ionic build android for android version.
AngularJS is actually easy to learn (as long as you have basic understanding of JS), the best resource would be egghead.io. I use Ruby on Rails as backend to render an API for my ionic app to consume, so i pretty much don't need to use NodeJS or other JS framework as backend. Also, there is a lot of support for ionic. You can always search Google for a codepen example if you need help.

Migrate Existing GWT Project to GWT Mobile Application and PhoneGap

I have an existing gwt project. I want to run it on various mobile platform. So I choose GWT Mobile and PhoneGap would be the ideal to start with. But the project is quite big, code-wise. Is there some tool available to migrate the code to new gwt-mobile(m-gwt) and gwt-phonegap? Or I have to write the code from scratch?
Regards,
Sandip
As far as I know there are no tools to migrate the code from gwt to mgwt. The code changes should be some 20 % percentage of your project, if you followed MVP pattern suggested by GWT. If you would have followed MVP, then you can reuse all the layers except View layer and in any case I don't think you can just replace GWT components with mgwt components. As the mobiles have a different form factor and usage patterns, you will need to design your views suited to mobile. Just scaling down the website to mobile form factor will not provide a good user experience. So the page designs needs to be changed and you will need to code for that using mgwt and where ever you want to access the native layers of the mobile, you can use gwt phonegap.