Want to dive even deeper?

Take the course Building a Road Using Civil 3D by Seth Cohen and become an expert!
Building a Road Using Civil 3D
by Seth Cohen

Check it out!
You're watching a preview of this video, click the button on the left to puchase the full version from Paris JUG.

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.


Published on
  • 3.154
  • 7
  • 2
  • 15
  • 0
  • JFokus 2014 #dartlang #angular
  • 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 "Things are consistent and clear." Intl Angular Unit test Dart SDK #dartlang #angular
  • "We rewrote Google's internal CRM app in 6 months, from scratch, with Dart and Angular." - Internal team at Google #dartlang
  • Lightning Tour #dartlang #angular
  • #dartlang #angular
  • #dartlang #angular
  • Dart Principles Productivity Performance Scalability #dartlang #angular
  • #dartlang #angular
  • #dartlang #angular
  • Tree shaking imports main baz Library calls foo bar boo dart2js main foo bar #dartlang #angular
  • Simple syntax, ceremony free class Hug { Familiar #dartlang #angular
  • Simple syntax, ceremony free class Hug { num strength; Hug(this.strength); Terse #dartlang #angular
  • 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 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 // ... 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 // ... 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 main() { var hug = new Hug(10); } #dartlang #angular
  • Simple syntax, ceremony free main() { var hug = new Hug(10); var bigHug = hug + new Hug(100); } #dartlang #angular
  • 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 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 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 var button = new ButtonElement() ..id = 'fancy' ..text = 'Click Point' ..classes.add('important') ..onClick.listen((e) => addTopHat()); parentElement.children.add(button); #dartlang #angular
  • 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 @Extreme(ftw: true) class Awesome { @upHigh int highFives; } #dartlang #angular
  • Clean semantics and behavior #dartlang #angular
  • 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? class AwesomeButton { AwesomeButton(button) { button.onClick.listen((Event e) => this.atomicDinosaurRock()); } atomicDinosaurRock() { /* ... */ Lexical this } } #dartlang #angular
  • 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 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 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
  • Angular Principles Boilerplate D.R.Y. Structure Testability #dartlang #angular
  • Structure: Model-View-Controller <div> <span> <ul> <li> View (DOM) Observes Notifies RAM Model (Dart Objects) Manages Controller (Dart Objects) #dartlang #angular
  • Model: View: Controller: class Person { String name; } <div person> Hi, {{ctrl.person.name}} </div> @NgController( selector: '[person]', publishAs: 'ctrl' ) class Controller { Person person = new Person(); Controller() { person.name = 'Bob'; } } (demo controller) #dartlang #angular
  • Controllers ● Expose model to view ● Handle user interaction ● Update model to change the view #dartlang #angular
  • 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 ● person.name ● shoppingCart.total() ● cart.total() - user.discountRate #dartlang #angular
  • Feature: Data Binding hello.dart person.name = 'Bob'; hello.html {{ person.name }} // 1-way <input ng-model='person.name'> // 2-way (demo simple_hello_world) #dartlang #angular
  • Note: Binding for initial page load Markup fine except for first page <p>{{someObj.something}}</p> Use ng-cloak to avoid unstyled content on load <p ng-cloak>{{someObj.something}}</p> Attribute form also avoid unstyled content on load <p ng-bind='someObj.something'></p> (demo simple_hello_world_with_cloak) #dartlang #angular
  • Feature: Directives <div ng-repeat='item in cart.items'> <span ng-bind='item.name'></span> <button ng-click='cart.delete($index)'> Delete </button> </div> (demo repeat_bind_click) #dartlang #angular
  • Note: Directive validation <div data-ng-repeat='item in cart.items'> <span data-ng-bind='item.name'></span> <button data-ng-click='cart.delete($index)'> Delete </button> </div> #dartlang #angular
  • View Templates Directives Markup {{ }} Automatic sanitization Filters #dartlang #angular
  • Feature: automatic sanitization String userInput = "<script>I CAN HAZ XSS</script>" + "<p>I am safe</p>"; querySelector('#contents').innerHtml = userInput; // Result: <div id="contents"> <p>I am safe</p> </div> <!-- No <script> tag --> #dartlang #angular
  • Filters <p>{{ name | reverse }}</p> Filters can take parameters <p>{{ amount | currency:us }}</p> Filters can chain <p>{{ msg | embiggen | shoutify }}</p> #dartlang #angular
  • 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 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 Dependency Injection PODO Models, Controllers, etc No DOM in most code paths #dartlang #angular
  • Feature: Injectable HTTP client @NgInjectableService() class Users { Http http; [ {"username": "Bob"}, {"username": "Alice"} ] Users(this.http); Future<List<User>> 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 Left Nav Header Content View #dartlang #angular
  • Routes <ng-view> directive as content placeholder RouteInitializer configures: ● Controller ● Template ● URL #dartlang #angular
  • 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 @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 First appearance in AngularDart Controller Template Shadow DOM Custom element name aka "web components light" <components> #dartlang #angular
  • #dartlang #angular
  • 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; <rating max-rating="5" rating="item.rating"></rating> (demo rating_angular_component) #dartlang #angular
  • Putting it all together (demo angularpiratebadge) #dartlang #angular
  • 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 directives dependency injection testing support data binding routing server communication Foundation: Shadow DOM, Templates, Custom Elements, ... #dartlang #angular
  • Angular Polymer directives <polymer-element> dependency injection testing support base view data binding layout routing widgets server communication polyfills Foundation: Shadow DOM, Templates, Custom Elements, ... #dartlang #angular
  • #dartlang #angular
  • Resources Tools Docs Libraries Books MySQL Postgres Redis MongoDB ~700 in pub #dartlang #angular
  • <thank-you!> #dartlang #angular
User is not allowed