4. JAVASCRIPT
ALTERNATIVEN

5. JAVASCRIPT
ALTERNATIVEN
Kompilieren zu JavaScript

6. JAVASCRIPT
ALTERNATIVEN
"It's just JavaScript"
Vereinfachung von JavaScript
Einflüsse von Ruby, Python, Haskell

7. JAVASCRIPT
ALTERNATIVEN
math =
root: Math.sqrt
square: square
cube: (x) -> x * square x
!
alert "I knew it!" if elvis?
math = {
root: Math.sqrt,
square: square,
cube: function(x) {
return x * square(x);
}
};
!
if (typeof elvis !== "undefined" && elvis !== null) {
alert("I knew it!");
}

8. JAVASCRIPT
ALTERNATIVEN
von Google entwickelt
entwickelt um JavaScript zu ersetzen
native Ausführung oder zu JavaScript kompilieren
(kann in Chrome nativ ausgeführt werden)
class-based, single inheritance, object-oriented language
with C-style syntax

9. JAVASCRIPT
ALTERNATIVEN
#import("dart:html");
main() {
// Find an element.
var elem = document.query("#id");
// Handle events.
elem.on.click.add((event) => print('click!'));
// Set an attribute.
elem.attributes['name'] = 'value';
// Add a child element.
elem.elements.add(new Element.tag("p"));
// Add a CSS class to each child element.
elem.elements.forEach((e) => e.classes.add("important"));
}

10. JAVASCRIPT
ALTERNATIVEN
import 'dart:math' as math;
class Point {
// Final variables cannot be changed once they are assigned.
final num x, y;
// A constructor, with syntactic sugar for setting instance variables.
Point(this.x, this.y);
// A named constructor with an initializer list.
Point.origin() : x = 0, y = 0;
// A method.
num distanceTo(Point other) {
var dx = x - other.x;
var dy = y - other.y;
return math.sqrt(dx * dx + dy * dy);
}
}
// All Dart programs start with main().
main() {
// Instantiate point objects.
var p1 = new Point(10, 10);
var p2 = new Point.origin();
var distance = p1.distanceTo(p2);
print(distance);
}

11. JAVASCRIPT
ALTERNATIVEN
Strict superset of JavaScript
optional strict typing,
klassenbasierende, objektorientiert Programmierung
Alle JavaScripte, die strict ausführbar sind, sind valideTypeScripte
Unterstützung von Header-Dateien

12. JAVASCRIPT
ALTERNATIVEN
class Person {
private name: string;
private age: number;
private salary: number;
constructor(name: string, age: number, salary: number) {
this.name = name;
this.age = age;
this.salary = salary;
}
toString(): string {
return this.name + " (" + this.age + ")" + "(" + this.salary + ")";
}
}

13. WEITERE
JAVASCRIPT
ALTERNATIVEN
asm.js - extraordinarily optimizable, low-level subset of JavaScript
!
!
Haxe - compiles to several platforms (C++, Flash, JS, Neko, PHP)
!
!
LiveScript - indirect descendant of CoffeeScript, assist in
functional style programming

15. FRAMEWORKS

16. FRAMEWORKS
“Big 3”

17. from Google from people with Java background
!
Für die Entwicklung von Single-Page-Apps gedacht
!
Opinionated Structure (ähnlich Rails)
!
wiederverwendbare Komponenten
!
durch kleine Module gut fürTeams

18. you have ruined javascript
Online Slides
mit Beispiel für Bidirektionales Databinding (Two-Way)
first application:
$ install yeoman
$ yo angular

19. Ähnlich AngularJS - ohne Java Hintergrund
Mehr JavaScript

20. Mehr Bibliothek - weniger Framework

21. FRAMEWORK
IST NICHT ALLES
Learnings fromTrivago

22. Clientseitiges Rendering funktioniert nicht:
Framework <!> SEO
!
Framework <!> Performance
!
Framework <!> Code Size

23. Architektur geht auch ohne Framework
- splitted basic js app:
- modules
- data objects
- display / user interaction (views)
!
- communication using Events / Public APIs
!
- use AMD (z.B. requireJS)

24. Fallstricke
"Die meisten Blogposts werden von Leuten
geschrieben die nicht viel (praxis) Erfahrung
haben.”
!
&
!
Die meisten Beispiele sind zu einfach für grosse,
skalierende Applikationen

25. The Way
Basis: Backbone.js
!
Keine Backbone-Views, hauptsächlich
clientseitiges Rendering (SEO)
!
Nutzung von Marionette.js
!
Langsamer Umstieg (von jQuery) durch
Nutzung von Self Contained Modules

28. • JavaScript + Datenbank > Offline first
• Daten werden im local storage gespeichert
• wenn online werden Daten synchronisiert
• jQuery like API + Angular JS, EmberJS, Backbone
• Document-based Storage mit CouchDB

29. // This will store a task in this new user's store
!
var hoodie = new Hoodie();
!
var type = 'task';
var attributes = { title: 'Try out hoodie today’ };
!
hoodie.store.add(type, attributes)
.done(function (newObject) {
console.log(‘data saved!’);
});
// This load store tasks from user's store
!
var hoodie = new Hoodie();
!
var type = 'task';
hoodie.store.findAll(type)
.done(function (tasks) {
console.log(‘Tasks:‘);
console.log(tasks);
});

31. DESKTOP APPLIKATIONEN
MIT JAVASCRIPT

32. DESKTOP APPLIKATIONEN
MIT JAVASCRIPT
node-webkit
!
Basierend auf node.js & Webkit
!
MacOS,Windows & Linux
!
Durch mitgelieferten Webkit-Browser
nicht vom installierten Browser abhängig

33. DESKTOP APPLIKATIONEN
MIT JAVASCRIPT
node-webkit
!
Applikation mit HTML5, CSS3, JS & WebGL
!
Direkter Zugriff auf Dateisystem
!
Keine Sandbox / same origin Beschränkungen

35. EVERYDAY
TOOLS

36. • Paketmanager für’s Web
• Installieren von Bibliotheken + Abhängigkeiten
Bower
$ npm install -g bower
$ bower install marionette
!
marionette#1.8.5 app/bower_components/marionette
├── backbone#1.1.2
├── backbone.babysitter#0.1.4
├── backbone.wreqr#1.3.1
├── jquery#2.1.0
└── underscore#1.6.0

37. • JavaScriptTask Manager
Grunt

38. • Scaffolding fuer Webapplikationen (HTML5, JS, CSS)
• Baut auf Bower & Grunt auf
• jQuery,Angular, Ember, Backbone, Bootstrap, …
$ npm install -g yo
$ npm install -g generator-angular
$ yo angular

40. JavaScript != jQuery

43. Talk Slides
80s Game Programming
Introduction to React
the secrets of the git ninjas
Running Node.js apps in production (Resources and links)
Your first steps with Clojurescript and Om
Intro to WebRTC
Angular PerformanceTuning for large Apps
Hoodie + AngularJS = <3
Math Fun: Procedural Music with JavaScript
Decentralise ALLTHETHINGS!!!
ITTAKES AVILLAGETO MAKE A PROGRAMMER
Stop storing your users' data! An introduction to unhosted web apps and remoteStorage
HTML enhanced for web apps - Introduction to AngularJS withYeoman
Desktop Applications with Javascript and node-webkit
AngularJS and i18n
Digital self defense - Mitigate Clickjacking and XSS attacks with HTTP Headers
Animated UI Changes: Sidebar Fly Animation and Reorder Animation
Hypermedia APIs
Testing CSS support with JavaScript
Beyond theTo-Do List
Grunt vs Gulp