Link opens in new tab

Thanks for your support -- It does make a difference

Hello there, This is a special issue of the AngularJS and Web Dev newsletter. In this issue I’ll be talking only AngularJS, only ng-conf 2015, and specifically about the things we now know about Angular 1.3, 1.4, 1.5, and 2.0 now that ng-conf 2015 is over.

Quick disclaimer: This is an extraction from the time I spent watching the referenced videos. There’s a good chance I misunderstood some parts or so.

Now, to the meat of it:

What’s happening in Angular 2.0

RIP AtScript .. Long live TypeScript

If you thought creating an entire new language to add an optional feature like annotations (attributes in C#), is, well, not the best idea, Google agrees!

So, they got Microsoft to sort TypeScript out, and are just going to use / recommend it.

Of course you’ll still be able to use plain ES6 or even ES5. But if you do, you’ll be writing some code that is redundant and the tooling / compilers can write for you. This is similar to how you can write reactJS without putting HTML in your JS (JSX syntax), except you write what the JSX-to-JS compiler writes, which is quite odd code to have to write yourself.

(for more about ES6, refer back to Issue8 of the newsletter)

Actually, mark my prediction, from a comment I made on an AngularJS facebook group yesterday:

TypeScript is “optionally” typed JavnaScript. They created it to be C# users friendly and 100% JavaScript compatible (any JS code is valid TS code). With Google cooperating, I can easily expect much of TS features to come in EcmaScript 8 or 9 (if too late for ES7).

New Website & Interoperability

There is a new Angular website dedicated to Angular 2.0, which is angular.io.

The site shows sample codes in JavaScript and Dart, but generally speaking, it’s still very early work in progress (there are references to AtScript in the docs still). I find it funny that the resources page happens to list only Savkin’s posts and the ToDo app video, which were all mentioned in the last issue of the newsletter, Issue9 :)

Having an entire new site reinforces how distinct Angular 2.0 will be. The team has an answer to your reasonable worry of this distinction:

The team will allow using Angular 1.x and 2.0 in the same application. You can have a parent Angular 1.x application with only parts of it using Angular 2.0, or you can convert your parent application to use Angular 2.0, and have each child application (not sure what this means, maybe child routes, given the new router supports both versions) still be 1.x and upgrade your child apps one by one.

The source code for Angular 2.0 is also available at github.com/angular. Don’t get this confused with github.com/angular.js (note the .js suffix), which is where Angular 1.x lives now.

What To Expect

The general themes that the team is focusing on in Angular 2 are:

Simplicity They are hoping the new component classes (directive replacements) and HTML templating syntax will be easier and make much more sense than existing ones.

Speed One way data binding (instead of 2-way data binding, which has implications on forms directives changing a bit) and changing the way scopes work -now called zones, and don’t requite $digest or $apply pain or having a special name- among other internal changes are reducing memory and DOM writes, causing possible 10x speed increases.

Consistency The new syntax Angular introduced for using directives in templates in Angular 2 aims at solving consistency problems we have in Angular 1. Examples from my understanding: Currently in Angular 1.x, with attribute directives, the directive author decides whether to use JavaScript expressions as the value of the attribute/property, or just a plain string property. I for one know that I always forget that to use ng-include I must put the template name inside quotes like 'template.html' because it takes a JS expression not a literal string (which is good). As a directive author as well, I also hated that I need to do extra work to support {{...}} syntax in attribute value. As both creator and consumer, I hated that each event I need to capture needs to have a directive ( ng-click ng-blur , custom directive, etc, and yes there are workarounds). It’s even hard to tell whether a directive is meant to be a template that replaces the element completely or just adds an event handler or some properties. Some of you probably had problems when they accidentally tried to use two directives when both use the transclude feature. Solving these problems is at the heart of Angular 2, by giving a unified syntax for choosing whether to pass a literal string or JS expression when using a directive, and providing unified syntax for handling events without even needing to write a directive for that, also providing different syntax for template directives than component directives (which don’t rewrite the element). This bit can be quite confusing to explain in words. Check Day 2 keynote (linked below) for more about what the new syntax looks now, and why – Highly recommended.

