Dart the Better JavaScript

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

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”

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

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

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

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

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

Why we picked
Dart
… not stayed with GWT

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

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

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

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

Demo
~ 1,400 kb compressed js

Grid Mode
Built in Analytics/Data Visualization

User defined - switchable Layout
Form Guidance Mode

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

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)

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

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

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

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

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

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

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

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

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

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) {..}

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) {..}

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();
}

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”

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

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

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?

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

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

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

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

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

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

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

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

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

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

Dart the Better JavaScript

More Related Content

What's hot (20)

Similar to Dart the Better JavaScript (20)

Recently uploaded (20)

Dart the Better JavaScript