Als PDF, PPTX herunterladen
![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"));
}](https://image.slidesharecdn.com/jsunconf2014-140623033221-phpapp02/75/JsUnconf-2014-9-2048.jpg)
JsUnconf 2014
- 4.
- 5.
- 6. JAVASCRIPT ALTERNATIVEN "It's just JavaScript" Vereinfachungvon 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 entwickeltum 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() { // Findan 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' asmath; 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 ofJavaScript 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 { privatename: 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 - extraordinarilyoptimizable, 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.
- 16.
- 17. from Google frompeople 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 ruinedjavascript 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 LearningsfromTrivago
- 22. Clientseitiges Rendering funktioniertnicht: Framework <!> SEO ! Framework <!> Performance ! Framework <!> Code Size
- 23. Architektur geht auchohne 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 Blogpostswerden 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 ! KeineBackbone-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 willstore 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.
- 32. DESKTOP APPLIKATIONEN MIT JAVASCRIPT node-webkit ! Basierendauf node.js & Webkit ! MacOS,Windows & Linux ! Durch mitgelieferten Webkit-Browser nicht vom installierten Browser abhängig
- 33. DESKTOP APPLIKATIONEN MIT JAVASCRIPT node-webkit ! Applikationmit HTML5, CSS3, JS & WebGL ! Direkter Zugriff auf Dateisystem ! Keine Sandbox / same origin Beschränkungen
- 35.
- 36. • Paketmanager für’sWeb • 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.
- 38. • Scaffolding fuerWebapplikationen (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.
- 43. Talk Slides 80s GameProgramming 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