Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore

57 %
43 %
Information about Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore

Published on March 12, 2014

Author: CodeCore

Source: slideshare.net


Kevin Moore has worn many hats. Program manager. Project manager. People manager. Evangelist. Software engineer. He started programming at 9 and was building web software professionally at 15. Spent 6 years at Microsoft working on Microsoft Windows and Windows Presentation Foundation as a Program Manager. He became a recognized expert in component design and implementation for user interfaces and provided software consulting and freelancing services targeting Open Source web technologies. He is now the Dart program manager at Google.

He ran a workshop on DART at CodeCore for CodeCore's Community Week

#dartlang 2014-02-01 j832.com Licensed under http://creativecommons.org/licenses/by-nc/3.0/us/

#dartlang Me Iowa Microsoft Freelance Dart Google j832.com

#dartlang ✔ Improved productivity ✔ Increased performance

#dartlang Compile to JavaScript, runs across the modern web


#dartlang Run Dart on the server with the Dart VM

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

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

#dartlang Apps start small, but grow and scale

#dartlang Simple syntax, ceremony free class Hug { Familiar

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

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

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

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

#dartlang main() => print('Hello, World!');

#dartlang Clean semantics and behavior

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

#dartlang Missing getter? "hello".missing // ?? Class 'String' has no instance getter 'missing'. NoSuchMethodError : method not found: 'missing' Receiver: "hello" Arguments: [] Logical

#dartlang String compared to number? 'hello' > 1 // ?? Class 'String' has no instance method '>'. Logical

#dartlang Variable scope? var foo = 'top-level'; main() { if (true) { var foo = 'inside'; } print(foo); // ?? What will this print? } top-level Logical No hoisting

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

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

#dartlang var button = new ButtonElement(); button.id = 'fancy'; button.text = 'Click Point'; button.classes.add('important'); button.onClick.listen((e) => addTopHat()); parentElement.children.add(button); Yikes! Button is repeated 6 times! Too many buttons

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

#dartlang Inline initialization parentElement.children.add( new ButtonElement()..text = 'Click Point');

#dartlang One of these things is not like the other Object Persistable Hug Hug is not is-a Persistable Don't pollute your inheritance tree!

#dartlang Don't inherit, mixin! Object PersistableHug Mixin

#dartlang Mixins abstract class Persistable { save() { ... } load() { ... } toJson(); } class Hug extends Object with Persistable { Map toJson() => {'strength':10}; } main() { var embrace = new Hug(); embrace.save(); } Extend object & no constructors? You can be a mixin! Apply the mixin. Use methods from mixin.

#dartlang Context switching considered harmful, Iterate quickly

#dartlang Demo Pop, Pop, Win!


#dartlang 700+ packages

#dartlang Demo New Dart Project + Packages

#dartlang Compile Dart to JavaScript with dart2js

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

#dartlang Our challenge ... clean semantics and unsurprising behavior without extra checks when compiled to JavaScript






#dartlang Old 'n busted New hotness <messages> <message> <subject> Please fill out the TPS report </subject> <sent>2012-10-03</sent> <summary> I'm going to have to ask you to come in... </summary> </message> <message> <subject> Reminder: fill out that TPS report! </subject> <sent>2012-10-04</sent> <summary> It's been 24 hours... </summary> </message> ... </messages>

#dartlang <custom-element> Structure Behavior Styles <div> <input> <p> <span></span> </p> </div> tag.verifyAccount(); <style> p { color: red; } </style> Encapsulated

#dartlang Reusable Custom Element HTML Page import import import HTML Page HTML Page

#dartlang Data binding Data model DOM Nodes Data model DOM Nodes

#dartlang ShadowDOM HTML Imports <template> Custom Elements New web specifications Future proof

#dartlang Polymer.dart (today) Using web components today

#dartlang Custom elements everywhere! <body> <persistable-db dbname="game" storename="sologames"></persistable-db> <game-assets></game-assets> <game-app></game-app> <google-signin clientId="250963735330.apps.googleusercontent.com" signInMsg="Please sign in"></google-signin>

#dartlang Angular is ported to Dart!

#dartlang <div my-controller> <div class="well"> <click-counter count="{{ctrl.count}}"></click-counter> </div> </div> Angular and Polymer together Polymer element Angular controller

#dartlang Dart in production

#dartlang "Dart allows for quick prototyping as well as robust code that is easy to refactor" - Soundtrap

#dartlang "Dart's familiar language, and cohesive set of libraries, allowed the team to start building very quickly." - Montage

#dartlang "Dart offers a sane and consistent development experience for modern web applications." - Blossom

#dartlang "The source code for this game (Escape) is 20% smaller compared to the ActionScript version (69.6 KB vs 86.5 KB). The port took only 6 hours." -- Author of StageXL

#dartlang #dartlang Export Flash movies/games to Dart from Flash Pro

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

#dartlang TC52 to standardize Dart language

#dartlang Ready to get started? Write a Dart app! dartlang.org/codelabs/darrrt/

#dartlang Dart - for the modern web ● Platform you can use today ● Easy to get started - dartlang.org ● Compiles to JavaScript

#dartlang Thanks! j832.com

#dartlang presentations

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Dart - Scalable, productive app development

Get Started . Learn Dart in ... Follow this code lab to create a Dart web app, even if you've never written ... The Dart development tools do not ...
Read more

Dart: Your First-Class Upgrade to Web Development - YouTube

... for a holistic overview of the Dart language. If you're looking to get ... Dart for the modern web developer ... Angular.Dart + Polymer.Dart ...
Read more

What is Dart? – O’Reilly Radar

You can also use Dart to scale your development ... We encourage you to learn more about Dart, ... Get the O’Reilly Web Platform Newsletter.
Read more


Meteor is a full stack JavaScript Platform that takes care of everything you need to build web ... Angular Meteor developer you ... learn how you can get ...
Read more

Dart News & Updates

If you’ve ever used Observatory for debugging or profiling your Dart ... they learn a lot about using: patterns (they get to know in ... Kevin Moore at
Read more

Frequently Asked Questions (FAQ) | Dart

Frequently Asked Questions (FAQ) ... from JavaScript-based web development? If people like Dart and ... you need sound typing information to get high ...
Read more

WEB.DE - E-Mail-Adresse kostenlos, FreeMail, De-Mail ...

Über die WEB.DE Homepage finden Sie nicht nur Zugang zu Ihrem Webmailer, ...
Read more

Adventures in Angular by DevChat.tv on iTunes

Download past episodes or subscribe to future episodes of Adventures in Angular by ... the Face of Web Development ... Learning Resources: Get your ...
Read more