SlideShare ist ein Scribd-Unternehmen logo
1 von 43
Downloaden Sie, um offline zu lesen
JsUnconf 2014
JsUnconf 2014
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 valideTypeScripte
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	

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
JsUnconf 2014
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ürTeams
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 fromTrivago
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	

!
Keine Backbone-Views, hauptsächlich
clientseitiges Rendering (SEO)	

!
Nutzung von Marionette.js	

!
Langsamer Umstieg (von jQuery) durch
Nutzung von Self Contained Modules
JsUnconf 2014
JsUnconf 2014
• 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);
});
JsUnconf 2014
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
JsUnconf 2014
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
• JavaScriptTask Manager
Grunt
• 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
JsUnconf 2014
JavaScript != jQuery
JsUnconf 2014
JsUnconf 2014
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

Weitere ähnliche Inhalte

Was ist angesagt?

Varnish PHP Unconference Hamburg 2012
Varnish PHP Unconference Hamburg 2012Varnish PHP Unconference Hamburg 2012
Varnish PHP Unconference Hamburg 2012Florian Holzhauer
 
Production-ready Infrastruktur in 3 Wochen
Production-ready Infrastruktur in 3 WochenProduction-ready Infrastruktur in 3 Wochen
Production-ready Infrastruktur in 3 WochenAndré Goliath
 
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018Christian Mücke
 

Was ist angesagt? (7)

Varnish PHP Unconference Hamburg 2012
Varnish PHP Unconference Hamburg 2012Varnish PHP Unconference Hamburg 2012
Varnish PHP Unconference Hamburg 2012
 
Einführung in React
Einführung in ReactEinführung in React
Einführung in React
 
Hdc2012 cordova-präsi
Hdc2012 cordova-präsiHdc2012 cordova-präsi
Hdc2012 cordova-präsi
 
Wordpress im docker
Wordpress im dockerWordpress im docker
Wordpress im docker
 
Production-ready Infrastruktur in 3 Wochen
Production-ready Infrastruktur in 3 WochenProduction-ready Infrastruktur in 3 Wochen
Production-ready Infrastruktur in 3 Wochen
 
Pimcore
PimcorePimcore
Pimcore
 
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
 

Ähnlich wie JsUnconf 2014

Backend-Services mit Rust
Backend-Services mit RustBackend-Services mit Rust
Backend-Services mit RustJens Siebert
 
Microservices mit Rust
Microservices mit RustMicroservices mit Rust
Microservices mit RustJens Siebert
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
Integration von Security-Checks in die CI-Pipeline
Integration von Security-Checks in die CI-PipelineIntegration von Security-Checks in die CI-Pipeline
Integration von Security-Checks in die CI-PipelineOPEN KNOWLEDGE GmbH
 
Einfuehrung in Elasticsearch
Einfuehrung in ElasticsearchEinfuehrung in Elasticsearch
Einfuehrung in ElasticsearchFlorian Hopf
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestBastian Feder
 
Andy bosch-jsf-javascript
Andy bosch-jsf-javascriptAndy bosch-jsf-javascript
Andy bosch-jsf-javascriptAndy Bosch
 
Einführung React Native
Einführung React NativeEinführung React Native
Einführung React NativeMarkus Günther
 
Java und Go im Vergleich
Java und Go im VergleichJava und Go im Vergleich
Java und Go im VergleichQAware GmbH
 
Java Code Quality: Gute Software braucht guten Code - Regeln für verständlich...
Java Code Quality: Gute Software braucht guten Code - Regeln für verständlich...Java Code Quality: Gute Software braucht guten Code - Regeln für verständlich...
Java Code Quality: Gute Software braucht guten Code - Regeln für verständlich...GFU Cyrus AG
 
Creasoft - Windows powershell
Creasoft - Windows powershellCreasoft - Windows powershell
Creasoft - Windows powershellCreasoft AG
 
Einführung in Elasticsearch
Einführung in ElasticsearchEinführung in Elasticsearch
Einführung in ElasticsearchFlorian Hopf
 
Einführung in Puppet und Vagrant
Einführung in Puppet und VagrantEinführung in Puppet und Vagrant
Einführung in Puppet und Vagrants0enke
 
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Sven Haiges
 
Einfacher bauen
Einfacher bauenEinfacher bauen
Einfacher bauenjohofer
 
Docker und Kubernetes Patterns & Anti-Patterns
Docker und Kubernetes Patterns & Anti-PatternsDocker und Kubernetes Patterns & Anti-Patterns
Docker und Kubernetes Patterns & Anti-PatternsJosef Adersberger
 

Ähnlich wie JsUnconf 2014 (20)

Testing tools
Testing toolsTesting tools
Testing tools
 
Backend-Services mit Rust
Backend-Services mit RustBackend-Services mit Rust
Backend-Services mit Rust
 
Node.js für Webapplikationen
Node.js für WebapplikationenNode.js für Webapplikationen
Node.js für Webapplikationen
 
Microservices mit Rust
Microservices mit RustMicroservices mit Rust
Microservices mit Rust
 
Webapplikationen mit Node.js
Webapplikationen mit Node.jsWebapplikationen mit Node.js
Webapplikationen mit Node.js
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Integration von Security-Checks in die CI-Pipeline
Integration von Security-Checks in die CI-PipelineIntegration von Security-Checks in die CI-Pipeline
Integration von Security-Checks in die CI-Pipeline
 
Einfuehrung in Elasticsearch
Einfuehrung in ElasticsearchEinfuehrung in Elasticsearch
Einfuehrung in Elasticsearch
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
 
Andy bosch-jsf-javascript
Andy bosch-jsf-javascriptAndy bosch-jsf-javascript
Andy bosch-jsf-javascript
 
Einführung React Native
Einführung React NativeEinführung React Native
Einführung React Native
 
Java und Go im Vergleich
Java und Go im VergleichJava und Go im Vergleich
Java und Go im Vergleich
 
Java Code Quality: Gute Software braucht guten Code - Regeln für verständlich...
Java Code Quality: Gute Software braucht guten Code - Regeln für verständlich...Java Code Quality: Gute Software braucht guten Code - Regeln für verständlich...
Java Code Quality: Gute Software braucht guten Code - Regeln für verständlich...
 
Creasoft - Windows powershell
Creasoft - Windows powershellCreasoft - Windows powershell
Creasoft - Windows powershell
 
PHP Sucks?!
PHP Sucks?!PHP Sucks?!
PHP Sucks?!
 
Einführung in Elasticsearch
Einführung in ElasticsearchEinführung in Elasticsearch
Einführung in Elasticsearch
 
Einführung in Puppet und Vagrant
Einführung in Puppet und VagrantEinführung in Puppet und Vagrant
Einführung in Puppet und Vagrant
 
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006
 
Einfacher bauen
Einfacher bauenEinfacher bauen
Einfacher bauen
 
Docker und Kubernetes Patterns & Anti-Patterns
Docker und Kubernetes Patterns & Anti-PatternsDocker und Kubernetes Patterns & Anti-Patterns
Docker und Kubernetes Patterns & Anti-Patterns
 

JsUnconf 2014

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