"> " /> ">

Presentation Angular on Dart

Learn how to build "heroic" apps with Angular and Dart. Use Dart's structured language and libraries with Angular's components and data binding. See real code and examples that blend the best of Dart and Angular. This session is for any developer that wants to build for the web with productive tools, familiar language, and modern web frameworks.

Speakers


PDF: slides.pdf

Slides

JFokus 2014

JFokus 2014 #dartlang #angular

Jasmine

Jasmine Docs PhantomJS Docs dest templates Docs moment.js Docs "I justwant to "Hi, I want to build aweb write web apps!" app" Modernizr Docs jQuery Docs Backbone Marionette Docs Backbone Docs require.js Docs #dartlang #angular

Packages

Packages "Things are consistent and clear." Intl Angular Unit test Dart SDK #dartlang #angular

"We rewrote Google's internal CRM app in 6

"We rewrote Google's internal CRM app in 6 months, from scratch, with Dart and Angular." - Internal team at Google #dartlang

Lightning Tour

Lightning Tour #dartlang #angular

#dartlang #angular

#dartlang #angular

#dartlang #angular

#dartlang #angular

Dart Principles

Dart Principles Productivity Performance Scalability #dartlang #angular

#dartlang #angular

#dartlang #angular

#dartlang #angular

#dartlang #angular

Tree shaking

Tree shaking imports main baz Library calls foo bar boo dart2js main foo bar #dartlang #angular

Simple syntax, ceremony free

