Monday, November 30, 2015

How Google Uses Angular 2 with Dart

Dan Grove and Kevin Moore from the Dart team are guest blogging this week on how Google uses Angular with the Dart language.  Enjoy!  - Brad

Google is always busy building new web apps, and recently a lot of that development is using Angular 2 for Dart. Just last week, the Google Fiber team launched Google’s first production Angular 2 app, written in Dart. Take a look at their just-launched Angular 2 for Dart app:


fiber.png


The Fiber team has lots of company within Google - Angular 2 for Dart is being quickly adopted by many other Google teams.


Dart is an open-source development platform from Google that makes web and mobile development more productive. The Dart language is a concise yet expressive language that’s familiar to developers coming from Java, C#, ActionScript, and JavaScript. The Dart platform gives you an instant edit-debug cycle, great core libraries, a canonical package manager, a powerful semantic analyzer, and IDE support via IntelliJ IDEA and WebStorm. You can run Dart code compiled to JavaScript on all modern browsers.


We’ve worked closely with the Angular team as they’ve developed Angular and Angular 2, and we’ll be working together going forward. The Angular team’s initial experiences with Dart shaped many different aspects of Angular 2—for instance, Angular 2’s new change detection system and template compilation. Both of these features dramatically sped up Angular 2 for both JS and Dart with 3x faster startup and 2.5x faster rendering than Angular 1. This sort of speedup makes a big difference for our users, especially on the mobile web.


We started our collaboration with the Angular team by working on Google’s internal CRM application, Greentea. The Angular team built the initial version of Angular 1 for Dart as Greentea was built, providing lots of feedback to the Dart team. By working with the Greentea team and the Angular team, we were able to make large improvements in Dart compilation to JavaScript, Dart-JavaScript interop, and IDE support for Dart.


Once Greentea was up and running, the Angular team started working on Angular 2. We’re thrilled to have Dart as a first-class language for Angular 2. Beyond Google Fiber, teams that have publicly announced that they’re currently moving to Angular 2 for Dart include:


  • Greentea, Google’s internal CRM system.
  • Google AdWords, the largest advertising system at Google.


The Google Fiber team told us that they chose Angular 2 for Dart because “Our engineers were highly productive as their projects scaled to many engineers. Dart’s support for strong typing, its object-oriented nature, and its excellent IDE integration really worked for us.”


We're continuing to improve the tools for writing and deploying apps that use Angular 2 for Dart. For instance, we’re adding Dart Analyzer support for Angular 2 templates, which will allow navigation and refactoring across Angular 2 templates and Dart code. We’re also dramatically cutting the JS that’s output by the Dart2JS compiler—“Hello, World” is down to 82KB gzipped, and we’re continuing work to slice that further.


We hope that sharing our experience will convince you to give Angular 2 for Dart a try. Angular 2 for Dart is available for you to try as a Developer Preview now—take a spin through the Angular 2 Getting Started tour now!

Dan Grove and Kevin Moore for the Dart team

Wednesday, November 25, 2015

AngularJS 1.5.0-beta.2 and 1.4.8 have been released


Hey everyone. We have recently released two new versions of AngularJS and we have some details and some new features to discuss.

AngularJS 1.5.0-beta.2

With AngularJS 1.5.0-beta.2, we’ve improved the performance and flexibility of Angular 1 while still maintaining reliability and functionality for existing applications. This version contains numerous weeks worth of fixes, documentation upgrades and performance improvements. 1.5.0-beta.2 also introduces a number of new features which should give a strong motivation for you to upgrade. The new features are as follows:

module.component

We have created a more simplistic way of registering component directives. In essence, components are special kinds of  directives, which are bound to a custom element (something like “<my-widget></my-widget>”), with an associated template and some bindings. Now, by using the .component() method in AngularJS 1.5, you can create a reusable component with very few lines of code:

