Пишем клиент без JavaScript

{

Тема: Пишем клиент без JavaScript,

Докладчик: Дашукевич Владимир,

Компания: XBSoftware,

Сообщество: 4frontby

}

JavaScript плох

Май 1995

JavaScript

Чем же JavaScript плох

Слишком гибкий
JavaScript не Java, C, C++
Медленный

Слишком гибкий

Как вы создаете объекты?

				function Person(name, age, job){
				    this.name = name;
				    this.age = age;
				    this.print = function(){
				    	  return name + " " + age;
					  };
				};
				var i = new Person("vlad", 26, "programmer")

				function createPerson(name, age, job){
					  var o = new Object();
				    o.name = name;
				    o.age = age;
				    o.print = function(){
				    	  return name + " " + age;
					  };
				};
				var i = createPerson("vlad", 26, "programmer")

				function Person(){};
				Person.prototype = {
				    name: "Vlad",
				    age: 26,
				    print: function(){
				    	  return name + " " + age;
					  }
				};
				var i = new Person();

				function Person(){
				    return {
				    	  name: "Vlad",
				    	  age: 26,
				    	  print: function(){
				    	  	  return name + " " + age;
					  	  }
					  };
				};
				var i = Person();

Как вы наследуете классы в JS?

				function extend(o){
				    function f(){}
				    f.prototype = o;
				    return new f();
				};
				var person = new Person();
				var anotherPerson = extend(person);

				function extendClass(Child, Parent){
					var f = function () { };
    				f.prototype = Parent.prototype;
    				var f = new F();
   				 
    				for (var prop in Child.prototype)
    					f[prop] = Child.prototype[prop];
    				Child.prototype = f;
    				Child.prototype.super = Parent.prototype;
				};

				var person = new Person();
				var anotherPerson = Object.create(person, {
					name: {
						value: "Vladimir"
					}
				});

Композиция лучше наследования

				var summary = data.map(convertArray)
						.filter(filterArray)
						.map(take("temperature"))
						.reduce(averageForArray, {})

Пример

				function Person(name, age, job){
				    this.name = name;
				    this.age = age;
				    this.job = job;
				    this.print = function(){
				    	  return name + " " + age + " " + job;
					  };
				};

Пример

				var person = new Person("Vladimir", 26, "Empty");
				//... code ...
				person.type = "type1";

Пример

				var person = new Person("Vladimir", 26, "Empty");
				//... code ...
				person.type = "type1";
				//... code ...
				person.hair = "black";

Пример

				var add = function(a, b){
				    return a + b;
				};

Пример

				var add = function(a, b){
				    return a + b;
				};
				var sum = add(3, 4);

Пример

				var add = function(a, b){
				    return a + b;
				};
				var sum = add(3, 4);
				var concat = add("Hello ", "World");

Решение

ECMAScript 2015
TypeScript
CoffeeScript
{{ слово из английского языка }}Script
Dart
Flow

ECMAScript 2015

Почему ECMAScript 2015 (babel)?

Будущее
Классы и наследование
Синтаксический сахар

Классы

				class View {
			  		constructor(options) {
			  		  this.model = options.model;
    			      this.template = options.template;
			  		}
			  		render() {
			  		  return _.template(this.template, this.model.toObject());
				  }
				}

Наследование

				class LogView extends View {
			  		render() {
			  		  var compiled = super.render();
    			      console.log(compiled);
			  		}
				}

Другие ограничения

				var person = {
			  		name: "vova"
			  	};
    			Object.seal(person);
    			//Object.freeze(person);
			  	person.age = 20;    // Error!

Другие ограничения

				var proxy = new Proxy({ name: "vova" }, {
			  		get: function(target, property) {
			  		  if (property in target) {
    				    return target[property];
			  		  } else {
					    throw new ReferenceError("Property does not exist.");
					  }
					}
				});

CoffeeScript

Почему CoffeeScript?

Классы и наследование
Ruby
Читабельность

Операторы

CoffeeScript	JavaScript
is	===
isnt	!==
not	!
and	&&
or	\|\|
true, yes, on	true
false, no, off	false

Пример

				launch() if ignition is on

				if (ignition === true) {
			  		launch();
				}

Пример

				linearSearch = (searchName) -> alert(name) 
					for name in names when name is searchName

Dart

