Require.js to load all resources for an app, including Polymer

Question

I am building an app framework for a large, multi developer project. I am sold on the idea of using Require.js and Angular together to manage dependency and class loading. But now I want to use Polymer as well, because it's insanely cool.

How could I use require.js to load polymer elements libraries just the same as my js ones? I like the idea of hanging on to require as THE one true way to load all my apps resources. I see how nice it is to be able to bundle template,script and style into one logical .html file which represents a component, and I know that we can break those parts out into separate files, but as soon as I see any link rel="import" stuff inside I feel that is going into require.js's realm.

Ideas?

Answer 1

There's some tension between the two because both want to be the system of record for tracking dependencies. For example, if you do an http import of /components/core-ajax/core-ajax.html it contains an http import of ../polymer/polymer.html, ensuring that Polymer is loaded before running any of the scripts for core-ajax. Polymer also has a tool called vulcanize for compiling a set of web components into a single file to reduce the number of HTTP requests in production.

Sound familiar? require.js has an analogous mechanism for all of these pieces. It's also worth noting that I'm not aware of what's being done to unify all of this, and to make things more complicated there's the ES6 Modules proposal that's gathering steam.

My recommendation for the moment is to pick exactly one dependency tracker if possible. I'd suggest you use HTML imports if you're using web components as it's comparatively easier to convert a requirejs module into a simple web component than it is to go vice versa.

e.g. suppose you've got a script jquery.datatables.js that depends on jquery. Layout your files like:

• components
  • jquery.datatables
    • jquery.datatables.js
    • jquery.datatables.html
  • jquery
    • jquery.js
    • jquery.html

jquery.html would contain:

<script src='jquery.js'></script>

And in jquery.datatables.html you'd put:

<link rel='import' href='../jquery/jquery.html'>
<script src='jquery.datatables.js'></script>

HTML Imports takes care of doing de-duplication, so you could be confident that jquery.html would only be loaded once.