Tuesday, December 15, 2015

Angular 2 Beta

We're ecstatic to announce that we've reached Angular 2 Beta.  You can read about many of the improvements over Angular 1 in a recent post.  Get started learning Angular 2 now at angular.io.

What does 'beta' mean?

Beta means we're now confident that most developers can be successful building large applications using Angular 2.

Through developer preview and alpha we've worked closely with several large projects here at Google including AdWords, GreenTea (Google's internal CRM system), and Google Fiber.  In fact, just a few weeks ago we saw Google Fiber launch on their new Angular 2 code base.

Externally, we've worked closely with several other teams integrating with Angular 2 including Ionic Framework on Ionic 2, Telerik on NativeScript, Rangle.io on Batarangle, and many others.

We've incorporated the majority of feedback from these teams that would create breaking changes.  Given this, we're looking forward to other teams developing in earnest and telling us how we can help.

Getting Started

Get going now with the updated and expanded Quickstart and Tutorial on angular.io.  From there, you can check out several developer guides and a handy cheatsheet covering the main features in Angular 2.

While the many in-progress Angular 2 books and courses will likely take a few weeks to catch up to the latest changes, we can recommend taking a look at the clear explanations and examples on the thoughtram blog and this in depth primer on Angular 2.

Upgrading from Angular 1

You may have an Angular 1 app today and you want to start writing Angular 2 code in that app, without changing your working/tested angular 1 code. This is where ngUpgrade comes in.

While you can upgrade apps in a "big bang" approach where you halt production until everything is rewritten, we're supporting two paths for where teams want to upgrade their Angular 1 apps to Angular 2.

ngUpgrade

We know many of you made large investments in Angular 1 and have created some awesome apps. We created ngUpgrade for all of you to make it possible to leverage your existing apps and move forward with Angular 2.

ngUpgrade lets you mix Angular 2 into your existing Angular 1 application.  You'll get to take advantage of Angular 2's improved speed and APIs immediately as you replace components a bit at a time over the course of your releases.  Learn more in this article from thoughtram and the upgrade guide in our docs.

ngForward

Some teams, with apps that are more sensitive to download size, will want to avoid having both Angular 1 and Angular 2 libraries running in their app simultaneously.  For this, we have ngForward which lets you write Angular 1 applications in the syntax of Angular 2.  This lets your team get used Angular 2 conventions and styles in your apps today and shorten the distance to doing the full upgrade to Angular 2 when you're ready.

Providing Feedback

As always, please submit issues via GitHub, questions on Stack Overflow, and join the live conversation on Gitter.

We've also recently added a mechanism for submitting feedback for all pages.  Just click on the exclamation point icon in the upper right of the page and tell us what could be improved.

What comes next?

We're already hard at work on the set of improvements to move Angular 2 to its full and final release.  While we will make many small improvements, the big ones for final are:

  1. Reducing Angular 2's payload size.
  2. Making the Angular CLI usable end to end throughout the development process.
  3. Creating a more developer-friendly route definition and link API for the Component Router.
  4. Support for animations.
  5. I18n and L10n support.


And there are even more cool things to come -- some we've already started on including:

  1. More documentation, particularly around ES5/ES6 usage.
  2. Even better startup and runtime performance
  3. An architectural style guide
  4. Unit and end-to-end testing improvements
  5. More support for mobile web and installable mobile apps
  6. Material Design components for Angular 2
  7. A tools platform for deep IDE support
  8. Better support for ES6 and Babel

Thanks, and we're looking forward to seeing the apps you build appear on madewithangular.com!

Monday, December 14, 2015

Angular Material 1.0 Now Available!

The thirty two (32) Core UI components that make up the Angular Material 1.0 library are officially released and ready for you to put them to work in your AngularJS applications.

Thanks to the many contributors, from both Google and the open-source community, who worked through the release candidate shakedown cruise over the past weeks. We built this for and with our developer community. Your help has been invaluable in finding and resolving the many fine details and workflow improvements that made our 1.0 production release possible in 2015.

We are delighted to see so many people already using ngMaterial in production applications, and hope you will hop on-board this stable 1.0 release. Let us know what you think.

