Porting a well working Angular2 app to Ionic


#1

Hello,

we are a software development team and build a brand new working angular2 responsive web app with RC1 and deprecated router.

We have the intention to use also the new ionic2 to for our mobile platforms, but there are a lot of things we have to consider:

  1. ionic2 gives you the ability to create platform specified look&feel, but we would like to create one look&feel for browser, mobile, android and ios. So the first question is this approach OKAY or is it better to use system specified css for performance problems or something else?

  2. As we try to use same look&feel, we would not use native ionic components as buttons or checkbox or something else, we have created our own material design components and we would like to use them, later we would like to use angular-material2 components. So, is it okay to use ONLY custom components or is that a performance problem and we should use better ionic components which means a really hard work for use create several new html pages.

  3. we created our app using angular2 webpack starter github project. using normal (now deprecated) router and standard bootstrapiping with an standard angular2 index.html file and so on. We are not sure about how we can introduce ionic2 in our project. Can we use the same project, the same router structure the same html and other things, including ionic2 (without @Page) using probably 95% the same code and include some native things we use as for example push notifications? So for now we didn’t understand which code we can share cross ios/android and normal responsive web app. If it is possible we would like to have only ONE project and not maintain two separate projects, are this things doable?

thx


#2

Hi, i’ve been playing with Ionic 2 since the alpha.42, about those items lets see:

1: You can use your custom styles, the only thing you should be aware is that ionic loads the scss depending on platform like this, so you should change them to only load your css, however using components made for web could affect performance, further testing needed (After all Ionic team tries to optimize the components for mobile apps):

  // Before, this specifies the style per platform
  <link ios-href="build/css/app.ios.css" rel="stylesheet">
  <link md-href="build/css/app.md.css" rel="stylesheet">
  <link wp-href="build/css/app.wp.css" rel="stylesheet">
  // After, your custom style, assuming you compile scss to the same folder, note lack of 'href' prefix
  <link href="build/css/app.css" rel="stylesheet">

2: The components in angular-material are made with web browsers in mind, thus they include styles and js for responsive designs that would be included in the mobile version and will take more space unnecessarily and more time to boot up the app (not that it’s that big of a performance issue), in older or less capable devices it could be a noticeable drop in performance so check your targeted users, which devices you expect them to use or you intend to support.

3: At this point you’re taking the Ionic framework out of the equation, Ionic offers the styles, the components, the navigation and initial config for build process, if you use material, custom made components, Ng2 router and on top of that just replacing the build process (i did it with webpack, but all other stuff is still Ionic for me), you’re now talking about a Cordova projec instead of an Ionic 2 one, you could just create a cordova project and paste your browser code and it would work (tough you need to test the performance comparison against Ionic 2), if you really need 1 project for all platforms take a note on Meteor, it has support for Angular 2, includes shared code between server and client and also can compile for mobile: https://www.meteor.com/tutorials/blaze/running-on-mobile


#3

Hey there!

  1. So this really depends on you. By default we adapt the mode to fit the platform. If you’re on the browser and out side of cordova, you’ll get material design. If you’re in cordova though, you’ll get the correct ios/md/wp mode for the platform. You can lock it to one mode using the config if that is something that you want. But something to consider is an iOS app that uses material design. Sure you can, but it definitely feels “off” IMO.

  2. Ionic 2 does come with a full material design implementation that has been performance tested so I’m not sure I see the point of using your own custom components. Ionic does have the proper build steps setup so that if you wanted to tweak the styles to fit your brand, it’s very easy to do. There’s nothing stopping you from using your own components, it’s just seems like an unnecessary step.

As for ng-material-2, it’s still beta and does not have a full set of components, so I’d recommend not using it at the moment

  1. So for routing, this is where things get tricky. Currently, we’ve disabled any integration with the router. Since the old router is now depreciated and the new-new-router is still in flux, I don’t think anyone should be using it. As for adding ionic to the an already existing ng2 app, you can include the directives and providers the main bootstrap
import {IONIC_DIRECTIVES, ionicProviders} from 'ionic-angular';
import {bootstrap} from '@angular/platform/browser';

