Should Angular 2 Be Renamed Like ASP​.NET 5 Became ASP​.NET Core?

TL;DR: No. It’s not exactly the same situation.

A friend asked in the Egyptian Geeks Facebook group in Arabic:

Is Angular 2 a suitable name, or does it need a new name? Or am I just not getting the big picture?

Because when I learned about it, I found a lot of different, removed, and new pieces.

As ASP.NET 5 became ASP.NET Core 1, is it a good idea to pick a new name to show the big difference from Angular 1?
Or is this just my problem and the difference isn’t that big?

I thought that it is a logical question. Here is my take on it, as a non Angular team official or affiliate…

My Answer

First, the question has a good point.

The “Core” naming came from Microsoft’s plans to make everything in the new ecosystem “Dot Net Core”-first.

Microsoft always tried to make the point for people that ASP.NET 5 is a “Version 1” product, that is neither neither as version-complete or as mature as ASP.NET 5.
This is way before the rename to ASP.NET Core 1.

Maturity And Meaning Of Upgrade

The Angular team has a different vision. They have confidence that they transferred all their lessons developing Angular 1 into the development of Angular 2. Which is why they really feel it is an upgrade.

They want people to move to Angular 2 automatically, not to feel that they are back into the “framework selection” process again.

I bet the Angular 2’s ideal world is one where they can stop Angular 1 support as soon as they release Angular 2. Except they definitely won’t, so that they don’t let they users down.

Naming Is Hard

As the ASP.NET team themselves always said, naming is a Marketing issue rather than a technical issue. It’s not simple. Everyone have different considerations when naming things.

Another example is Aurelia. Aurelia couldn’t be just “Durandal Next”, because the name “Durandal” has been related to failure in people’s minds (after a failed kickstarter).

It is the opposite situation in the Angular case. It’s hard for it to be called anything else (even something that has the word “Angular” in it), because it needs to be interpreted as an upgrade.

This is, again, not what Microsoft wanted to communicate. They wanted the new name to convey their message that the new ASP.NET framework is NOT an upgrade.

It does not the experience of 15 years of work on the existing ASP.NET framework and add to it in a newer version. It’s a different, modern, lean framework, that is still in year 1.

You can see the contrast clearly.

The Standard Answer

A few others have also pointed out that as per Semantic Versioning, a major version number is acceptable for breaking changes.

I see that there is a difference between “Breaking Changes”, and a “new API surface”.

But there is no standard that tells you what to do in that case, so, the use of major version number (which is technically correct) is still sort-of reasonable.

There are many many patterns in versioning software, as Wikipedia explains.

What do you think?

Let me know in a comment below, or in an email, or tweet.

You Don’t Just Claim Authority Over “Standard” JavaScript

I stumpled upon a contraversial website called standardJS.com the other day.

Originally I didn’t bother the name until a friend on social media commented on it, and then I looked more into the naming.

The website offers some guidelines for writing JS. It tackles a lot of areas with common disagreements like banning semicolons and defining tabs as 2 whitespaces.

However, as the domain shows, this is called StandardJS.com!!

This quickly reminded me of another story

Standard Markdown

In 2014, Jeff Atwood, a celebrity also known as CodingHorror, decided after many frustrations with fragmentation of Markdown Flavors, to create a Standard Markdown flavor.

This is how it started: Standard Flavored Markdown

And This is How it ended: Standard Markdown is now Common Markdown

You see, Jeff, being a celeberity, got his project very popular by just creating it. This also caused the flame wars to go strong. And the expected outcome to happen.

You’d think this should be a good lesson for future Open Source Standard projects, but it wouldn’t be software if we don’t just re-implement the same mistake every few years, would it?

Standard JavaScript

Then there is standardJS.com thingy. The creator writes the following in the FAQ (emphasis mine):

Q: But this isn’t a real web standard!

A: Of course it’s not! The style laid out here is not affiliated with any official web standards groups, which is why this repo is called feross/standard and not ECMA/standard.

But the domain is NOT FerossStandardJS.com , it’s just StandardJS.com.

Even worse, there’s a static analysis NPM package, that is supposed to help enforce the guidelines in Pull Requests etc., for repositories that implement the standard.

Guess what’s the name of the npm package?

Correct, it’s standard (Yes, No JS even, it is THE Standard!)

“I Disagree” As a repository label

Of course several people tried to object to the naming, via the most appropriate Github way to object to things, project Issues.

They called claiming the word Standard as “Obnoxious”, “Misleading”, and plain “Arrogant”.