We have also updated our documentation and CodePen samples. Full documentation and embedded demos are available at http://material.angularjs.org.

What makes 1.0 different from our pre-release builds?

  • Stable CSS and API surface.We're now confident in the API for these components and do not plan any breaking changes.
  • Supported platforms: Tested on IE 11+, Chrome, Safari, Firefox, Android 4.2+ and iOS 8+.
  • Angular 1.5-ready. You can use AngularJS 1.3 and later, but as soon as you update to the new release, you can be confident that ngMaterial components will continue to work as expected.
  • For full details on breaking changes since 0.11 and prior release candidate builds, see our CHANGELOG on github.

What's next?

We will continue posting bug fixes and non-breaking changes to version 1.0 on a regular basis, working through the known issues in our Github queue. The next bugfix release will be 1.0.1.

We've begun work on a 1.1 release for early 2016, which will improve on the payload size by making Layout a separate library and improving upon known flexbox browser issues. We'll also continue adding to the list of official components, keeping pace with the official Material Design specification as it evolves. And in 2016, we will start to add major improvements and features for Material animations, transitions, and adaptive layouts.

Separately, we've also started work on Angular Material 2.x, which is the Angular 2 complement to Angular Material 1.0. 

Tuesday, December 8, 2015

Building Mobile Apps with Angular 2 and NativeScript


Hi! I’m TJ from the NativeScript team at Telerik. We’ve been working with the Angular team for the greater part of this year to integrate Angular 2 into NativeScript, which together let you write native iOS and Android apps using your existing web and Angular knowledge. In this article I’m going to cover what NativeScript is, why we’re using Angular, and how it all works. If you’re interested, read on!

What’s NativeScript?

NativeScript is an open source JavaScript framework that lets you build native mobile apps from a single code base. NativeScript works by leveraging JavaScript virtual machines—e.g. JavaScriptCore and V8—to create a bridge between the JavaScript code you write and the native APIs used to drive the native application. As a quick example check out the following code:

var myAlert = new UIAlertView();
myAlert.message = "NativeScript rocks!";
myAlert.show();

This is JavaScript code, yet NativeScript instantiates the Objective-C-based iOS UIAlertView control shown below:


And because we know that no web developer wants to learn iOS- and Android-specific APIs like UIAlertView, we offer a large suite of JavaScript modules that abstract the iOS and Android details into simple-to-use JavaScript APIs. For instance, the UIAlertView-based code block above could be rewritten using the NativeScript dialogs module:

var dialogs = require("ui/dialogs");
dialogs.alert({ message: "NativeScript rocks!" });

This same dialogs.alert() call also gives you the following android.app.AlertDialog for your Android app:

Although the dialog example is purposely simple, this same technique can be used to build incredibly robust and gorgeous apps, by utilizing the native iOS and Android UI components that are already available and mature. The best way to see what’s possible with NativeScript is to download our kitchen sink app on your iOS or Android device. You can also peruse our showcase page to see some of the many NativeScript-built apps in the app stores already.

Where does Angular come in?

One of our guiding principles when building NativeScript was to allow developers to leverage their existing skills. As such, NativeScript lets you write your app logic in JavaScript or TypeScript, style your app using a subset of CSS, leverage npm modules, and even use native iOS and Android libraries. So, it seemed logical for us to extend this skill reuse to another library developers know and love: Angular!

At Telerik we’ve long been fans of Angular. We first shipped Angular integration in our popular Kendo UI library nearly two years ago, and we continue to see a ton of demand for Angular from our community. But integrating Angular 1 into NativeScript was impossible, as Angular 1 was tightly coupled to the DOM.... and in NativeScript there is no DOM or browser; NativeScript UIs are native UIs.

Enter Angular 2.

One of Angular 2’s biggest architectural changes was decoupling the Angular framework from the DOM. Whereas Angular 1 was limited to browser-based environments, Angular 2 opened the door a number of different rendering possibilities, including NativeScript. And since earlier this year, we’ve been holding weekly meetings with the Angular team to turn this vision into a reality.

How does it work?

If you know Angular 2, you already know a lot of what you need to know to use Angular 2 in NativeScript. The one big difference is that browser-based elements such as <div> and <span> are not available—instead, you must use NativeScript’s UI components to build your interfaces. Let’s look at an example.

