How to use Vanilla Javascript with ionic4/Cordova App

There doesn’t seem to be an area for ionic-v4 yet so I’m posting here.

I’m not trying to add to the forum duplication, but I’ve asked before, again:
Is there any way to use ionic-4 with plain javascript? I can’t seem to get an answer. I do not want to use a CDN link. I wish to use this within a cordova app entirely on the client side. So, I need to download the necessary items and use it in the of my html page. Like you would add any file/folder. So easy with jquery. Just download the entire file and add the script to the header: src=“js/Jquery-2.2.3.js” type=“text/javascript”

Can anyone help? Ionic 4 promised support for plain vanilla javascript and other platforms, but how is it being done? I do not want to be restricted to using Angular.

Thanks.
-Rachel

Every time you ask it, this question reminds me of the Zen koan about the sound of one hand clapping.

Frameworks tend to ship with building and bundling tools, and documentation and samples of how to use them to make apps. You seem to be asking for these things, yet you do not wish to use the ones provided by any framework.

This strikes me as paradoxical. It would seem that at the moment you receive what you ask for, you would effectively have been given a framework, at which point you would reject it.

If you don’t like Angular, fine. Choose something else. I think it would be both wise for your app quality and much better for your productivity, though, if you chose something, because otherwise you will be rolling your own framework from scratch. Huge teams of really smart people have invested thousands of hours into making these frameworks, and they have been extensively tested and refined through community feedback. Why refuse offers from giants to lift you upon their shoulders?

Then ionic shouldn’t advertise that 4 will support vanilla javascript. Guess that is enough said. I’ll pass. Seems like this forum isn’t a friendly place for me.

-R

npm install @ionic/core should do the job as I understood it.

From https://www.npmjs.com/package/@ionic/core / https://github.com/ionic-team/ionic/blob/master/core/README.md#how-to-use

Additionally, within this package is a dist/ionic.js file and accompanying dist/ionic/ directory. These are the same files which are used by the CDN, and they’re available in this package so they can be apart of an app’s local development.

Is that what you are asking?

2 Likes

Sujan12,
Thank you. That is exactly what I wanted to know. I appreciate it and will give it a go!

Like you would add any file/folder. So easy with jquery. Just download the entire file and add the script to the header

:grinning::grinning:

Last time I checked jQuery was not a UI component library, and definitely not lazy load optimized etc.

Quite right about jquery. One of the reasons that I’m looking for a solid replacement. My apps were built on jquery & jquerymobile. They are large, unwieldy things, but they get the job done. I want to rewrite them in a more modern and better development system, but I’m not the world’s greatest coder and need something that I can get my head around. I’ve seriously considered another platform, but it isn’t as well supported. I’ve waited a long time for ionic to get support for multiple platforms. I’ve been following ionic since it first started. I’m appreciative of your help on my question. I enjoy positive and supportive people. Thanks Tommertom and Sujan12. Now, I need to get busy and “play” with ionic4.

Best Regards,
-Rachel

Looking at your dev goals it does bear merit to look at frameworks and make a choice before leaping into recoding your app into the present state of technology

Josh Morony has a blog (dunno link) talking about this

I personally like angular becuz it is highly opinionated about basic dev choices making it very efficient to go around. There is a big community. And google is working hard to make it the best of te best

So do take that one with you as also mentioned in post #2

Hello everyone,
could someone please give more details on this topic.
I would like to use ionic exactly as Curious described: A local copy of the ionic framework which I can use with simple <script src="relative/path/to/ionicstuff"> tags.
There is a nice tutorial how to use Ionic without a framework here:

Only I don’t want to use a CDN like unpkg (because that requires that the app has an internet connection, right? No offline use possible). I’d like to download a copy into a local folder and use it from there.
I did install @ionic/core with npm as Sujan12 has suggested. I have now a node_modules folder full of packages, including @ionic and ionicons.

But how do I continue from there? What do I have to include and where? Do I have to use ES6?
I’d really appreciate a simple Hello World example to get me going, like the simple one in the tutorial mentioned above. I tried all kinds of approaches and always got mostly general js error messages like “xy” not found".

Curious, did you succeed and could you help? Or is there a tutorial somewhere which I could use?

My end goal would be that I would have a folder with all html+ionic+node_modules stuff and could copy that to a different PC which has no node or npm installed and no internet connection, and still be able to continue working from there. Is that possible?

Thanks in advance…

1 Like

Hi there,
i’m using ionic with vanillaJS by using CDN, its working so far good, but the components (alert, navigation, popovers etc) all are lazy-loaded by default and i dont want this lazy-loaded thing, because whenever i first time show an alert or navigate, it takes time which gives the feeling like nothing happened or its not working.

Is there something i can do about this ? Preload components or not lazy-load!!!, something, anything ???

1 Like

Same is true when using Ionic4 with Angular. First time a component is used, it takes a while to load which makes it seem unresponsive. Sometimes prompting a second click from user.

Would love to know if there is a way to preload.

1 Like