Woah, that’s a great news. Great job.
any idea’s when to expect the RC release?
I tried it by modifying the module ionic-gulp-browserify-typescript
var gulp = require('gulp'),
browserify = require('browserify'),
watchify = require('watchify'),
tsify = require('tsify'),
pretty = require('prettysize'),
merge = require('lodash.merge'),
source = require('vinyl-source-stream'),
buffer = require('vinyl-buffer'),
sourcemaps = require('gulp-sourcemaps'),
uglify = require('gulp-uglify'),
stream = require('stream'),
ng2TemplateParser = require('gulp-inline-ng2-template/parser')
through = require('through2');
var defaultOptions = {
watch: false,
src: ['./app/app.ts', './typings/index.d.ts'],
outputPath: 'www/build/js/',
outputFile: 'app.bundle.js',
minify: false,
browserifyOptions: {
cache: {},
packageCache: {},
debug: true
},
watchifyOptions: {},
tsifyOptions: {},
uglifyOptions: {},
onError: function(err){
console.error(err.toString());
this.emit('end');
},
onLog: function(log){
console.log((log = log.split(' '), log[0] = pretty(log[0]), log.join(' ')));
},
base: '/app',
useRelativePaths: true,
supportNonExistentFiles: false
}
module.exports = function(options) {
options = merge(defaultOptions, options);
var b = browserify(options.src, options.browserifyOptions)
.plugin(tsify, options.tsifyOptions)
.transform(inlineTransform);
if (options.watch) {
b = watchify(b, options.watchifyOptions);
b.on('update', bundle);
b.on('log', options.onLog);
}
return bundle();
function inlineTransform(file) {
return through(function (buf, enc, next) {
ng2TemplateParser({ contents: buf, path: file }, options)((err, result) => {
this.push(result);
process.nextTick(next);
});
});
}
function bundle() {
var debug = options.browserifyOptions.debug;
return b.bundle()
.on('error', options.onError)
.pipe(source(options.outputFile))
.pipe(buffer())
.pipe(debug ? sourcemaps.init({ loadMaps: true }) : noop())
.pipe(options.minify ? uglify(options.uglifyOptions) : noop())
.pipe(debug ? sourcemaps.write('./',{includeContent:true, sourceRoot:'../../../'}) : noop())
.pipe(gulp.dest(options.outputPath));
}
function noop(){
return new stream.PassThrough({ objectMode: true });
}
}
And removed the “copyhtml” from gulpfile, it work like a charm.
I’m considering not using ionic-gulp-browserify-typescript and create a clone, or maybe create a pr for it if it’s not alreay done
EDIT: Somebody has subbmited a PR Browserify relative template paths by michaelknoch · Pull Request #35 · ionic-team/ionic-gulp-tasks · GitHub
2 Likes
And what about performance? )
It look much better on an iphone4 ios8, something like twice the speed to display the pages.
On iphone 5 ios9 it work great, it’s smooth, the only default at the moment is that sometimes you have to double tap some buttons, for exemples on section buttons, sometimes they display like if they get a :hover.
Globally it was a relief when i’ve experienced a really more smooth usage. It’s still a little less smooth than on my nexus 5 (marshmallow) but it work great.
BTW at the moment there only one problem with my build… watching during developpement seem to be broken, the transformer isn’t applied. So first build, no problem, but editing the templates force me to have to reload ionic serve -l. I’m working on it.
1 Like
I also face the same issues with ionic being slow in transitions from one template to another.
Another issue I face is that that ion-list items used to link to a new view often do not register me touching the screen at all. I need to press the link several times. This problem only occur in phones, not using ionic serve.
I would be happy to share my code in a PM if Ionic Team would like to try it out.
So, after a time of bliss, problems back again on iphone 4s, sometimes the ion-header doesn’t show up when navigating from one view to another.
It’s random, can sometime not be reproduced, the only “clear” pattern is that the bug appear when the app launch for the first time.
Anyone having problems tested the behaviour on iOS 10, out of curiosity?
I had the same issue on Android some days ago, also random but only on Modal views (without inlining templates though).
Thus I don’t think it’s related to your inlining trick.
Yes, I tested in IOS 10, so far, there’s something that makes side menu not fitting in viewport. I haven’t noticed anything else.
Facing the same issue, I am using beta11.
The response is slow.
I was using “tappable” attribute for clicks, somehow the elements are not detected with our Appium automation suite.
Currently using and I am able to get through fast clicks on list items. I am still struggling with other elements than ion-item (like click on ion-col, ion-card … etc…) and also the back navigation button is less responsive as compared to Android.
Thanks for the response.
Glad to know that we have found out performance improvements with using inline templates.
I have bigger HTML pages to include them in a template, the component will look a lot shabby and will walk away from the indentation and attribute codes an ide provides (vs code for me) for development.
Are there any other alternatives which I can try?
Currently RC0 is out with compilation AOT (ahead of time) that improves performance, you should try it.
Also, there is WKWebView to improve performance in IOS (check the entry in ionic blog).
Note: With WKWebView you should work around CORS related issues.
Hope it helps.
Hi guys
I have Ionic RC-0 application with AOT compilation process and have the same issue as you reported here.
My application uses some of the “advanced” Ionic 2 components and features like Google maps, Segment buttons, Tabs, Sqlite database…
Actually, these features are not advanced at all and I think almost every serious mobile app needs it.
The application runs so terribly slow on iOS that I’ll need to pause development process.
I’m not saying anything against Ionic team and I think they deserve a medal for the amazing job they did so far.
I also tried installing WKWebView plugin and performance are better but only on newer iOS devices.
Maybe I should start thinking of this before, but I really didn’t expect that iOS app is going to work slower than Android.
Maybe Angular 2 and Ionic 2 frameworks are too big and requires a lot of webview memory which mobile devices can’t provide.
I compared Ionic 1 and Ionic 2 test cases with basic modal window and Ionic 1 works like a charm while Ionic 2 (rc0) has problems with animations and transitions.
2 Likes
I experienced something similar, are you using old devices?. I tried in iPhone 4s, and iPad mini, and is so slow, in newer devices runs great.
So, what I implemented to improve user experience, is a series of loadings components with platform ready, and every time a new view is loaded.
I haven’t tested maps, but if component is not working for you, maybe they can be added as it is done in web.
Hi @gerardx20
So you are saying that you implemented loading spinners every time user navigates to new page (and view isn’t loaded)?
I tried on iPad mini 2 which works good, including google maps. On older iPad 2 everything works so slow, like modal windows, gmaps, segment buttons…
I don’t know what to do. To wait till Christmas when people buy new mobile phones 
Yes, is exactly what I did. I use an iPad mini 1.
When testing my app with some people I realize that in some older devices they see the screen and start using it without fully loaded, so I decided to give some feedback and use the loading component.
In newer devices the loading component rarely appears, so shouldn’t be a problem in the app.
Don`t know what is your exact issue, but the app Im developing uses sqlite and is close to 8,000 products, and after doing the best to improve performance the fastest solution was to give feedback to the user, and so far has been well accepted.
Do you need to load the view instantly? can you implement a loading or spinner component?
Note: Im also looking to improve performance in memory management, if I find something useful I’ll let you know.
My problem is not slow loading of views. I used Angular’s AOT type of template compilation so they are precompiled and ready to be displayed.
The problems are animations and transitions in general, moving google maps around, displaying modal windows, animating DOM elements etc.
Anyway, thanks for help. I don’t see a way to make a workaround for these issues so I’ll need to accept the fact that it’s slow. Will see what to do next.
Animations on an iOS are still very laggy…
It is a pity to have nice smooth app on an Android and bare naked version for an iOS…
Does anyone solved the issue by now?
Ionic 1 app
Cordova CLI: 6.5
Ionic CLI: 2…2.1
iOS: Sierra 10.2
Node: 7.4
Xcode: 8.2.1