1. Dart The better Javascript ? Jorg Janke jorg@accorto.com Slides link: http://bizfabrik.com October 2014

2. Structure Why Dart? Example Dart Language Dart Tooling Questions The goal of Dart is "ultimately to replace JavaScript as the lingua franca of web development on the open web platform

3. Where are you coming from? Java o GWT o Servlet, JSP, JSF, .. .Net o Typescript PHP, Python, Ruby, Mobile Native Javascript Front-end Technology

4. Who is Jorg Janke? Education: MBA (Accounting), IT Jobs o ADV/Orga o Unisys - Prod.Mgr o Oracle - Dir Apps o Self employed since 1999 Experience o Mainframe, Unix, Linux o Algol, PL/I, SmallTalk o Oracle DBA o Java since 1.1 o Dart since 1.0 Founder: Compiere o Open Source ERP

5. What is Dart OO/Functional Programming Language o Executed in Dartium (Chrome) o Generating Javascript Executable dart2js Created/Maintained by Google ECMA-408 Standard o http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-408.pdf Targeting Client + Server

6. Lots of good Dart Overviews Check https://www.dartlang.org/ Books ... http://video.coldfrontconf.com/ why-google-thinks-you-should-drop I concentrate here on Developer experience

7. Dart - becoming popular TIOBE Index - October 2014 o #1: C 17% o #2: Java 14% o #3: Objective-C 10% - odd - a bit high o #4: C++ 4.8% o #10: JavaScript 1.7% - odd - a bit low o #17: Dart 1.1% o #25: ActionScript 0.6% o http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html

8. Why we picked Dart not stayed with GWT

9. BizFabrik UI Requirements/Features Mobile First o disconnected 24/7 o active for days User o Expert/Guidance o Own Layout switch o Analytics built in Admin o Add/Change Tables/ Fields/Processes/ Validations/... General o Dynamic Model Driven Architecture o Multi-Tenant/Locale o AWS/GAE/OnPremise

10. What we wanted to avoid Multiple UIs - browser + naive(s) Hard to Develop o Good IDE - Step through Debugging Hard to Maintain (different code styles, ) .. in 5y o Developer Learning curve -- Sonar Hard to Understand o Partners/Customers to extend Fighting libraries - dependencies - conflicts

11. Alternatives evaluated GWT (Used) o Easy Java Integration o Stable mature o Very good build process o A bit heavy o Lost in Translation (Java Structure JS features class prototypal) JSP/JSF/ o Connected only Coffeescript o Step in the right direction Typescript o commitment? Javascript pure o improved IDE support & tooling - JSLint o hard to build sizeable apps o too many different styles o no static analysis

12. BizFabrik Architecture Java Backend o SOAP/REST Dart o (Bootstrap css) o Grid/Form/.. o Gantt Graph (svg) Communication o ? JSON (using Rest) Protocol Buffers o binary (smaller than JSON, especially data rows) o fast (~ same de/serializing speed) o Data Transfer Objects (get/set..) o for many languages

13. Demo ~ 1,400 kb compressed js

14. Grid Mode Built in Analytics/Data Visualization

15. User defined - switchable Layout Form Guidance Mode

16. Form Expert Mode Form|Grid Master/Detail/..

17. All UIs dynamically generated Customizable + Dynamically Extendable (webhooks) Context dependent validation/visibility/layout (multiple levels) First dynamic MDA (Model Driven Architecture) Compiere ERP - 2000 Java Swing - 2007 GWT (1:1) Salesforce calls theirs MetaData Driven BizFabrik - redesigned from Scratch for Data Visualization of multiple DataSources - GWT 2012 redesigned from Scratch - Dart 2014 (3 months)

18. Dart selection reasons Good DOM (Polyfill) API Close to the metal o eventually JS o Web Components, ... Streams, Futures Libraries Type support No worry about Javascript: The Bad Parts new - this - null - falsiness - for (in) - ... Douglas Crockford

19. Static Typing increases Productivity Static typing and Documentation o Dynamic Languages require Context switches Source: Dr. A. Stefik, +An empirical study on the impact of static typing on software maintainabilityhttp://web.cs.unlv.edu/stefik a/Papers.php

