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.
Related
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.
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.
We use Polymer to build a local app. Each Polymer element has a .html and .css (compiled from .scss) file.
Does the use of vulcanize (it concatenates the JS and Polymer elements into one file) provide an advantage? Does the use of some minify tool after vulcanize provide any advantage?
Once again, it is a local (only) app so I mostly care about performance and speed.
From Concatenating Web Components With Vulcanize.
The short answer is “don’t guess it, test it”. There is always a
trade-off when it comes to concatenation but tools like WebPageTest
can be useful for determining what your true bottlenecks are.
You can use chrome browser developer tools (acess via menu) and compare application load speed for plain, vulcanized, minified versions or combinations of them.
Then decide which bests suits your needs.
the only IDE I've used for many years was Flash Builder. Sadly the 4.7 version is in a poor state, so, I started looking at other IDE's lately.
I'm trying IDEA, but I don't know how to add a library to my project.
In FB it was simple, I go to the compiler settings and I just add a folder or swc. But here, it seems like there are 2 options, one under the "Libraries" tab and other is creating a new module, however, this new module requires a main app, SDK, and a lot of other stuff that doesn't make any sense to have in a library.
So, what is the equivalent of adding a library path here?.
Thanks.
"Libraries" is the correct way to do it. There are two kinds of libraries: libraries and global libraries. Global libraries can configured once and used in every project. Libraries are configured for each project. See http://www.jetbrains.com/idea/webhelp/configuring-project-and-global-libraries.html