All issues discussing the name went into a Github Issues label called “I Disagree“.

Middleground

I tried to do it differently, and suggest just changing the non-constrained standardJS.com domain naming.

My issue was quickly closed with the same label (in about 11 minutes), thinking that it disagrees with the project naming.

Once I explained it was about the domain (once more), it was opened, and marked as a Question.

Here it’s: Abandon / Redirect standardjs.com domain to something else

Thinking About It

The whole thing is a bit weird though. Isn’t?

One doesn’t just declare standard over NPM or JS without being in the official authorities for these. io.js didn’t call itself StandardNodeJS, even though it had old NodeJS contributors in its committee.

Am I crazy to think that we should have gone past this kind of issues?

Writing An Angular2 Component in Today`s JavaScript (ES5) – Beta Edition

With a lot of changes happening since Alpha 48 all the way to Alpha 55 (later labeled as Beta 0 as well), the way you write components in general, even in plain JavaScript has changed from what might have seen in other posts.

Then the beta was out. Learn about it here:
http://angularjs.blogspot.com.au/2015/12/angular-2-beta.html

For a hello-world app at least, things didn’t change in beta than in Alpha 55, here’s how to do it.

Loading Angular 2

Here are all the files we’ll need:

If you played with Angular 2 alphas and JavaScript before, you’d have seen some Angular.sfx.*.js files. sfx used to refer to “self extractable”, meaning you don’t need a package manager to use it. It got renamed to umd, which I assume is like “Universal Module Dependency”.

Also, some parts were extracted from the core, like zone.js, the, the magic that saves you from things like scope digest cycle in Angular 1, into an angular2-polyfills.js file.

Finally, Reactive Extensions, a library that Angular 2 uses to replace promises and more, was extracted from Angular main bundle as well, while still copied to the CDN, as Rx.umd.js.

So, the steps to get what files to load:

I’m assuming if you are using ES5, you don’t want to even bother with NPM. So, I set the steps based on that.

  1. Go to AngularJS CDN https://code.angularjs.org
  2. Search for 2.0.0 and find the highest version folder. For example 2.0.0-beta.0.
  3. Look for the following files in the folder, and use them in order:
    1. Rx.umd.js
    2. angular2-polyfills.js
    3. angular2-all.umd.dev.js

This will give you the ng global variable, which is what we will you to define and bootstrap our components.

You will later want to include things like the “http” file and “router” file to use their corresponding functionalities.

Defining A Component

There are two ways we can use to define components in JavaScript:

Static Property

This should be familiar to you if you ever tried to write object oriented code in ES5:

  • You define poor-man’s class, ES5 style, as a function (the convention is to use PascalCasing for these).
  • You set a field called annotations on the function itself to be like a static class property. It’s the equivalent of attributes/annotations used in TypeScript.
  • You add the ng.core.Component annotation.
    That’s where you include the selector, template and other component properties just like in TypeScript. Except in ES5 you don’t have multi-line strings.

    • Note the PascalCasing. It’s another class.
    • The selector is almost always an element CSS selector. A custom element typically is lowercased with at least one hyphen - in it, like hello-world, which maps to <hello-world> in our HTML.
    • The template is just like the template in an Angular 1 directive (except with Angular 2 template syntax). You can also use templateUrl.
  • A couple of gotchas:
    • Note the part ng.core.Component. This is due to Angular splitting it’s code into different parts like “core”, “common”, “compiler”, “platform”, etc.
    • If you miss the new in there, it won’t work, and you will be scratching your head for quite a bit.

Fluent API

This tries to get even closer to TypeScript. It’ll either make you feel you have TypeScript already, or make you die to move to it!

  • Notice the same ng.core.Component explained above
    • Gotcha: This time do NOT use new before it. Actually it will NOT work if you add new. Beware of this gotcha.
  • After that, you use Angular’s own Class class (pun intended).
    • The “constructor” field maps to the function in the first example.
    • Gotcha: You MUST add a constructor even if it’s just an empty function, or else it will not work.

Data Binding

This is worth its own article. For simplicity, let’s look at a simple ng-model example:

  • We used the two-way data binding syntax [(property)]=value.
    • the syntax [attribute]=”value” is used to bind from JS objects to DOM attributes and other directive attributes.
    • The syntax (eventName)=”handler” is used to bind from the DOM (like DOM events), to a JS function that handles the change/event.
    • As [] means JS => DOM, () means DOM => JS. [()] is used for 2-way data binding.
  • We said ngModel, not ng-model. This is a relatively recent and controversial Angular 2 change, that all component DOM attributes (Angular components or custom components), will use the camelCasing, instead of hyphen-separated (also known as kebab-casing).
  • In earlier Alphas, you needed to set a directives property to your component to use ngModel, ngFor, ngIf, etc. These are no longer required.
    (If you don’t know what that is, it’s dead anyway. Don’t bother for now)

Bootstrapping The Component

OK, let’s say we wrote the above components, and we want to use them. How would we do that?

The convention in Angular 2 is to have an application component. Something like:

  • Note that for us to include other custom components in our template, we had to add them to another property, called “directives”.
    We didn’t have to do this for the built-in things like ngModel.

Then in HTMl, we use the app component:

  • It’s another Angular convention to put the default UI (like a loading indicator) inside the app component.
    Angular 2 will replace that with your template when it loads it.

Now, to make the magic happen, you need:

  • If you don’t know DOMContentLoaded event, you probably were doing a lot of jQuery. This is the standard equivalent of the jQuery “ready” custom event.
  • If you did this in previous alphas, you might notice that part ng.platform.browser.bootstrap.
    • I mentioned earlier that Angular2 functionality has been split into different parts. plaftorm is one of them (this is like a namespace in C#/Java – the convention for namespace casing is camelCasing).
    • Since you can use AngularJS with even something that is not HTML at all (like NativeScript for native mobile UI), that’s why (I guess) we need to select the “browser” platform to bootstrap it.

And that’s it. You get a nice application running!

Full Example

Here’s a complete application for easier read:

[Solved] Ionic Cordova Does Nothing (Shows No Error) After Build Or Run On Node 5.0

I had an interesting issue with Ionic recently. When I run
ionic platform add ios (or any other platform), I see a good message suggesting it added some hooks successfully…

But when I run ionic build ios or ionic run ios (or emulate), I get no output at all. Nothing happens. No emulator opens in the case of run/emulate.

It also wasn’t specific to ios. Same with android and browser.

I found that Cordova had an issue with NodeJS 5.0 and NPM 3.x, which I have installed recently. Googling online suggested people kept going by reverting to NodeJS 4.x.

What Didn’t Work

The Cordova problem was supposedly solved in Cordova 5.4.0. I installed that (just npm install Cordova as it’s the latest at the moment), but this caused me to get random NodeJS execution errors instead of getting no output.

Well, at least that was feedback. Hooray for progress!

Solution

I didn’t want to give up and go back to NodeJS 4.x, so I tried the following, and it worked :)

At this point I tried ionic platform add ios,
ionic build ios, and ionic run ios

And they all just worked as expected :)

Notes For The Careful Observer

  • I already had latest NodeJS before running the commands, as confirmed by brew upgrade NodeJS (Yes, my test was on Mac), which has NPM 3.3.9.
    But I updated NPM (which got me NPM 3.3.12) just as a random step while troubleshooting the problem. It could well be not necessary to get this working.

  • In the commands above I remove Phonegap but don’t install it again. It’s not because I suspect it’s involved. I was just being extremely cautious.
    I didn’t show installing it again because it’s not required for getting Ionic/Cordova to work again, but it’s sure is safe to install again.

xperience went.

P.S.

There is a problem with XCode tools for Mac OS El Capitan that causes an error to show up when you run the emulator (like ios emulate ios).

The error is safe to ignore as long as the last line of the output was
** RUN SUCCEEDED **, and the emulator actually opens and shows your app.

Apart from that, iOS emulator seems to be miles ahead of Android in terms of speed etc. Says me, the Android-only owner!

Now To You…

Let me know if that helped you, and your own e

Selenium Bindings For NodeJS Made Easy(ier) With TypeScript Async/Await

In previous post I described how I used TypeScript with Babel to get my JavaScript Selenium tests to be executed by Node.

I wanted to dedicate this separate post to an example of the Selenium code that I wrote, because there are many tricks and gotchas that need your full attention.

That’s mainly around the use of async/await of course. Instead of write a paragraph about each piece of the code, I have embedded my points in the code itself.

The sample simply goes to the Angular2 Github repository, and reports the title and date of the first page of open issues in the repository.

Prerequisites

In case you wonder, here are the packages used above, in a single NPM install command

This doesn’t involve the build configuration to get this compiled and running.

Check out my other post to learn how to setup the build for this.

Finally, I hope those two articles combined help you write your own asynchronous code with ease, with Selenium or any other purpose.