var myApp = angular.module("MyApplication", [])
myApp.component("my-widget", {
 templateUrl: "my-widget.html",
 controller: "MyWidgetController",
 bindings: {
   title: "="
 }
});

To learn more about the AngularJS 1.5 component method please read Todd Motto's article:
http://toddmotto.com/exploring-the-angular-1-5-component-method/
ng-animate-swap
Another feature that may interest you is the new directive called ng-animate-swap. This new directive’s purpose is to animate a collection of DOM changes together as a container swap. By using the ng-animate-swap directive, you can trigger Angular to animate an “old” block away and animate in a “new” block via leave and enter animations respectively.

Let’s imagine that we have a banner image on a webpage that is tied to an expression like so:

<div class="banner-container">
 <img ng-src="{{ currentBannerImage }}" />
</div>

Now if we change currentBannerImage value to another banner, the image will be updated to reflect the new banner image. But if we wanted to animate the old banner away and then animate the new one in we would would have to do something complicated like set up a repeated list of banners and cycle through.

By using ng-animate-swap we can do this without having to change our template code around:

<div class="banner-container">
 <img ng-src="{{ currentBannerImage }}"
      class=”animate-banner”
      ng-animate-swap="currentBannerImage" />
</div> Now whenever the currentBannerImage expression changes there will be a leave and an enter animation, which we can hook into via CSS or JS animations using ngAnimate.

.animate-banner.ng-enter, .animate-banner.ng-leave {
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:100%;
 transition:0.5s ease-out all;
}
.animate-banner.ng-enter {
 top:-100%;
}
.animate-banner.ng-enter-active, .animate-banner.ng-leave {
 top:0;
}
.animate-banner.ng-leave-active {
 top:100%;
}




What's great about ng-animate-swap is that we can apply it to any container for which we want to render a visual animation, whenever its associated data changes. In the example below, the user-container div is animated whenever the userId on the scope changes.
<div class="user-container" ng-animate-swap="userId">
 <h2>{{ title }}</h2>
 <p>{{ description }}</p>
 <ol>
 <li ng-repeat="attribute in attributes">
   {{ attribute }}
 </li>
 </ol>
</div>

Multi-slot transclusion

The third feature that we’re showcasing is multi-slot transclusion. This allows for pieces of the transcluded HTML to be placed into different parts of a directive’s template. Regular transclusion is useful to project outer content into the template of a component, but with multi-slot transclusion we can take this a step further. Consider a component called <autocomplete-widget>, which collects data from the user and displays the results, where the application developer is allowed to provide the HTML for the input and the results.

<autocomplete-widget>
<!-- inputArea -->
<input type="text"
      ng-model="app.search"
      placeholder="Search..." />

<!-- resultsArea -->
<results>
 <div ng-repeat="item in app.getResults(app.search) as results">
   {{ item }}
 </div>
 <div ng-if="results.length==0">
   No results found
 </div>
</results>
</autocomplete-widget>


Now what we want to do here is to transclude the inputArea and resultsArea at specific places in the component's template. Prior to named transclusion, the transclusion would be projected at only one place in the template of the autocomplete-widget. However, with multi-slot transclusion, we can do something like this:

<!-- autocomplete-widget-tpl.html -->
<div class="autocomplete-container">
 <div class="search-area">
   <div class="search-icon">
     <i class="fa fa-search"></i>
   </div>
   <div class="search-input" ng-transclude="inputArea"></div>
 </div>
 <div class="results-area">
   <div ng-transclude="resultsArea"></div>
 </div>
</div>


And here is what the component code for that looks like:

.component('autocompleteWidget', {
 templateUrl: 'autocomplete-widget-tpl.html',
 transclude: {
   input: 'inputArea',
   results: 'resultsArea'
 }
});




To learn more about multi-slot transclusion please read this article by Pascal Precht:

AngularJS 1.4.8

