Can one use the Ionic framework with plain Javascript (aka. without the recommended frameworks like react, angular or vue)?
If yes, how?
yes, you can build Ionic apps using VanillaJS or take advantage of Vue, React or Angular or Stencil
all components documentation available for JavaScript
it's recommended to use React or Vue,... for large scale application but if you want use plain JS it's available.
From Ionic framework documentation:
One of the main goals with moving Ionic to Web Components was to remove any hard requirement on a single framework to host the components. This made it possible for the core components to work standalone in a web page with just a script tag
In short: Yes, in the same as way you can use wordpress.
According to the official documentation:
One of the main goals with moving Ionic to Web Components was to remove any hard requirement on a single framework to host the components. This made it possible for the core components to work standalone in a web page with just a script tag. While working with frameworks can be great for larger teams and larger apps, it is now possible to use Ionic as a standalone library in a single page even in a context like WordPress.
Related
I have been learning Polymer and this came in - The future of web (lit-element & lit-html)
I understood that lit-html is for HTML templating with a couple of efficient techniques.
At the same time lit-element is a lightweight web component base class which has the lit-html inside it.
Question: If lit-element comes with lit-html, I would solely use the lit-element for all my purposes. What exactly does lit-html doing explicitly with its own separate context.
One should choose lit-element or lit-html while developing a standalone web application?
Any help on guiding through this would be of much help!
First, lets clarify the following points:
Web
Components
technologies are supported in modern browsers by default. You can build
a Web Component application using the browser's API.
HTML templates has been around since 2013 at least.
lit-element library is a "lightweight" version of Web Components. You'd use it if you want to build an application in Web Component and if you do so, you'd be using its built-in lit-html via html to create HTML templates
On the other hand, Just like you stated, lit-html is a library which has efficient mechanism to create and update HTML templates. You can use it for whenever you'd need an HTML template irrespective of the framework/library you are using for your website, if any.
For an example, you could build a website with jQuery or vanilla Web
Components and use lit-html to create the HTML templates.
lit-html is a library which deals with dom rendering like other libraries e.g. React
It uses the newest way of diffing the dom tree with help of native tagged templates.
var h1 = html`<h1>Header 1 <h1>`
like any other framework/library e.g. JSX it also provides you construct inside the tagged template and directives to help.
LitElement is a lightweight framework using lit-html as rendering engine. It provides you the observed properties, attributes and web components lifecycle callbacks
For a web application you should go with LitElement, if you do not want to reinvent the data binding, caching, callbacks etc. you would definitely require more like state tracking, routing etc. which you can employ from other libraries or develop your own.
it's just a simple question it has been more than 2h searching what to learn next ! i want something that will make me able to create a cross-platform app: web - android - ios . I've been teared up between NativeScript and react native + Reactxp.. i need your experience guys thank you !
bringing the power of web to phones.
As you want to share the same codebase for web and phone, NativeScript is an obvious choice.The Angular and NativeScript teams teamed up to create nativescript-schematics, a schematic collection that enables you to build both web and mobile apps from a single project.
A code-sharing project is one where we keep the code for the web and mobile apps in one place. Here’s a quick diagram to show you what that looks like at a high level.
The objective is to share as much code as possible, and split the platform-specific code into separate files.
This usually means that we can share the code for:
Routes for navigation,
Services for common business logic,
and Component Class definition for common behaviour of a component
While, splitting the code for:
UI Layer (CSS and HTML) - as you need to use different user interface components in web and NativeScript-built native apps,
and NgModules - so that you can import platform-specific modules, without creating conflicts (e.g. Angular Material Design - which is web only) between web and mobile.
To create two separate templates, you just need to use a naming convention. Simply create two files:
yourcomp.component.html - the web template file,
yourcomp.component.tns.html - the NativeScript template file - it is the .tns that makes it a {N} file.
You can even migrate from your existing project, you can fine the instructions here
P.S.The #nativescript/schematics package only works with #angular/cli: 6.1.0 or newer.
I am trying to create a iOS/Android app based on a client side html5 web project, (i.e. a site) I did.
I thought Ionic would be the ideal choice, that it would help me to port my web application as soon as possible.
In my site, I would use the 'script src="https:// ..."' tag to load the external lib, then calling it in another script
tag. However, I can't import and use it in Ionic3.
I tried many solutions tagged with 'ionic2' and nothing really seems to work.
It also seems no one knows a general solution for this, since each answer was case-specific.
Does anyone know a general way of importing external js file and using its objects and 'classes' in ionic3?
(I would prefer to load from the web, but I am also accepting to download and load it fro file. )
(If ionic isn't the best way of accomplishing my objective, I am open to suggestions)
I think you need to wait till release the Ionic 4 and Stencil.
What is all about Ionic 4 and Stencil?
The magical, reusable web component generator.
Stencil is a tool for building modern Web Components
Stencil combines some of the best features from traditional
frameworks, but outputs 100% standards-compliant Custom Elements, part
of the Web Component spec.
Stencil was created by the Ionic Framework team to build faster, more
powerful mobile and web apps. Stencil is the foundation for the next
generation of Ionic Framework, but is completely independent of Ionic
or any other UI framework.
Here you can see the official doc.
Nice video about the power of Ionic 4
Nice article about it
First of all have a look at this useful ionic resource, it explains how to add thirs party libraries using npm.
If you cannot use npm because of whatever reason you have to put the source .js file into your assets/js folder and import it in your index.html using a <script> tag. Then you have to tell typescript that your library exists. This is done like so: declar var <library-handle>. Where <library-handle> can be an exported function/class if the library already uses ES2015 or the object which exposes the functions using prototype. This is the tricky part where you may have to try a few things until you get it to work.
You can have a look at my answers here, here and here where I explained how to add different third party libraries to ionic projects.
We would like to upgrade the web application built with Java script and Jquery to Angular 2. The application is huge and we cannot convert it at one shot, so we would like to convert it in a step by step basis. I have a couple of questions
What are options to convert a small part of web application to Angular 2.
From the current web application(built with simple java script / jquery) we would like to have a link that would open a modal window built in Angular 2. The modal window will have a series of screens to capture user input. We just want to create this part alone in Angular 2 as a first step. Is this possible?
There is a big difference between jQuery and Angular2. jQuery is a library to mainly manipulate the DOM. Whereas Angular2 is a complete framework. When I say complete framework, it has features like routing. So it is easy to build single page application with Angular2 without much external dependency.
To move to Angular2 you might need changes in the server-side also, like exposing APIs, the build system to support Angular2.
So instead of moving a modal window to angular2, a better option might to go with a microframework based approach, were you identify a small independent set of functionalities(module) and move it to Angular2
AngularJS can be used in small parts of your main application. No problems there. You can write your modal logic using angular and you will be fine. You can always add new features in your app using angular, going forward.
However when you say you want to upgrade your existing code, more factors will come into play and a lot will depend on the existing architecture of your app.
The most significant difference is that most jQuery apps works around DOM manipulation. The code you write for jQuery is always trying to manipulate your DOM.
But in angular this process works differently. If you code correctly you will rarely need to manipulate DOM in your angular project.
So I would not recommend to go for a partial upgrade where you have to mess with your application's architecture. But certainly you can build new features using Angular.
It seems pretty challenging to integrate other js libraries and apps into single side applications based on react.js - except for using iframes.
Does anyone know a proper solution/workaround for visual integration of non-react apps into react.js SPAs?
You will have problems to integrate any kind of libraries, which are working with the DOM directly.
jQuery (or many of jQuery-Plugins) are manipulating the DOM. People which decide to use React, don't want to access the the DOM directly, instead the DOM is generated by React automatically.
So, there are many JS libraries which you can use with React, like Redux, underscore.js, lodash.js, moment.js, i18next.js and so on.. But this libraries are basically for Data-management, Modeling, Validations, API communication and so on.
All UI / DOM Rendering stuff should be managed by React Components.