SlideShare a Scribd company logo
1 of 30
London Ajax User Group


             Chris Buckett
This is Dart…
 A language
 And a tool ecosystem
 For creating complex webapps
 In teams

 Single threaded
    But isolates provide "shared-nothing" concurrency
 Optionally typed
 Runs in a Browser Virtual Machine
 Or a Server Virtual Machine
 Can be converted to JavaScript
Technical Preview…
 What you may see today, may change tomorrow…


 Enable us (as potential end users) to influence the
 language and provide feedback

 Eventual goal is standardization
Why Dart…
 What do Google build?
 Single page web-apps    Browser
    Instant search       Apps
    Docs
    Google Plus           Server
    Blogger               side
    Analytics             APIs
    Maps
    … etc …
Why Dart?
 Complex applications
 Team development
 Easily “toolable”
        //process a & b.
        function process(a,b) {
          return a+b;
        };


        document.write(process(1,2,3));
        document.write(process("Hello", " World"));
        document.write(process({name:'objectA'},
                               {name:'objectB'}));
Why Dart – the alternatives?
 GWT
    Still around and will be driven by Google's use cases
 CoffeeScript
    Closer to JavaScript, syntax inspired by Ruby, Python
 JavaScript + Framework X
    The default option


 Dart is not a replacement, but an option.
Design Goals - Flexibility
 Flexible, but with structure

   Optional types provide flexibility


   Libraries to organize code


   Classes and Interfaces to provide structure


   Tools catch errors
Design goals - Familiar
 Be Familiar
    main() {
      var anInt = 1;
      var aStr = "String";
      var anObj = new Object();
      var result = doSomething(anInt,aStr,anObj);
    }

    doSomething(a,b,c) {
      return "blah";
    }
Design goals - Familiar
 Be Familiar
    void main() {
      int anInt = 1;
      String aStr = "String";
      Object anObj = new Object();
      String result = doSomething(anInt,aStr,anObj);
    }

    String doSomething(int a, String b, Object c) {
      return "blah";
    }
Design Goals - Perfomance
 Performance as a feature
    Currently not as fast as V8


    (But D8 is faster at launch than V8 was at launch)


    Converted JS should be as fast as or faster than
     equivalent hand written JavaScript.
Design goals
 Great developer       IDE
 experience


                        Dart     Dart
               Frog
                      Language   VM




                       Native
                       Browser
Dartium (Chromium with Dart VM)
Dart IDE (Lightweight Eclipse IDE)
Frog: Dart to JS Converter
#import('dart:html');

class MyApp {
  MyApp() { }

    void run() {
      write("Hello World!");
    }

    void write(String message) {
      document.query('#status').innerHTML = message;
    }
}

void main() {
  new MyApp().run();
}
Frog: Dart to JS Converter
//...snip library code...
// ********** Code for MyApp **************
function MyApp() {}

MyApp.prototype.run = function() {
  this.write("Hello World!");
}

MyApp.prototype.write = function(message) {
  get$$document().query("#status").innerHTML = message;
}

// ********** Code for top level **************
function main() {
  new MyApp().run();
}
Embed within HTML
<html>
<body>
  <script type="application/dart">
    main() {
       print("Hello Dart");
    }
  </script>
</body>
</html>

                      <html>
                      <body>
                        <script type="application/dart"
                                src="MyApp.dart"></script>
                      </body>
                      </html>
A quick tour of some interesting
      language features…
