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.
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. Lot’s 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
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
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 = r’raw 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<int> ints) {..}
int x = add([1,”a”, 3]);
List<O1> o1List = …;
List<O2> 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 don’t 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