A complete Ionic starter based on Angular CLI, check it out!

How is what you write relevant to the actual Ionic app on a mobile device?
A released Ionic app contains 1 or 2 .js files that the build process created.

I think you misunderstood the process here: The Angular JIT or AOT does not concerns the app itself, which is always transpiled in Javascript and packaged in bundles whether AOT is enabled or not.

The Angular JIT/AOT only concerns the HTML templates that are transformed in Javascript either in the browser (JIT) or beforehand (AOT). As Angular use virtual DOM just like React, when we refer to the Angular Compiler under the hood it concerns the templating/binding part which transform templates into JS.

The app “compilation” which takes TypeScript and transpile, optimize and packages it into Javascript bundles is never done on the device.

1 Like

Indeed I misunderstood these two sentences

From Angular

Angular offers two ways to compile your application:

Just-in-Time (JIT), which compiles your app in the browser at runtime
Ahead-of-Time (AOT), which compiles your app at build time.

And from Angular

Faster rendering

With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.

But the logic remain the same:
The without waiting to compile the app first in our case in 20sec

And this 2 images from https://blog.craftlab.hu/multiple-solutions-for-angular-ahead-of-time-aot-compilation-c474d9a0d508 help to understand the advantage of AOT

JIT

AOT

And how does this relate to the default Ionic process being bad?

1 Like

Ionic process is bad because the livereload on the mobile device (ionic cordova run --livereload) take more than 20 sec on each modifications and I suspected it was because Ionic is building in JIT mode and in JIT mode the most part is compiled in the mobile device.

But now since you don’t seem to be convinced I doubt about my conclusion.

@Sujan12 when running on a device with livereload, it takes us ~20sec to reload:

  • webpack update: 6s
  • angular initialization (between a tag put in index.html and the APP_INITIALIZER) : 11s
  • loading of first modules and first page: 3s

on our previous version of the app, with Ionic 1, livereload on a device was taking a few secs only (with gulp config)

note that we are already using Ionic 3 with IonicPage, and that we read all possible threads on the Internet called “speed up Ionic”. But still, 20 secs to reload makes development really slow.

1st question for you: is it normal that it takes so long?
2nd question: if we understand well, the code that is executed in the device with livereload is JIT, and that could explain why it takes so long; we believe that going with the angular CLI can make livereload much faster because code pushed to the device would be AOT; does it make sense to you? if not, what did we misunderstand?

thank you!

Livereload just runs a dummy browser on your device that connects to a web server running on your PC. So all of the compilation, from my general understanding of the process, would be done on your PC.

At least this is my understanding of it.

my understanding is that the web server running on the PC distributes HTML/JS not compiled, and that the compilation is made JIT, on the device.

any jedi master willing to enlighten us? :stuck_out_tongue:

I have no idea what you mean by “HTML/JS not compiled”. You write Typescript. This gets compiled into HTML/JS of different optimization levels depending on the parameters (--prod or not). Depending on the command you use you have it on the device, on the computer via a web server, with or without livereload enabled.

1 Like

Plus with JS not being a compiled language it’s technically always JIT.

guys, let’s share a common glossary, otherwise we won’t understand each other, ever:

  • Transpilation: from TS to JS
  • (Angular) Compilation: from HTML/JS to optimized JS

my understanding with Ionic CLI is that the web server distributes HTML/JS (not compiled), and the compilation happens on the device’s browser
I also think that there’s a way, with Angular CLI, to have the web server distribute optimized JS (compiled), which would significantly reduce the livereload time

is there a jedi master somewhere who could validate/invalidate those 2 beliefs?

Just want to say thanks a lot for the great work. Have been looking for something like this for a long time. Very happy that I finally came across it. Thank you!