I'm working on a JS library that relies heavily on D3 (and to some extent, lodash). I've modularized it, have bower_components for the external library dependencies and node and gulp for the build/concatenation/uglifying process. So I'm covered from the development standpoint (no need for require.js).
However, in order to let other people use my library, they need to have both d3 and loadash loaded. I don't want to bloat their loading but at the same time I want to make things easy for everyone. Should I just concatenate my dependencies along with my .min.js and have that be a release? What are the best practices?
BTW, my current versions of lodash and d3 clock in at 52k and 148k respectively. Thanks!
I seems interesting to embed dependencies in your own library to offer customers an easier way to integrate your component, but think about that:
They may use another component requiring a more up-to-date D3 (you embedded)
For performance reason at load time, your customer may want to use D3 (or other embedded libraries) using the official CDN (better access and downloading time)
You will have to carry about updating your component each time one of your dependency is fixed.
For other more reason you could find by yourself, it is not a good practice to embed dependencies inside your component unless you plan to manage a full support of it.
Related
I have new challange to solve. We would like to create many application with same JS code and base on parameter load different theme and maybe do some extra things for specified value. This I guess is not a problem by adding a parameter at build process and just check it while render.
Question is how to deal with this on native code. I was thinking about copy&paste ios/andoroid code and change all required parameters, name etc, but it sounds like not best approach. Do anyone have idea how to deal with this problem ?
Thanks in advance for help.
I’d suggest you to create a component library that exports shared components for reusability.
For theming you could use the theming library that distributes a theme object in the context including subscriptions to changes. https://www.npmjs.com/package/theming
Libraries like styled-components and glamorous-native already have this built into them.
One thing to note is that you shouldn’t forget to use peerDependencies while pulling all reused dependencies into devDependencies so that you won’t end up with duplicated packages in any case.
I don't want to get into the why / why nots of Node, jspm, Gulp etc. (they have my full buy-in) but to cut a long (boring) story short, I absolutely cannot use those lovely tools at the location i am currently at.
I want to use Aurelia. I just want to drop the built minified javascript library into my web application and start using it.
Where is such a package?
Many thanks,
R.
We don't have an official one yet, but we are looking into it. There may be something unofficial floating around. Aurelia does require a module loader. Even though you can't use node-related tools, can we assume that you can use either system.js or require.js as a loader? (preferably system.js)
Not possible for this time because aureliajs is only starting period and not complete for development.
I am working on an javascript project which will be provided as a third-library.
And there are a lot of modules and templates which is a waste of time and performance if loading them all at once. So I think use a module loader like requirejs maybe a good idea.
However since the project will be use by other people, so how about the client use requirejs at the same time?
Since I have to config the dependencies for my own library, while the client need to config the dependencies for his project. I am afraid this will cause some conflict.
Any alternatives?
And there are a lot of modules and templates which is a waste of time and performance if loading them all at once.
It sounds like you are opting to not use r.js to optimize your library. This is a choice you can make. However, you will have to document your library so that people using it can produce a RequireJS configuration that will take care of the needs of their own code and the needs of your library. You should provide an example of RequireJS configuration that satisfies your library and people wanting to use it can integrate that configuration with their own.
If you were to optimize your library with r.js, then you could use Almond to load your library as a single unit, and hide the fact that it is a collection of AMD modules. However, this entails "loading them all at once", which you do not want.
I'm building a library, and plan to use parts (could be entire files or arbitrary lines) of other libraries in my code. Also, I would like to have fixes on the other library reflect onto my library as well.
I could just add the entire library (script tag, AMD, etc.) and use it. But I don't want to use the entire bulk of another library for my very small library. One of these libraries is Modernizr, but I'll only be using at most a dozen checks only.
I could just copy-paste the implementation from one library to mine. However, when the library I need updates, this would mean copy-paste all over again.
I read about GIT and submodules, where a subfolder could contain a sub-project. This sounds promising, where a build script could extract parts of the other library and put it into my code. However, the library could have different code structure than mine which would lead to manual editing, which defeats the purpose of some steps.
I haven't gone that deep into automation but I have had basic experience with makefiles. How would one go about in doing such integration?
It's not generally a good idea to use parts of libraries that didn't pre-package those parts for you. The correct way to do it would depend on each library and how it is meant to be made/compiled. There may also be license considerations, which will vary depending on the license of the library, some would require maintaining the license for the part of the library that you use.
[Edit]
Would it be possible to include the entire other libraries, and then use some sort of minification on your library to keep the size down?
I was watching the Pluralsight course on TypeScript and they were talking about using requirejs to load libraries from 3rd parties (jQuery) with AMD. However, the way shown looked like it ALWAYS pulled in the library with a shim:{} I'm curious if there is a way to pull this in only if it's not present?
Or does shim take this into account?
If you are using requirejs and ask for the same module multiple times, it is clever enough to give you the same one.
It does this using a cache of modules.
If the path to the module is different, it will load it a second time (i.e. the same resource with different relative paths because it is being consumed from different levels of sub-folders, for example).