AngularConnect Videos & Free Angular 2 Router Book (Only for a few hours)

Hello,
This is Meligy from gurustop.net. I wanted to send you a very quick email to let you know about Angular 2 conference that took place in the last couple of days, Angular Connect.

The videos for the conference are already available on YouTube.

Check them out from here:

https://www.youtube.com/channel/UCzrskTiT_ObAk3xBkVxMz5g

There are videos for each whole-day track of the 2 tracks 2 day conference.
There are also videos for each session starting to come out. Seems all Day 1 is there, and Day 2 coming eventually.

For browsing through the whole-day videos, you can use the schedule page as guide, or just watch the individual session videos as they come out.

The sessions page on the site has all the separate videos that came out, and all the slides that are announced on Twitter, etc.

Another option is wait for the next message from me, as I’ll email you later all the most important summaries from the conference and what I think is must-watch.

Until then!


Meligy
gurustop.net
ng-sydney
Twitter | LinkedIn | StackOverflow

P.S.

This tweet was posted about 12 hours ago:

Victor is from the Angular Router team, and he writes the best Angular tutorials on
vsavkin.com.

Obviously this is only for less than 12 hours now, so get it quick.

Angular 2 final is released, here’s what you need to know

Update

The official release announcement is now out, with notes about future semantic versioning.

P. S. Sorry for spamming today with many emails. It won’t be the usual rate for these emails. I promise.

Hey,
Earlier today I sent you an email, saying that there’s a special Angular 2 event, where I expected the team to tell us when they are going to release Angular 2 final. I thought it would be too optimistic to ask for Angular 2 final today, but at least get a date!

I was wrong!

Watch the event stream, from the time 4:49s:
youtube.com/watch?v=xTIWBXkpvDc&t=4m49s

Yes, Angular 2 final is here. and it’s pretty much RC 7. No breaking changes :)
See the changelog as always.

Well, that’s it really. The NPM packages are updates, you just change the RC versions from 2.0.0-rc.7 to 2.0.0, and voila!

What About Angular1?

It will continue to be supported as long as the team sees a lot of usage (which they judge by how many people check the docs, now over a million people, 3 or 4 times Angular 2).

Most of the new minor features will be to make it more like Angular 2 though, and easier to migrate.

The Future

So, what comes after Angular 2 you ask?

Many small improvements that limit breaking changes, many more frequent releases to come without breaking your stuff.

One thing the team said is that they are not done making Angular faster yet, or smaller. They also said they really want to make the reactive / stream story amazing, and I’m guessing there’s still more work in the router space.

Then every 6 months or so (that’s February next year for the next one), a big release with breaking changes and semantic versioning, the next breaking-changes release, it will be Angular 3.

Most likely we’ll get the automatic project upgrade tool that the Angular team uses for automatic upgrades inside Google as well. The team said it should be by the time Angular 3 is out.

Very exciting, go check the whole special event video yourself!

I’ll be checking for more Angular2+ goodness, and emailing you with my findings as always.

Cheers,


Meligy
gurustop.net
ng-sydney
Twitter | LinkedIn | StackOverflow

Expecting Some Big News From The Angular 2 Team Today

Update 2:

Angular 2 final is here already!
Read my follow-up post here

 

Update 1:

Here’s the direct link to the livestream:
youtube.com/user/angularjs/live

The same YouTube channel will have the recording if you are checking this later.

Hello,
This is Meligy from gurustop.net. I thought I’d drop you a quick note to let you know that the Angular 2 team are having a local meetup in the mountain area in the U.S. later today, and they are saying it’s going to be a very special one.
It’s even titled Special Event!

What’s going to happen? Are they going to release Angular 2 Final?
That’s unlikely. But they might announce the release date!
Will it be in Angular Connect this month, or ng-europe next month?
I can’t wait to know!!

Well, the meetup is going to be streamed anyway. And it’s going to be in very convenient times for those living in the U.S. or Australia especially.

