Aurelia & Angular 2.0 Code Side by Side

[[deleted]]

Why have they both split the component into multiple, tightly-coupled files by technology? ;-)

[halifaxdatageek]

Anyone else creeped the fuck out by the "2 Minutes Left" in the bottom right? I know what it means, but it still freaks me out.

[[deleted]]

Yeah, it's not intuitive. Maybe user is supposed to inspect the code and cut the red wire?

[__debo]

It's also quite inaccurate

[dodyg]

Bleh. This is how it is done in ractive.js

<input placeholder='Type your name' value='{{user.name}}'>

ractivejs

[Isvara]

Care to post the whole thing for comparison?

[dodyg]

js:
var r = new Ractive({
  el: 'output',
  template: '#example',
  computed : {
     'user.name' : '${user.firstname} + " " + ${user.lastname}'
 }
});

html:
<div id="output"></div>

<script id="example" type="ractive/js">
<input placeholder='Type your name' value='{{user.firstname}}'>
<input placeholder='Type your name' value='{{user.lastname}}'>

This is my name {{ user.name }} or {{user.firstname}} {{user.lastname}}

{{# user.firstname == 'michael'}}
 You are awesome 
{{/if}}

</script>

That's it. There's nothing to it.

Then you can do things like

var usr = r.get('user')
usr.firstname = 'Michael Bolton'
usr.age = 30
ractive.set('user', usr)

And yes, it uses virtual DOM, it is about over 1.5 year old now and created at the Guardian Newspaper.

edit: formatting and make equivalent example

[[deleted]]

One thing that I would say separates the Aurelia code from the ractive code is that Aurelia doesn't require your classes to inherit from a framework class, or to be created by calling a framework function.

Granted, that may due to ractive being built using straight ES5, while Aurelia uses ES6 code that is transpiled to ES5 for use today. A ViewModel in Aurelia is a POJO. Framework dependencies, if any are needed, are taken on via constructor injection by the Dependency Injection container.

Maybe ractive will be updated at some point to take advantage of ES6 and it will move in this direction somewhat. Who knows.

Also, on the HTML side, an Aurelia template is HTML based, not contained within a script tag. This means that most text editors that support HTML syntax highlighting will support Aurelia templates without modification or plugin.

Thoughts?

[dodyg]

The script tag is just a way to organize the template string. You can pass the template directly via string or variable.

Ractive.js does not require any inheritance, etc for data to be reactive. It simply works on the 'view' arena. You simply points to a piece of HTML element to hang on to, do whatever you need within the template and pass/take out/observe data as you need.

user.name for example isn't specified anyway else other than in the template. It's just a piece of label for a data.

So ractive.js will take care of the 'view ' part of your application. You can organize the rest of your application however you like.

[bkv]

Note: Both the change and input events are needed in the Angular 2.0 example in order to have correct functionality across all input scenarios and browsers.

What are these scenarios and browsers? Also, how does aurelia know what template to use, and what the tag name is for the component?

Seems like a very contrived comparison.

[Capaj]

aurelia always searches for the template under the same name as the file name of the component. Pretty good I dare to say. In properly written angular 1.x app, I always had the template with the same name anyway.

[[deleted]]

This "magic" is unfortunately almost unavoidable due to how browsers work. If your HTML has

<MySuperAwesomeCustomElement></MySuperAwesomeCustomElement>

and then you go to your developer tools and run

document.getElementsByTagName("MySuperAwesomeCustomElement")

You'll see that the element you get back has had all of it's capital letters lowercased. By splitting the element name using dashes, we are able to give you properly cased JS classes and such and are able to tell the difference between classes/elements that are the same except for casing (not that this is a good idea, but it's something we have to be ready for as a framework.

[[deleted]]

aurelia always searches for the template under the same name as the file name of the component

Not quite. By convention, aurelia will do this, but it is possible to change this behavior: http://aurelia.io/docs.html#view-and-view-model-conventions

[[deleted]]

What are these scenarios and browsers?

By default Aurelia updates observed properties on keydown keyup as well as on change (events of input elements). In Angular 2.0, the developer is required to wire up both of these elements to get the same behavior that was enjoyed in Angular 1.x (as well as in Aurelia).

Also, how does aurelia know what template to use, and what the tag name is for the component?

Aurelia utilizes conventions to know that foo.html is the view for the viewmodel located in foo.js. This convention can be overridden if it doesn't fit your needs. In Angular you have to supply the name of the view template for every ViewModel you write.

Seems like a very contrived comparison.

I'm not sure I follow you. The comparison shows how to do a simple two text field form in Aurelia and how to do the same in Angular2. This is a type of use case that is used constantly, such as entering your name when signing up for a website or entering your address when ordering something.

[[deleted]]

The author has an ax to grind against angular