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

chore(bundle): UMD bundle for aurelia #11

Merged
merged 4 commits into from Oct 16, 2018

Conversation

Projects
None yet
5 participants
@bigopon
Copy link
Member

bigopon commented Oct 13, 2018

  • UMD bundle so aurelia can be used in traditional way without too much hassle

@EisenbergEffect I'm not sure if I should include a default loader (say esm-loader) or let folk decide what loader they want to use and create instance of Aurelia with it. like new Aurelia(new RequireJsLoader())

Some number:

  • UMD bundle size: 557KB (without router ~= 464KB)
  • minified: 254KB (without router ~= 218KB)
  • gzip: 68KB (without router ~= 57KB)

index.html umd way:

<body>
  <script src='./aurelia-framework.bundle.min.js'></script>
  <script>
    const aurelia = new au.Aurelia(new EsmLoader())
    aurelia
      .use
        .standardConfiguration()
        .developmentLogging();
    aurelia.start().then(() => aurelia
      .setRoot(
        class App {
          static get $view() {
            return '<template>${message}</template>'
          }

          constructor() {
            this.message = 'Hello world';
          }
        },
        document.body
    ));
  </script>
</body>

We may want also provide a esm bundle, so folk can write code in following way:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GistRun</title>
</head>
<body>Loading...</body>
<script type="module">
  import { Aurelia } from './aurelia.esm.js';
  const app = new Aurelia(new EsmLoader());
  app.use.standardConfiguration();
  app.start().then(() => app.setRoot(
    class ShellViewModel {
      static get $view() { return '<template>Hello, world!</template>' };
    },
    document.body
  ));
</script>
</html>

@bigopon bigopon force-pushed the bigopon:master branch 3 times, most recently from e817f43 to d41ec83 Oct 13, 2018

@EisenbergEffect

This comment has been minimized.

Copy link
Member

EisenbergEffect commented Oct 13, 2018

Nice work @bigopon Before I merge, I just want to check something with @jdanyow Is this going to affect the PR we just sent to fix up our dbmoster benchmark?

@jdanyow

This comment has been minimized.

Copy link
Member

jdanyow commented Oct 13, 2018

@EisenbergEffect not sure, I can check next week (in Shanghai for work without my personal laptop). Here's the repo if anyone can get to this before me:
https://github.com/mathieuancelin/js-repaint-perfs

I just found out there's a more massive issue coming... rawgit is being shut down.

When this happens, any gist created by forking the aurelia gist prior to this April 11, 2016 change will stop working. The dbmonster demo is also using rawgit.

@EisenbergEffect

This comment has been minimized.

Copy link
Member

EisenbergEffect commented Oct 13, 2018

@bigopon bigopon force-pushed the bigopon:master branch from d41ec83 to 926c781 Oct 13, 2018

@bigopon

This comment has been minimized.

Copy link
Member

bigopon commented Oct 13, 2018

@EisenbergEffect @jdanyow I've adjusted it a bit. Now it comes with following combinations:

ESM UMD
core 446KB
minified: 244KB
min + gz: 60.1KB
476KB
minified: 218KB
min + gz: 57KB
core + router 523KB
minified: 285KB
min + gz: 71.5KB
557KB
minified: 254KB
min + gz: 67.7KB

@bigopon bigopon force-pushed the bigopon:master branch from 926c781 to ac258f9 Oct 13, 2018

@bigopon

This comment has been minimized.

Copy link
Member

bigopon commented Oct 14, 2018

@jdanyow Why won't the forks work? It's quite an issue as a lot of our PR examples, bug reports won't be easily playable.

@jdanyow

This comment has been minimized.

Copy link
Member

jdanyow commented Oct 15, 2018

@bigopon I think most forks will work because they don't use rawgit.

Forks of the aurelia gist prior to this April 11, 2016 change will stop working because rawgit is used in the gist.

@bigopon

This comment has been minimized.

Copy link
Member

bigopon commented Oct 15, 2018

I've added esm loader https://github.com/bigopon/aurelia-loader-esm, and some example how to use it. This is example index.html:

<body>
  <script src='./aurelia_router.umd.min.js'></script>
  <script>
    const aurelia = new au.Aurelia()
    aurelia
      .use
        .standardConfiguration()
        .developmentLogging();
    aurelia.start().then(() => aurelia.setRoot('/app.js', document.body));
  </script>
</body>

With the following folder structure:

📂dist
├ 📂components
│  ├ foo.js
│  └ foo.html
├ 📂routes
│  ├ page.js
│  └ page.html
├ app.js
├ app.html
├ index.html
└ aurelia_router.umd.min.js
    

Notice app root /app.js or the router config, { route: '', moduleId: '/routes/home.js' }, we can go for full path to JS file. html template is automatically loaded accordingly. Everything feels very natural and standard compliant.

@EisenbergEffect @jdanyow

@Vheissu

This comment has been minimized.

Copy link
Member

Vheissu commented Oct 15, 2018

@bigopon Thank you Santa.

@PWKad

This comment has been minimized.

Copy link

PWKad commented Oct 15, 2018

@jdanyow FWIW they have a fast change available from rawgit to jsdelivr -

https://www.jsdelivr.com/rawgit

@EisenbergEffect EisenbergEffect merged commit e2ffd50 into aurelia:master Oct 16, 2018

2 checks passed

WIP ready for review
Details
license/cla Contributor License Agreement is signed.
Details
@EisenbergEffect

This comment has been minimized.

Copy link
Member

EisenbergEffect commented Oct 16, 2018

@bigopon I've merged this PR, but I think there's some follow-up we may want to do:

  • We should get the ESM loader stuff into an official repo. Is it small enough to put in loader-default or should we spin up a new repo at loader-esm?
  • Can you look into us getting these builds on a CDN?
  • Can you take a look at the PR @jdanyow sent to DBMonster? mathieuancelin/js-repaint-perfs#133 It should continue to work but it would be great if we can get that updated to use the new builds via CDN.
  • Let's get an official CodeSandbox.io sandbox setup so that it can be used for our site tutorials. Once we have that, I can start incorporating it into the site's homepage and working on the new tutorials. We can also reach back out to CodeSandbox to get Aurelia in their official list. They expressed via Twitter that they'd be interested in getting it into the next round.
@bigopon

This comment has been minimized.

Copy link
Member

bigopon commented Oct 16, 2018

@EisenbergEffect Can you create a repo for loader-esm and give me push right? I'll handle it and ping you when it's complete. About cdn, I'll have a look, never done that before. I'm also looking at codesandbox integration.

@EisenbergEffect

This comment has been minimized.

Copy link
Member

EisenbergEffect commented Oct 16, 2018

Ok, repo is ready for you: https://github.com/aurelia/loader-esm
Keep me posted on the sandbox and cdn tasks. Awesome work so far! This will be huge for the community.

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