The talk will start at 7 PM PST, which is 12 PM East Australia Time, so you can watch in the evening, or during the lunch break, depending on where you are in the world!

Just check the Angular twitter account 10 minutes or so before the show start.
They should post the livestream link around then.

If you are into twitter, you can send them questions using the hashtag #ashng, but if you aren’t, you can just check the twitter page (no account needed) only for the streaming link.

In other news…

If you haven’t heard already, Angular 2 RC 7 has been released earlier this week.

The changelog shows only RXJS and Zone library upgrades, and a fix for lazy loading in the router when using Webpack.

Lazy loading is an interesting piece when it comes to play with NgModules and AOT compiler. Here are some great slides about what the Angular compiler does. We need to dedicate more time to the topic still.

If you want to take advantage of the fix, it should be a matter of upgrading your packages and nothing else. The team are keeping their promise to limit the breaking changes after RC 5 deprecations, and this is awesome!

Here’s how Angular-CLI upgrade commit looks like for example. Only package.json changes. Nothing else.

Speaking of the CLI, they also released a new version yesterday. You should check it out. The changelog tells you what’s new, but you can also directly check the commit log.

It should be a matter of npm i angular-cli@webpack. There’s now less need to work with the CLI from Github directly, but that’s how I personally tested the release yesterday even before it came out. I’m rewriting my guide on how to do it. Stay tuned!

That’s it!

Watch the meetup either streamed or recorded, or don’t worry about it as I’ll always keep you updated with any big news.

Until next one,

Cheers,


Meligy
gurustop.net
ng-sydney
Twitter | LinkedIn | StackOverflow

Learning Angular 2 recent RCs and future release plans

Hello there,
This is Meligy from gurustop.net. Today we are going to talk about the new things happening in the Angular 2 world.

Angular 2 RC 5 has been released a few days ago, and RC 6 is going to be out in a week or two. RC 6 will be mostly removing deprecated features. This sounds like deprecated forms, deprecated router, and support for bootstrapping Angular applications with components, as you should be using NgModules instead.

This means that, if you haven’t already, you should upgrade to RC 5, and change your code that’s using deprecated features before RC 6 is released. At least there’s a migration guide for that!

The good news though is that, beyond already deprecated stuff, the Angular team plans on avoiding breaking changes after RC 5 all the way to Angular 2 final release.

This means we might be still on track for a final release in September or October max! The ng-europe conference has been announced, and is scheduled for October 25 – who knows…

Of course this email is more about learning than about news. So, here are a few resources to lean all the new functionality in Angular 2. We’ll talk about the new forms module, and the new, 3rd router.

Forms

[Video] Latest Angular 2 Forms w/ Kara Erickson

Kara is an awesome lady from the Angular team itself, who has been working on the forms module for a while.

In this video she explains many features of the new forms module, and the 2 different programming styles it offers.

There’s also a nice written summary of the talk by Juri Strumpflohner, and the source code she shows in the talk is available here.

— Thoughtram Articles

Pascal Precht, an Angular Google Developer Expert (GDE, like Microsoft MVP), has a nice collection of Angular 2 articles on his company’s site, Thoughtram.

For forms, I suggest you check the posts in this order:

  1. Template-Driven Forms
  2. Reactive / Model-Driven Forms
  3. Custom Validators
  4. Custom Form Controls

— Template-Driven or Model-Driven?

Template driven forms are similar to forms in Angular 1. They use ngModel to connect to the data object, and HTML attributes like required etc. for validations.

Reactive / model driven forms require you to build an object representing your form structure in JavaScript (of course I actually mean TypeScript) – often referred to as the form model. Don’t confuse that with ngModel. By form model here we don’t mean not the actual data object that form control values are bound to, but an object that represents the form controls, validations, hierarchy, etc.

Angular 2 provides a convenient FormBuilder object that you use to create the form model. It also allows you to create things like ControlGroup (a fieldset / nested/child form, or even the top most form) and ControlArray (which contains controls in repeats with dynamic length).

