JsUnconf 2014

JAVASCRIPT ALTERNATIVEN

JAVASCRIPT ALTERNATIVEN

Kompilieren zu JavaScript

JAVASCRIPT ALTERNATIVEN

"It's just JavaScript"

Vereinfachung von JavaScript Einflüsse von Ruby, Python, Haskell

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!"); }

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

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

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

JAVASCRIPT ALTERNATIVEN

Strict superset of JavaScript

optional strict typing, klassenbasierende, objektorientiert Programmierung

Alle JavaScripte, die strict ausführbar sind, sind valide TypeScripte

Unterstützung von Header-Dateien

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 + ")"; } }

WEITERE JAVASCRIPT

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

FRAMEWORKS

FRAMEWORKS“Big 3”

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ür Teams

you have ruined javascript

Online Slides mit Beispiel für Bidirektionales Databinding (Two-Way)

first application: $ install yeoman $ yo angular

Ähnlich AngularJS - ohne Java Hintergrund Mehr JavaScript

Mehr Bibliothek - weniger Framework

FRAMEWORK IST NICHT ALLES

Learnings from Trivago

Clientseitiges Rendering funktioniert nicht:

Framework <!> SEO !Framework <!> Performance !Framework <!> Code Size

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)

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

The Way

Basis: Backbone.js !Ke ine Backbone -V i ews , h aup t s ä ch l i ch clientseitiges Rendering (SEO) !Nutzung von Marionette.js !Langsamer Umstieg (von jQuer y) durch Nutzung von Self Contained Modules

• 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

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

DESKTOP APPLIKATIONEN MIT JAVASCRIPT

DESKTOP APPLIKATIONEN MIT JAVASCRIPT

node-webkit !

Basierend auf node.js & Webkit !

MacOS, Windows & Linux !

Durch mitgelieferten Webkit-Browser nicht vom installierten Browser abhängig

DESKTOP APPLIKATIONEN MIT JAVASCRIPT

node-webkit !

Applikation mit HTML5, CSS3, JS & WebGL !

Direkter Zugriff auf Dateisystem !

Keine Sandbox / same origin Beschränkungen

EVERYDAY TOOLS

• 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

• JavaScript Task ManagerGrunt

• 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

JavaScript != jQuery

Talk Slides80s 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 Performance Tuning for large Apps

Hoodie + AngularJS = <3 Math Fun: Procedural Music with JavaScript

Decentralise ALL THE THINGS!!! IT TAKES A VILLAGE TO MAKE A PROGRAMMER

Stop storing your users' data! An introduction to unhosted web apps and remoteStorage

HTML enhanced for web apps - Introduction to AngularJS with Yeoman 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 the To-Do List

Grunt vs Gulp