Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dart Language

Avatar for SurajMaher SurajMaher
February 23, 2014

Dart Language

Slide deck used at Dart Flight School 2014, Pune, GDG (Google Developer Groups)

Avatar for SurajMaher

SurajMaher

February 23, 2014

Other Decks in Programming

Transcript

  1. Pune  Google  Developer  Group,   FEBRUARY  2014,   (Use  #'lydart

     hashtag  on  twitter  or  google+)     Suraj  Maher      
  2. Agenda   •  Dart  Flight  School   •  Why  Dart?

     JavaScript  pitfalls   •  Dart  Intro   •  Dart  Performance   •  Dart  Editor   •  Tour  of  Dart  Language   •  Dart  Libraries   •  Packaging  Dart  Code   •  dart2js   •  Web  Components/Polymer  Dart   •  Dart  In  Production   •  Demo   –     Basic   –     Angular  Dart   –     Polymer  Dart   https://www.dartlang.org/events/2014/ 6light-­‐school/   2  
  3. WHAT  ARE  DART  FLIGHT  SCHOOLS?   •  Dart  launched  1.0

     in  November  2013  by   Google,  and  the  Dart  and  Chrome  teams   wanted  to  help  developers  all  over  the  world   try  Dart.   •  The  Dart  team  also  wants  to  hear  feedback   from  developers  who  never  used  Dart.   •  Dart  Flight  Schools  are  community  run  events   being  organized  by  local  Google  Developer   Groups  or  other  developer  meetups  all  over  the   world.   https://www.dartlang.org/events/2014/ 6light-­‐school/   3  
  4. Why  Dart?  JavaScript  is  Now   Faster…But  it’s  a  pain!

      h%p://www.afuntab.com/funny-­‐baby-­‐girl-­‐ crying/funny-­‐baby-­‐girl-­‐crying-­‐2/   5  
  5. JavaScript  -­‐  implicit  conversions  will   make  your  head  explode

            assert(2.0  ==  '2'  ==  new  Boolean(true)  ==  '1‘);  //  true     6  
  6. JavaScript  –  Truthy  and  Falsy  values     0  ==

     ‘’   0  ==  ‘0’    false  ==  ‘0’    null  ==  undecined   ‘  \t\r\n  ’  ==  0     //  all  expressions  given  above  evaluates  to  true   7  
  7. JavaScript  –  Global  variables   nightmare   Programmers  can  unknowingly

     create  or   manipulate  global  variables   window.x  =  0;   var  x  =0  ;  //  x  declared  outside  a  function   var  x  =  y  =  0;  //  y  becomes  global  variable   http://en.wikipedia.org/wiki/ Principle_of_least_astonishment   8  
  8. JavaScript  –  too  many  libraries  to  chose   from  

    https://docs.google.com/presentation/d/ 1_USzSw1gXfZyublFRxHjjlHLVdLaN7Olk9CK6ZjrWWU /edit#slide=id.p   11  
  9. JavaScript  is  Now  Faster  but…   13   •  Promotes

     spaghetti  style  programming   •  Object-­‐oriented  programming  is  hard   •  Lacks  solid  programming  structures  (Sets,   Maps,  Classes)   •  No  consistent  means  of  developing  large   applications   •  Too  much  wrapper  code  for  programs,   frameworks  &  plugins   •  Unpredictable  runtime  performance   •  Weak  Tool  support  
  10. JavaScript  breaks  the  principle   of  least  astonishment  (POLA)  

    "If  a  necessary  feature  has  a  high   astonishment  factor,  it  may  be   necessary  to  redesign  the  feature."       http://en.wikipedia.org/wiki/ Principle_of_least_astonishment   14  
  11. “But  don't  forget  the  past.  Learn   from  It  and

     Others.”   http://www.famousquotecards.com.au/ quotecard/To-­‐learn-­‐from-­‐others   16  
  12. Inspiration  to  Dart   http://www.infoq.com/presentations/ Performance-­‐V8-­‐Dart  -­‐  By  Lars  Bak

      17   •  Syntax  and  constructs  inspired  by   JavaScript,  Java  &  C#   •  Object  model  inspired  by  Smalltalk   •  Compilation  strategy  inspired  by  Self   •  Optional  types  inspired  by  Strongtalk   •  Isolates  design  inspired  by  Erlang  
  13. The  Dart  Programming  Language     18   •  An

     open  source,  easy  to  learn  and   unsurprising  OO  language   •  Compact  and  straight  forward  semantics   •  Real  lexical  scoping   •  Supports  types,  without  requiring  them   (optional)   •  Simple  object  model  (class-­‐based  single   inheritance  with  interface  support)  
  14. The  Dart  Programming  Language     19   •  Compiles

     to  JavaScript   •  Runs  in  the  client  and  on  the  server   •  Has  a  wide  array  of  built-­‐in  libraries.   Supports  code  sharing.   •  Single-­‐threaded  but  supports  simple   concurrency  with  isolates   •  Predictable  performance  
  15. Dart  Timeline     20   •  Oct.  2011  –

     Public  Announcement   •  Jun.  2013  –  First  beta  release   •  Nov.  2013  –  Dart  1.0  (stable  release)   •  Dec.  2013  -­‐    ECMA  formed  TC52  to  publish  a                      standard  specicication   •  Jan.  2014  –  Dart  1.1  
  16. What  we  expect…   21   •  Better  performance  (end

     user’s  expectations)   –  Speed  and  better  user  experience.     –  Speed  will  continue  to  drive  innovation  for  web   applications  and  a  more  structured  language  is  easier   to  optimize.   •  Better  productivity  (developer’s  expectations)   –  Programmer  productivity  is  key  as  web  applications  get   larger.   –  Support  for  libraries  and  packages  helps  developer   work  with  each  other  and  easily  reuse  code  from  other   projects.   –  Types  make  APIs  clearer  and  easier  to  use.   –  Tools  help  refactor,  navigate,  and  debug  code.  
  17. “Dart  chooses  familiarity  over  excitement.  No   razzle  dazzle.  Be

     productive  on  'irst  day  of   writing  Dart  code.”   https://www.dartlang.org/   30  
  18. Pure  Object   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch02.html   34   •  Everything

     you  can  place  in  a  variable  is  an   object.   •  Every  object  is  an  instance  of  a  class.       •  All  objects  inherit  from  the  Object  class.   •  Even  numbers,  functions,  and  null  are   objects.  
  19. Clean  semantics  and  behavior   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch02.html   35  

    •  Examples:   – Only  true  is  truthy   – There  is  no  undecined,  only  null   – No  type  coercion  with  ==,  +  
  20. Variables   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch02.html   36   •  Variables  are

     references.   •  Uninitialized  variables  have  an  initial  value   of  null.   •  Even  variables  with  numeric  types  are   initially  null,  because  numbers  are  objects.  
  21. Types   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch02.html   38   •  Specifying  static

     types  is  optional.   •  Variables  with  no  specicied  type  get  a  special  type:   dynamic.   •  The  Dart  language  has  special  support  for  the  following   types-­‐   –  numbers   •  int   •  double   –  strings   –  booleans   –  lists  (also  known  as  arrays)   –  maps   –  symbols  
  22. Numbers  -­‐  int   •  Integers  are  numbers  without  a

     decimal   point.   •  Integers  of  arbitrary  size.   •  Subtype  of  num.   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch02.html   39  
  23. Numbers  -­‐  double   •  If  a  number  includes  a

     decimal,  it  is  a   double.   •  64-­‐bit  (double-­‐precision)  cloating-­‐point   numbers  (IEEE  754).   •  Subtype  of  num.   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch02.html   40  
  24. String   •  Use  either  single  or  double  quotes  to

     create   a  string.   •  Sequence  of  UTF-­‐16  code  unit.   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch02.html   41  
  25. String  -­‐  Concatenation   •  Use  adjacent  string  literals  or

        •  the  +  operator.   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch02.html   42  
  26. String  -­‐  Multi-­‐line   •  Use  a  triple  quote  with

     either  single  or   double  quotation  marks   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch02.html   43  
  27. String  -­‐  Raw   •  Precix  string  with  r  to

     make  it  raw.   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch02.html   44  
  28. String  -­‐  Interpolation   •  You  can  put  the  value

     of  an  expression  inside  a  string  by   using  ${expression}.   •  If  the  expression  is  an  identicier,  you  can  skip  the  {}.   •  To  get  the  string  corresponding  to  an  object,  Dart  calls  the   object’s  toString()  method.   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch02.html   45  
  29. Boolean   •  Type  named  bool.  Only  two  objects  have

     type  bool:  the  boolean  literals,  true   and  false.   •  When  Dart  expects  a  boolean  value,  only  the  value  true  is  treated  as  true.  All   other  values  are  treated  as  false.     •  Unlike  in  JavaScript,  values  such  as  1,  "aString",  and  someObject  are  all  treated   as  false.   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch02.html   46  
  30. Lists  (also  known  as  arrays)   •  In  Dart,  arrays

     are  List.     •  Dart  list  literals  look  like  JavaScript  array  literals.   •  Zero-­‐based  indexing.   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch02.html   47  
  31. Functions/Methods/Instance  Variables   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch02.html   49   •  Dart

     supports  top-­‐level  functions  (such  as   main()),   •  As  well  as  functions  tied  to  a  class  or  object   (static  and  instance  methods,  respectively).     •  Functions  within  functions  can  also  be   created  (nested  or  local  functions).   •  Similarly,  Dart  supports  top-­‐level  variables,     •  As  well  as  variables  tied  to  a  class  or  object   (static  and  instance  variables).  
  32. Return  values   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch02.html   59   •  All

     functions  return  a  value.     •  If  no  return  value  is  specicied,  the  statement   return  null;  is  implicitly  appended  to  the   function  body.  
  33. Inheritance  /  Implementation   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch02.html   70   • 

    Use  'extends'  keyword  to  extend  another  class   •  Use  'implements'  keyword  to  implement  an   interface   •  Every  class  is  also  an  interface  (implicit   interface)   •  So  you  can  implement  a  class   •  Use  ‘abstract’  keyword  to  make  non-­‐instantiable   •  You  can  override  methods  but  no  overloading  is   allowed  
  34. Dart  Libraries   •  dart:core,     •  dart:math,  

      •  dart:html  –  client  side   •  dart:io  –  server  side   •  dart:convert     •  dart:async  –  Future/Stream     •  dart:mirrors  -­‐  reclection   •  etc.   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch03.html   79  
  35. dart:core   •  Number  parsing,  String  manipulation,  and   Regular

     expression  API   •  Collections  (List,  Set,  Map  etc.)   •  URI   •  Dates  and  Times   •  Utility  classes  for  comparing  objects  etc.   •  Iterable/Iterator   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch03.html   80  
  36. dart:math   •  Trigonometry   •  Max/Min   •  Math

     Constants  (E,  PI  etc.)   •  Random  Number  Generators  (required  by   crypto)   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch03.html   81  
  37. dart:html   •  Must  for  client  side  application   • 

    Finding  DOM  Elements   •  Creating/Manipulating  DOM  Elements   •  Adding/Replacing/Removing  nodes   •  Manipulating  CSS  styles   •  Handling  Events   •  HttpRequest  (dynamically  load  JSON  data  or   any  other  resource  from  a  web  server)   •  Websockets   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch03.html   82  
  38. dart:io   •  Files  and  Directories   •  Processes  

    •  HTTPServer   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch03.html   84  
  39. dart:async  -­‐  Future   •  Dart  is  a  single-­‐threaded  

    programming  language.     •  If  any  code  blocks  the  thread  of   execution  (for  example,  by   waiting  for  a  time-­‐consuming   operation  or  blocking  on  I/O)  the   program  effectively  freezes.   Asynchronous  operations  let   your  program  run  without   getting  blocked.   •  Dart  uses  a  Future  object  to   perform  asynchronous   operations.   https://www.dartlang.org/docs/tutorials/ futures/   89  
  40. dart:async  -­‐  Stream   •  Imagine  you  are  wriHng  a

     chat   applicaHon.     •  On  a  single  client,  you  will  be   receiving  messages  and  displaying   them  to  the  user.     •  You  can’t  simply  write  a  while  loop   because  that  will  block  execuHon,   so  you  need  to  use  async  callbacks.     •  This  is  an  ideal  use  case  for   streams:     •  you  have  one  part  of  your  code   pushing  data  into  the  stream,     •  and  another  part  of  your  code   listening  to  the  stream.   •  Streams  are  unified  across  Dart’s   asynchronous  APIs,  providing  a   powerful  way  to  deal  with  streams   of  data,  whether  that  data  is  event   objects,  bytes,  or  your  own  custom   classes.   https://www.dartlang.org/docs/tutorials/ streams/   90  
  41. Access  Modiciers   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch02.html   91   •  Unlike

     Java,  Dart  doesn’t  have  the  keywords   public,  protected,  and  private.   •  If  an  identicier  starts  with  an  underscore  (_),   it’s  private  to  its  library.  
  42. libraries/packages   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch02.html   92   •  The  import,

     part,  and  library  directives  help   you  create  a  modular  and  shareable  code  base.     •  Libraries  not  only  provide  APIs,  but  are  a  unit   of  privacy:     –  identiciers  that  start  with  an  underscore  (_)  are   visible  only  inside  the  library.     •  Every  Dart  app  is  a  library,  even  if  it  doesn’t   use  a  library  directive.   •  Libraries  can  be  distributed  using  packages.  
  43. Implementing  library  in  multiple  ciles   ballgame.dart   ball.dart  and

     util.dart   https://www.dartlang.org/docs/dart-­‐up-­‐ and-­‐running/contents/ch02.html   94  
  44. pub  commands   https://www.dartlang.org/tools/pub/ cmd/   97   Pub’s  commands

     fall  into  the  following  categories:   •  App  creation  and  maintenance   –  The  pub  get  command  retrieves  the  packages  that  are  listed  as  the  dependencies  for  the   app.   –  The  pub  upgrade  command  retrieves  the  latest  versions  of  all  those  packages.   •  Development   –  The  pub  serve  command  is  used  to  start  up  a  development  server.   •  Deployment   –  The  pub  build  command  creates  the  build  directory,  compiles  the  Dart  code,  and  places   the  assets  into  the  build  directory.   •  Publication   –  The  pub  publish  command  to  upload  your  package  to  pub.dartlang.org,  so,  other  can   view  it.     –  The  pub  uploader  command  enables  specicic  users  to  modify  and  upload  new  versions  of   your  package.  
  45. pub  packages   https://pub.dartlang.org/   98   •  670+  packages

      •  mongodb,  google  api,  oauth  etc.  
  46. Runtime  Modes   99   Dart  has  two  runtime  modes:

        •  Production  mode  –   –  Default  runtime  mode  of  a  Dart  program,  optimized  for   speed.     –  Ignores  assert  statements  and  static  types.       •  Checked  mode  –     –  Developer-­‐friendly  mode  that  helps  you  catch  some  type   errors  during  runtime.     –  For  example,  if  you  assign  a  non-­‐number  to  a  variable   declared  as  a  num,  then  checked  mode  throws  an  exception.     –  Checked  mode  is  helpful  at  development.  
  47. dart2js:  The  Dart-­‐to-­‐JavaScript  Compiler   101   •  Generates  smaller

     and  high  performance  JS   •  Tree  shaking   •  Minicication   •  Type  Inferencing   •  Not  just  a  syntax  translator.  Produces  better   optimized  JS  code  than  hand-­‐written  JS.   •  Dart  Editor  uses  dart2js  behind  the  scenes   whenever  Dart  Editor  compiles  to  JavaScript.     •  The  pub  tool's  serve  and  build  options  also  use   dart2js.  
  48. New  HTML5/Web  Components   Specicications   •  <template>   • 

    Custom  Elements   •  HTML  Imports   •  Shadow  DOM   •  Binding   103  
  49. Shadow  DOM   hAp://www.sitepoint.com/the-­‐basics-­‐of-­‐ the-­‐shadow-­‐dom/   108   •  Encapsulation

      •  CSS  and  JavaScript  collisions  are  a  source  of   constant  concern  for  library  and  widget  developers.   •  Encapsulation  would  allow  developers  to  write  their   code  and  know  that  it  will  work  properly,  even  in   the  presence  of  other  scripts  and  style  sheets.   •  The  goal  of  the  shadow  DOM  is  to  provide  functional   encapsulation  for  these  sub-­‐trees.   •  This  is  achieved  by  keeping  functional  sub-­‐trees   separate  from  the  document  tree  (and  each  other).   •  CSS  rules  and  DOM  queries  do  not  cross  the  shadow   boundary,  and  thus  provide  encapsulation.  
  50. Polymer  Dart  –  use  Web  Components  today!   •  Polymer

     is  built  on  the  latest  web   technologies,  like  Web  Components  and   Object.observe.     •  Not  all  browsers  support  these  features  yet,   so  Polymer’s  platform  layer  cills  the  gaps,   implementing  the  APIs  in  JavaScript/Dart.     •  At  runtime,  Polymer  automatically  picks  the   fastest  path  –  native  implementation  or   JavaScript.   hAp://www.polymer-­‐project.org/   109  
  51. "Dart  offers  a  sane  and  consistent  development   experience  for

     modern  web  applications."  -­‐  Blossom   https://www.blossom.io/   111  
  52. “Dart  allows  for  quick  prototyping  as  well  as  robust  

    code  that  is  easy  to  refactor”  -­‐  Soundtrap   https://www.soundtrap.com/   112  
  53. "Dart's  familiar  language,  and  cohesive  set  of  libraries,   allowed

     the  team  to  start  building  very  quickly."  -­‐  Montage   http://www.montagebook.com/   113  
  54. "We  rewrote  Google's  internal  CRM  app  in  6  months,  from

      scratch,  with  Dart  and  Angular."  -­‐  Internal  team  at  Google   http://www.google.com/   115  
  55. Demo   http://www.google.com/   116   •  Simple  Pirate  

    – Basic   •  Polymer  Dart   – Web  components   •  Angular  Dart   – how  to  structure  app   – testing  
  56. References   •  Dart  code  samples  -­‐  https://www.dartlang.org/samples/   • 

    Books  on  Dart    -­‐  https://www.dartlang.org/books/   •  Dart  Presentations  (slides  and  videos)  -­‐   https://www.dartlang.org/slides/   •  Dart  Articles  -­‐  https://www.dartlang.org/articles/   •  Pub  –  Dart  Package  Manager  -­‐  https://pub.dartlang.org/   •  Pub  Docs  -­‐   https://www.dartlang.org/tools/pub/get-­‐started.html   •  On  Dart  -­‐  http://ondart.me/   •  Polymer  Dart  -­‐  https://www.dartlang.org/polymer-­‐dart/   •  Angular  Dart  Tutorial  -­‐  https://angulardart.org/tutorial/   117