We’ve also been fixing bugs and performance upgrades within the AngularJS 1.4 ecosystem. Once 1.5.0 is fully released then we will only continue to do security patches for the 1.4.x versions therefore please upgrade to 1.5.0 once it is available.

Release Notes & Contributions

These two releases contain lots of commits; everyone has been very busy. If you’re interested in reading the release notes for both of the new versions, below are two links that point to the AngularJS CHANGELOG for both the 1.4 and 1.5 releases:




AngularJS v1.4.8


A special thanks to the talented list of developers who helped put these two grand releases together:


Alexandr Gureev, Alicia Lauerman, Andrew Austin, Bert Verhelst, Charlie-Hua, Chris J. Lee, Donghwan Kim, Doug Krugman, Eric Lee Carraway, Flavio Corpa Ríos, Georgii Dolzhykov, Georgios Kalpakas, Jack Viers, Jakub Torbicki, Jason Bedard, Jason Hopper, John Zhang, JonyD, Kuzminov Aleksandr Sergeevich, Leonardo Borges Avelino, Lucas Galfaso, Lucas Mirelmann, Magnus Pedersen, Marcy Sutton, Martin Staffa, Matias Niemelä, Matthew Hill, Michael George Attard, Michael Salmon, Nuri Hodges, Pablo Villoslada Puigcerber, Peter Bacon Darwin, Raghav, Richard Harrington, Risan Bagja Pradana, Ryan Hart, Sam Rawlins, Shahar Talmi, Sreenivasan K, Stanislav Komanec, Stephen Sauceda, Steve Mao, Stian Jensen, Stu Cox, Sugan Krishnan, jody tate, koyner, luckylooke, mzdunek93, rrsivabalan, sevdog, spoonraker, zurin

As of this release, AngularJS 1.5 is feature complete. The next step from here on will be getting things ready for the full 1.5.0 release around the start of 2016!

Thursday, November 12, 2015

Highlights from AngularConnect 2015

Highlights from AngularConnect 2015 

We've just had our fall conference at AngularConnect in London where we made many announcements about progress in both Angular 1 and Angular 2.  All videos and slide decks are now available for you.

For a quick read, we've summarized the main announcements here.

The short list

Angular 1


  • Growth: Angular 1 continues its stellar growth with over 1.1M developers worldwide.  
  • ngUpgrade: You can seamlessly mix and match Angular 1 with Angular 2 by using the ngUpgrade library.
  • ngForward: In addition to ngUpgrade, you'll be able to write Angular 1 apps in Angular 2 syntax using ngForward.
  • Angular Material: Our release candidate for Angular Material 1.0 brings material design to Angular 1 with flex layout and 30+ easy-to-use, accessible, responsive components. 
  • Support: We'll be continuing support for Angular 1 so long as the majority of developers use it.  We've made 32 releases this year with new features, bug fixes, and performance improvements.  Upcoming release include new features in components, routing, i18n, and animation.  

Angular 2


  • Speed: Angular 2 is dramatically faster than Angular 1 with support for fast initial loads through server-side pre-rendering, offline compile for fast startup, and ultrafast change detection and view caching for smooth virtual scrolling and snappy view transitions.
  • Browsers: Angular 2 supports IE 9, 10, 11, Microsoft Edge, Safari, Firefox, Chrome, Mobile Safari, and Android 4.1+.
  • Cross-platform: By learning Angular 2, you'll gain the core knowledge you'll need to build for a full range of platforms including desktop and mobile web, hybrid and native UI mobile installed apps, and even installable desktop applications.


Continue reading for all the details and links to resources.

Angular 1

The Angular 1 community continues to grow.  From our best estimate, there are over 1.1 million developers (based on 30-day unique visitors to angularjs.org).  You can check out many of the fantastic applications created with Angular on madewithangular.com with apps from Google, airlines, retail, finance and more.

Our plan is to continue support for Angular 1 until the majority of developers have moved to Angular 2.  We'll track use by the number of unique visitors to angularjs.org (Angular 1) and angular.io (Angular 2).  At the moment, 93% of developers visit angularjs.org.