NativeScript apps are primarily made up of three types of files: JavaScript or TypeScript files (for logic), XML files (for defining UI components), and CSS files (for styling). If you create one of each of these files with the same name—e.g. main.js, main.xml, and main.css—NativeScript knows to use the files as a unit. For instance, here’s the full code you need to build the dialog example presented earlier in this article—notice the use of `"loaded"` to tie the XML and JavaScript files together.

<!-- main.xml -->
<page loaded="loaded"></page>

/* main.js */
var dialogs = require("ui/dialogs");
exports.loaded = function() {
    dialogs.alert({ message: "NativeScript rocks!" });
};

Normally in a NativeScript app, your next step would be adding a bunch of UI components to your <page> in main.xml—components like <slider><switch>, and <tab-view>. But with Angular 2 in the picture you can build your UI using the Angular 2 component APIs. Here’s an updated version of main.js (this time built with TypeScript), that shows how to build a “Hello World” page with NativeScript and Angular 2. Look over the code below quickly, and then we’ll break it down in detail.
Note: Using Angular 2 in NativeScript currently requires TypeScript, which is why I’m writing the code below in TypeScript rather than JavaScript. In a future release we will remove this limitation and let you use JavaScript directly.
// main.ts
import {nativeScriptBootstrap} from "nativescript-angular/application";
import {Component, View} from "angular2/angular2";

@Component({})
@View({
  directives: [],
  template: `
    <stack-layout>
      <button text="Hello World"></button>
    </stack-layout>
  `
})
class HelloPage {}

export function loaded() {
  nativeScriptBootstrap(HelloPage);
}

If you’ve built anything with Angular 2 before most of this code will look familiar. There are really only two differences to note:
  • nativeScriptBootstrap() vs. bootstrap()
    • In an Angular 2 web app, you call the bootstrap() function in the "angular2/angular2" module to initialize your components. In NativeScript apps you need to call nativeScriptBootstrap(), which is a lightweight wrapper of bootstrap() that does some NativeScript-specific initialization.
  • The UI components in the template
    • In an Angular 2 web app your “Hello World” button example would probably be rendered as <div><button>Hello World</button></div>. But in NativeScript apps you need to use XML widgets that NativeScript is able to render in native mobile apps. This example uses a <stack-layout> element, which is the simplest of NativeScript’s layouts, and places a single <button> element within it. Here’s how those controls render on iOS and Android.


         

What else can you do?

Once you have the basics down you can really start to leverage your existing web and Angular skills. For instance, want to change the look of your button? Just apply any of NativeScript’s supported CSS properties. For instance, if I add button { color: red; } to my app’s main.css file, I get a button that looks like this:

         

Want to add some behavior to the button? Just add a tap handler using Angular 2’s event binding mechanism. The following code alters the previous main.ts example to show an alert when the app’s button is tapped:

import {nativeScriptBootstrap} from "nativescript-angular/application";
import {Component, View} from "angular2/angular2";
import {dialogs} from "ui/dialogs";

@Component({})
@View({
    directives: [],
    template: `
        <stack-layout>
            <button
              (tap)="showAlert()"
              text="Hello World"></button>
        </stack-layout>
    `
})
class HelloPage {
    showAlert() {
        dialogs.alert({ message: "NativeScript rocks!" });
    }
}

export function loaded() {
    nativeScriptBootstrap(HelloPage, []);
}

There’s a whole lot more you can do in a NativeScript app—like using npm install to add JavaScript utility libraries to your app, installing NativeScript plugins to add some powerful native functionality, or trying out NativeScript’s rich animation APIs to move UI elements around the screen—but let’s take a minute to step back and consider why we’re taking this approach to building apps in the first place.

The benefits of using NativeScript and Angular 2


The examples presented in this article have been purposely simple to introduce basic concepts, but think of how much work you’d have to do to build these simple Android and iOS apps using traditional native development approaches. For iOS you’d have to launch Xcode, drag a UIButton control onto a Storyboard, figure how to change that button’s text, and use outlets in Xcode to tie your button to an event handler written in Objective–C or Swift. On Android you’d have to figure out how to accomplish the same tasks in a completely different environment (Eclipse or Android Studio).