Web Components To explain this without assuming knowledge of what Web Components are, I’ll use some over-simplified definitions (so, don’t make that offend you if know about Web Components). For a more proper introduction, check my video [Introducing Web Components & Polymer Projectpolymer-video, or the resources I used to learn about it, mostly listed in Issue7. Angular 2 embraces Web Components in two ways: first, it uses the Shadow DOM for template components (think: template/transclude directives). Shadow DOM is like inner HTML that is not affected by any CSS styles (even browser styles), cannot be matched by normal CSS selectors, and has its own child DOM document. Think of the many elements that browser renders when you add a <video tag to the page. This is the usual Shadow DOM example, except here we are talking about Shadow DOM that you create, style and control, not the browser. Shadow DOM is great for building reusable components that are guaranteed to not conflict with anything else on the whatever page they get used in, although can be a nightmare to style using today’s common CSS techniques that rely heavily on CSS inheritance / cascading. I hope that Shadow DOM will be optional, but I’m not sure. The other way Angular 2 embraces Web Components ensuing that Angular components (directives) can be used with / within Web Components transparently. You should be able to use custom HTML elements that have their own templates and Shadow DOM with Angular just like you’d with native HTML. This is the reason for all the weird [] and () characters used in directive attributes in Angular 2, so that they can be passed through the new HTML <template> element, often used in custom HTML elements (~ AKA Web Components) without being processed by the <template> itself. One thing to mention here: Google has another framework for building applications using custom elements / Web Components, Polymer Project. It enhances the new built in HTML <template> element and APIs to create custom elements and shadow DOM. In the Q & A session the Angular team explicitly said Angular 2 & Polymer are meant to work together very well, but are NOT likely to be merged in the future.

The first migration to Angular 2.0 will happen internally at Google around May 2015 (sounds too early to me, we’ll see).

This is all coming from the Day 1 keynote session (video – slides).

Whether you check Day 1 keynote or not, I highly recommend that you check Day 2 keynote.

It covers a lot about what the new Angular 2 syntax looks like (for both HTML and JS), and the reasoning behind it. It’s a true crash course (video – slides – demo code).

From Q & A

In addition to above, here are the bits relevant to Angular 2.0 from the Q & A session:

The current plan is to make Angular 1.x and 2.0 work together and work side by side, even with either of them in the module / app containing the other. By embracing this direction, this seems to leave out providing a proper compatibility layer in place (although it might happen, as I’ll show below).

Angular 2 will support evergreen (auto-updating) browsers on the desktop. This means IE 11+ (this can obviously be a deal breaker). Mobile support matrix is not decided yet.

The template language in Angular 2 will probably be a MUCH better experience for directive / component creators. You think it’s crazy to create your own ng-repeat -like directive in Angular 1 (maybe you don’t even know what interpolation means)? Even this sort of stuff should be easy in Angular 2.

Serverside rendering in Angular 2.0 is not a no-no as we used to hear before. It’s not promised as well. The team think that the changes they are implementing in Angular 2 will have positive side-effects on server-rendering story, but it’s obviously not something they are actively working on enabling. To me this sounds like it might be easy for a 3rd party to build it, or may come in future 2.x releases past 2.0.

There was no mention of Angular 2 filter feature in previous sessions as in pipe filters, but that will still be supported, probably renamed to pipes (as in stream passing I guess, like gulp, etc. in node). The team promised this will be such a lovable improvement.

As Angular 2.0 will be written in TypeScript, Angular will use the Traceur compiler to translate TypeScript output to EcmaScript 6, EcmaScript 5, and Dart. This allowed Angular to merge the AngularJS and AngularDart teams into one.

This one is crazy and hard to explain if you don’t know C#, TypeScript is on road to have something like async / await syntax, coming from C#, this syntax allows you to write asynchronous code without any big changes to your existing code. And guess what? The team suggested that this feature is already used in the codebase for the new Angular router – somehow (haven’t checked code yet). My poor attempt to explain the feature: imagine you can add the word await before any method call that returns a promise, and after that, instead of having to call .then() and pass a function, the compiler assumes the rest of your code (within the current function) IS the then function.

What’s happening in Angular 1.x (Angular 1.3, Angular 1.4, and Angular 1.5+)

It looked like Angular team felt that they needed to show proof that they have good reasons to not screw Angular 1.x users, so here’s what they said:

There are 2,000 apps using various versions of Angular 1.x at Google, and ~ 1,000,000 users (1 million!) visiting the current angularjs.org website (fully dedicated to 1.x). There are also 400,000 monthly visitors to the actual Angular 1.x github repository. The team showed that they get how big and dead serious Angular 1.x user base is.

By the way, it was also mentioned that Twitter uses Angular 1.x for several internal systems, and PayPal has a new checkout experiment using AngularJS 1.x as well. That’s an app that generates REAL MONEY!

What To Expect

The themes that the team suggest they’ll spend effort on with Angular 1.x are:

The new router

Internationalization / localization

Material Design (directives that implement Google’s Material Design)

Changes that can make it easier to migrate to Angular 2.0

General support for any issues / bugs etc.

This shows currently in the following efforts:

Weekly batch (1.x.x) releases (bug fixes, backwards compatible features) There are fourteen 1.3.x releases at the moment. Turns out the target is weekly releases! This is exhausting to keep up with. You might consider a 2 or 4 weeks update in your apps. But the idea is that breaking changes are minimal in these releases, and the bigger breaking changes are saved for 1.x releases, like 1.4, 1.5 etc.

1.4 RC0 is coming out this week If you followed the previous issues of the newsletter, many expected a final version of 1.4 in ng-conf. This didn’t happen, which is OK. The scope for Angular 1.4 as planned in January was a bit small IMHO. They added a few more things (so, it’s still not a big ball of mud update), and pushed the date slightly. I’m happier this way, because I thought we’d hold our breathe for for things like the router till 1.5, which would take even longer to come (it’s still likely major improvements will happen by the time of Angular 1.5).

Angular Router is coming to Angular 1.4 The initial release of the new official router, which combines features that used to exist in ui-router (like nested routes) will come as part of Angular 1.4 announcement. It’s still going to be a separate library though. It’s supposed to work with Angular 1.x and 2.0. And it will have its own release cycles independent from Angular 1.x/2.x releases. This is also great. I’m hoping the initial release will be good enough to recommend it instead of ui-router, because the new router is eventually what most apps will end up using in the future anyway.

Localization / Internationalization in Angular 1.4 I don’t know much about what is improving, but I know that the internationalization library for AngularJS is Angular-Translate, which is a very good looking one from its site or the ng-conf session about it (video – slides).

Performance Improvements The team always manages to find areas to improve internally on $scope digest cycling, ng-repeat etc., that quite often getting a new Angular release will give you a performance improvement with no code changes.

Continuing to plan in public That probably refers to publishing their weekly meeting notes on Google Drive (and sometimes recording them, although this is less often), as well as the usual OSS openness, that is: planning via public Github issues, accepting pull requests and responding to comments on Github issues and commits.

Shared components between Angular 1.x and Angular 2 The components announced to be shared are: the router (of course) Internationalization support Animation support (this is a bit of a surprise to me) Note that Material Design is not in the list, which makes sense because it’s quite more involved (it’s all about writing directives that apply the Material Design). Maybe that’d be a good migration / compatibility test subject, Google -if anyone is reading this :) A lot of this will be in proper shape by the time of Angular 1.5 (with some bits coming in Angular 1.4). Angular 1.5 could be happening around Summer-Fall (U.S. calendar not Aussie calendar of course).



