New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bundle framework into single file #40

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

Comments

Projects
None yet
7 participants
@organic-scholar

organic-scholar commented Feb 12, 2015

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

@EisenbergEffect

This comment has been minimized.

Show comment
Hide comment
@EisenbergEffect

EisenbergEffect Feb 12, 2015

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.

Member

EisenbergEffect commented Feb 12, 2015

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

This comment has been minimized.

Show comment
Hide comment
@jods4

jods4 Jun 21, 2016

Contributor

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

Contributor

jods4 commented Jun 21, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@EisenbergEffect

EisenbergEffect Jun 21, 2016

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?

Member

EisenbergEffect commented Jun 21, 2016

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

This comment has been minimized.

Show comment
Hide comment
@jods4

jods4 Jun 21, 2016

Contributor

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.

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

This comment has been minimized.

Show comment
Hide comment
@EisenbergEffect

EisenbergEffect Jun 23, 2016

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

Member

EisenbergEffect commented Jun 23, 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

This comment has been minimized.

Show comment
Hide comment
@EisenbergEffect

EisenbergEffect Jun 23, 2016

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.

Member

EisenbergEffect commented Jun 23, 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.

@jods4

This comment has been minimized.

Show comment
Hide comment
@jods4

jods4 Jun 23, 2016

Contributor

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

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

This comment has been minimized.

Show comment
Hide comment
@jods4

jods4 Jun 26, 2016

Contributor

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.

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

This comment has been minimized.

Show comment
Hide comment
@EisenbergEffect

EisenbergEffect Jun 28, 2016

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?

Member

EisenbergEffect commented Jun 28, 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

This comment has been minimized.

Show comment
Hide comment
@EisenbergEffect

EisenbergEffect Jul 4, 2016

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.

Member

EisenbergEffect commented Jul 4, 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.

@jods4

This comment has been minimized.

Show comment
Hide comment
@jods4

jods4 Jul 4, 2016

Contributor

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.

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

This comment has been minimized.

Show comment
Hide comment
@kijanawoodard

kijanawoodard Jul 7, 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 commented Jul 7, 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.

@EisenbergEffect

This comment has been minimized.

Show comment
Hide comment
@EisenbergEffect

EisenbergEffect Jul 7, 2016

Member

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.

Member

EisenbergEffect commented Jul 7, 2016

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

This comment has been minimized.

Show comment
Hide comment
@NimaAra

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

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

This comment has been minimized.

Show comment
Hide comment
@EisenbergEffect

EisenbergEffect Aug 4, 2016

Member

Read the new Getting Started doc :)

Member

EisenbergEffect commented Aug 4, 2016

Read the new Getting Started doc :)

@damianof

This comment has been minimized.

Show comment
Hide comment
@damianof

damianof Aug 22, 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 commented Aug 22, 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.

@cleytonb

This comment has been minimized.

Show comment
Hide comment
@cleytonb

cleytonb Apr 28, 2017

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?

cleytonb commented Apr 28, 2017

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?

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