Instead of connecting to ngModel, you connect your HTML inputs to the form model object you created via formControlName. Check the above links for the code samples.

Now that you know both, how do you choose?

Here: If you worked with Angular 1 for a bit, the template-driven model will feel natural to you. I suggest you start there.

After that, learn the reactive / model-driven style, and roll on with it.

The reactive model is what feels more natural in an Angular 2 world. Everything in there is based on RXJS like many other pieces of Angular 2 – including monitoring value change and even validation. If you ask me, I’d say you should consider this like the only forms model that ships with Angular 2.

By the way, the official documentation for forms isn’t bad at all. Here it for template-driven forms, and for reactive forms.

––

Now, we should talk about the router next, and the most important / most new piece, NgModels.

But, I look at this email, and think again…

There are a lot of links in this email already, and you need some time to check the each one of them…
So, I’ll give you a chance to do just that!

Let’s talk about routing, the Angular Ahead of Time (AoT) compiler, and NgModule together tomorrow. They actually make sense together anyway, as you’ll see.

 

Till then…

Have a good day,

 


Meligy
gurustop.net
follow me on twitter

Where’s Angular 2 going after a couple of RC releases?

Note

This blog post first appeared in my Web Developer Newsletter on June 16.
Look for the form to sign up to the newsletter below.

Hello!
This is Meligy from GuruStop.NET. Just checking if you got the news, Angular 2 RC2 is out!

Here’s the official announcement – and the changelog

The big highlights for this release for me seem to be:

  • The first release of the template compiler
    It allows you to compile templates as a build step, and avoid loading the Angular compiler in runtime.
    The Angular team say this compiler is the most essential to marking Angular 2 as final release.
  • Simplifications to forms
    If you played with Angular 2 forms and find the syntax confusing / redundant like me, this is big news
  • A new rewrite of the router
    This rewrite seems better than the on in previous RC.
    The official blog says it has contributions from ui-router and ngrx/router
  • Some new features
    Namely the animation framework

By the way, I’m personally sticking to Angular CLI when trying newer versions of Angular 2.
If you are taking this route, note that you need to uninstall the CLI, and clean npm cache before installing a new version.

That’s it for me. How about you?

Have you been playing with Angular 2 yet?

Or still looking for a good place to learn it?

Write back to me and let me know :)

Cheers,

The Pre ng-conf Special — Some Great Resources for AngularJS

Note

This blog post first appeared in my Web Developer Newsletter a few hours before AngularJS ng-conf started.
Look for the form to sign up to the newsletter below.
Are you ready for ng-conf today? 
There are a lot of videos to watch, live, or as recordings in the time that suits you.
 
They are all available here:
 
 
If you’ll be watching the recording later, I expect the streams will be available as recordings of the whole day at first – via the same links; and then later in a couple of days or a couple of weeks will have separate recordings for each session with new links.
 

Another Great Angular 2 Videos

 
Also, make sure you didn’t miss the Angular team talk in early April, about HTTP and Observables, Angular CLI, and accessibility testing, and here’s the recording:
 
 
Looking for something a little bit more advanced? Check this free EggHead video on using RxJS and Redux framework (often used with React), with Angular 2:
 
 
Or if you want something more basic, check
 
 

AngularJS Performance Videos

 
If you are still doing Angular 1, check out Todd Motto’s awesome AngularJS FREE course as well:
 
 
And here’s another FREE webinar he did on the same topic
 
 

Angular 2 — RC 1

 
Finally, you probably heard it already. Angular 2 is now an RC 1 release, out of beta!
 
There are a lot of changes in RC if you are using the new router heavily.
Other than that, you need to watch for changes to pipes in beta-16, and to ngFor in beta-17.
 
Here’s the full changelog:
 