Most of this came from Day 1 keynote linked to before, and from the Angular 1.x session (video – slides).

Getting your Angular 1.3/1.4 App Ready for Angular 2

Here’s what the team says about preparing code for less migration effort when we get Angular 2.0, which is luckily in-line with the guesses that several others came up with so far.

Write code as ES6 classes, everything (directives, services, etc.)

Use the new Angular router (luckily it’s just around the corner)

Use directives more than controllers

Use the controllerAs syntax in your directives instead of using $scope

There already is a proposal for a compatibility layer to be introduced. You can see some actual code by watching the “Angular 1.3 meets Angular 2 0” session (video – slides).

From Q & A

Here are a few bits from the Q&A, that are supposed to happen as part of Angular 1.x development story / ecosystem:

It seems the Angular router team, at least those present at ng-conf, don’t know much about what ui-router provides. This is weird, but maybe because the Ember router is where they are getting most of their inspiration from.

The ng-inspector Chrome extension might be merged with the Angular Batarang extension going forward, if the conversations start soon and go smoothly

Angular Material Design animation support will come to Angular 1.x, but beyond 1.5. Google Material Design (a lame yet easy way to think of it is like Twitter Bootstrap & Windows Metro design mixed into one) defines UI look & feel, and some standard animation effects even on things like pressing a button. Angular Material Design 1.0 will come around Angular 1.5. It’ll have all UI styles builtin so that just adding ng-button or something like that will get you a Material button. However, the animation part of things will follow later with a new feature coming to Angular Animation library called “timeline”. This is required as Material Design animations are sometimes series of animations not a single animation effect.

And of course, the Q & A session is also available to watch (watch).

These notes do not cover entire ng-conf

You can watch all the sessions from ng-conf on the ng-conf 2015 video playlist.

There are sessions about the new router, TypeScript, reactJS, a performance benchmarking tool called benchpress (used to measure performance improvements in Angular 2), John Papa’s AngularJS styleguide, and much much more…

Slides

As you watch the videos, you’ll find most presents link to their slides near the end or so. I have linked to all the slides I could find whenever I linked to a video.

If you didn’t find a slides link in the video, here’s what I did to get the “Angular 1.3 meets 2.0” slides: I went to ng-conf schedule page, found the talk details, clicked through to the speaker’s twitter account, and asked for the slides gently :)

I’m sure there’ll be some list of slides (official or not) at some point. I’ll keep you updated via this newsletter when I find about it.

Update

Here’s a big list of all ng-conf videos, slides, and speaker twitter links.

Finally

If you liked this special issue of my AngularJS And Web Dev Goodies newsletter, please let your friends know about it and sign up as well.

Thank you!

—

Meligy

Eng.Meligy@Gmail.com | twitter.com/meligy | gurustop.net/newsletter

Update I showed this blog post to Brad Green from the Angular team, and he had some comments and explanations that are very valuable. You can read them here: Brad Green from Angular Team Comments On My AngularJS 2.0 / 1.x Post

Share With Friends:

How did I learn that?

As a bonus for coming here, I'm giving away a free newsletter for web developers that you can sign up for from here.

It's not an anything-and-everything link list. It's thoughtfully collected picks of articles and tools, that focus on Angular 2+, ASP.NET (4.x/MVC5 and Core), and other fullstack developer goodies.

Take it for a test ride, and you may unsubscribe any time.

You might also want to support me by checking these out [Thanks]:

Links open in new tabs

Thanks for your support -- It does make a difference