With NativeScript and Angular 2 you can build that same button in a few lines of code; you can write that code in JavaScript/TypeScript; you can place that button in an Angular 2 component; you can style that button with CSS; you can install JavaScript modules to help you out from npm; and at the end of the day you only have one code base to maintain. This is why we’re excited about NativeScript—it brings a familiar web tool set to the native app world.

And it gets even better. In addition to skill reuse—aka being able to write native apps with JavaScript—using Angular 2 in NativeScript opens up one other cool possibility: the ability to share code between your web and native apps. After all, NativeScript code is just JavaScript code, so as long as that code isn’t tied to the DOM, there’s no reason that code can’t run in NativeScript. And with Angular 2 support coming to NativeScript, you even have the potential to share your Angular components. Let’s look at an example.

Sharing code between web and mobile apps


Suppose you need to write a simple checkbox component for your next Angular app. For your web app you might use the following TypeScript to implement the component:

import {Component, View, EventEmitter} from "angular2/angular2";

@Component({
    selector: "checkbox",
    templateUrl: "checkbox.html",
    input: ["checked"],
    output: ["click"]
})
export class Checkbox {
    public click: EventEmitter = new EventEmitter();
    public checked: boolean = false;

    public onClick(): void {
        this.click.next(this.checked);
    }
}

Above I define a component with a single checked input (or property) and a single click output (or event). I use Angular’s templateUrl option to define the component’s template in an external file named checkbox.html. That file contains the following HTML:

<input type="checkbox" [checked]="checked" (click)="onClick()">

Here’s where things get cool though. Now suppose that you want to make this component work on your NativeScript iOS and Android apps. What code would you have to change?

Only the template.

Seriously, that’s it. All you need to do is define how your component gets rendered on each platform—web and native. For instance, continuing the previous example, to get this code working in NativeScript you only need to swap out the contents of checkbox.html. The version of the template below uses the NativeScript <switch> widget:

<switch [checked]="checked" (tap)="onClick()"></switch>

By using two different templates, your component can now render on three platforms—the web, iOS, and Android. Here’s what that looks like visually:


It gets even better. NativeScript actually includes support for a few common web APIs, most notably XMLHttpRequest and fetch() This support means you can write your components for the web, and let NativeScript translate these APIs to native code for your mobile apps. As one example, because of NativeScript’s XMLHttpRequest support, Angular 2’s HTTP component works out of the box in NativeScript already. Here’s what that looks like visually:


Obviously not all code makes sense to share across all platforms, and you’ll certainly want to fork your code in places to handle individual platforms separately. But at the very least NativeScript and Angular can help you share code for the mundane things in your app—such HTTP calls and model objects—and in certain cases you may want to share entire interfaces.

We’re excited about the potential this architecture provides to the Angular world, and we can’t wait to see what you build with it.

Awesome! When will this be ready?

Our Angular integration is currently in an alpha state, much like Angular 2 itself. If you’re the type of developer that likes digging in early, head to https://github.com/NativeScript/nativescript-angular and follow the instructions in the README to get up and running. You may also want to check out our TodoMVC example, or Sebastian Witalec’s presentation on NativeScript and Angular 2 from Angular Connect—each have more advanced examples of NativeScript and Angular 2 in action.

Long term, our Angular integration will roughly follow Angular 2’s own release schedule; therefore, you can expect a stable release of NativeScript’s Angular integration around Angular 2’s own stable release date.

But although NativeScript’s Angular integration is in an alpha state, NativeScript itself is a production-ready framework being used to develop a wide variety of apps today. If you’re interested in learning more, take an hour and go through the NativeScript getting started guide. You’ll build a functioning iOS and Android app, and learn whether NativeScript makes sense for your next development project.

If you want to keep up to date with the latest with our Angular integrations, bookmark our weekly meeting notes document, and follow @nativescript on Twitter for updates. If you’re looking for help, or want to chat with others in the NativeScript community, head over to our Google Group. Overall, we’re excited about bringing Angular 2 to a new mobile world, and we hope you are too.