Aurelia Script - Isn't it supposed to be dead simple?

[JordanMarr]

I thought this was supposed to be “add a js script ref to your index.html and then start creating views and viewmodels”, but when I went to the Aurelia Script github, I see “NPM Install” blah blah (eyes glazing over).

Don’t get me wrong, I have done multiple projects for clients using Aurelia + Typescript, but wasn’t the idea of Aurelia Script to literally drop in a script ref and then rock? I thought the whole point was to NOT have to NPM install anything.

I have a legacy project, so I don’t want to add a bunch of complexity to it by adding in all that mess (meaning I don’t want to install an entire project structure in my pre-existing legacy project).
What I was looking for was something like Durandal… Knockout… Vue…

Am I missing something?

[bigopon]

May i know where you saw the instruction of npm install? There shouldnt be any. It is indeed what you said: add a script tag and go.

For example: online playground link of ui virtualization uses the script tag: https://github.com/aurelia/ui-virtualization

If you are using auscript on a legacy project, theres going to be a distribution that gives you easier time with es5, if all you care about is templating and binding either via enhance or static resources registration

[huochunpeng]

He was talking about the readme on github repo.

[bigopon]

I have created a PR based on the feedback here, it’s at https://github.com/aurelia/script/pull/27

Thanks @JordanMarr and @huochunpeng

[JordanMarr]

I searched for “aurelia script”, landed on the aurelia/script github page and saw “NPM INSTALL” immediately. Being one Guinness in, it violated my expectations of the most simple instructions possible (since simple is supposed to be the point here). So I guess you could say it failed the “one Guinness test”.

My initial thought was, “maybe the NPM INSTALL thing is targeted at contributors, and is not required for potential users”. So I went to the first linked examples on codesandbox, copied and pasted the three files into my legacy asp.net mvc code base, and tried it out. Unfortunately, it didn’t work the first time because I did not specify the root as root: '/myvirtualdir/app.js'.

This morning I was able to apply the tiny bit of critical thought needed to solve the problem. I must say that this is awesome that this works as a drop-in script (esp. for my legacy project)!

I think I was expecting to see the most simple example (the first linked example) printed directly on the readme.md as three code blocks under a “Quick Start Example” header (or something like that). Having to click to another page and grok the format of codesandbox, as simple as it may be, was still an extra click into the world wide web.

It should also include a note instructing the user to make sure their “root” is setup correctly. Ex: root: '/myvirtualdir/app.js' (in case you are using IIS locally instead of some lightweight http listener).
The codesandbox examples could still be shown as links below the most simple example.

So to summarize, I tried this at the end of the day, and that definitely impacted the experience, but I’m happy to see that it was just a very small bump in the road.

[JordanMarr]

If you are using auscript on a legacy project, theres going to be a distribution that gives you easier time with es5, if all you care about is templating and binding either via enhance or static resources registration

That sounds awesome! Is this a work-in-progress?

[bigopon]

Its already merged. Just waiting for @EisenbergEffect to release it. You can check the 2nd latest PR in the script repo.

About your case, i would be so nice if you could help adding some more text to the readme to help future devs.

[rkever]