Learning Angular 2

 
If you are looking for some Angular 2 project to look at code and come up with patterns to use yourself, Dan Wahlin has a great sample, that’s already updated to Angular 2 RC 1:
 
 
If you are into different experiments with the limits of the Angular 2 API, check Ben Nadel’s recent Angular 2 blog posts:
 
 
If you are looking for a big list of different resources to learn Angular 2, check out this list:
 
 
If you are playing with Angular 2, remember that you can always email me and I can always try to help. Here are the most common gotchas people seemed to fall into in an Angular Hack Day I helped mentor in Sydney
 
 
And of course stay on this list for more AngularJS, TypeScript, NodeJS, ASP .NET, etc. goodness in future issues!
 
That’s it for this one, though.
 
Enjoy :)

– –

Mohamed Meligy

Senior Software Consultant | Readify
Organizer | ng-sydney User Group

 

P.S.
Do you have any good free resources for AngularJS, TypeScript, NodeJS, EcmaScript / JavaScript, ASP .NET, or web development in general that you’d like to share with 1,100+ members of this list?
Or, do you have a good useful product you’d like to be a sponsor of the next issue?
Just email me about it, and let’s have a chat!

A Quick 10-Min Video To Start Writing Angular 2 With No TypeScript Setup

Hello everyone,

In this video, I share a very simple tip that I earlier shared with a few Newsletter subscribers and ng-sydney members, about the easiest way you can get to play with Angular2, without worrying about shims, SystemJS, TypeScript, or RxJS.

I also give you another hint for when you want to create a “proper” project, not just a playground.

Too Long; Didn’t Read (Watch)

  • To start a new Angular2 playground, go to angular.io, scroll down to the hellow world example, and click the “TRY IN PLUNKER” button
  • If you need a proper project, just google “Minko Angular2 Seed”, click on the Angular 2 Seed Github repository, and clone that (maybe with flag --depth 1 for clean history)

Let me know if you have any questions.

AngularU, NPM 3, & Hosting Recommendations — Issue12 — Meligy’s AngularJS & Web Dev Goodies

Hello,

For the new ones around here, this is @Meligy writing this issue of GuruStop.NET Newsletter for JavaScript developers, especially those working with AngularJS.

I’ll mix in a few quick links with the ones I describe, for a change.

Please reply back and tell me whether you think this is a good idea.

Let’s jump to today’s picks:

AngularJS

AngularU Videos

You probably heard about AngularU, another big Angular event like ng-europe, with speakers from within and outside the Angular team.

There is a ton about Angular 2 (roadmap, server rendering, forms, TypeScript), but also several topics about Angular 1.x for both coding techniques and libraries, and even integration with different backends.

Angular 2

Contribute to Angular 2 [“community-help” Github Label]

In an up-for-grabs way, Angular 2 repository issues now has a special label for issues that the team expects external contributors from the community might be able to work on easily.

Check the list. You might find something that you can do!

React Native and NativeScript Integration [Article]

A narration from the “AngularJS 2 Roadmap” in AngularU that gets you the news pieces directly. It also links to the Angular 2 Rendering Architecture document.

Styling Angular 2 components [Article]

Angular 1.x

gulp.js starter for AngularJS SPAs

A scaffold starter kit for Angular applications that uses gulp and bower and tries to set a few more things than folder structure (which seems nice) like fonts, etc.

Similarly, here’s another one that uses NG6: ES6 + JSPM (or Webpack).

Angular Formly [Library]

This one seems to be getting A LOT of attention. I see several people sharing it, and I hear about it in the Angular Air podcast.

Give it a look, or check this article about how to use it.

New features in AngularJS 1.4, AngularJS Meetup South London [Article]

Using Angular 1.x With ES6 and Webpack [Article]

More traps, anti-patterns and tips about AngularJS promises [Article]

Directives (Angular 1.x)

A Guide To Transclusion in AngularJS [Article]

Very good explanation of templates and, obviously, transclusion.

Using NgModelController with Custom Directives [Article]

From GuruStop.NET

Using track by correctly with Angular 1.4 select ng-options