@Component({
    //default selector, and theme.
    directives: [IONIC_DIRECTIVES]
})
class App {}

bootstrap(App,ionicProviders())

As for not using @Page, you probably should just use it. This is how ionic is able to handle navigation and animations.

So overall: If you want to using ionic for web and mobile, I’d really recommend using the default ionic setup. You can run ionic on the desktop and still get the material design look and feel you want and not have any many headaches that could come up.


#4

thx to @mhartington and @luchillo17 I need a while respond to you because we had to discuss your ideas and share them with our ideas.

So first of all, yes an IOS app that uses material can feels “off”, but we think and we hope in feature more developers and more software houses will use one look&feel over all platforms, there are a lot of examples, like a lot of google apps which have the same user experience and the same look and feel over every platform, like google inbox, docs, sheet and a lot of other examples.

We definitely like ionic and would like to use ionic components, they for sure will work great, so we have to test which components we can use from ionic and which components we must use ours. We have a lot of components which does do a lot of things, as example a complicate and intelligent drag&drop user experience. Things that you could not do in native apps, but only with html5 and css. We would like to maintain the same usability on the mobile platforms.

We love PWA and are happy that ionic team works on it with google :slight_smile:, but for now we have to do a mobile app and share as many possible code.

For the navigation, we have a different navigation experience, for example you can drag and drop the navigation menus dynamically and drag components from dashboard into menus to copy the components and functionalities in the new menu.

So perhaps we can use a custom navigation using ionic components in there. We will have a look for it. Is it possible to re enable the deprecated router?


#5

I’ve spent the last couple of days looking at ng-bootstrap and material2. Both seem very limited at this point. We’ve been building a health care related app for patients with Ionic 2 and now are looking to build an administrative app that is really targeted at the browser. We’d really just like to use Ionic 2 for it as well. Are there any limitations to just using Ionic for desktop browsers at this point?


#6

Hi @loganthomison please share your experiences if you find some good working solutions. We have the same use case but not created any ionic2 app, we have to wait for the new router to start building the app.


#7

Hi @mburger81 - We are going to go down the PWA road with Ionic 2 for now while we see how material2 progresses.


#8

But using material2 will not solve your “bootstrap” requirement? Right? Material2 are only angular2 components like ionic components are.


#9

@mburger81 I m facing the same scenario. Porting Angular App to a ionic one. Were you able to port it? , If yes can your share the challenges your team faced. If no then what are the issues that are pending right now


#10

Hi @piyush_gupta, after a lot of work I had to say, we where able to use angulars router , but after several month we decided to migrate to ionics native router. There are to many things we didn’t know what are happening in the background if we use angulars router. There are so many optimtations of @ionic/app-scripts and others that we don’t know how they are used on angulars router. Also they are not tested in this scenario.

So we migrate using new Ionics Lazy Loading Modules. But we can say, this are not working good for now, the team released it months ago, after many of us reclaims a lot of problems, they told us: The new router should not be used as standard because there are problems. Okay team, but why did you release it??

Now after several monts and a long and painful story with the new router, and nearly no communications to the community on what is happpening with the router, Dan told us the new router is onther a “refecatoring” and it should be ready in a few weeks.

But from there no news about it.

IMO, in future for sure you should use the ionic lazy loading router., this would be the right choice, and the team for sure is doing a great work on it. But there is not really a open communication to the community about it and so it is inpossibile to know, when it should be ready.

For the rest porting an angular app to ionic is not a big problem, it depends also on the scenario you would like to use it. Only mobile or also destkop webapp?


#11

@mburger81 Thanks for responding…
We have a Webapp ready with all the works (Aot and lazy loading modules). Its based on Angular Class webpack starter (Link here). The requirement is that this same webapp with limited functionality ported to android and ios app. With limited functionality i mean only 2 screens of original 5 screens of webapp. Now one way could be that we could migrate all business logic in one shared module and fork the source code for web and hybrid app (would like to avoid). Looking for other alternative ways. Can we just use angular router and lazy loader bypassing ionic way. Will the performance hit be noticeable ?


#12

We are trying to do the same, but we are using for now the ionics router, so it is also the router we use on webapp.