I’ve read through a few posts in regards to using aurelia script and I have no issues running it with the popular browsers. I also understand the dependency on Dynamic Injection requirement that IE 11 can’t handle. From those posts I’ve read it seems there are ways to run aurelia without transpiling that will work in IE11. We use aurelia extensively on our suite of web apps but we’re wanting to also use it (mainly for our large aurelia plugin (components, services, etc) within an existing 3rd party platform we use where we build out single views that run inside the aforementioned platform. They run in an iframe (I know…yuck) to securely run views along side the platforms views which allows us to “customize” workflows and add/improve functionality. So it runs a single html page and I’m looking for a way to easily drop in one (or a few) js files that will allow us to utilize aurelia’s binding and templating. It has to support IE11 and devs would write in ES5. Is there any examples out there of what scripts to include (including any required polyfills) and sample code on initializing the app and using a plugin and it’s component? I’ve tried aurelia script and just kept running into walls. Thanks!

[bigopon]

I will point you to a repo that use es5, au script running on ie11, no transpilation, dynamic/lazy loading with requirejs, an a sorry for the walls.
Would you like to help after that with a bit more doc in a PR?

[rkever]

Thanks @bigopon, look forward to the link. Yes I would like to contribute if I can. I’ll look into putting something together after I get this one going.

[bigopon]

Here is the basic of the basic:

1. Aurelia script in IE11, es5, no loader, with server-side rendered html. You don’t even need a http server to have it working. In my next example, I will wire a loader, based on requirejs/systemjs to make lazy loading work (will require a web server)
   
   

Code

app.html

<head>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=Promise"></script>
  
  <script src='https://unpkg.com/aurelia-script@1.5.2/dist/aurelia_no_loader.es5.umd.min.js'></script>
</head>

<body>
  <template id="app">
    <input value.bind="message">
    <div>
      
      ${message}
    </div>
  </template>

  <script src="./index.js"></script>
</body>

index.js:

function startApp() {
  var aurelia = new au.Aurelia();
  aurelia
    .use
    .standardConfiguration()
    .developmentLogging();

  return aurelia
    .start()
    .then(function() {
      return aurelia.setRoot(App, document.body);
    });
}

function App() {
  this.message = 'Hello world';
}
App.prototype.activate = function() {
  return Promise.resolve(this);
}

App.$view = au.FEATURE.ensureHTMLTemplateElement(document.querySelector('#app'));

startApp();

[Malexion]

Is that activate lifecycle method required or just an example?

[bigopon]

Its an example. Added to have more es5 feeling

[bigopon]

As promised, https://github.com/bigopon/aurelia-script-ie11

Featured:

• Aurelia with script tag
• no compilation step
• no node_modules
• no webpack
• dynamic/lazy loading
• requirejs
• all Aurelia goodies
• ie11

online demo here
https://au-script-test-vicmfpdmwa.now.sh/

If you want to avoid loading scripts dynamically, via requirejs, you can use static view (example in welcome.js):

function App() {

}

App.$view = '<template>My app</template>'

If your view has some dependencies:

App.$view = {
  dependencies: [MyElement],
  template: '<template>My app</template>'
}

[EisenbergEffect]

@bigopon I think we need to aggregate all of this into an official document for the site. If you take what you’ve already written and merge it with some ideas here…shouldn’t be too much work. Do you think you would have time in the next couple of weeks?

[bigopon]

@EisenbergEffect I would love to have these documented. Though let’s invite community member @rkever to help us with this first. Could you please @rkever help with some awesome doc?

[CuddleBunny]

This is beautiful. Few other frameworks can do this <3

[rkever]

@bigopon & @EisenbergEffect I will definitely help out with docs for this. Although this is not an ideal situation, I’m sure there are other enterprise companies with similar requirements and feel this could really be helpful until we can rid ourselves of IE. I’ve been able to run it successfully and use the template engine but running into issues with trying to figure out the DI for the views after the viewmodel loads. It’s probably just my lack of understanding how to make it work without the ES6+ methods of DI and not knowing the correct ES5 methods for loading views. What I’m trying to do is build out some components (possibly in a plugin) that is included in “single script” solution I’m making where a dev can just drop in a script that has all the dependencies to run a single view and build out some basic UI using our customized and brand styled components. Most of the projects consuming this are single views that will contain mostly form type elements (grids, inputs, lists, etc). They are running inside a secured container (currently an iframe) inside a large web solution. Often we need to add functionality or “redo” existing functionality that’s lacking and the app solution allows for “custom pages” which run a single iframed page. Hope that all makes sense.

[rkever]

I’m also planning on using requirejs for at least some basic DI and is common enough I feel other non-frontend devs can pick that up well enough.

[bigopon]

As you can see from the example, all the code are plain old JavaScript code, and all exports from Aurelia can be retrieve from global namespace au, so there shouldn’t be anything blocking you from providing a seamless DEV experience for IE11.

Example would be:

import { bindable } from 'aurelia-framework';

export class MyEl {
  @bindable
  name
}

Will become:

var bindable = au.bindable;

function MyEl() {...}

bindable({ name: 'name' })(MyEl);

Or using static convention

function MyEl() {...}
MyEl.$resource = {
  type: 'element',
  bindables: ['name']
}