Dart: Classes and interfaces
   Familiar (to Java and C# developers)                 Optional
   But a couple of nice features                        paramters

    class Duck implements Quackable {
      var colour;

        Duck([this.colour="red"]) { }

        Duck.yellow() {                                Named
          this.colour = "yellow";                    constructors
        }
                                        //Usage
        String sayQuack() => "quack";
                                        var duck1 = new Duck();
    }
                                        var duck2 = new Duck("blue");
Unsurprising                Function    var duck3 = new Duck.yellow();
    this                   shorthand    print(duck3.sayQuack());
Dart: Classes and interfaces
 Familiar (to Java and C# developers)
 But a couple of nice features

     interface Quackable default Duck {
       String sayQuack();
     }




                                  //Usage
                                  var duck1 = Quackable();
Dart: Classes and interfaces
 All classes are also interfaces
    class Person implements Duck { … }
 Class properties can be interchanged with getters and setters
    duck.colour = "yellow"; //setter, or property?


    class Duck {
         var _colour;                   //private property

         get colour() => _colour;       //getter

         set colour(value) {            //setter
            _colour=value;
         }
     }
Dart: Libraries and Source
 Break up single source code file into multiple,
  independent files.    #library("myLibrary");

                        #import("./libs/otherLib.dart");

                        #source("./myFile1.dart");
                        #source("./myFile2.dart");

 Break logical parts of an app into libraries.
 Import your own and third party libraries.
 Privacy declarations apply at a library level
  (not a class level)
Dart: Optional Types
 Add documentation to code

 Documentation readable by humans and tools

 "Innocent until proven guilty"

 Types have no effect on the running application

         var i = 1;                 int i = 1;
         var s = "Hello";           String s = "Hello";
                      String i = 1;
                      int s = "Hello";   Probably wrong, but not
                                         proved to be wrong.
Dart: Optional Types
 Optional types can be useful in the early days of developing
  an app
class Person {
  sayQuack(){
     return "ouch…quack";
  }
}


pokeDuck(duck) {
  duck.sayQuack();
}

                        //Usage
 But is that what the
                        pokeDuck(new Duck());
  library designer
                        pokeDuck(new Person()); //runs fine
      intended?
Dart: Optional Types
 But as you add structure, types can help you…
class Person {
  sayQuack(){
     return "ouch…quack";
  }
}


pokeDuck(duck) {
  duck.sayQuack();
  duck.swimAway();
}
                         //Usage
 This now fails with a   pokeDuck(new Duck());
   noSuchMethod          pokeDuck(new Person()); //throws exception
      exception
Dart: Optional Types
 Adding type info provides documentation to tools and
  humans.
class Person {
  sayQuack(){
     return "ouch…quack";
  }
}


pokeDuck(Duck duck) {
   duck.sayQuack();
   duck.swimAway();
}
   Now the tools can     //Usage
  provide warnings (or   pokeDuck(new Duck());
    errors in checked    pokeDuck(new Person()); //tools warn
         mode).
Dart: noSuchMethod
 All classes can have a noSuchMethod method
class Person {
  sayQuack(){                            Similar to ruby's
     return "ouch…quack";                method_missing
  }

    noSuchMethod(name, args) {             Side note: Any
      if (name == "swimAway") {             object can be
        throw "I'm not really a duck";      thrown as an
      }                                       exception
    }
}
Dart: Functions
 Simple function syntax                      Different
    main() {                               syntax, same
                                               effect
         var myFunc = (a,b) {
            return a,b;
          }
                                            Functions as
         var myFunc = (a,b) => a+b;         arguments
         myFunc(a,b) => a+b;
         doSomething(c,d, myFunc);             Anonymous
         doSomething(c,d, (a,b) => a+b);        function
         var result = myFunc(101,202);
  }                                         Unsurprising
                                            function call
Libraries: Dart:html
 Client side library for interacting with the DOM
 Uses Dart constructs for DOM manipulation
       var foo = elem.query("#foo");       //return a foo
       var foos = elem.queryAll(".foo");   //list of foo


 Events:
       foo.on.click.add((event) {
          //do something
        });
Libraries: dart:io
 Server side libraries:
    Processes
    File IO
    Sockets
    Http Client & Server
Still a technical preview
 Time to get involved…
    www.dartlang.org
    Join the active mailing list
    Search #dartlang on Google +


 More still to be built
   Reflection!
   Libraries providing higher levels of abstraction:
        UI frameworks
        Server frameworks

More Related Content

What's hot

A Sceptical Guide to Functional Programming
A Sceptical Guide to Functional ProgrammingA Sceptical Guide to Functional Programming
A Sceptical Guide to Functional Programming
Garth Gilmour
 
A Gentle Introduction To Object Oriented Php
A Gentle Introduction To Object Oriented PhpA Gentle Introduction To Object Oriented Php
A Gentle Introduction To Object Oriented Php
Michael Girouard
 

What's hot (18)

Introduction To Groovy 2005
Introduction To Groovy 2005Introduction To Groovy 2005
Introduction To Groovy 2005
 
A Sceptical Guide to Functional Programming
A Sceptical Guide to Functional ProgrammingA Sceptical Guide to Functional Programming
A Sceptical Guide to Functional Programming
 
Dart
DartDart
Dart
 
Dart programming language
Dart programming languageDart programming language
Dart programming language
 
C# Advanced L03-XML+LINQ to XML
C# Advanced L03-XML+LINQ to XMLC# Advanced L03-XML+LINQ to XML
C# Advanced L03-XML+LINQ to XML
 
Kotlin
KotlinKotlin
Kotlin
 
Building DSLs with Xtext - Eclipse Modeling Day 2009
Building DSLs with Xtext - Eclipse Modeling Day 2009Building DSLs with Xtext - Eclipse Modeling Day 2009
Building DSLs with Xtext - Eclipse Modeling Day 2009
 
Andy On Closures
Andy On ClosuresAndy On Closures
Andy On Closures
 
Kotlin Developer Starter in Android projects
Kotlin Developer Starter in Android projectsKotlin Developer Starter in Android projects
Kotlin Developer Starter in Android projects
 
Let's Play Dart
Let's Play DartLet's Play Dart
Let's Play Dart
 
Coding for Android on steroids with Kotlin
Coding for Android on steroids with KotlinCoding for Android on steroids with Kotlin
Coding for Android on steroids with Kotlin
 
Xtext Eclipse Con
Xtext Eclipse ConXtext Eclipse Con
Xtext Eclipse Con
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
 
Design Patterns
Design PatternsDesign Patterns
Design Patterns
 
Google Dart
Google DartGoogle Dart
Google Dart
 
Dart the Better JavaScript
Dart the Better JavaScriptDart the Better JavaScript
Dart the Better JavaScript
 
A Gentle Introduction To Object Oriented Php
A Gentle Introduction To Object Oriented PhpA Gentle Introduction To Object Oriented Php
A Gentle Introduction To Object Oriented Php
 
The Xtext Grammar Language
The Xtext Grammar LanguageThe Xtext Grammar Language
The Xtext Grammar Language
 

Viewers also liked

QUALITY MANAGEMENT
QUALITY MANAGEMENTQUALITY MANAGEMENT
QUALITY MANAGEMENT
smcci
 
Projeto AN9 - Uberlândia
Projeto AN9 - UberlândiaProjeto AN9 - Uberlândia
Projeto AN9 - Uberlândia
Filipe Detrey
 
Tuning Sql Server for SharePoint--- Community Day Belgium 2013
Tuning Sql Server for SharePoint--- Community Day Belgium 2013Tuning Sql Server for SharePoint--- Community Day Belgium 2013
Tuning Sql Server for SharePoint--- Community Day Belgium 2013
Isabelle Van Campenhoudt
 
To g chapter season 2 chapter 6.cv
To g chapter season 2 chapter 6.cvTo g chapter season 2 chapter 6.cv
To g chapter season 2 chapter 6.cv
Max Kerkula
 
บทที่ ๔ สื่อการสอนและห้องเรียนภาษาไทยในฐานะภาษาต่างประเทศ
บทที่ ๔ สื่อการสอนและห้องเรียนภาษาไทยในฐานะภาษาต่างประเทศบทที่ ๔ สื่อการสอนและห้องเรียนภาษาไทยในฐานะภาษาต่างประเทศ
บทที่ ๔ สื่อการสอนและห้องเรียนภาษาไทยในฐานะภาษาต่างประเทศ
เจริญขวัญ นาคประดิษฐ์
 

Viewers also liked (20)

Sesión 4
Sesión 4Sesión 4
Sesión 4
 
QUALITY MANAGEMENT
QUALITY MANAGEMENTQUALITY MANAGEMENT
QUALITY MANAGEMENT
 
Projeto AN9 - Uberlândia
Projeto AN9 - UberlândiaProjeto AN9 - Uberlândia
Projeto AN9 - Uberlândia
 
Portfolio henderson a
Portfolio henderson aPortfolio henderson a
Portfolio henderson a
 
Examen sybase - Administration base de donnees
Examen sybase - Administration base de donneesExamen sybase - Administration base de donnees
Examen sybase - Administration base de donnees
 
Dat202 Techdays Paris 2015: PowerBI un an après
Dat202 Techdays Paris 2015: PowerBI un an aprèsDat202 Techdays Paris 2015: PowerBI un an après
Dat202 Techdays Paris 2015: PowerBI un an après
 
Tuning Sql Server for SharePoint--- Community Day Belgium 2013
Tuning Sql Server for SharePoint--- Community Day Belgium 2013Tuning Sql Server for SharePoint--- Community Day Belgium 2013
Tuning Sql Server for SharePoint--- Community Day Belgium 2013
 
To g chapter season 2 chapter 6.cv
To g chapter season 2 chapter 6.cvTo g chapter season 2 chapter 6.cv
To g chapter season 2 chapter 6.cv
 
Cycle Power BI Part1
Cycle Power BI Part1Cycle Power BI Part1
Cycle Power BI Part1
 
Smci
SmciSmci
Smci
 
Microsoft BI demystified: SharePoint 2016 BI or for PowerBI v2?
Microsoft BI demystified: SharePoint 2016 BI or for PowerBI v2?Microsoft BI demystified: SharePoint 2016 BI or for PowerBI v2?
Microsoft BI demystified: SharePoint 2016 BI or for PowerBI v2?
 
Relational databases & NoSQL databases
Relational databases & NoSQL databasesRelational databases & NoSQL databases
Relational databases & NoSQL databases
 
SharePoint 2016 les nouveautés / yosTour Lyon / Etienne Bailly | Benoit Jester
SharePoint 2016 les nouveautés / yosTour Lyon / Etienne Bailly | Benoit JesterSharePoint 2016 les nouveautés / yosTour Lyon / Etienne Bailly | Benoit Jester
SharePoint 2016 les nouveautés / yosTour Lyon / Etienne Bailly | Benoit Jester
 
บทที่ ๔ สื่อการสอนและห้องเรียนภาษาไทยในฐานะภาษาต่างประเทศ
บทที่ ๔ สื่อการสอนและห้องเรียนภาษาไทยในฐานะภาษาต่างประเทศบทที่ ๔ สื่อการสอนและห้องเรียนภาษาไทยในฐานะภาษาต่างประเทศ
บทที่ ๔ สื่อการสอนและห้องเรียนภาษาไทยในฐานะภาษาต่างประเทศ
 
SharePoint 2016 BI or PowerBI v2 - SharePoint Saturday Cambridge
SharePoint 2016 BI or PowerBI v2 - SharePoint Saturday CambridgeSharePoint 2016 BI or PowerBI v2 - SharePoint Saturday Cambridge
SharePoint 2016 BI or PowerBI v2 - SharePoint Saturday Cambridge
 
Présentation JSS2015 - Le Query Store de SQL Server 2016
Présentation JSS2015 - Le Query Store de SQL Server 2016Présentation JSS2015 - Le Query Store de SQL Server 2016
Présentation JSS2015 - Le Query Store de SQL Server 2016
 
PowerBI v2, Power to the People, 1 year later
PowerBI v2, Power to the People, 1 year laterPowerBI v2, Power to the People, 1 year later
PowerBI v2, Power to the People, 1 year later
 
Powerbi 365
Powerbi 365Powerbi 365
Powerbi 365
 
SQL Saturday 510 Paris 2016 - Query Store session - final
SQL Saturday 510 Paris 2016 - Query Store session - finalSQL Saturday 510 Paris 2016 - Query Store session - final
SQL Saturday 510 Paris 2016 - Query Store session - final
 
Unbreakable Sharepoint 2016 With SQL Server 2016 availability groups
Unbreakable Sharepoint 2016 With SQL Server 2016 availability groupsUnbreakable Sharepoint 2016 With SQL Server 2016 availability groups
Unbreakable Sharepoint 2016 With SQL Server 2016 availability groups
 

Similar to Dart structured web apps

JavaScript Growing Up
JavaScript Growing UpJavaScript Growing Up
JavaScript Growing Up
David Padbury
 
CSharp presentation and software developement
CSharp presentation and software developementCSharp presentation and software developement
CSharp presentation and software developement
frwebhelp
 
Smoothing Your Java with DSLs
Smoothing Your Java with DSLsSmoothing Your Java with DSLs
Smoothing Your Java with DSLs
intelliyole
 
Modeling Patterns for JavaScript Browser-Based Games
Modeling Patterns for JavaScript Browser-Based GamesModeling Patterns for JavaScript Browser-Based Games
Modeling Patterns for JavaScript Browser-Based Games
Ray Toal
 
Structured web programming
Structured web programmingStructured web programming
Structured web programming
ahfast
 

Similar to Dart structured web apps (20)

Bringing your app to the web with Dart - Chris Buckett (Entity Group)
Bringing your app to the web with Dart - Chris Buckett (Entity Group)Bringing your app to the web with Dart - Chris Buckett (Entity Group)
Bringing your app to the web with Dart - Chris Buckett (Entity Group)
 
JavaScript Growing Up
JavaScript Growing UpJavaScript Growing Up
JavaScript Growing Up
 
CSharp presentation and software developement
CSharp presentation and software developementCSharp presentation and software developement
CSharp presentation and software developement
 
Scalable and Flexible Machine Learning With Scala @ LinkedIn
Scalable and Flexible Machine Learning With Scala @ LinkedInScalable and Flexible Machine Learning With Scala @ LinkedIn
Scalable and Flexible Machine Learning With Scala @ LinkedIn
 
Kotlin Developer Starter in Android - STX Next Lightning Talks - Feb 12, 2016
Kotlin Developer Starter in Android - STX Next Lightning Talks - Feb 12, 2016Kotlin Developer Starter in Android - STX Next Lightning Talks - Feb 12, 2016
Kotlin Developer Starter in Android - STX Next Lightning Talks - Feb 12, 2016
 
Patterns for JVM languages JokerConf
Patterns for JVM languages JokerConfPatterns for JVM languages JokerConf
Patterns for JVM languages JokerConf
 
Dartprogramming
DartprogrammingDartprogramming
Dartprogramming
 
"Javascript" por Tiago Rodrigues
"Javascript" por Tiago Rodrigues"Javascript" por Tiago Rodrigues
"Javascript" por Tiago Rodrigues
 
Dart Workshop
Dart WorkshopDart Workshop
Dart Workshop
 
What’s new in Google Dart - Seth Ladd
What’s new in Google Dart - Seth LaddWhat’s new in Google Dart - Seth Ladd
What’s new in Google Dart - Seth Ladd
 
Smoothing Your Java with DSLs
Smoothing Your Java with DSLsSmoothing Your Java with DSLs
Smoothing Your Java with DSLs
 
Javascript Best Practices
Javascript Best PracticesJavascript Best Practices
Javascript Best Practices
 
Modeling Patterns for JavaScript Browser-Based Games
Modeling Patterns for JavaScript Browser-Based GamesModeling Patterns for JavaScript Browser-Based Games
Modeling Patterns for JavaScript Browser-Based Games
 
Scala is java8.next()
Scala is java8.next()Scala is java8.next()
Scala is java8.next()
 
Having Fun with Play
Having Fun with PlayHaving Fun with Play
Having Fun with Play
 
Structured web programming
Structured web programmingStructured web programming
Structured web programming
 
Introduction to Scalding and Monoids
Introduction to Scalding and MonoidsIntroduction to Scalding and Monoids
Introduction to Scalding and Monoids
 
Big Data Day LA 2015 - Compiling DSLs for Diverse Execution Environments by Z...
Big Data Day LA 2015 - Compiling DSLs for Diverse Execution Environments by Z...Big Data Day LA 2015 - Compiling DSLs for Diverse Execution Environments by Z...
Big Data Day LA 2015 - Compiling DSLs for Diverse Execution Environments by Z...
 
Framework engineering JCO 2011
Framework engineering JCO 2011Framework engineering JCO 2011
Framework engineering JCO 2011
 
Devtools cheatsheet
Devtools cheatsheetDevtools cheatsheet
Devtools cheatsheet
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Recently uploaded (20)

Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 

Dart structured web apps

  • 1. London Ajax User Group Chris Buckett
  • 2. This is Dart…  A language  And a tool ecosystem  For creating complex webapps  In teams  Single threaded  But isolates provide "shared-nothing" concurrency  Optionally typed  Runs in a Browser Virtual Machine  Or a Server Virtual Machine  Can be converted to JavaScript
  • 3. Technical Preview…  What you may see today, may change tomorrow…  Enable us (as potential end users) to influence the language and provide feedback  Eventual goal is standardization
  • 4. Why Dart…  What do Google build?  Single page web-apps Browser  Instant search Apps  Docs  Google Plus Server  Blogger side  Analytics APIs  Maps  … etc …
  • 5. Why Dart?  Complex applications  Team development  Easily “toolable” //process a & b. function process(a,b) { return a+b; }; document.write(process(1,2,3)); document.write(process("Hello", " World")); document.write(process({name:'objectA'}, {name:'objectB'}));
  • 6. Why Dart – the alternatives?  GWT  Still around and will be driven by Google's use cases  CoffeeScript  Closer to JavaScript, syntax inspired by Ruby, Python  JavaScript + Framework X  The default option  Dart is not a replacement, but an option.
  • 7. Design Goals - Flexibility  Flexible, but with structure  Optional types provide flexibility  Libraries to organize code  Classes and Interfaces to provide structure  Tools catch errors
  • 8. Design goals - Familiar  Be Familiar main() { var anInt = 1; var aStr = "String"; var anObj = new Object(); var result = doSomething(anInt,aStr,anObj); } doSomething(a,b,c) { return "blah"; }
  • 9. Design goals - Familiar  Be Familiar void main() { int anInt = 1; String aStr = "String"; Object anObj = new Object(); String result = doSomething(anInt,aStr,anObj); } String doSomething(int a, String b, Object c) { return "blah"; }
  • 10. Design Goals - Perfomance  Performance as a feature  Currently not as fast as V8  (But D8 is faster at launch than V8 was at launch)  Converted JS should be as fast as or faster than equivalent hand written JavaScript.
  • 11. Design goals  Great developer IDE experience Dart Dart Frog Language VM Native Browser
  • 13. Dart IDE (Lightweight Eclipse IDE)
  • 14. Frog: Dart to JS Converter #import('dart:html'); class MyApp { MyApp() { } void run() { write("Hello World!"); } void write(String message) { document.query('#status').innerHTML = message; } } void main() { new MyApp().run(); }
  • 15. Frog: Dart to JS Converter //...snip library code... // ********** Code for MyApp ************** function MyApp() {} MyApp.prototype.run = function() { this.write("Hello World!"); } MyApp.prototype.write = function(message) { get$$document().query("#status").innerHTML = message; } // ********** Code for top level ************** function main() { new MyApp().run(); }
  • 16. Embed within HTML <html> <body> <script type="application/dart"> main() { print("Hello Dart"); } </script> </body> </html> <html> <body> <script type="application/dart" src="MyApp.dart"></script> </body> </html>
  • 17. A quick tour of some interesting language features…
  • 18. Dart: Classes and interfaces  Familiar (to Java and C# developers) Optional  But a couple of nice features paramters class Duck implements Quackable { var colour; Duck([this.colour="red"]) { } Duck.yellow() { Named this.colour = "yellow"; constructors } //Usage String sayQuack() => "quack"; var duck1 = new Duck(); } var duck2 = new Duck("blue"); Unsurprising Function var duck3 = new Duck.yellow(); this shorthand print(duck3.sayQuack());
  • 19. Dart: Classes and interfaces  Familiar (to Java and C# developers)  But a couple of nice features interface Quackable default Duck { String sayQuack(); } //Usage var duck1 = Quackable();
  • 20. Dart: Classes and interfaces  All classes are also interfaces  class Person implements Duck { … }  Class properties can be interchanged with getters and setters  duck.colour = "yellow"; //setter, or property?  class Duck { var _colour; //private property get colour() => _colour; //getter set colour(value) { //setter _colour=value; } }
  • 21. Dart: Libraries and Source  Break up single source code file into multiple, independent files. #library("myLibrary"); #import("./libs/otherLib.dart"); #source("./myFile1.dart"); #source("./myFile2.dart");  Break logical parts of an app into libraries.  Import your own and third party libraries.  Privacy declarations apply at a library level (not a class level)
  • 22. Dart: Optional Types  Add documentation to code  Documentation readable by humans and tools  "Innocent until proven guilty"  Types have no effect on the running application var i = 1; int i = 1; var s = "Hello"; String s = "Hello"; String i = 1; int s = "Hello"; Probably wrong, but not proved to be wrong.
  • 23. Dart: Optional Types  Optional types can be useful in the early days of developing an app class Person { sayQuack(){ return "ouch…quack"; } } pokeDuck(duck) { duck.sayQuack(); } //Usage But is that what the pokeDuck(new Duck()); library designer pokeDuck(new Person()); //runs fine intended?
  • 24. Dart: Optional Types  But as you add structure, types can help you… class Person { sayQuack(){ return "ouch…quack"; } } pokeDuck(duck) { duck.sayQuack(); duck.swimAway(); } //Usage This now fails with a pokeDuck(new Duck()); noSuchMethod pokeDuck(new Person()); //throws exception exception
  • 25. Dart: Optional Types  Adding type info provides documentation to tools and humans. class Person { sayQuack(){ return "ouch…quack"; } } pokeDuck(Duck duck) { duck.sayQuack(); duck.swimAway(); } Now the tools can //Usage provide warnings (or pokeDuck(new Duck()); errors in checked pokeDuck(new Person()); //tools warn mode).
  • 26. Dart: noSuchMethod  All classes can have a noSuchMethod method class Person { sayQuack(){ Similar to ruby's return "ouch…quack"; method_missing } noSuchMethod(name, args) { Side note: Any if (name == "swimAway") { object can be throw "I'm not really a duck"; thrown as an } exception } }
  • 27. Dart: Functions  Simple function syntax Different  main() { syntax, same effect  var myFunc = (a,b) { return a,b; } Functions as  var myFunc = (a,b) => a+b; arguments  myFunc(a,b) => a+b;  doSomething(c,d, myFunc); Anonymous  doSomething(c,d, (a,b) => a+b); function  var result = myFunc(101,202); } Unsurprising function call
  • 28. Libraries: Dart:html  Client side library for interacting with the DOM  Uses Dart constructs for DOM manipulation  var foo = elem.query("#foo"); //return a foo  var foos = elem.queryAll(".foo"); //list of foo  Events:  foo.on.click.add((event) { //do something });
  • 29. Libraries: dart:io  Server side libraries:  Processes  File IO  Sockets  Http Client & Server
  • 30. Still a technical preview  Time to get involved…  www.dartlang.org  Join the active mailing list  Search #dartlang on Google +  More still to be built  Reflection!  Libraries providing higher levels of abstraction:  UI frameworks  Server frameworks