In addition to several features planned for version 1.5 like component syntax and multi-slot transclusion, we'll release some of the most exciting features for both Angular 1 and Angular 2.  These include:

  • Component Router:  The new Component Router includes features for complex desktop apps like sibling and nested routes, modals, and mobile-style pop-over routes, lifecycle hooks, and simplified serialization -- all with an easy, declarative syntax similar to the current router.  Check out Brian's talk for more details.
  • Internationalization:  Making great apps for all your users means tailoring it for their language and locale.  Our new i18n library supports language-specific gender and cardinality transformations and a build-time string translation that ensures great performance and integrates with external translation service workflows.
  • Animation:  Our new ngAnimate library improves your ability to bring engaging motion to your apps.  With full programmatic control of sequencing and staggering, you can create rich and sleek animation choreographies in very few lines of code and make parent / child animations that are simple and versatile.  Watch Matias and Rob's talk or just checkout these samples:


Angular 2

Though we continue to invest in Angular 1, we've pushed the features possible within its architecture about as far as we can.  Angular 2 represents growth in capabilities.  Where Angular 1 focused on developer productivity in a framework, Angular 2 expands scope to include a full platform capable of multiple languages, templating syntaxes, and renderers providing for a cross-platform development environment with ability to expand to other scenarios.

You can get a taste of Angular 2 in the Getting Started talk, where we build a simple app and demonstrate how many Angular 1 paradigms work in an Angular 2 context.