Simple syntax, ceremony free class Hug { Familiar #dartlang #angular

Simple syntax, ceremony free

Simple syntax, ceremony free class Hug { num strength; Hug(this.strength); Terse #dartlang #angular

Simple syntax, ceremony free

Simple syntax, ceremony free class Hug { num strength; Hug(this.strength); Hug operator +(Hug other) { Operator overriding return new Hug(strength + other.strength); } #dartlang #angular

Simple syntax, ceremony free

Simple syntax, ceremony free class Hug { num strength; Hug(this.strength); Hug operator +(Hug other) { return new Hug(strength + other.strength); } void patBack({int hands: 1}) { // ... Named, optional params w/ default value } #dartlang #angular

Simple syntax, ceremony free

Simple syntax, ceremony free // ... Hug operator +(Hug other) { return new Hug(strength + other.strength); } void patBack({int hands: 1}) { // ... } One-line function String toString() => "Embraceometer reads $strength"; } #dartlang #angular

Simple syntax, ceremony free

Simple syntax, ceremony free // ... Hug operator +(Hug other) { return new Hug(strength + other.strength); } void patBack({int hands: 1}) { // ... } String interpolation String toString() => "Embraceometer reads $strength"; } #dartlang #angular

Simple syntax, ceremony free

Simple syntax, ceremony free main() { var hug = new Hug(10); } #dartlang #angular

Simple syntax, ceremony free

Simple syntax, ceremony free main() { var hug = new Hug(10); var bigHug = hug + new Hug(100); } #dartlang #angular

Simple syntax, ceremony free

Simple syntax, ceremony free main() { var hug = new Hug(10); var bigHug = hug + new Hug(100); bigHug.patBack(hands: 2); } #dartlang #angular

Simple syntax, ceremony free

Simple syntax, ceremony free main() { var hug = new Hug(10); var bigHug = hug + new Hug(100); bigHug.patBack(hands: 2); print(bigHug); // Embraceometer reads 110 } #dartlang #angular

Method Cascades

Method Cascades var button = new ButtonElement(); button.id = 'fancy'; button.text = 'Click Point'; button.classes.add('important'); button.onClick.listen((e) => addTopHat()); parentElement.children.add(button); #dartlang #angular

Method Cascades

Method Cascades var button = new ButtonElement() ..id = 'fancy' ..text = 'Click Point' ..classes.add('important') ..onClick.listen((e) => addTopHat()); parentElement.children.add(button); #dartlang #angular

Callable objects

Callable objects class Registrator { class Registrator { doIt(User user) { … } call(User user) { … } } } var reg = new Registrator(); var reg = new Registrator(); reg.doIt(user); // implied! reg(user); // just call it #dartlang #angular

Annotations

Annotations @Extreme(ftw: true) class Awesome { @upHigh int highFives; } #dartlang #angular

Clean semantics and behavior

Clean semantics and behavior #dartlang #angular

Clean semantics and behavior

Clean semantics and behavior Examples: ● Only true is truthy ● There is no undefined, only null ● No type coercion with ==, + ● Throw error on missing method #dartlang #angular

Scope of this?

Scope of this? class AwesomeButton { AwesomeButton(button) { button.onClick.listen((Event e) => this.atomicDinosaurRock()); } atomicDinosaurRock() { /* ... */ Lexical this } } #dartlang #angular

Scalable structure

Scalable structure library games; import 'dart:math'; import 'players.dart'; Packages class Darts { Libraries Functions Classes // ... } class Bowling { // ... } Mixins Interfaces Player findOpponent(int skillLevel) { // ... } #dartlang #angular

Scary Async

Scary Async catService.getCatData("cute", (cat) { catService.getCatPic(cat.imageId, (pic) { imageWorker.rotate(pic, 30, (rotated) { draw(rotated); }); 4 levels }); deep! }); #dartlang #angular

The Future looks bright

The Future looks bright catService.getCat("cute") // returns a Future .then((cat) => catService.getCatPic(cat.imageId)) .then((pic) => imageWorker.rotate(pic, 30)) .then((rotated) => draw(rotated)) .catchError((e) => print("Oh noes!")); #dartlang #angular

#dartlang #angular

#dartlang #angular

Angular Principles

Angular Principles Boilerplate D.R.Y. Structure Testability #dartlang #angular

Structure: Model-View-Controller

Structure: Model-View-Controller
  • View (DOM) Observes Notifies RAM Model (Dart Objects) Manages Controller (Dart Objects) #dartlang #angular

    Model:

    Model: View: Controller: class Person { String name; }
    Hi, {{ctrl.person.name}}
    @NgController( selector: '[person]', publishAs: 'ctrl' ) class Controller { Person person = new Person(); Controller() { person.name = 'Bob'; } } (demo controller) #dartlang #angular

    Controllers

    Controllers ● Expose model to view ● Handle user interaction ● Update model to change the view #dartlang #angular

    Expressions

    Expressions ● {{ The stuff inside your markup }} ● Like Dart, but eval'd against the current scope ● No complex logic like loops or throws #dartlang #angular

    Expression Examples

    Expression Examples ● person.name ● shoppingCart.total() ● cart.total() - user.discountRate #dartlang #angular

    Feature: Data Binding

    Feature: Data Binding hello.dart person.name = 'Bob'; hello.html {{ person.name }} // 1-way // 2-way (demo simple_hello_world) #dartlang #angular

    Note: Binding for initial page load

    Note: Binding for initial page load Markup fine except for first page

    {{someObj.something}}

    Use ng-cloak to avoid unstyled content on load

    {{someObj.something}}

    Attribute form also avoid unstyled content on load

    (demo simple_hello_world_with_cloak) #dartlang #angular

    Feature: Directives

    Feature: Directives
    (demo repeat_bind_click) #dartlang #angular

    Note: Directive validation

    Note: Directive validation
    #dartlang #angular

    View Templates

    View Templates Directives Markup {{ }} Automatic sanitization Filters #dartlang #angular

    Feature: automatic sanitization

    Feature: automatic sanitization String userInput = "" + "

    I am safe

    "; querySelector('#contents').innerHtml = userInput; // Result:

    I am safe

    #dartlang #angular

    Filters

    Filters

    {{ name | reverse }}

    Filters can take parameters

    {{ amount | currency:us }}

    Filters can chain

    {{ msg | embiggen | shoutify }}

    #dartlang #angular

    Filter example: Reverse

    Filter example: Reverse @NgFilter(name: 'reverse') class Reverser { String call(String input) { if (input == null) return ''; return input.split('').reversed.join(''); } } (demo reverse_filter) #dartlang #angular

    Feature: Dependency Injection

    Feature: Dependency Injection Definition @NgInjectableService() class Users { … } Usage class Login { Users users; Login(this.users); module..type(Users)..type(Login); (demo service_injection) #dartlang #angular

    Principle: Eliminate boilerplate

    Principle: Eliminate boilerplate Dependency Injection PODO Models, Controllers, etc No DOM in most code paths #dartlang #angular

    Feature: Injectable HTTP client

    Feature: Injectable HTTP client @NgInjectableService() class Users { Http http; [ {"username": "Bob"}, {"username": "Alice"} ] Users(this.http); Future> getUsers() { return http.get('users.json').then((resp) { return (resp.data as List).map((u) => new User.fromJson(u)).toList(); }); } } HTTP client aware of response types. (demo http) #dartlang #angular

    Feature: Routes

    Feature: Routes Left Nav Header Content View #dartlang #angular

    Routes

    Routes directive as content placeholder RouteInitializer configures: ● Controller ● Template ● URL #dartlang #angular

    Routes

    Routes class AppRouteInitializer implements RouteInitializer { init(Router router, ViewFactory view) { router.root ..addRoute( name: 'overview', path: '/overview', defaultRoute: true, enter: view('views/overview.html')) ..addRoute(name: 'analytics', path: '/analytics', enter: view('views/analytics.html')); } } #dartlang #angular

    Listening to Route changes

    Listening to Route changes @NgDirective( selector: '[active-when-route]' ) class CurrentRoute { Router router; Element element; CurrentRoute(this.element, this.router) { router.onRouteStart.listen((e) { toggleActive(); }); } (demo routing) #dartlang #angular

    Feature: Components

    Feature: Components First appearance in AngularDart Controller Template Shadow DOM Custom element name aka "web components light" #dartlang #angular

    #dartlang #angular

    #dartlang #angular

    Components

    Components @NgComponent( selector: 'rating', templateUrl: 'packages/ng_rating/rating.html', cssUrl: 'packages/ng_rating/rating.css', publishAs: 'cmp' ) class RatingComponent { @NgTwoWay('rating') int rating = 0; (demo rating_angular_component) #dartlang #angular

    Putting it all together

    Putting it all together (demo angularpiratebadge) #dartlang #angular

    Angular and Polymer, sitting in a DOM tree,

    Angular and Polymer, sitting in a DOM tree, B-i-n-d-i-n-g. First comes elements, Then comes components, Then comes the interop with the node dot bind. #dartlang #angular

    Angular

    Angular directives dependency injection testing support data binding routing server communication Foundation: Shadow DOM, Templates, Custom Elements, ... #dartlang #angular

    Angular

    Angular Polymer directives dependency injection testing support base view data binding layout routing widgets server communication polyfills Foundation: Shadow DOM, Templates, Custom Elements, ... #dartlang #angular

    #dartlang #angular

    #dartlang #angular

    Resources

    Resources Tools Docs Libraries Books MySQL Postgres Redis MongoDB ~700 in pub #dartlang #angular

    #dartlang #angular