Framework: Bundle framework into single file

Created on 12 Feb 2015 · 17Comments · Source: aurelia/framework

Do you think is it better to bundle all framework in to a single file with all the dependencies.

enhancement

Source

organic-scholar

Most helpful comment

@EisenbergEffect I wish you would revisit that, at least for the short term.
There is _one thing_ that is complicated and annoying as hell with Aurelia: getting started. I have started multiple projects with Aurelia and every single time I damn all those JS dependencies and build tools...

I really wish that when I'm experimenting with toy projects, I could just take aurelia.min.js, drop it in my scripts folder and get started. _Without any build/bundling/dependency stuff at all_. That would be awesome.

I know in the long term there is ES6 Modules and HTTP/2. I know that for prod I am certainly going to bundle and transpile and minify all my stuff... But when you want a quick new project to try out an idea, it would be _so good_. I'm sure newcomers that want to try out Aurelia first-hand would love it, too.

jods4 on 22 Jun 2016

👍7

All 17 comments

Not in a world with ES6 and HTTP/2. We'll have a bundler for the short term, but long term it won't be necessary at all.

EisenbergEffect on 12 Feb 2015

jods4 on 22 Jun 2016

👍7

It's possible to do this, but we would have to pre-concat it with a module loader (probably require.js) and then all loading would be dynamic. Is that something you can live with?

EisenbergEffect on 22 Jun 2016

Yes, pretty much. You don't have even to include a module loader. The following skeleton would be awesome if it just worked:

<html>
<head>
  <script src='libs/system.js'></script>
  <!-- Assuming a bundled aurelia.min.js exists, with all the core dependencies. 
       Optional modules would be pulled in dynamically, e.g. aurelia-dialog. -->
  <script src='libs/aurelia.min.js'></script>
</head>
<body aurelia-app>
  <script>
    System.config({
      /* whatever config I need to organize my code */
      defaultJSExtensions: true,
      baseURL: '/app/'
    });   
    System.import("aurelia-bootstrapper");
  </script>
</body>
</html>

Then everything is loaded dynamically from my app folder for code and libs folder for 3rd party libs. That would be a great way to get an Aurelia app running in 2 minutes.

jods4 on 22 Jun 2016

@jods4 This is a prototype that we will probably use as our new beginner kit. We can put the aurelia.js up on a CDN. What do you think?

beginner-kit.zip

EisenbergEffect on 23 Jun 2016

We can split this into aurelia.js (core modules) aurelia.routing.js (all router related modules) and then there's always the other individual modules. Right now the package above includes the core and routing.

EisenbergEffect on 23 Jun 2016

@EisenbergEffect I'll have a closer look and play with it this week-end.
I had a quick glance at the zip contents and if it works like that out of the box, it's an _awesome_ way to get started. 🎉

jods4 on 23 Jun 2016

I tried this in a sandbox project today. The aurelia.js library works great and it's really easy now to get a working project in 5 minutes, starting from scratch!

I encountered one issue in my project, not sure how it works in the starter kit: defaultJSExtensions: true seems to add a .js during normalization and _before_ looking up pre-loaded modules. So when doing System.import("aurelia-bootstrapper") it looks for aurelia-bootstrapper.js which is of course not found.

I fixed it by putting my own code in a folder app/ and using the configuration:

System.config({
  packages: {
    app: {
      defaultJSExtensions: true
    }
  }
});

so that code outside app/ is not affected by the automatic .js.
There are other possible organizations, one being to append .js when referencing your modules!

I think this makes it a lot easier for newcomers to get started! You can run aurelia apps in 5 minutes without a build at all -- or with a minimal build, say compile TS to JS on save.
And even for "real" projects, this is a good starting point. Aurelia uses packages (like aurelia-templating-resources), which are tripping a few bundlers. This pre-made bundle makes building easier and faster.

jods4 on 27 Jun 2016

@jods4 Take a look at this. I've updated it to now support both TypeScript and Babel, by simply switching the config file from config-esnext to config-typescript. I've added package config. Just to make sure it all seems to work, I dropped a simple Todo app source in there as an example to test out module resolution, package config and both transpilers.

starter-kit.zip

If this looks good, we'll probably re-work our getting started guide to use this as I think it will provide a more gentle introduction. We can then move on to the CLI after the basics are covered. We can make the concatted aurelia files available as well. Here's what we are thinking we will do:

aurelia-core.js - Contains the core, essential modules.
aurelia-routing.js - Contains the additional modules needed for adding a router (history, history-browser, router, templating-router).
aurelia-*.js - Add various other individual modules for i18n, dialog, etc.

We could also do aurelia-core.min.js and put all these files on a CDN. What do you think?

EisenbergEffect on 28 Jun 2016

We now have this working in the aurelia repo. We'll be looking to adding a standard set of files on CDN soon and we'll have a new getting started guide based on a simple, script-tag oriented setup.

EisenbergEffect on 4 Jul 2016

Great, thanks @EisenbergEffect!

Regarding the available files, I think you probably should not make too many pre-built packages.
For fined-grained control one can use the current way.

If I were you, I would distribute only two pre-built packages:

aurelia.js everything that comes with aurelia-bootstrapper today.
aurelia-core.js same as previous, minus the router, history, templating-router, & co. Idea here is that people can use this to enhance existing web pages, without opting in to full client-side SPA. This was a style of applications that I used to do a lot with Knockout and it worked great. It is also a good propgressive migration path (when all your pages are enhanced, switch to client-side routing).

Of course I would kept all the optional modules separated, as today (http clients, validation, dialog, etc.).

I personnally don't use CDN but that's probably a good idea. Especially for gist, jsfiddle and co.

jods4 on 4 Jul 2016

+1 to the aurelia-core.js idea.

Would make it dead simple to try out on a single page.
I found this looking for way to use aurelia instead of knockout/jquery to "liven up" one page.

kijanawoodard on 7 Jul 2016

👍1

It's already done :) We don't have it on a CDN but if you look at the aurelia repo, we are using that to hose the build setup for producing aurelia-core and aurelia-routing. There's also a simple starter kit for esnext and ts there too. We'll be packaging all this up soon and updating the docs to reflect these new options.

EisenbergEffect on 7 Jul 2016

This is really awesome and I am sure my colleagues now have no excuse to get started with Aurelia!

Have you managed to package it up and put together the doc for this?

Thanks.

NimaAra on 4 Aug 2016

Read the new Getting Started doc :)

EisenbergEffect on 4 Aug 2016

Glad to hear about this direction. Having a single file is what will make Aurelia succeed eventually short-term, since competing with frameworks like Angular, Amber, etc that most of the time come in a single file.

damianof on 22 Aug 2016

The Getting Started package is being updated? I can see that the aurelia repo was updated 21 day ago, but it seems that aurelia-core.js is different from the one we can download on the Getting Started page.

P. S. maybe a good suggestion would be to include the version as comments in the beginning of the file?