20. Dart Environment Dart Language core, collection, async, io, isolate, math, mirrors, typed_data DOM API html, svg, indexed_db, web_gl/audio/sql Pub Build / Libs / Packages Logging Intl Route Polymer Distribution Angular Dart Protocol Buff IDE: - Dart - IntelliJ Plugins: - Sublime etc Version Control + Dependencies Unittest

21. Dart IDE options Dart IDE Scaled down old Eclipse version Usability ++ o Starts very fast o Getting started IDE Feature set -- o unstable with Dev Tools IntelliJ - Dart works with minor itches Full Eclipse not tried Chrome Dev Editor early days Debugging in Dartium

22. Predefined Structure (Pub) bin doc example lib o lib.dart test tool web o project.dart o project.html pubspec.yaml packages o in main directory o links: sub directories /web /tool /test /bin /example (not /lib) o allows package/.. references anywhere copied into packages

23. 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

24. Java Converts: You are ultimately writing Javascript !!! Javascript: The Good Parts

25. Language Features Cannot cover all o for complete details see dartlang.org I like the most o single inheritance .. with mixins intro to prototypal + functional programming with a safety net o named parameters

26. 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);

27. Named Constructors MyClass(String this.p1, int this.i1) {} o saves the: this.p1 = p1; MyClass.fromXml(String xml) {..} o No overloading - better documentation o alternative static MyClass parse(String xml) {..}

28. Oohh well .. - no overloading workaround: 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) {..}

29. Async done nicely + future one many sync T Iterable (..) {..} (..) sync* {..} async Future Stream await (..) async {..} (..) async* {..} main() async { startAnalytics() async { // doesnt block .. await .. await analytics.loadLib(); }

30. Great! Function variables Example o static int parse(String s, { int onError(String s)}); Use o int xx=int.parse(12); o int xx=int.parse(12, onError: (String s) {return -1;}); o 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

31. 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

32. Better Strings String s = Multiple Line String; s = String in parts; s = This works too; s = rraw string n; s = String with ${param}; if (s.isEmpty) {} if (s.isNotEmpty) {} trivial, but I like it Java char CodeUnit|CharCode

33. Type Surprises (... coming from Java) bool initial = true; int active = 5; : int ms = initial ? 0 : 1000; if (active > 10) ms += (active/10) * 200; compiles fine ms is an int - right?

34. Type Surprises (... coming from Java) bool initial = true; int active = 5; : int ms = initial ? 0 : 1000; if (active > 10) ms += (active/10) * 200; compiles fine ms is an int - right? Runtime: double Fix: ms += (active~/10) * 200; compiler (analyzer) should catch that

35. Type Surprises - Lists int add(List ints) {..} int x = add([1,a, 3]); List o1List = ; List o2List = ; for (O1 in o2List) {..} compiles fine Runtime Error compiler (analyser) should catch that

36. Libraries - Pub Core Libraries async collection html + js io (server) svg, web_gl, ... http://pub.dartlang.org angular googleapis dquery (jQuery) web_components polymer use js (libs) directly intl well designed but often not immutable

37. Web Components Polymer Design your own HTML tags Two-way binding Dart - DOM Shadow DOM AngularDart 1.0new Re-implementation AngularJs 2.0 MVC Framework o Controller - Directives - Components we dont write HTML - we generate the DOM

38. Upgrades Expect a new Version every 1-2 months o independent from library upgrade cycle o Started Dart 1.0 - Nov 2013 1.6.0 - Aug 2014 1.7 .. looming Upgrade is quite painless o Also Library: pub upgrade

39. Dart Wishlist CSS (Less/Saas) integration o Minify css names (like GWT) Load Modules on demand o Split generated js (like GWT) BigDecimal Dec64 Ability to return tuples o like Scala Full Immutable library option

40. Dart Productivity: Good! Easy to get going o Java Functional Good Tools o not on Java level Rich Libraries Performance o Benchmarks Mostly Unsurprising semantics o No Strong Typing (like Scala) Doc a bit light o helps if you know Javascript/HTML

41. Dart Performance (native, js, dart2js) https://www.dartlang.org/performance/

42. When back to Java Programming where are named parameters? why is async so hard? very happy to get back to Dart: The better Javascript ! Douglas Crockford: Dart: too much baggage waiting for the messiah

43. Questions ? Jorg Janke jorg@accorto.com Slides link: