First, I do not have much background in JS; Aurelia JS is not working for me, I get the following error in Chrome:
1) TypeError: e.configure is not a function
at aurelia-core.min.js:1
If I use the Aurelia basic-aurelia-project.zip
2) I get Uncaught (in promise) Error: Cannot set SystemJS.map["aurelia-framework"] directly. Use SystemJS.config({ map: { "aurelia-framework": ... } }) rather.
If I maken eclipse project and use the below in index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.20.9/system.js"></script>
<script src="lib/aurelia-core.min.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
If I have to follow simple dependency inclusion model with 'script' elements in head/body what are the scripts to be included.
In addition, I did not find any CDN link for Aurelia, which makes me wonder if Aurelia is production ready or a mere Beta level upcoming JS framework.
I do not use Node.js etc. so npm etc. does not work for me. Is there a simpler way of using Aurelia (in AngularJS 1.x style including script elements) or there is some other more complicated way.
I am not sure if Aurelia is worth the effort to adopt in terms of configuration/dependency (my opinion only).
If someone can help me resolve the above problems & dependencies it shall be great.
I'll answer this question based on my opinon.
In addition, I did not find any CDN link for Aurelia, which makes me
wonder if Aurelia is production ready or a mere Beta level upcoming JS
framework.
You may not find any CDN link for Aurelia because it's not like other libraries, such as jQuery. There's no reason for a CDN link because you would never load it using script tags in a production environment (unless if you really know what you're doing). Aurelia (as any other modern js framework) was made to be used with modern loading and bundling tools.
I do not use Node.js etc. so npm etc. does not work for me. Is there a
simpler way of using Aurelia (in AngularJS 1.x style including script
elements) or there is some other more complicated way.
I'm sorry to tell you this, but if you want to use a modern JS framework (Aurelia, Angular2, Vue.js), you will have to deal with node.js, npm, etc. All modern js frameworks have some building process that run under a node.js environment. It's possible to avoid it, but this would only make things harder.
There are simpler ways to use Aurelia, like the project you've mentioned in your question. However, It was mainly made for learning purposes. You can still use them in a real scenario but you will find a lot of difficulties since there will be no tool to help you.
NodeJS tools are there to help us! Give them a chance and you won't regret it. Trust me :)
If you have some strict companies rules that don't allow you to use Node, I think you should to talk to your leaders and try to workaround that.
#Fabio Luz,
please excuse me, this is not an answer, but a longer note to your answer - there might be a scenario for Aurelia modules in CDN...
I understand, that it is very good to have ability to bundle and do the tree shaking of the framework library for the "lonely" SPA architecture. But I am not sure and I wonder whether it would be better to have some different approach - e.g. having the certain Aurelia modules in a CDN. I wonder that in case of a possible decision e.g. to use Aurelia commonly as a platform for continuous development of customization for SharePoint Online /Office365 using the SharePoint Framework. I have tried to configure Aurelia as externals for the webpack in a spfx solution, but I was unsuccessful. I am also not so familiar with all the tooling, so I might have done some beginner's mistake :(. Pity, that the Aurelia cli and the spfx tooling versions are not in a harmony currently - the spfx has to use the gulp with webpack ver.3, though the aurelia works with newer webpack ver.4
Related
I want to use opensea-js in my html/js project, but their source is published on github and npm only.
https://github.com/ProjectOpenSea/opensea-js
How can I use it in a normal html? (not pages based on node.js)
I found something here
https://www.jsdelivr.com/package/npm/opensea-js
But it doesn't work after I put this code in my html.
<script src="https://cdn.jsdelivr.net/npm/#bthn/opensea-js#4.0.1/lib/index.min.js"></script>
I highly recommend using babel or webpack. There's a steep learning curve to either one, so you should get used to one of them while you're still learning, not when you've gotten into bad habits.
There are a number of advantages of babel/webpack over using CDNs. See this article (it also applies to babel): https://webpack.js.org/concepts/why-webpack/
I am currently working on to upgrade javascript libraries due to some vulnerability concern. The one I am stuck right now is JQuery-ui-1.10.1.custom.js. I need to upgrade it to Jquery-ui-1.12.0.js but I am not sure if the regular Jquery-UI-1.12 file could replace this custom file. This is an old project .NET project. I am not sure whats the difference between the regular and custom files. Any help is appreciated.
The only way to be sure that upgrading won't break your app is your tests. If you don't have a testing strategy, you'll need to adopt one. When your code is well covered, you'll be able to swap the jQuery libs and know right away if something is breaking.
Software Testing approaches
https://jqueryui.com/changelog/1.11.1/
https://jqueryui.com/changelog/1.11.2/
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.
How to organize Vue-JS project [files and directory]: Non Javascript way?
Coming from a non-javascript background, I found Vue.js very intuitive and easy to use. My earlier experience in Javascript is with JQuery and vanilla javascript on the browser.
I created an application using Vue , Vue-components and vue router. Everything works fine.
My problem is, I have ended up writing a lot of code in a single index.html file of my project. This file contains over 10 templates that I have created and attached to different component in my app. I want to know that is there a non-javascript way to organize these templates in seperate files.
I see that there are options using webpack and browserify to modularize the project. But coming from non javascript background, I don't find them intuitive. I don't want to go node - npm way because that has its own learning curve and moreover it downloads a dozen of files and dependencies in my project which I don't understand. I am old school and more comfortable downloading the files and including them in the webpages.
So probably, you understand where I am going to. I need a solution where I could put my templates as separate files and read those files in the different components.
What I have tried :
Declaring the templates inside my components. But writing all that html inside the component is not that clean. It also, makes my JS file too huge. I am better in putting all data in the index.html instead.
Storing template as smaller chunk "homepage.html","about.html" and in my components, using $.get / $.load to read different components in ready function of the component. This works but I still have to fire an additional ajax call for each component which is not efficient.
Please refrain from suggesting the obvious node-npm [webpack and browserify] way. I know thats what is supported by Vue but this needs a learning curve and complete setup. Answer to this question would actually help other developers who hesitate going the node-npm way.
Please shout back if you need more clarifications to the question.
The options you've mentioned are your only real ones... the HTML of the template needs to be available when it's needed, so you either have to have it within your html file off the bat, or load it using AJAX or an in-browser loader like RequireJS (and this extension that allows it to load HTML https://github.com/requirejs/text).
In-file templates make sense for very small projects. As your project grows, you'll need to start using the tools that are built for this. NPM rocks and every JS package that you'll ever need can be included in your project in seconds.
I highly encourage you to try the Vue CLI
It does use node, npm, webpack and downloads dozens of files. Which you've you've explicitly asked for not to use, so let me clarify:
The Vue CLI takes care of the complexity and configures webpack for you.
You don't even have to know it's using webpack.
It's very developer friendly (it even has a built-in gui) and lowers the barrier to entry compared configuring a webpack config.
I hope you'll also find it "intuitive and easy to use".
I have written an application using AngularJS 1.0.7. I would like to migrate to AngularJS 1.2. What is the migration path (what issues might I need to fix when migrating)?
The angular team has put together a very comprehensive 1.x to 2.0 migration guide here: http://docs.angularjs.org/guide/migration
Exceptions logged in the console have also been greatly improved. They now include a link to an error reference manual with a detailed explanation of the exception and how to correct it. You can find the error manual here: http://docs.angularjs.org/error
There is no official guide to migrate from 1.0.7 to 1.2 but the best thing I can find is the changelog through angularJS's versions: https://github.com/angular/angular.js/blob/master/CHANGELOG.md .
They notice the crucial changes that can break in the new version so you can look into that.
The biggest change you probably need to deal with is on routing: there is now a separate module to handle routing, just as angular-resource was already separate. You'll need to load the separate angular-route.js file and declare ngRoute as a dependency when you create your app. Until you do that, your app will likely be broken. But that was the only major obstacle I faced. (I've heard we should expect this trend to continue, as they break Angular down into smaller, more modular chunks, so people can take what they need, and skip what they don't.)
Beyond that, there are wholesale new features like the Animations module, a bunch of new directives, and some nice new docs. But I'm not yet aware of anything else you'll need to 'migrate', unless you had already implemented some of the new features on the 1.1.x branch. (FWIW, I've collected some additional detail on this stuff on my blog.)