Dart the better Javascript 2015

Dart
The better Javascript
Jorg Janke
jorg@accorto.com
Slides link:
http://lightningdart.com
October 2015

Structure
● What & Why Dart?
● Dart Language & Tooling
● Questions
○ no need to wait until the end

Where are You coming from?
● Java
○ GWT
○ Servlet, JSP, JSF, ..
● .Net
● PHP, Python,
Ruby, …
● Mobile Native
Front-end
Technology
● Javascript
○ CoffeeScript
○ Typescript
○ Dart
✋

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

What does Accorto do?
● Professional Services Automation (PSA)
on Salesforce https://www.accorto.com
○ Projects
■ Gantt
■ Resource Planning
○ Capturing Time & Expense
○ Billing

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

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

Lot’s of good Dart Overviews
Check
● https://www.dartlang.org
● Books ...
● https://www.dartlang.org/slides
I concentrate here on Developer experience

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

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!

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

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

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

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

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

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

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

➤ 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

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

Dart IDE options
WebStorm IDE
● Plugin
Other Editors
● Sublime, Eclipse,
Atom, Emacs, Vim
DartPad
https://dartpad.dartlang.org
● Interactive Editor
& Playground

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

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

Java Converts:
You are ultimately writing Javascript !!!

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

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

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) {}
○ saves the: this.p1 = p1;
● MyClass.fromXml(String xml) {..}
○ No overloading - better documentation
○ alternative
■ static MyClass parse(String xml) {..}

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

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

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”

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)
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 +=

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

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

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

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!

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

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

When “back” to Java Programming
● where are named parameters?
● why is async so hard?
● very happy to get back to
● Dart:
The better Javascript !

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

Dart the better Javascript 2015

More Related Content

What's hot

Viewers also liked

Similar to Dart the better Javascript 2015

Recently uploaded

Dart the better Javascript 2015