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?
m...
JAVASCRIPT	

ALTERNATIVEN
von Google entwickelt
entwickelt um JavaScript zu ersetzen
native Ausführung oder zu JavaScript ...
JAVASCRIPT	

ALTERNATIVEN
#import("dart:html");
main() {
// Find an element.
var elem = document.query("#id");
// Handle e...
JAVASCRIPT	

ALTERNATIVEN
import 'dart:math' as math;
class Point {
// Final variables cannot be changed once they are ass...
JAVASCRIPT	

ALTERNATIVEN
Strict superset of JavaScript
optional strict typing, 	

klassenbasierende, objektorientiert Pro...
JAVASCRIPT	

ALTERNATIVEN
class Person {
private name: string;
private age: number;
private salary: number;
constructor(na...
WEITERE

JAVASCRIPT	

ALTERNATIVEN
asm.js - extraordinarily optimizable, low-level subset of JavaScript	

!
!
Haxe - compi...
FRAMEWORKS
FRAMEWORKS
“Big 3”
from Google from people with Java background	

!
Für die Entwicklung von Single-Page-Apps gedacht	

!
Opinionated Structur...
you have ruined javascript
Online Slides	

mit Beispiel für Bidirektionales Databinding (Two-Way)
first application:

	

 $...
Ä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 ...
Fallstricke
"Die meisten Blogposts werden von Leuten
geschrieben die nicht viel (praxis) Erfahrung
haben.”	

!
&	

!
Die m...
The Way
Basis: Backbone.js	

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

!
Nutzung von Marionet...
• JavaScript + Datenbank > Offline first	

• Daten werden im local storage gespeichert	

• wenn online werden Daten synchron...
// This will store a task in this new user's store
!
var hoodie = new Hoodie();
!
var type = 'task';
var attributes = { ti...
DESKTOP APPLIKATIONEN	

MIT JAVASCRIPT
DESKTOP APPLIKATIONEN	

MIT JAVASCRIPT
node-webkit	

!
Basierend auf node.js & Webkit	

!
MacOS,Windows & Linux	

!
Durch ...
DESKTOP APPLIKATIONEN	

MIT JAVASCRIPT
node-webkit	

!
Applikation mit HTML5, CSS3, JS & WebGL 	

!
Direkter Zugriff auf D...
EVERYDAY	

TOOLS
• Paketmanager für’s Web	

• Installieren von Bibliotheken + Abhängigkeiten	

Bower
$ npm install -g bower
$ bower install...
• JavaScriptTask Manager
Grunt
• Scaffolding fuer Webapplikationen (HTML5, JS, CSS)	

• Baut auf Bower & Grunt auf	

• jQuery,Angular, Ember, Backbone, B...
JavaScript != jQuery
Talk Slides
80s Game Programming	

Introduction to React	

the secrets of the git ninjas	

Running Node.js apps in product...
JsUnconf 2014
JsUnconf 2014
JsUnconf 2014
JsUnconf 2014
JsUnconf 2014
JsUnconf 2014
JsUnconf 2014
JsUnconf 2014
JsUnconf 2014
JsUnconf 2014
JsUnconf 2014
Nächste SlideShare
Wird geladen in …5
×

JsUnconf 2014

716 Aufrufe

Veröffentlicht am

Javascript technologies

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
716
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
2
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

JsUnconf 2014

  1. 1. JAVASCRIPT ALTERNATIVEN
  2. 2. JAVASCRIPT ALTERNATIVEN Kompilieren zu JavaScript
  3. 3. JAVASCRIPT ALTERNATIVEN "It's just JavaScript" Vereinfachung von JavaScript Einflüsse von Ruby, Python, Haskell
  4. 4. 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!"); }
  5. 5. 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
  6. 6. 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")); }
  7. 7. 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); }
  8. 8. 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
  9. 9. 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 + ")"; } }
  10. 10. 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
  11. 11. FRAMEWORKS
  12. 12. FRAMEWORKS “Big 3”
  13. 13. 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
  14. 14. you have ruined javascript Online Slides mit Beispiel für Bidirektionales Databinding (Two-Way) first application:
 $ install yeoman
 $ yo angular
  15. 15. Ähnlich AngularJS - ohne Java Hintergrund Mehr JavaScript
  16. 16. Mehr Bibliothek - weniger Framework
  17. 17. FRAMEWORK IST NICHT ALLES Learnings fromTrivago
  18. 18. Clientseitiges Rendering funktioniert nicht: Framework <!> SEO ! Framework <!> Performance ! Framework <!> Code Size
  19. 19. 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)
  20. 20. 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
  21. 21. 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
  22. 22. • 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
  23. 23. // 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); });
  24. 24. DESKTOP APPLIKATIONEN MIT JAVASCRIPT
  25. 25. DESKTOP APPLIKATIONEN MIT JAVASCRIPT node-webkit ! Basierend auf node.js & Webkit ! MacOS,Windows & Linux ! Durch mitgelieferten Webkit-Browser nicht vom installierten Browser abhängig
  26. 26. DESKTOP APPLIKATIONEN MIT JAVASCRIPT node-webkit ! Applikation mit HTML5, CSS3, JS & WebGL ! Direkter Zugriff auf Dateisystem ! Keine Sandbox / same origin Beschränkungen
  27. 27. EVERYDAY TOOLS
  28. 28. • 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
  29. 29. • JavaScriptTask Manager Grunt
  30. 30. • 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
  31. 31. JavaScript != jQuery
  32. 32. 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

×