Почему Dart?

Типы, классы, интерфейсы
Исправление ошибок на этапе написания кода (IDE)
Рефакторинг
Безопасность (XSS)
Java

Пример

				class Point {
			  		num x;
			  	    num y;
				}

				void main(List<String> arguments) {
			  		var point = new Point();
				}

Пример

				abstract class Cache<T> {
			  		T getByKey(String key);
			  		setByKey(String key, T value);
				}

TypeScript

Почему TypeScript?

Полностью совместим с ECMAScript 2015
Типы, классы, интерфейсы
Исправление ошибок на этапе написания кода
Поддержка существующих библиотек
Рефакторинг

Пример

				interface Person {
			  		firstname: string;
			  		lastname: string;
				}

				function greeter(p : Person) {
			  		return "Hello, " + p.firstname + " " + p.lastname;
				}

DefinitelyTyped

Flow

Почему Flow?

Тот же TypeScript только от Facebook
Типы, классы (но без интерфейсов)
Исправление ошибок на этапе написания кода
Совместим с ECMAScript 2015

Итоги

Разработчиков нужно ограничивать
Можно выбрать вид ограничений
Типизированные переменные уменьшают количество ошибок
Typescript/Flow

JavaScript не Java, C, C++

Почему Java, C, C++?

Многое уже написано
Не нужно обучение
Java, C, C++ быстрее

Как можно это сделать?

Писать нативные расширения?

NPAPI
ActiveX
Java Applets
Собрать собственный браузер

В чем подвох?

Не безопасно
Не портативно
Очень старо

Перевести C в JS

Low Level Virtual Machine

LLVM состоит из:

Frontend
Optimiser (Intermediate Representation)
Backend

Для перевода нам нужно

Frontend для C
Backend для JavaScript
Готово!

Bullet

Где он используется?

Grand Theft Auto IV
Шерлок Холмс
История игрушек 3
3ds Max
Maya 2012

ammo.js

Demo

Компиляция в Javacript

2006: Google Web Toolkit (GWT), Java в JS
2007: pyjamas, Python в JS
2008: Bridge.NET, C# в JS
2010: opal, Ruby в JS

Компиляторы в JS

Cheerp

Пример

				HTMLElement* body=document.get_body();
			  	HTMLElement* newElement=document.createElement("h1");
			  	newElement->set_textContent("Hello World");
				body->appendChild(newElement);

Итоги

Стоит забыть о ActiveX, NPAPI ...
Писать можно на чем угодно

Медленный

JavaScript быстрый для:

Построения UI
Простейших анимаций
Для обработки данных не больших размеров

Непредсказуемый

				var a = 42;
			  	var b = "a string";
			  	var z = a + b;//z = "42a string"
			  	 
			  	eval("z = z.substr(1, 2)");//z = "2a"
			  	 
			  	[1, "str", true, {three: 3}].forEach(function(item){
			  		  if (typeof item === typeof z) console.log(item);
		  		});

Решения

Ускорить движки
Запускать С/С++ процедуры (NaCl и PNaCl)
Сделать его предсказуемым (asm.js)
Придумать новый язык (WebAssembly)

NaCl и PNaCl

Почему NaCl и PNaCl?

Можно использовать написанный С/С++ код
Супер быстрый (почти как C++)
Безопасность

Что нужно сделать:

Скомпилировать С/С++
Создать манифест файл
Добавить embed элемент с ссылкой на манифест
Готово!

Demo

asmjs

Почему asmjs?

Это JavaScript

Портативность
Безопасность

Супер быстрый (2 раза медленнее C++)

Пример

				function MyAsmModule(stdlib, foreign, heap){
			  		"use asm";
			  	    //your perfect code
			  	    return {
			  	      export: f1
			  	    };
				}

Пример

				function MyAsmModule(stdlib, foreign, heap){
			  		"use asm";
			  	    //your perfect code
			  	    return {
			  	      export: f1
			  	    };
				}

Пример

				function MyAsmModule(stdlib, foreign, heap){
			  		"use asm";
			  	    //your perfect code
			  	    return {
			  	      export: f1
			  	    };
				}

Пример

				function MyAsmModule(stdlib, foreign, heap){
			  		"use asm";
			  	    //your perfect code
			  	    return {
			  	      export: f1
			  	    };
				}