 Today, I'll be speaking about Angular 2.0 versus Aurelia, just two frameworks out of the community. Let me first introduce myself a little bit. I've been working for Zibia for three years now. I have a background in internet development. I like all things web development. So before joining Zibia, I wrote two books, one on Google App Engine, one on jQuery. Back in the days, the jQuery was still a cool framework. Since joining Zibia, I've been doing a lot around continuous delivery and DevOps, and that's yet another book. Four months ago, I moved to India. I joined Zibia in India as a CTO. And as a CTO, I'm concerned where the market is going. A lot of our customers are heavily invested in Angular, Angular 1, specifically. And as a CTO, I need to give them advice on where to continue and with which direction to go. Should they stay on Angular? Should they move away or new customers, new projects? Like we also saw in the Lightning talk yesterday, should we start with Angular 1 or should we start in a different direction? So if we look a little bit at a timeline to place things in perspective and see what is happening in the community, if we go back into ancient history when Angular was first started, we go back all the way to 2009. 28th September 2009, there was the very initial Angular announcement. A little bit earlier than many people are aware of, because Angular only a couple of years later started becoming more well-known and popular. You have to keep in mind that this is 2009. 2009, like I said, a long time ago was also the time that we were dealing with different kind of problems like compatibility with old internet explorer versions. I think that's becoming less and less of a problem nowadays. So skip ahead, three years, 2012, the first version of Angular was released a little bit later. If we skip ahead even further, early 2014, there were already developments on Angular 2.0, but not really visible and public yet. This guy called Rob Eisenberg joined the Angular 2.0 team. And why it's important will be later in history. Rob Eisenberg was originally the creator of a framework called Durandal. And Durandal used to be a framework based on the knockout framework. Yeah, knockout framework. My personal experience with knockouts haven't been great, but that set the site. In October, Angular 2.0 got a lot of attention in the community because it was publicly announced. And with the announcement, people saw that it's actually not that much an upgrade of Angular, but it seems much more like a full Neo framework. In this announcement, it was also set by Google that Angular was going to be written in the language called AdScript. And AdScript is a superset, an extension of TypeScript where you could create annotations. So this is like also in the first announcement there was no clear migration path from Angular 1 to Angular 2 so that also made a lot of fuzz in the community. And then I'm not even talking about the question whether people actually want to transition from Angular 1 to Angular 2 because Angular 2.0 is so much different. Some people love it. Some people hate it. Some people don't know yet what the framework is. I hope I can shed some light on it. Just one month later, there's the announcement that Rob Eisenberg, not very well known yet back then, but he leaves the Angular 2.0 project. Why? He said that initially he joined Angular project because the direction he wanted to take for the next version of Durandal was so similar to the direction that Angular team wanted to take for the Angular 2.0 project that he thought, let's join forces. But over the year that he's been in the Angular 2 project, he saw actually that the direction of Angular 2 started to go in a different direction than he signed up for. And he said, this I didn't sign up for. So he left the project. So just two months later, announce a new framework called Aurelia, in which the initial ideas that he had for his next version of Durandal are put in this framework. And then one more thing that's created some of the fuzz in the community is that in March, Angular 2.0 switches to TypeScript because after some talks between Google and Microsoft, it turned out that the new features of that script, mainly being annotations, could also be incorporated in a next version of TypeScript. So this is interesting. We have Google working in a programming language which is actually created by Microsoft. And they're not working in Dart. Interesting things are happening. It's actually also a good thing because it means that companies are working together in the same direction. So why upgrade? Like I said, Angular initial version has been a long time ago. A lot of stuff is in Angular to take care of all the browser versions, things that don't always help performance. Also, if you were yesterday in the session of Magesh, there was a lot of things happening like dirty checking. With newer browsers coming up, you have, which was mentioned by, I need to pronounce his name correctly, Charanjit Singh Singh, you mentioned about observable.observe, which allows you to do the same thing as dirty checking, but done in a much more performant manner. Angular grew over time, so the number of concepts in Angular grew over time, making Angular a relatively complex framework. So another goal is to simplify. Then there's the change in webs. I already mentioned observable.observe. You have other developments like Shadow DOM, web components, web templates, ECMAScript 6 coming up and other versions, and mobile support. Since 2009, we need a lot more mobile, so there you need to be lightweight and performant. So everything I'm going to talk about today, we have to give this as a warning, we're speaking about alpha versions. So the things you're seeing on the screen here today, they can and they will change. Some of the things that I will be pointing out as drawbacks or hurdles, or I'll be actually calling it headaches today, it's very well possible that a couple of months from now these things are resolved and they're a lot easier. So this is a work in progress you're looking at. Also, I'm coming from a neutral perspective. Typically, if you search the internet for these frameworks, you'll see presentations from the framework authors. When you see the presentations from the framework authors, they'll always say their own framework is awesome and things will always go smooth and easy. As a neutral standpoint, I want to see how you look at the frameworks, if you get them as a first impression. What do you run into if you're not hindered by too much background knowledge, how things work under the hood. So that being said, let's look at some code. I have multiple things I want to show you in code. I always start with the angular one, then show how it translates to angular two, then show how it translates to Aurelia. And I'm going to be a little bit agile. I have a certain amount of material, I'll have a certain amount of time I can add more, I can take some things out. I just want to get just enough to give you a feel for the framework. I will be doing simple things, by the way, because before diving deeper into a framework, first of all, you want to know if the simple things work actually in a simple way or not. So I will not be talking about making custom components and all the sorts, just the basics. Also, I'm not going to focus too much on how to set up the boilerplate. I just took an angular one seat, an angular two seat, an Aurelia seat, and I'm just typing some code in the existing HTML, the existing JS. So if we take, I think many people know angular one, right? Maybe not all people are working with angular one, but I'm going to start with angular one. In angular one, you already see there that there's a message being written here. And you already see here that the scope.message is hello from angular, and then the version which translates to hello angular one, four, two. So that's pretty simple to start with. Let's see what we can do in angular without even writing more things in the JavaScript. Let's start with a form. Let's create an input and say ngmodel equals new item. And I'll be needing this later. Let's create an input type equals submit. And let's say value equals add, and then we'll type new item here. It's not necessarily useful, but it shows some of the power of angular originally. Save, go to my browser, refresh. If I type something here, you see the text in the button also changing without me writing any codes to do so. If I would have done this in jQuery, it would have cost me a lot more work. So a simple step. Let's see how this translates to angular two. Angular two, here also I have a simple HTML where I'll be adding code. If I'm going to transition to the file where the script lives, first I have to again make a disclaimer. I had one sleepless night tonight because yesterday Douglas Crockford said that we should not be using classes. There is my class. Sorry. But this is how the framework works. I'm sure that if I want to do this without classes, I can take the class out, I can do anything I like. Also the code we're looking at here is typescript not JavaScript, which is basically JavaScript changed in such a way that you can work with type safe code. Another confession to make when I'm writing script code for UI, I myself do not care that much about type safety. Many people apparently do. That's why type script is gaining momentum in the community, but I think also some other people like me may not care that much about type safety. But if you look at the codes, we see first an import of a component and a view. Then we see two annotations for a component and a view. Then we see the class called home and message, which is specifically declared as a string. But by the way, you don't have to do this. Type script also allows you to continue working without declaring this. And eventually I'll say what the message is. And as you expect, the message says here, hello from Angular 2.0. So let's do the same thing in Angular 2. Let's create a form. Let's say input. Angular 2 also has an ng model. But if you look in the Angular 2 documentation, it's not the first thing they start talking about. So I will follow the direction that the documentation pushes me. If I have time left, I'll also show you the ng model. But the direction that the documentation pushes me is to do this, new item, which looks fairly simple. Again, I'll be creating input type because submit. And I'll try naively to say add new item and see what happens. Save, go to Angular and refresh. So here already in my new item, it tells me object HTML input element. So that's not really what I expected there. But this, we can pretty simply fix by saying dot value. I refresh, now it's empty. If I type here, nothing happens. So this is already my first two addicts. First, it's not what I expect. Second, it doesn't really respond. So let's see if we can fix this. Let's say add an event here. Let's start simple, just say click. And now you have to really watch it because the page will refresh. Watch what's happening quickly to the add button. Did you see that? Okay, so this also not helpful. Let's try something else. Do nothing, save and let's add a do nothing controller that returns false to stop the event from bubbling further. Return false, okay. Try again, add and it says try again and it stays on the page. But again, this is not what I want. I want every keystroke to show up here. So what I eventually found out is that I don't have to put an event on the submit button, but I have to put an event controller and the simplest thing that possibly works is to put a key up here. And now if I refresh, this finally works. Okay, so a little bit more work than I expected, but eventually I get it to work. Then I go to Aurelia. And in Aurelia, you first see that we have a template which comes from the web template. If I go to the JavaScript again and again, I'm sorry, we see a class where Angular 2 is very heavy on TypeScript. Aurelia takes the direction of adopting ES6 and they also say ES7. ES7 is a little bit preliminary to say that. What they actually do is they adopt some features which have been proposed for ES7 and they are kind of expecting that they'll make it in ES7. So they say we do ES6 and ES7. So here you see again, message from Aurelia and again in the HTML, you see hello from Aurelia. So let's start doing the same thing in Aurelia. We start with a form, we create an input and then we say a value dot bind equals new item. And then again, we create the submit. Let me say a value equals add and then slightly different notation, new item. And this works. Okay, so fairly simple in Aurelia. I go back to Angular 1 and I go add a list. You all know how this works, right? But again, I need to show Angular 1 as well because that way you see one of the first differences. If I make a list in Angular 1, I need to put the ng-repeat on the ul element itself. And the ng-repeat does item in items. Item in items still, ES5 notation. And here I'll be creating a Lee, which contains the item. And obviously, I almost forget to create my list of items so I'll be doing that as well. I can say here scope dot items equals one, two, three. Let's keep it simple. So if I save this, refresh, I have one, two, three. So really simple in Angular 1, right? Let's go to Angular 2. In Angular 2, let's do it the opposite way now. Let's also create a list of items. So I say items, I can work in different ways as well but I try to program the code in the native language of the framework because that's usually how it works well and how it's documented best. So I say string, I make a string array. And then I can say here this dot items equals one, two. And let's make a typo to check why it's important, three. It starts complaining because I typed three, which is a number in all the strings. So it does help me a little bit to type safety, but normally I don't make typos like this. So let's also see here the UL, build it up. UL, and like I said this time, my repetition is in the Lee element itself. And what I want to do here is an ng4, it's renamed, equals and I'm going to say, if you already worked with Angular 2, you know that I'm going wrong here but I expect this to be an item of items. The off notation is again coming from ES6. The item in items is ES5 where you get elements from an array. Items off, it's not just from an array but also from an interval which allows you to get also a different kinds of sources and codes than just arrays. And I'll be outputting my item and closing my Lee. So you can already expect, as I said, in my introduction, this is not going to work but first of all, for a different reason than you expect. It tells me, cannot bind ng4 since it isn't, this is big enough by the way, since it isn't a no property of the template element. I think not even correct English. I'm not trying to bash a framework here, I'm just observing. So it doesn't know ng4. So what I need to do to get ng4 as part of my view, I need to do two things. First of all, I need to import ng4 from my Angular framework but that's not it. I also need to pass it on directives to my view, ng4. Safe. So now you're expected to work. I'm afraid to tell you it still doesn't work. And funny enough, my error message still says, can't bind ng4 since it isn't a no proper matching directive, et cetera, et cetera. So this took me a while to figure out what I did wrong but what I did wrong is the obvious mistake that I already pointed out. I need to say hash item of items. Let's check if it works first. And now it works. So what you do with hash item of items, hash items means I'm introducing a local variable. So now let's go back to Aurelia and do the same thing in Aurelia. Let's start with the JavaScript. I say items equals, you know this by now, one, two, save. And let's write the UL. Also in Aurelia, the repetition is on the list element and I can say repeat dot four equals item of items. And here I need to be careful to write the right thing, item closely. And I go back to Aurelia where they refreshed. I have my one, two, three in Aurelia. Okay, so it's a basic starting point. Now we want to be adding this item from the input field to my list. So what we can do in Angular 1 is say scope dot add equals function, I'm making a design choice here, value, can also do this in different way. And I can say scope dot items dot push value and I can go back to my HTML view and there I can start saying I do ng submit equals add new item and for usability I'll say new item equals empty again and I can test this four, five, six. So that works. Now we're going to do the same thing in Angular 2. So let's first add an add button, add, this is a method. I'm forgetting the value, value dot string. So we're doing type safely. And to say this dot items dot push value. And then in my form I can create an event handler submit equals here I have to say add new item value and new item dot value equals empty. Now we test four, five, six works perfectly fine without headaches. So then we go to Aurelia. In Aurelia again I need to and doing the same thing over and over add a value and I say again this dot items dot push value and also in Aurelia I can create an event handler. And what I can do here is I can say submit dot figure equals add new item and I can say, oh and I can say new item equals empty and test. So this already refreshed four, five, six. But that's easy. If you want to add items you also want to be able to remove items. So for removing items we need another button. So let's again do it first in Angular one. We'll say a nj click equals remove index. You'll notice notation x slash a and then we also need to remove function scope dot remove equals function dot remove. Index and then we do scope dot items dot splice idx and we only remove one element. So again this works pretty simple. We go do the same thing in Angular two. So in Angular two we also say a click equals remove and here's where I got in trouble. What should I type here? In Angular one it's dollar index. In Aurelia it's dollar index. So let's guess it's dollar index. I'm giving a spoiler alert here already but let's try what this does. Write the remove function method. Remove idx is a number. Yeah I can say this dot items dot splice. And again we remove only one. So then we test this out. Now what should the behavior here? I'm going to remove three and what disappears? What disappears is one. So that's again not what I expected. So maybe I did something wrong. Maybe it's not dollar index. Possibly it's not dollar index because then it is empty. Let's try index. Just trying. Same behavior. So what I need to do in Angular two to get my index here, I need to write hash index equals index. So there's probably some logic behind it but for me from a user's perspective it feels like doing things that are not really necessary just to get a local variable. Let's do the same thing in Aurelia just for the just to be complete. So in Aurelia I'll be typing again A and now I need to get my click. I can say click dot trigger. However if I say click dot trigger it will create an event listener on every remove button that's in the page. This is a list. So there will be potentially many items in the page. So what I actually prefer is to say click dot delegate. Click dot delegate. Make sure that underwater you're doing event delegation and in short summary in a nutshell what event delegation is is that you're not listening for the event on every element itself but that you're listening for the event all the way in the root of your document. Events will bubble up to the root of the element. In the root of the element you will know the source of the element so you can still see where the event came from and it will be more efficient. So I'll be saying click dot delegate equals remove dollar index. And here by the way again spoiler alert here comes my first Angular Aurelia deck because this is first of all correct. Then I say remove idx. This dot items dot supplies idx, comma one. However this will not work. Nothing happens. So if I look at my error messages it will say remove is not a function. Why is remove not a function? I just typed my remove function in my code. So after again some research what I found out is that what you need to do when you're in a sub template because of the repeat I need to say dollar parents dot remove. If you look at the documentation of Aurelia it says so specifically in the documentation that this is for now and the framework author kind of promises there that this dollar parents some time from now will not be necessary anymore. How much time from now we don't know. So now it does work. So how are we time wise? How long do I still have? Because here I have a basic point where I can make a decision to continue with some more codes or to wrap it up. Not in 10 minutes, okay? So there's a couple of interesting things we can look into. First of all yesterday in the excellent workshop of my guest like half of the audience here learned how to create your own Aurelia framework and also your own Angular framework and part of your creating your own Angular framework was a lot of dirty checking. So I want to take a quick look at dirty checking and again I'm going to make some mistakes on purpose just for the sake of illustration but in this case I'm going to make my mistake on purpose not in Angular 2 and Aurelia but I'm going to make my mistake on purpose in Angular 1 because that shows how Angular 1 under the hood is different from Angular 2 and Aurelia and this is interesting. So actually I need to remove this from what I did before because that is what I will not be using. I'm going to on purpose instead of dollar timeout I'm going to say set timeout function I'm going to do this three seconds so that you can see the change first of all not see the change by the way and I'm going to say scope.items equals and I'm going to create something else four and five. You already know that if I do this this is not going to work but I'm going to show it anyway. I reload the page now after three seconds you would expect the one, two, three to change into four and five I don't even get an error by the way but it doesn't happen, why not? Set timeout, let's say the simple words Angular doesn't see that this is happening. So what you can do to fix this either use dollar timeout because there are things that are made easy for you or you can say dollarscope.dollarapply and again a function and I can put this same code in my function and I can try it again and I wait two seconds and I see my list changing in four and five. What's happening here is that if I anything I do in a scope dollar scope.dollarapply Angular will afterwards check what happened with the variables in scope and if something changed which it will do by dirty checking it will make sure the view gets updated. So the short way of writing this in Angular 1 is to use dollar timeouts which I get here as injected as a dependency and my dependency injection here is the naive way of dependency injection but that's too much detail for here and I can remove this again and I can just say dollar timeout with the function which otherwise works the same and here do the same thing Angular will make it easy for me. Four or five, let's do the same thing in Angular 2. In Angular 2, I can say set timeout and I can create a function. I can hear you are use fat arrow notation just because I like it. This dot items equals four and five and I do it in three seconds. Save this, update it, wait three seconds and it changed. So in Angular I don't have to do any dollar apply anymore because the framework already picks this up and the framework already picks this up because it uses native browser features observable.observe instead of dirty checking. So just for the sake of completeness I'll also show you that you can do the same thing in Angular in Aurelia. Here again I can do set timeout equals this dot items equals four and five and do it in three seconds and here again you'll see three seconds from now that it starts updating. So this is observable.observe at work in the background. So I think now we're at a good time to wrap it up. I have even more things that we want to show possibly but we have limited amount of time. We do have a good feeling for the framework right now. So I think we can go back to our slides and look at the conclusion. Oh, sorry, I forget one thing. Before we look back at the slides let's take, this is by the way not representative at all and I have got varying results but still I want to take a short look at how long my page takes to load and what happens here. So if I load my page in the standard Aurelia, sorry, Angular one seed I get 14 requests, 1.1 megabyte and it finishes in 247 milliseconds, a milliseconds. If I do the same thing in Angular two it uses 19 requests, 2.1 megabyte and it says it needed 888 milliseconds. So this is not yet on performance improvement, right? But then again this is far from representative first of all because there is nothing here minified and combined. So that should help there and this is just an alpha version. If I do the same thing in Aurelia again nothing minified combined together concatenated. I get 82 requests, 1.2 megabytes and 780 milliseconds. So far Aurelia seems slightly better than Angular but in other of my tests in slightly different setups I got the quite opposite result but it gives a little bit of perspective. So let's count the number of headaches that we got during the typing of code. In Angular 1.4 I got zero headaches. I do have to say this is a mature framework which has been around for years. We know the framework so we also know the quirks of the framework. So even if I have to do a dollar apply I don't count it as an headache because we know Angular is like that. If I go into Angular 2.0 I got five headaches. First of all I run into the local variable which is different from what I expected. Then the way I needed to add this event listener to get my keystrokes to show up which again would be different with ng-model but that will give you some other headache by the way but that's separate. For ng-4 I needed to first import it before I can use it and I need to type ng-4 in two places of my code extra which is to me like sit-ups and I got a very unreadable error again on the local variable and to get my index to show up I had to type hash index equals index. By comparison if I see my Aurelia number of headaches it worked perfectly fine for me except when I did this remove where I needed to type dollar parent before my remove method to access it. But then there's one more thing we need to take a look at before we can draw a conclusion and this is how big is the community around the framework and how many people are working on the framework. One of my, I like Aurelia from the code that I can type in and it looks promising but one of my biggest issues with Aurelia apart from the 82 requests that are made if I don't minify and concatenate my files is this. If I look at GitHub in the repository and I look at the contributors and this is a little bit small so I'll read for you what it says here especially in the back. I have this guy, this account called Eisenberg Effect, this is Rob Eisenberg who created 104 commits and you see here it's the most and the next biggest committer only has four commits and then I have a couple of guys with one commit so this is a little bit of a one-man show and again it looks promising but for me to advise my customers to move in this direction I need to have some kind of feeling that there's traction in the market and that it's not just a one-man show. Argument in favor for one-man show is that you don't lead it doesn't lead to design by committee because design by committee is the other worst thing that can happen to technology but then people do need to start picking it up so I only feel really comfortable about Aurelia if it starts picking up in the community more otherwise I like it. Then if we compare this to Angular 2.0 nothing really noteworthy I just wanted to show you it's healthy. I have one guy 339, one guy 231, one guy 222, 105, 103, 97 it looks like teamwork. So that's good. I wanted to ask you as the audience by show of hands what is your favorite and you need to make a choice between I'm going to continue with Angular 1 for a long time I'll be checking out Angular 2 because I think we need to go to Angular 2 I'll be checking out Aurelia because I think we need to go to Aurelia and my fourth option is I'll be checking out other options without mentioning what the other options are. So make a choice, I want to see if we add up all the hands that we see it should have add up to 100% so who is going to stay with Angular 1 for a long time? A couple of hands. Who will be checking out Angular 2 more? If you want to, who will be checking out Aurelia? And who is going to explore their other options? So we got the majority for people who wants to explore other options it's a little bit sad and of a presentation here but I have to admit that even my own conclusion and you can see it from my presentation obviously but also I'm going to check out other options because the whole Angular 2 thing for me, if I see that Google is moving Angular 2 towards TypeScript and I do not believe in TypeScript and they're heavily invested in TypeScript for me that's already known by itself apart from all the headaches that I got during coding I do have to say in favor of Angular 2 team they are saying we want community feedback on our current progressions so the things that I noticed here while doing this I can post as community feedback and tell them like this feels painful and it's very well possible that a couple of months from now these things that are painful in my presentation right now will not be painful anymore because there's a lot of traction in the community behind Angular 2 so let's see how things go Aurelia like I said, I like it very much I like the coding but I have some concerns for using it on a professional basis so if it picks up on the market I'd love to use it but honestly I'm going to check out my other possibilities and I'm going to pay a lot of attention this afternoon in the workshop from Christian Lilly for React and Flux so we have time for questions Just a minute in the sanity of time we'll take two questions from the room So what was the main thing that made Rob leave Angular 2? What is the main difference? So what's the main difference between? Why Rob leave left Angular 2.0? So there should be some big change in the initial plan and then later on they change something because of that Rob leave the Angular 2.0 community So if I understand your question well actually the question you're asking is why do they need to make such a big change and we also had Joe Dackez speaking about revolution versus evolution why do they not take an evolutionary approach and get the shadow DOM web templates observable to observe ESX or for my part even TypeScript to work with Angular 1 why is everything different? And my answer is I don't know because actually if I see this and if I see also how easy Angular 1.0 still works I would have suggested them to take the evolutionary approach because that's usually better Yeah, I thought it was your question that or were you asking why did Rob leave Angular team? Okay, so I think the main difference between the two frameworks right now is that Angular is very performance focused and is willing to take but it's my opinion by the way is willing to take some drawbacks in terms of usability to gain performance and Aurelia is very much usability focused and it might in the long run even perform a little bit less but it's more usable but this is what I've seen from my observation it might be wrong here if you see the blog posts from Rob Eisenberg why he's leaving the Angular 2.0 project basically what he writes is I do not feel that the direction of Angular is in the best interest of the Gerendal community but it's a little bit of a political statement I think he's also not using any dirty words against community that he also respects. That's a new answer, very cool. Sorry, I have difficulty understanding you. I felt completely motivated about using Ember after the talk in the morning and then after this talk I felt like it was completely bashing Angular 2.0 so demotivated there completely. So as you said right now you're saying Angular 2.0 is focusing a lot on performance improvements and by that way we are losing a lot because the syntax change it looks like a completely different framework. How has the community reaction been in general about Angular 2.0 then? Because a lot of angular material for example is doing really well and I would like to use angular material at some point too. So if you see the community reaction from what I've seen myself I'd say that the reactions are mixed. There is a part of the community that actually likes this direction and especially people who like type safety and who like type scripts and who write a certain way of writing codes they appreciate the direction where Angular is going. Also there's other advantages to Angular 2.0 as well in terms of testability that I haven't even touched here upon. Other people are criticizing Angular 2.0 either for the way in the direction it's going or for the approach that they're taking towards migration. So from what I see I'd say it's mixed. I'm sorry by the way it's not my intention to bash a framework it's my intention to give a first impression that I get when from a user perspective I'm using the framework and what I run into. And I want to give a good advice on where to go. Great. I think we can also take up similar questions and others as part of the panel discussion later. Adrien, thank you so much. We'll let you go off the stage if you say one more Hindi word apart from the two that you told us in the morning. Sorry, can you please repeat? One more Hindi word that you know of before you get off the stage please. Hanzi! Awesome. Thank you so much.