Dart is a new language for the web, enabling you to write JavaScript on a secure and manageable way. No need to worry about "JavaScript: The bad parts". This presentation concentrates on the developer experience converting from the Java based GWT to Dart.
Citation preview
1. Dart The better Javascript ? Jorg Janke [email protected]
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) {..}
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
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