This is a one year follow up of the most read post ever in my blog, about select element quirks in AngularJS, How to set the initial selected value of a select element.

AngularJS is not working at all, & angular.bootstrap() throws weird errors

I was getting ready for another post, bootstrapping my demo angular module manually, and I just couldn’t get Angular to work. After a bit of frustration, turned out I needed to run this after DOMContentLoaded was fired.

ReactJS

Nvigating the React Ecosystem [Article]

We know React is just a template / view library. What other tools and libraries are there that make building whole apps with it possible?

The pursuit of high performing, easily maintainable React apps [Article]

JavaScript

Debugging

Useful Javascript debugging tips you didn’t know [Article]

Being able to monitor function calls in the console is nice. Also, if you didn’t know about, black boxing library scripts is VERY nice for debugging jQuery / Angular / Polymer / etc. apps.

ES2015 / ES6

In case you don’t know, the committee that releases the JavaScript standard (EcmaScript standard) decided to have version names after the year of release.

So, the official name for EcmaScript 6 is actually EcmaScript 2015.

Announcing “Exploring ES6” [New Book] [Freebie]

The book is free for online reading, and you are encouraged to buy downloadable formats to support the author.

It’s high on my reading list. This guy’s blog is a very good resource for JavaScript info.

JavaScript.com

Code School learning website has aquired the domain and put some nice free learning materials in there for starters.

5min ES6 Intro (With Babel) [Video]

Setting up an ES6 Project Using Babel and Browserify [Article]

NodeJS

NPM 3.0 [News]

BPM v3 is released with label “latest” and actual description “beta”. It’s going to be side by side with future v2 releases, but at least it should fix several common issues with v3.

Gulp

Getting started with gulp [Article]

Good article that was updated a lot to keep up with Gulp.

Web Design

Improving Web Fonts Performance [Slides]

Bootstrap Sass Installation and Customization [Article]

Designing User Interfaces for Your Mother [Article]

Text Editors / IDEs

Visual Studio

JavaScript Editor Improvements in Visual Studio 2015 [News]

There’s some about AngularJS & requireJS support, but my most favourite is integrating JsDoc into intellisense (autocompolete).

JsDoc fairly common in documenting JS libraries, so, a lot of them will benefit greatly from it.

@Ch9 Connect(“On Demand”); [Videos]

Channel 9 has a nice new series of various length videos about Visual Studio 2015, and other related .NET, Azure, and programming language topics.

I watched a few and liked them a lot.

Visual Studio Tools for Apache Cordova – Samples and Docs [Code Samples]

Atom

Github’s Atom free / open-source text editor.

Facebook open-sources its Nuclide IDE based on GitHub’s Atom text editor [News]

Github Atom 1.0 released (And very cool video)

Let’s see how long it will take other editors based on Atom to be in sync with it!

Software Design

Martin Fowler: Monolithic apps first, microservices later [Article]

In his own words “Almost all the successful microservice stories have started with a monolith that got too big and was broken up”.

The introduction to Reactive Programming you’ve been missing [Article]

Web Hosting

Where should I host my blog (WordPress or other), if I want my own server / VPS?

One of the blog posts I wanted to write for long time actually. In short, for Windows, use SoftSys Hosting, for Linux, use DigitalOcean, and maybe check BlueHost.

I got a comment in email saying why WordPress instead of static file based blog, but that might be a topic for another post!

Misc / Fun

DebConf14: QA with Linus Torvalds (August 2014)

One of these random Youtube autoplay videos, but I found it interesting, not having heard a lot from Linus before.

What happens when you type google.com and press enter? [Article]

How deep do you wnat to take the answer to? Send a Pull Request, it’s a Github repo :)

There’s also other variations on Quora and on StackOVerflow.

Community Casts [Videos]

A video collection website that seems to have around 100 AngularJS videos, and similar number or general JavaScript videos and for C#.

Seems like there are some people actively adding videos to it as several videos are added just hours before I checked it.

If you liked this newsletter

Donate?

