Index 2014 Volume 20 2014.pdf · Melliand International 2014 Index 2014
JsUnconf 2014
-
Upload
emrox -
Category
Technology
-
view
129 -
download
0
description
Transcript of JsUnconf 2014
![Page 1: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/1.jpg)
![Page 2: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/2.jpg)
![Page 3: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/3.jpg)
![Page 4: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/4.jpg)
JAVASCRIPT ALTERNATIVEN
![Page 5: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/5.jpg)
JAVASCRIPT ALTERNATIVEN
Kompilieren zu JavaScript
![Page 6: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/6.jpg)
JAVASCRIPT ALTERNATIVEN
"It's just JavaScript"
Vereinfachung von JavaScript Einflüsse von Ruby, Python, Haskell
![Page 7: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/7.jpg)
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!"); }
![Page 8: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/8.jpg)
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
![Page 9: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/9.jpg)
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")); }
![Page 10: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/10.jpg)
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); }
![Page 11: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/11.jpg)
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
![Page 12: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/12.jpg)
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 + ")"; } }
![Page 13: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/13.jpg)
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
![Page 14: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/14.jpg)
![Page 15: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/15.jpg)
FRAMEWORKS
![Page 16: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/16.jpg)
FRAMEWORKS“Big 3”
![Page 17: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/17.jpg)
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
![Page 18: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/18.jpg)
you have ruined javascript
Online Slides mit Beispiel für Bidirektionales Databinding (Two-Way)
first application: $ install yeoman $ yo angular
![Page 19: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/19.jpg)
Ähnlich AngularJS - ohne Java Hintergrund Mehr JavaScript
![Page 20: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/20.jpg)
Mehr Bibliothek - weniger Framework
![Page 21: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/21.jpg)
FRAMEWORK IST NICHT ALLES
Learnings from Trivago
![Page 22: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/22.jpg)
Clientseitiges Rendering funktioniert nicht:
Framework <!> SEO !Framework <!> Performance !Framework <!> Code Size
![Page 23: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/23.jpg)
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)
![Page 24: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/24.jpg)
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
![Page 25: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/25.jpg)
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
![Page 26: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/26.jpg)
![Page 27: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/27.jpg)
![Page 28: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/28.jpg)
• 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
![Page 29: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/29.jpg)
// 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); });
![Page 30: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/30.jpg)
![Page 31: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/31.jpg)
DESKTOP APPLIKATIONEN MIT JAVASCRIPT
![Page 32: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/32.jpg)
DESKTOP APPLIKATIONEN MIT JAVASCRIPT
node-webkit !
Basierend auf node.js & Webkit !
MacOS, Windows & Linux !
Durch mitgelieferten Webkit-Browser nicht vom installierten Browser abhängig
![Page 33: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/33.jpg)
DESKTOP APPLIKATIONEN MIT JAVASCRIPT
node-webkit !
Applikation mit HTML5, CSS3, JS & WebGL !
Direkter Zugriff auf Dateisystem !
Keine Sandbox / same origin Beschränkungen
![Page 34: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/34.jpg)
![Page 35: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/35.jpg)
EVERYDAY TOOLS
![Page 36: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/36.jpg)
• 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
![Page 37: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/37.jpg)
• JavaScript Task ManagerGrunt
![Page 38: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/38.jpg)
• 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
![Page 39: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/39.jpg)
![Page 40: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/40.jpg)
JavaScript != jQuery
![Page 42: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/42.jpg)
![Page 43: JsUnconf 2014](https://reader034.fdocuments.in/reader034/viewer/2022051400/54bd61914a7959a9278b45b6/html5/thumbnails/43.jpg)
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