LvivJs — много полезного

23 сентября 2014
Дмитрий Ананский, JavaScript Developer

Во Львове еще в конце лета прошла конференция Lviv JS, рассказать руки дошли только сейчас, благо такая информация не портится.

Собирались докладчики из разных городов Украины и один очень веселый человек из Амстердама :). Очень

порадовало, что есть люди которые активно развивают такие вот комьюнити. На прослушивания докладов с перерывами ушел почти весь день, но запомнились, конечно, только самые яркие. О них и хочется рассказать, поделиться впечатлениями.

Jan Jongboom
Тот самый веселый человек из Амстердама. Пожалуй, один из самых ярких докладчиков на конференции, к тому же, именно ему выпала честь открывать ее. Человек, который пришел в мир JS из С.
Он рассказывал про новые возможности языка, которые станут полностью доступными (стандартизированными) через год или два, и про те, с которыми уже можно пользоваться.
Я, конечно не могу передать всю атмосферу с фирменными слайдами от Яна, но…

  1. Все, наверное, сталкивались с неудобствами работы с NodeList.

    document.querySelectorAll('li')     .filter(function(li) {  /* do something */  });  ERROR: document.querySelectorAll(...).filter  is not a function

    О нет, что же делать?! Теплый ламповый prototype может помочь

    Array.prototype.slice.call(       document.querySelectorAll('li')  )

    Есть более удобный способ:

       Array.from(       document.querySelectorAll('li')  )
  2. Variable scoping
    Каким будет значение, а?

    var a = 7;  if (something) {       var a = 9;       doSomethingElse(a);  }  console.log(a);

    Все, конечно зависит, от doSomethingElse(param). И для ответа на этот вопрос необходимо проследовать к прочтению этой самой функции. «Городу нужен герой...», и let — хороший кандидат для этого.

    let a = 7;  if (something) {       let a = 9;       doSomethingElse(a);  }  console.log(a);

    Теперь не надо волноваться : a = 7.

  3. Multiple return values.

    function getPosition() {       return [ 12, 91 ];  }  var pos = getPosition();  var x = pos[0],      y = pos[1];  function getPosition() {       return { x: 12, y: 91 };  }     var pos = getPosition();  var x = pos.x,       y = pos.y;

    Чтобы писать меньше строчек кода, опять же, можно использовать уже знакомый let.

    function getPosition() {       return [ 12, 91 ];  }  let [x, y] = getPosition();     function getPosition() {       return { x: 12, y: 91 };  }     let {x, y} = getPosition();
  4. Function boilerplate.

    someArray       .filter(function(item) {       return item.isActive;       })       .map(function(item) {       return item.id;       });     setTimeout(function() {       oSomeMagic()  }, 500);

    Можно обойтись более элегантным кодом:

    someArray       .filter(item => item.isActive)       .map(item => item.id);     setTimeout(function() {       doSomeMagic()  }, 500);
  5. Generators. Lazy functions.
    Генераторы перекочуют и в JS.

    function* turingWinners () {       console.log('Hello from our function');       yield "Alan J. Perlis";       console.log('I returned the first one');       yield "Maurice Wilkes";       console.log('I returned second');       yield "Richard Hamming";       yield "Marvin Minsky";  }     var iterator = turingWinners();     console.log(iterator.next());  console.log(iterator.next());
  6. Yield and deferred values.
    Суперкрутая комбинация, как по мне.
    function* run() {       yield sleep(2000);       console.log('It has been 2 seconds');  }     function sleep(ms) {       return new Promise((res, rej) => {       setTimeout(res, ms);  });  }     var it = run();  var ret = it.next().value;     ret.then(function() {       it.next();  });

Увидеть презентацию и посмотреть другие материалы Яна можно на http://www.slideshare.net/janjongboom.
Очень толковый разработчик который сейчас занимается FireFox OS.

Артем Захарченко
Он входит в команду, которая занимается разработкой стартапа обработки графических изображений для фотографов. Подробней про стартап можно узнать из их ресурса http://pics.io.

Артем рассказывал про трудности и подводные камни, с которыми пришлось столкнуться их команде при разработке, и путях решения проблем.

Основные проблемы при работы с графикой в web связаны с ограниченными ресурсами.
Причины падения браузеров:

  • утечка памяти;
  • большое количество http-запросов;
  • слабая конфигурация машины.

Для решения проблем, связанных с ограниченностью ресурсов, применялись различные паттерны проектирования:

  1. Trottling (http://msdn.microsoft.com/en-us/library/dn589798.aspx)

    Если коротко, выполнение метода не чаще одного раза в указанный период, даже если он будет вызван много раз в течение этого периода.

    По факту, незначительно влияет на графическую задержку для конечного пользователя, но при грамотном применении незаметна.

  2. Debouncing (http://davidwalsh.name/javascript-debounce-function).
    • реальный вызов происходит, только если с момента последней попытки прошло время, большее или равное задержке;
    • реальный вызов происходит сразу, а все остальные попытки вызова игнорируются, пока не пройдет время, большее или равное задержке, отсчитанной от времени последней попытки.
  3. Memoization (https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%BC%D0%BE%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F)
    Function.prototype.memoize = function(){       var self = this, cache = {};       return function( arg ){            if(arg in cache) {                 console.log('Cache hit for '+arg);                 return cache[arg];            } else {                 console.log('Cache miss for '+arg);                 return cache[arg] = self( arg );            }       }  }

Советы по микрооптимизации:

  • Use x | 0 instead of Math.floor
  • Clear arrays with .length = 0 to avoid creating a new Array
  • Use if .. else over switch
  • Use TypedArrays for floats or integers (e.g. vectors and matrices)

Также команда активно использует WebWorkers:

  • Web workers не могут доступиться к DOM элементам
  • Web workers ничего не знают о глабольном скоупе, скоуп у них свой
  • Web workers не знают о alert и confirm
  • Window, documents также недоступны

И, конечно, все с нетерпением ожидают выхода и очень надеются на WebGL, спецификацию, которая описывает JavaScript-интерфейс к стандарту OpenGL (Open Graphics Library), для организации кросc-платформенных параллельных вычислений с использованием CPU и GPU-видеокарт. Это должно перевести работу с графикой в вебе на качественно новый уровень.

Дмитрий Малеев
Поведал нам про мобильную разработку и формы ее существования.

image003

Конечно, на данном этапе развития лучше нативной разработки под отдельную платформу для качественного приложения не найти, но тут есть ограничения по материальным ресурсам, и приходиться искать компромиссы. Рисунок выше отображает варианты построения приложений под мобильные устройства. К сожалению, приходится чем-то жертвовать.

Спасибо, что дочитали.
Некоторые презентации можно найти в открытом доступе, например, тут (https://twitter.com/hashtag/lvivjs).