You might consider buying me a coffee, or two ;)

You can donate to the newsletter via Paypal.

But most importantly

You can reply to me and make this newsletter better:

  • Is the current monthly frequency OK, or should it be closer to weekly or bi-weekly?

  • Do you like the content? Do you want more AngularJS content? Or less? More JavaScript? C# / .MET?

  • If uou find a good article, video, library / tool, or anything else that can fit into this newsletter, why not reply and share the love? Thanks :) :)

Apart from that…

See you next one :)

@Meligy –– GuruStop.NET

Angular 1.4, Polymer 1.0, & More — Issue11 — Meligy’s AngularJS & Web Dev Goodies

Hello there,
This is Meligy from gurustop.net/newsletter, the AngularJS and web development newsletter.

It has been quite a while since I wrote to you, and if you have been subscribed in the last month or so, this is probably the first time you read from me (previous letters).

Anyway, you probably signed up to this for some good AngularJS and web development resources / tips, and stuff, not to read this meta. So, let’s jump quick into that…

AngularJS

Angular 1.x

Angular 1.4 is now final

It was supposed to come in ng-conf a couple of months ago with a conservative plan announced in January, but the AngularJS team chose to polish it more and just had it ready.

They have a very good summary of what they added/moved in this blog post. They also added a separate migration document you should check for breaking changes.

– Don’t use $http’s .success()

A good tip about leaky abstractions. $http methods act like promises everywhere, except when you use their special methods.

If you call these inside a service or so, the consumer needs to check whether you return a regular promise or an http promise to check whether to use success(). Why not just treat it like any other promise!

Angular 2.0

[Video] AngularJS 2.0: Overview | Pluralsight

That’s not a PluralSight course on anything, just a free webinar available on YouTube. Have a look!

Dependency Injection in Angular 2

A very good deep dive into how DI works in Angular 2. It even shows you how to use the dependency injection framework on its own regardless of the rest of AngularJS.

– Angular 2 & NativeScript

Just in case you didn’t hear that the Angular team wants Angular 2 to run in NativeScript (which allows JS to work natively, and is associated with ReactJS typically today). This is their meeting notes document.

If I remember right, the other meeting notes documents from Angular team often keep the most recent meetings at the beginning. This one doesn’t, so the most recent meeting is at the end of the document.

JavaScript

JavaScript Application Architecture On The Road To 2015

Addy Osmani wrote this one at the end of 2014. In it he talks about the trends people architecting big applications and frameworks are following and why, and what problems you’d face architecting JavaScript applications today.

– We Tested How Googlebot Crawls Javascript And Here’s What We Learned

We know from late 2014 that Google started indexing JavaScript, but how good is that going? Does it solve the problem?

According to this article (the website is one of the best resources for SEO by the way), it’s mostly very impressive. You’ll still need to remember that Google is the BIGGEST but not the only crawler that might visit your site though.

Web Components

– Polymer 1.0 Released!

Polymer is Google’s framework for building independent web components (think widgets, like jQuery plug-ins or social sharing widgets, etc) that can be injecting into any website without conflicting with other content on the page. It also aims to build a big reusable component library ready for anyone to use.

While Polymer has a few similar features to AngularJS, notably data binding, it intends to be a widget framework not a whole application framework. It doesn’t offer things like routing, dependency injection, forms management, etc.

A few members of both teams said that Polymer and Angular do not have plans for merging or discontinuing one framework in favor of the other. Angular 2 aims to be able to work with any web component whether built with Polymer or not.

Tooling / IDEs

– Google Developer: TotallyToolingTips

A new article and video series about frontend tooling from Google Developers network.

The first episode is about using SublimeText for frontend, so, it’s very practical and pretty useful.

– Enhance Your JavaScript Debugging with Cross-Browser Source Maps

The article shows you how to get sourcemaps working in IE and Firefox not just Chrome. This might come handy in debugging scenarios as the world seems to shift into using other languages that translates to ES5 (the usual JavaScript) like ES6 and TypeScript.

