Let me preface this by saying my knowledge of node apps and javascript is very limited, all my programming knowledge comes from a python data analyst background.
So, I am trying to learn frontend and build an app in Svelte. I will serve this app with another backend so I will not be using SvelteKit. I am also using Ionic for my UI framework. I will probably use Routify for routing but this is beyond the scope of this question. Also, I know svelte isn't officially supported by Ionic but i'm not interested in using another framework.
The simple method would be to include the Ionic CDN in the svelte index.html. However, I would like to keep my files in one place when I build the final app and not require a CDN or even possibly a network connection if I decide to use Capacitor to build for mobile devices. So, I'm not sure how to proceed. I would like to bundle Ionic (Ionic/Core - IonicIcons) with the default JS and CSS bundles that svelte builds using Rollup. Googling around a bit iv'e discovered I apparently need to use something called "rollup-plugin-css-only" to bundle the CSS and somehow include the JS files in commonjs in the "rollup.config.js". I tried adding the path to the JS files to commonjs but I couldn't see any changes to the bundled JS the svelte outputs. I also have no idea how to use add the css or use "rollup-plugin-css-only". Instructions and explanations iv'e found haven't been very helpful.
So, in summary... I'm trying to bundle Ionic into my svelte project without using a CDN and haven't figured out how too do it yet. I also may not be understanding this workflow correctly so let me know if I got something wrong. I just need an explanation or example of Ionic bundled in a svelte app. I would also like to mention that the workflow I am looking to accomplish will also allow custom themes in Ionic with the CSS processing.
Related
I'm trying to learn how to use lit as a dev tool for making web components and I'm having issues with making it run on my system.
In the documentation it states that you just need to run the command "npm i lit" on the folder of your project and after being successfully installed it should be running.
I did the "simple greeting" test also available on the documentation but it's returning me a blank page. I even copy-pasted both ts and html. Still blank page.
on my html, if I drill something into it, it shows on the page, so I know it's something regarding the custom web component (named simple-greeting).
I already did a course on native web components and I understand how it works, but I never worked with lit.
Isn't it just to import the necessary things from the respective library (like html, css, LitElement) and use it in TS?
Am I missing something? I am really confused and can't find anything online.
Thanks in advance.
It seems I forgot to run the web server. Still a long way to go, I guess.
I'm using Ionic Capacitor (javascript application + ios/android native wrappers), and I have a situation where I want to get a small piece of data from the javascript layer and pass to ./ios/App/AppDelegate.swift.
Is there any way to achieve this without the use of a plugin? For example, can AppDelegate.swift "listen" for javascript events in a manner similar to how a Capacitor plugin would?
Thus, in my application, I would have a form field (e.g. for email), and then on button click I pass the string to AppDelegate.swift, which then does something with it.
Yes you can do it.
It's documented here
That not the favourite way, though.
Edit:
this is from native to JS in the doc, sorry about it.
I checked a the module you want to install in your app, it seems you want to do it in AppDelegated because of the need of UIApplication.
If it's that i recommend you to create a plugin and use it inside like here
Or last solution you can use a config if you don't need to change the config by deploy
Plugin is likely your best shot.
Not sure which features of that SDK you're using, but you could try using the Cordova plugin they provide. Capacitor supports using some Cordova plugins.
The idea is not new, like Wordpress, Oxwall : a platform created by some guru guy that allowing other dev guys to add new apps (like forum, blog, market-place, whatever) into the platform easily. By easy, we mean either just install new plugin by upload or less user friendly coding new plugin without changing the core code.
Actually, we have a working solution with angular1 but quite clumsy, that's it, multiple stand-alone ng-app within a website, like:
domain.com/forum-spa
domain.com/dating-app-spa
..etc..
Good thing about it is quite straightforward to implement, not much to worry about lazy-loading. But we are not happy with that approach for many reasons.
Angular2 is really close. We hope it can bring a better solution for building a large web platform
iframe
custom components that are added at build time that are added depending on user data like explained in Angular 2 dynamic tabs with user-click chosen components
This approach is compatible with the offline template compiler
There is also a more flexible way that supports user-provided component templates How to realize website with hundreds of pages in Angular2
This approach is not compatible with the offline template compiler and requires the Angular parser and compiler to be included in the build output.
What programming language is behind ionic 2, on github i can only see css classes for tags of ionic 2 not the actual code of tag, where exactly I can find this, the implementation of tags of ionic 2
Ionic2 is written using TypeScript and Sass. It also leverages elements (Component, Directive, ...) and mechanisms provided by Angular2.
The source code of the framework can be reached in Github: https://github.com/driftyco/ionic/tree/2.0/ionic.
If you look for the source code of components, you could have a look at the components folder.
For example for tabs, here is the corresponding TypeScript source code:
https://github.com/driftyco/ionic/blob/2.0/ionic/components/tabs/tabs.ts
https://github.com/driftyco/ionic/blob/2.0/ionic/components/tabs/tab.ts
...
And the SASS one:
https://github.com/driftyco/ionic/blob/2.0/ionic/components/tabs/tabs.scss
...
Ionic 2 is built using Typescript (same as Angular 2) and Sass. We have found that Typescript is really great for open-source development since the compiler and static types eliminate an entire class of potential issues.
Ionic 2 will support traditional 'desktop' web, mobile web/progressive web apps, hybrid apps like Ionic 2, and even hybrid 'desktop' apps via Electron.
Ionic runs within Apache Cordova (PhoneGap). Ionic is a combination of javascript, html and css files written for you, so that you don't have to write them yourself and concentrate on your application.
So, basically you want to learn in what programming language Cordova has been written? As you can see on GitHub, it uses different languages for different platforms. Mostly Objective-C for iOS, Java for Android, etc.
Since I basically can get the same info with both approaches, I'm wondering which is the preferred one and what are the advantages using one over the other?
$cordovaGeolocation is angular wrapper over plain javascript plugin, developed by ionic. Now question is why ngCordova was introduced,in simple words to deal it as plugin service as module and inject plugin wrapper as dependency to only particular controller or service.
On Pratical level, cordova developers were having issues with plugins on angular project. One simple issue was that $scope does not get updated sometimes in simple plugins callback.
Quoting from ionic blog post :
The services support promises to make it easier to deal with their
asynchronous nature and ensure scope data is properly updated.
So my conclusion is, you should go with $cordovaGeolocation.
As far as I remember, on Android that plugin does not do anything at all, and on iOS it prevents the OS asking for access to location over and over.
Overall the plugin totally conforms the html5 specs, so you shouldn't change anything in your calling code (in js) if you use the plugin.
And the plugin has a good documentation here: https://github.com/apache/cordova-plugin-geolocation/blob/master/doc/index.md
It is worth noting that according to the current and oficial documentation (see cordova geolocation doc), there is no need to use $cordovaGeolocation, but rather the global object navigator.geolocation.