Performance


  • Angular Universal. Getting your first view to your users is critical to keep their attention.  Angular Universal eliminates the wait time in downloading and parsing your app's JavaScript by pre-rendering the first view on the server-side.  Watch this video from AngularConnect or see this amazing demo of integration with ASP.NET.
  • One-time and offline compile.  In Angular 1, template compilation can happen many times during an application's life.  Angular 2 moves compilation to app start-up time making this much more efficient.  Coalescing compilation paves the way for a soon-to-be-released feature where compilation happens during a build step and no longer happens in the browser, making startup faster.
  • Ultrafast change detection.  In Angular 2 we wanted to ensure that change detection would perform incredibly well from the largest desktop applications down to apps on low memory devices like phones.  For raw performance, we ensure that all code generated by change detection can be inlined by JavaScript VMs and that it uses very little memory to avoid garbage collection.  Change detection itself is 10x faster than Angular 1 with apps seeing overall 2.5x faster rendering than Angular 1.
  • View caching.  By retaining data structures we've used in constructing the first view of the app, we're able to make subsequent renderings incredibly fast at over 4x faster than Angular 1.  This is critical in repeaters, when doing virtual scrolling or revisiting whole views your user has already seen. [Update since AngularConnect: we've identified a new rendering strategy that makes even cold-start scenarios faster than Angular with view cacheing.  We may use only this new strategy in the near future]
  • Web Workers.  Though it's only at an experimental stage, we're excited by the potential of our new ability to run all of your code and most of Angular in a separate process via Web Workers.  And though very early, we're anticipating benefits in pause-free application performance, live debugging across multiple browsers, and more.  If you only have time to watch one video from AngularConnect, make it this one on Web Workers.

Languages

While you can use any of the over 100 compile-to-JavaScript languages available with Angular 2, there are a few choices that we believe are most appealing and that we'll support in our documentation.

  • ES5: Also known as "today's JavaScript" (soon to be "yesterday's JavaScript"). It's the language that runs in all browsers today, many of us know it already, and it requires no compiler.  An easy, safe choice that most of us use with Angular 1.
  • ES6: EcmaScript 2015, or ES6, is the next official release of the JavaScript specification. Though partially supported in modern browsers, real application deployments will require a compile step to use ES6 for many real application deployments.  ES6 contains many attractive core language improvements that make development safer, more efficient, more interoperable, and more readable.  Though a compile step is required, ES6 is a superset of ES5 meaning all the code you've written today works in ES6 allowing you to add its features a bit at a time.
  • TypeScript: TypeScript builds on ES5 and ES6 by adding optional types to JavaScript.  Like ES6, you can run all your existing ES5 and ES6 code with the TypeScript compiler and add types a bit at a time.  Using types gives you tremendous productivity gains in code navigation, large-scale refactorings, documentation, and finding errors.  We've developed Angular 2 in TypeScript and are able to generate versions of our library for ES5, ES6, and Dart.  Check out the two talks on What's new in TypeScript and TypeScript tooling for greater productivity.
  • Dart: Dart is an open source language built by Google with different syntax and semantics than ES5, ES6, and TypeScript.  Like ES6 and TypeScript, Dart also has classes and optional types. It's favored by several teams at Google, like AdWords, who prefer a more Java-like syntax.  Learn more at dartlang.org.

Better Syntax

While directives in Angular 1 are a powerful and intuitive way to reuse code, the syntax has grown organically and can be complex.  For Angular 2, we've simplified this both in template syntax and by having simplified declarations for Components which combine a template directive with controller logic in one reusable building block.

Support for Functional Reactive Programming (FRP)

Many apps in Angular 2 will use Angular 1 style data models and an MVC design pattern.  At the same time, we see quite a few folks in our developer community excited about using FRP designs already popular in systems like ClojureScript's OM framework, Elm, and Flux.

In Angular 1 you can set up $watches between any sets of data in your app to monitor changes.  While this can be an easy and natural way of developing, we've seen it be hard to debug and potentially cause bugs in large applications.  Angular 2 implements a unidirectional data flow where changes always propagate from parent components to their children.  This benefits you whether or not you're using FRP as it's slightly faster and is easier to debug as you always know where changes are coming from.

We're also using Observable data structures via the Rx.js library throughout Angular 2 as a better model for managing streams of data like events or processing data coming from servers.  Additionally, Angular 2 change detection supports both Rx.js and Immutable.js and gives you even more headroom to scale large data sets in your applications.

For more on benefits of Rx.js, check out RxJS In-Depth and Angular 2 Data Flow.

Command Line Interface

We want to eliminate friction from your development tools and processes through a new command line interface tool called Angular-CLI.

Modern front-end development usually involves many tools to manage build (Gulp, Grunt, Broccoli, WebPack), language transpilation (TypeScript, Babel), CSS processing (Sass, Less), minification (Uglify, Closure Compiler), and more.  Starting a new project requires that you install, configure, and maintain these as your project evolves.

Angular-CLI's goal is to take you from initial project set-up by scaffolding files for your app all the way through to adding components, services, tests, setting up continuous integration and finally deploying your app.  All through a simple set of extensible commands.

Additionally, we're building Angular-CLI on top of a service that can easily be called by IDEs or other tools to provide the same experience through other interfaces.

It's still early days for Angular-CLI, but come check it out at github.com/angular/angular-cli.  We welcome feedback and would love to get more community contributors helping with it.

Batarangle

Angular 1 has the Batarang Chrome plugin to help with debugging and analyzing running Angular apps.  For Angular 2, the Rangle.io team is building the next generation tool for inspecting your apps, debugging, and focusing on performance improvement.

Watch the video or install and check it out for yourself at rangle.io/batarangle.

Cross Platform

Looking beyond desktop web applications, our goal is to ensure that Angular 2 works very well for mobile web, hybrid, and native applications.

  • Mobile Web: We're supporting no-install mobile apps in several ways.  With server-side pre-rendering (Angular Universal), you'll get fast first-page views even on 2G networks.  We'll help with the UI via Angular Material with components designed to work on tablets and phones.  We're also hoping to improve UI responsiveness with Web Workers to ensure data processing and garbage collection never interrupt your application with pauses or hiccups.
  • Hybrid: Ionic Framework has been incredibly popular on Angular 1 for developers wanting to maximize reuse in both skills and code across web and installable apps.  We've worked with the Ionic team to ensure we can ship Angular 2 and Ionic 2 together as closely as possible.  You can check out Ionic 2 at ionic.io/2 and watch the video on Building cross-platform apps with Ionic 2.
  • Native: For folks who want to build an Angular 2 mobile app but really need native UI components on Android and iOS, we've worked with folks on Telerik's NativeScript project to give you direct access to all native APIs via JavaScript.  Watch the video on Building native mobile apps with Angular 2 and NativeScript.


We can achieve many of these goals because we've made many of Angular 2's parts easily replaceable.  With our integration in NativeScript and React Native we're using a different template language and native elements as the rendering target.  We've heard rumblings that folks in the community may work on WebGL and TVML implementations as well.  We're excited to see what others may come up with.

Looking towards the future, we'd like to also provide support for installable desktop applications through Electron.  Check out this example from Angular 1 for an idea of where this could go.

Upgrading to Angular 2

ngUpgrade

If you're happy with Angular 1, you're good to go.  For those teams who want to take advantage of Angular 2's new capabilities, we want to make the transition as smooth and easy as possible.

The ngUpgrade library helps with this by letting you integrate Angular 2 components into Angular 1 apps.  The benefit is that you can upgrade your app one component at a time and never having to pause shipping releases.
You can see a detailed examples of doing this migration on the Thoughtram blog on Upgrading apps to Angular 2 using ngUpgrade.

ng-forward

For people who want to start writing Angular 1 code using Angular 2 conventions and styles, the ng-forward provides the perfect platform.

The project contains ES7/TypeScript modules, decorators and helpers to provide syntactic sugar around Angular 1.x's modules, services and directives. It is designed to get you as close as possible to writing Angular 2 like code in Angular 1.

For more information and how to get started using this project, check out its GitHub repository.

Supported Browsers

Thanks to great work by our collaborators at Amadeus, Angular 2 supports:

  • Modern browsers like Chrome, Edge, Firefox, and Safari
  • Legacy ones like Internet Explorer version 9, 10, and 11
  • Phones and tablets running Mobile Safari and Android versions 4.1+

Tools, Libraries, Books, and Training

We know that shipping Angular 2 alone won't be sufficient to create a successful environment for your great apps. We're overwhelmed with the wonderful support we're seeing from other companies in developing support for Angular 2.


The road to release

Adoption at Google

We've selected a few teams at Google to build apps on Angular 2 as partners in proving developer productivity and scalability to large applications.

  • Google Fiber.  These folks started working with Angular 2 very early.  We've worked together on performance, app size, and browser compatibility.  We've recently given them the green-light to ship their Angular 2 version.  We're excited to see it in production soon. [UPDATE: This is now launched!  You can see it for yourself.]
  • GreenTea.  Google's internal CRM app used by all of the Ads sales teams.  With hundreds of thousands of lines of code and over 500 UI components, the GreenTea team is busily porting to Angular 2 and will ship early in 2016.
  • AdWords. With hundreds of developers and millions of lines of code, AdWords represents our biggest Google customer yet.  They've been tremendous partners in pushing our team on features and performance scale to one of Google's biggest apps.  They've built several Angular 2 proof of concept apps and are now hard at work on the next version of AdWords in Angular 2.

Beta and final release

We're very close to our Beta release for Angular 2 on their projects.  You can track our progress towards this via our Beta 0 milestone on GitHub.

New docs

Though we do recommend waiting for the beta release, we think it's a fine time to start getting your feet wet with Angular 2.  We've created several new docs to get you going including a cheat sheet so you can quickly come up to speed on the syntax, concepts docs, a testing guide, there's an easily searchable (though incomplete) set of API docs, and a new tutorial that will walk you through building your first Angular 2 application.