Visual Studio

Visual Studio Code

You probably heard about Visual Studio Code already. It’s Microsoft’s SublimeText-like editor, just like Github’s own Atom editor. Actually, the word in the street is that VS Code is a fork of Atom.

Why would Microsoft do that? This doesn’t add anything, does it? It probably sounds silly to you and not worth investigating.

This is why I talk about it in here. I read all these thoughts then went and watched the video at the top of the Visual Studio Code homepage and it answered them all. There are a lot of editing and -even more- debugging experiences that are pretty inspired from the full Visual Studio. Adding these to a Sublime/Atom like editor is an awesome plus.

The features -especially debugging- are more complete for NodeJS than ASP.NET 5 (v. Next) BTW, which is funny, but at least we can be sure more ASP.NET 5 love is definitely coming.

If you are interested in VS Code, check out Johan Papa’s blog as well. He is blogging about it actively nowadays (and about ASP.NET 5 on Mac as well).

And for one or two who haven’t heard yet, you can actually get the full Visual Studio Professional edition for free as the Visual Studio Community Edition (yes, exactly as Pro) if you are alone or in a team or 5 people or less.

Publishing an ASP.NET 5 app to Docker on Linux with Visual Studio

This blog post is based on a very interesting extension Visual Studio 2015 RC Tools for Docker. The extension adds itself to the Visual Studio publish dialog seamlessly and seems to integrate very well.

Chrome Developer Tools Extensions

– Scratch JS

If you are learning ES6 and sharpening your teeth, it might help to have an extension that lets you run ES6 in the console like you do with ES5 today!

DOMListener

This extension makes you monitor / log all DOM changes, like added/removed elements, attribute changes, text changes, all. It’s pretty magical.

Although I admit, being a new tool that’s not already in my workflow, I just installed it a while ago, tested it with much wonder, then forgot about it until I checked my bookmarks for this newsletter. I guess I’ll be using it a bit more going forwards again!

Link Lists

Collections of resources for learning. You’ll want to skim over the list and decide if you find anything interesting. I mention the whole collection as I find so many interesting.

– Eric Elliott’s essential JavaScript links

This is a link list created by the author of the book Programming JavaScript Applications – O’Reilly Media. It has bunch articles, libraries and tools, recommendations of communities and people to follow, etc. It’s a bit random but worth skimming.

Actually, there’s an even nicer (forked) list that led me to the one above. It’s titled Eric Elliott’s essential JavaScript links or The way of the parrot, not.

The guy talked to the author of the list to prioritize the most important resources, then checked them on his own and wrote a summary of each in his forked list. He wanted to make sure he is not a parrot, recommending what he didn’t understand himself.

Check it out for the resources part especially not the libraries or so list. I could find pretty interesting learning links, and pretty basic / overly-obvious library links (like: react!).

– The New Boston

This site calls itself a social network or a forum, however, the value I see in it is a whole lot of videos in so many topics. The ones I checked for JS and MongoDB were recent and good. The site has a lot of categories to check though.

In closing…

That was it for this email. I’ll keep collecting resources and sharing them with you as I go. If you like them, share the love with your friends and tell them about the newsletter.

If you don’t like where I’m going with this, just email me or reply to this email, and let me know what can be made better.

Also, if you found some good article or tool that is a good fit for the ~600 web developers reading this newsletter, email / reply, or tweet it at me and I’ll have a look (and credit you of course).

As a bonus to this newsletter, you can also email me any problem or complex challenge that you have in you JavaScript or AngularJS application, and I’ll make sure to provide you with some good tips to get over it.

Cheers, and until next letter,

The Longest Write-Up On ng-conf, AngularJS 1.3, 1.4, 1.5 AND 2.0 Yet — Or — Meligy’s AngularJS & Web Dev Goodies — Issue10

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

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 (videoslides).

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 (videoslidesdemo 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 (videoslides).

  • 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 (videoslides).

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 (videoslides).

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