Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Dart the better Javascript 2015

1,135 views

Published on

Do you want to upgrade your GWT application or write a sizable web application? Dart is the efficient choice.

As a brief example, check out http://lightningdart.com

This presentation is updated October 2015 for Silicon Valley Code Camp

Published in: Software
  • Be the first to comment

Dart the better Javascript 2015

  1. 1. Dart The better Javascript Jorg Janke jorg@accorto.com Slides link: http://lightningdart.com October 2015
  2. 2. Structure ● What & Why Dart? ● Dart Language & Tooling ● Questions ○ no need to wait until the end
  3. 3. Where are You coming from? ● Java ○ GWT ○ Servlet, JSP, JSF, .. ● .Net ● PHP, Python, Ruby, … ● Mobile Native Front-end Technology ● Javascript ○ CoffeeScript ○ Typescript ○ Dart ✋
  4. 4. Who is Jorg Janke? ● Education: MBA (Accounting), IT ● Jobs ○ ADV/Orga ○ Unisys - Prod.Mgr ○ Oracle - Dir Apps ○ Accorto since 1999 ● Experience ○ Mainframe, Unix, Linux ○ Algol, PL/I, SmallTalk ○ Oracle DBA ○ Java since 1.1 ○ Dart since 1.0 ● Founder: Compiere ○ Open Source ERP
  5. 5. What does Accorto do? ● Professional Services Automation (PSA) on Salesforce https://www.accorto.com ○ Projects ■ Gantt ■ Resource Planning ○ Capturing Time & Expense ○ Billing
  6. 6. Dart Overview ECMA-408
  7. 7. What is Dart? ● OO & Functional Programming Language ○ Debugged in Dartium (Chrome) ○ Generating Javascript Executable dart2js ● Created/Maintained by Google ● ECMA-408 Standard ○ http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-408.pdf ● Targeting Client + Server
  8. 8. Dart Motivation ● Fast development cycles ● Fast & predictable performance ● Clear language semantics ● String types for great tool support Change: from Dartium (own runtime engine) ➤ Javascript only
  9. 9. Lot’s of good Dart Overviews Check ● https://www.dartlang.org ● Books ... ● https://www.dartlang.org/slides I concentrate here on Developer experience
  10. 10. UI Options Angular 2.0 - Now https://github.com/ng2-dart-samples ● smaller gen JS ● 3x faster than 1.0 Dart Polymer ● Web Components Bring Your Own JS Framework ● JS Interop Lightning Dart ● Lightning Experience UX
  11. 11. Dart Mobile - also native ● Share code ○ IOS ○ Android ○ Web ● Fletch (Runtime) ○ adds ~220k native App ○ on-the-fly code changes - also on iOS UI for iOS (Objective-C) UI for Android (Java) Application Model (Dart) Runtime (Fletch) Early Days!
  12. 12. Dart - Google Trends
  13. 13. Why pick Dart?
  14. 14. Accorto UI Requirements/Features ● Mobile First ○ disconnected ● 24/7 ○ active for days ● User ○ Expert/Guidance ○ Own Layout ■ switch ○ Analytics built in ● Admin ○ Add/Change Tables/ Fields/Processes/ Validations/... ● General ○ Dynamic Model Driven Architecture ○ Multi-Tenant/Locale ○ AWS/GAE/OnPremise
  15. 15. What we wanted to avoid ● Multiple UIs - browser + naive(s) ● Hard to Develop ○ Good IDE - Step through Debugging ● Hard to Maintain (different code styles, …) .. in 5y ○ Developer Learning curve -- “Sonar” ● Hard to Understand ○ Partners/Customers to extend ● Fighting libraries - dependencies - conflicts
  16. 16. Alternatives evaluated ● GWT (Used) ○ Easy Java Integration ○ Stable “mature” ○ Very good build process ○ A bit heavy ○ Lost in Translation (Java Structure <> JS features class <> prototypal) ● JSP/JSF/… ○ Connected only ● Coffeescript ○ Step in the right direction ● Typescript ○ step in the right direction ● Javascript “pure” ○ improved IDE support & tooling - JSLint ○ hard to build sizeable apps ○ too many different styles ○ no static analysis
  17. 17. Dart selection reasons ● Good DOM (Polyfill) API ● “Close to the metal” ○ eventually JS ○ Web Components, ... ● Streams, Futures ● Libraries ● Static Type support No worry about Javascript: The Bad Parts new - this - null - falsiness - for (in) - class ... Douglas Crockford prototypal vs class
  18. 18. Static Typing increases Productivity ● Static typing and Documentation ○ Dynamic Languages require Context switches ● Source: Dr. A. Stefik, + An empirical study on the impact of static typing on software maintainability http://web.cs.unlv.edu/stefika/Papers.php
  19. 19. Accorto Architecture now ● Java Backend ○ SOAP/REST ■ Salesforce ● Lightning Design ○ scss ● Dart ○ Grid/Form/.. ○ Gantt Graph (svg) ● Protocol Buffers ○ binary (smaller than JSON, especially data rows) ○ fast (~ same de/serializing speed) ○ Data Transfer Objects (get/set..) ○ for many languages
  20. 20. Lightning Design System ● Salesforce UX https://www.lightningdesignsystem.com ○ SCSS - Font - Icons ○ General Purpose ■ Not restricted to salesforce.com ● Lightning Dart ○ Functionality ● Components ○ Button … Picklist ● Controller ○ Form, Object
  21. 21. ➤ Optimized Javascript ○ optimal low-level language features ○ speed ➤ Typed code ● Maintainability ○ Well structured code ○ Not Optimization ● Productivity ○ Easy Debugging Dart ⟹ Productivity & Efficiency Dart Source dart2js js Analyzer Observatory (profiler) fmt, doc
  22. 22. Dart Environment Dart Language core, collection, async, io, isolate, math, mirrors, typed_data DOM API html, svg, indexed_db, web_gl/audio/sql Polymer Angular Dart Logging Intl Route Packages Protocol Buff IDE: - IntelliJ DartPad Plugins: - Sublime - Eclipse - ... Version Control + Dependencies Test Pub Build / Libs / Distribution ...
  23. 23. Dart IDE options WebStorm IDE ● Plugin Other Editors ● Sublime, Eclipse, Atom, Emacs, Vim DartPad https://dartpad.dartlang.org ● Interactive Editor & Playground
  24. 24. Predefined Structure (Pub) ● bin ● doc ● example ● lib ○ lib.dart ● test ● tool ● web ○ project.dart ○ project.html ● pubspec.yaml ● packages ○ in main directory ○ links: sub directories ■ /web /tool /test /bin /example ■ (not /lib) ○ allows “package/..” references anywhere copied into packages
  25. 25. Testing made easy @TestOn(“browser && !chrome”) group(“my group”, () { test(“my test”, () { expect(11.remainder(3), equals(2)); }); test(“my async”, () async { var value = await new Future.value(10); expect(value, allOf([ ..matcher.. ]))); }); }); ● pub run test ○ chrome, safari, ie, ff ○ content-shell (headless) ○ android, ○ mac-os, windows, .. ○ phantomjs ● pub global activate test_runner ○ run_tests ● dart webdriver
  26. 26. Java Converts: You are ultimately writing Javascript !!!
  27. 27. Language Features ● Cannot cover all ○ for complete details see dartlang.org ● I like the most ○ single inheritance .. with mixins ■ intro to prototypal + functional programming ● with a safety net ○ named parameters
  28. 28. Java Package => Libraries Java ● Directory = package ● File = class ● FileName = className Dart ● Directory, FileName does not matter ... if you have good memory library libx; // part = code imports part “aa/bb/file.dart”; part of libx; class a{} class b{} aa/bb/file.dart
  29. 29. Great! Optional / Named Parameters int f1 (int mandatory, {int optional: 2}) {..} use: f1(2); f1(2, optional: 3); int f2 (int mandatory, [int second = 2]) {..} use: f2(2); f2(1,2);
  30. 30. Named Constructors ● MyClass(String this.p1, int this.i1) {} ○ saves the: this.p1 = p1; ● MyClass.fromXml(String xml) {..} ○ No overloading - better documentation ○ alternative ■ static MyClass parse(String xml) {..}
  31. 31. No overloading - but not missing it! workaround if you want to: String dump(dynamic param) { if (param is X1) return _dumpX1(param as X1); if (param is X2) return _dumpX2(param as X2); } String _dumpX1(X1 value) {..} String _dumpX2(X2 value) {..}
  32. 32. Async done nicely + future one many sync T Iterable<T> (..) {..} (..) sync* {..} async Future<T> Stream<T> await (..) async {..} (..) async* {..} main() async { startAnalytics() async { // doesn’t block .. await .. await analytics.loadLib(); } enableControls(); }
  33. 33. Great! Function variables ● Example ○ static int parse(String s, { int onError(String s)}); ● Use ○ int xx=int.parse(“12”); ○ int xx=int.parse(“12”, onError: (String s) {return -1;}); ○ int xx=int.parse(“12”, onError: intErrorHandler); int intErrorHandler(String s) {return -1;} … if you are coming from Java7 … this and Streams eliminate “callback hell”
  34. 34. Public - Internal - controlled class X { int public; int _internal; int get getter {..} void set setter (int value) {..} } Use: X xx = new X(); xx.public = 5; // r/w xx._internal = 5; // Library int z = xx.getter; xx.setter = 5; … a bit confusing at first when to use what: - function - isEmpty() - or attribute - isEmpty
  35. 35. Better Strings String s = ’’’Multiple Line String’’’; s = “String” “ in” “ parts”; s = ‘This “works” too’; s = r’raw string n’; s = “String with ${param}”; if (s.isEmpty) {} if (s.isNotEmpty) {} trivial, but I like it Java char <> CodeUnit|CharCode
  36. 36. Type Surprises (... coming from Java) int active = 5; : int ms = initial; if (active > 10) ms += (active/10) * 200; … compiles fine ms is an int - right? Runtime: ● double Fix: ms += (active~/10) * 200; … Analyzer catches direct assignments but not +=
  37. 37. Type Surprises - Lists void add(List<int> ints) {..} add([1,”a”, 3]); List<O1> o1List = …; List<O2> o2List = …; for (O1 in o2List) {..} … compiles fine Runtime Error … compiler (analyser) should catch that … certainly better than plain Javascript
  38. 38. Libraries - Pub Core Libraries ● async ● collection ● html + js ● io (server) ● svg, web_gl, ... http://pub.dartlang.org ● angular ● googleapis ● dquery (jQuery) ● web_components polymer ● intlwell designed … but often not immutable use js (libs) directly
  39. 39. Upgrades ● Expect a new Version every 1-2 months ○ independent from library upgrade cycle ○ Started Dart 1.0 - Nov 2013 ■ 1.12.0 - Aug 2015 ■ 1.13 .. looming ● Upgrade is quite painless ○ Also Library: pub upgrade
  40. 40. Dart Wishlist ● BigDecimal ⇉ Dec64 (vs double) ● Ability to return tuples ○ … like Scala ● Full Immutable library option ● CSS (Less/Saas) integration ○ Package + Minify css (like GWT) Concentrate on Client!
  41. 41. Dart Productivity: Good! ● Easy to get going ○ Java ⇒ Functional ● Good Tools ○ not on Java level ● Rich Libraries ● Profiling ○ Observatory ● Mostly Unsurprising semantics ○ No Strong Typing (like Scala) ● Doc a bit light ○ helps if you know Javascript/HTML
  42. 42. Summary (why not Javascript directly) ● Productivity ○ typed language ○ concise ■ especially async ○ tooling ○ libraries ○ debug & test ● Maintainability ○ dart2js optimizes ● Dev Compiler ○ create JS libraries (alpha) ● Maintainable and efficient Javascript ○ Very hard to manually do - collaboratively ■ JS the good parts
  43. 43. When “back” to Java Programming ● where are named parameters? ● why is async so hard? ● very happy to get back to ● Dart: The better Javascript !
  44. 44. Questions ? Jorg Janke jorg@accorto.com Slides link: http://lightningdart.com

×