Rapid Prototype Advice


#1

I am finding it difficult to prototype with Aurelia using online tools like Codepen and JSFiddle. I have been looking for low effort solutions that will allow me to simply include Aurelia’s binding engine and apply a viewmodel to a simple view.

This is relatively easy to achieve with every other framework so I am hoping that there is an easy way to do this with Aurelia:

Any advice would be greatly appreciated!


Getting Aurelia working in CodePen
#2

Probably the easiest way to do this at the moment is using this GistRun created by @jdanyow. https://gist.run/?id=1ae985e6c943885496e8&sha=c12282e3d8b25301aaf7668a32d2f9197f9204fc.

It comes with a simple app view and view-model that allows you to play with Aurelia’s binding and so on. I’ve not tried to get this working with Codepen, but I imagine you should be able to simply copy the contents of the index.html file to get started.


#3

The only problem is that Aurelia’s libraries are not available in global module format so a module loader needs to be included and configured.

Once that is set up the API is similar to other frameworks: here is an example following Vue’s example.


#4

I wrote sample code with codepen with reference to the benchmark code of js perfs which is used in the example showing the high performance of aurelia.

important point

  • use loader is requirejs.
  • I am importing modules related to all aurelia from cloudflare cdn.
  • aurelia cli are also used, it requires a text module
  • If you type in the text box and press the hello button, headline changes.
  • Press the world button to add a random number from 1 to 100 in the downward direction.
  • Press the remove button to delete the values added downward one by one.

#5

YAY!!! This is exactly what I needed!


#6

Thanks. This is exactly what I was looking for today. I needed a single html file with that I could send around via email, but I could use already some basic data binding.

And believe me or not, even though I am an aurelia fan, I learned about vuejs just because of this. :slight_smile:


#7

Hello all, I found this thread after posting this other one. I can’t seem to get that example to work on Codepen. Any ideas?


#8

If you want to use Typescript then this can be useful.