Bundle framework into single file #40

Closed
organic-scholar opened this Issue Feb 12, 2015 · 16 comments

Projects

None yet

6 participants

@organic-scholar

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

@EisenbergEffect
Member

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.

@jods4
Contributor
jods4 commented Jun 21, 2016 edited

@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.

@EisenbergEffect
Member

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?

@jods4
Contributor
jods4 commented Jun 21, 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.

@EisenbergEffect EisenbergEffect self-assigned this Jun 21, 2016
@EisenbergEffect
Member

@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
Member

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.

@jods4
Contributor
jods4 commented Jun 23, 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
Contributor
jods4 commented Jun 26, 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.

@EisenbergEffect
Member

@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
Member

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.

@jods4
Contributor
jods4 commented Jul 4, 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.

@kijanawoodard

+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.

@EisenbergEffect
Member
EisenbergEffect commented Jul 7, 2016 edited

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.

@NimaAra
NimaAra commented Aug 4, 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.

@EisenbergEffect
Member

Read the new Getting Started doc :)

@damianof

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment