Is anyone else finding it hard to locate an official documentation and/or a working example showing how to load modules?
Loading a module is core to web development, it should be easy.
You can't load es6 modules in a browser yet. The export and import keywords are not supported by any browser. Most uses use a transpiler to convert the modules to CommonJS which can be loaded. Or use a bundler to package them together.
Related
Now that angular can finally generate libraries a bit more comfortably in version 6, are the libraries generated compatible to be imported in older versions, just like any other angular library?
It depends on the library, as the new angular libraries probably function like any other upgraded library pack. If the libraries are included only in angular 6, then I would imagine that the libraries won't import into the older versioned app. If the library existed in angular 5 or older, then the library should import without any problem.
Other types of programming languages, like C#, Java, and Python, function this way, so angular would most likely work that same way, given its design with Typescript. Therefore, if the app returns a problem or error involving this, then you should upgrade the app to the newer version, and if the app is older than angular 5, upgrade the app one version at a time.
We have main big application and are going to create separate small applications (microservices) using different libraries (Angular, React etc.) and compile them into webcomponent to use them anywhere. The main application has some libraries (example underscore.js), some of our components use the same libraries (example lodash.js), in this scenario we see a lot of conflicts when using webcomponents inside main application. Do you have any ideas on how can we isolate webcomponent libraries and they can work in isolated mode. Also we have used ShadowDOM, but no luck.
There's no such isolated mode shipped with the Web Components technologies. All imported libraries will share the same namespace.
Shadow DOM is not about Javascript code isolation but only deals with DOM et CSS isolations.
If you want to resolve conflicts with imported 3rd-party libraries you could either:
Design your website to import 3rd-party import only once, in a global dependency script.
Use a module loader that will manage library loading for you, for example require.js, or the built-in feature ES6 module import feature, or even your own Vanilla module loader.
Isolate the different parts of you site with <iframe>elements (if possible, but you may loose some interaction features).
All these solutations have advantages and drawbacks. It depends on your needs.
I am working on several sites that have IE11 users. The sites are built using yii2 and make use of lots of ES6. Rather then re-writing everything down to ES5, is there a plugin for yii2 that will do the work? My first thought was babel but it doesn't seem to integrate into yii2.
Thanks
While working on a number of Aurelia applications we reached the point that we need to share code between these applications.
The code to be shared is not something we (actually our customer) would like to be open sourced. So we were thinking of creating private jspm packages so we can easily reuse our modules when needed. This idea is inspired on this blogpost
Jspm does support linking packages as well so that is something we would really like to use during development, as the code to be reused is not yet stable enough.
Workflow with linked jspm packages
So our intended workflow is to create different number of projects/modules with ES2016 code and create jspm packages from these projects. These packages will then be installed and linked in our applications.
Transpiling
As far as we know jspm packages need to be transpiled before you install it into your project. So we always need to transpile code if there is any change.
According to this systemjs/babel-plugin documentation there will be support for on the fly transpiling in version 0.17 (which is in beta at this point). Currently we're using jspm version 0.16.32 which does not support on the fly transpiling with babel 6.
Somehow this workflow feels over-engineered, so we consider on the fly transpiling in our applications, though we fear a performance penalty.
How would you approach sharing es2016 code between different Aurelia applications?
Is there anyway to achieve code reuse without using jspm packages?
I personally would publish the packages to an internal npm feed of some sort. Set up the internal feed to mirror the public npm feed, then set your .npmrc to point to the private feed. Then just
jspm install npm:my-private-package
I have elements built with Polymer which needs to run on multiple sites (a widget) which:
Don't have Polymer included (fine, I can include)
Polymer already included at a compatible version (brilliant, unlikely)
Polymer at an unknown version (too old or too new, tricky)
Is it possible to load Polymer in a namespace? e.g. myObj.Polymer or MyPolymerName
I have found polymer-js which will let me load Polymer as a module, but this isn't an official way. This still exports to the global scope
The solution for now is to rely on package management to resolve Polymer to a single compatible version for a project and its dependencies, and HTML Imports to de-duplicate loading of dependencies from multiple sources.
If you vend your elements as Bower packages, then a site can include them, with their dependencies and imports of Polymer, and if a compatible version of Polymer is available, use that one version across the whole project.
In the future version of Polymer, after ES6 modules and loaders are fully spec'ed, we will probably have a version of Polymer that's only exported via modules so that multiple versions can be scoped to their explicit imports and can safely coexist on a page.