JavaScript *

Перевод статьи «Building robust web apps with React: Part 3, testing with Jasmine», Matt Hinchliffe

От переводчика: это перевод третьей части цикла статей «Building robust web apps with React»
Переводы:

• Построение надежных веб-приложений на React: Часть 1, браузерные прототипы
• Построение надежных веб-приложений на React: Часть 2, оптимизация с Browserify
• Построение надежных веб-приложений на React: Часть 3, тестирование с Jasmine
• Построение надежных веб-приложений на React: Часть 4, серверная генерация

Во второй части я покрыл процесс оптимизации моего браузерного приложения Tube Tracker, но каждое вносимое мной изменение до сих пор требует обновление браузера, чтобы проверить, что все работает. Приложение всерьез требует набора тестов, чтобы ускорить процесс разработки и избежать регрессии кода. Как оказалось, это проще сказать, чем сделать, когда начинаешь работать с новой технологией, как React.

Перевод статьи «Building robust web apps with React: Part 2, optimising with Browserify», Matt Hinchliffe

От переводчика: это перевод второй части цикла статей «Building robust web apps with React».
Переводы:

• Построение надежных веб-приложений на React: Часть 1, браузерные прототипы
• Построение надежных веб-приложений на React: Часть 2, оптимизация с Browserify
• Построение надежных веб-приложений на React: Часть 3, тестирование с Jasmine
• Построение надежных веб-приложений на React: Часть 4, серверная генерация

В первой части, я осветил причины, почему по моему мнению, React захватывающий инструмент, который может быть использован для построения изоморфный или адаптивно-гибридных веб-сайтов, что может равняться динамичности мобильных приложений и надежности статичной страницы двадцатилетней давности. Я также написал базовое демо приложение, чтобы исследовать некоторые парадигмы и особенности React и показать, как быстро можно прототипировать динамические браузерные приложения, но это едва ли демонстрирует надежность, к которой я изначально стремился.

Код, который в начальном демо был представлен на выполнение браузеру, не проходит ни один базовый тест производительности; скрипты должны быть прекомпилированы, объединены и минифицированы перед отправкой на продакшн.

Введение

JavaScript мощный, но недопонятый язык программирования. Людям нравится говорить, что он является объектно-ориентированным языком программирования или является функциональным языком. Другим нравится говорить, что он не является объектно ориентированным или не является функциональным языком программирования. Некоторые скажут что он относится к обеим парадигмам или ни к одной из них — но, давайте отложим на пока этот спор в сторонку.

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

Хочу представить программную платформу автоматизации для дома на базе Node.js, которую можно скачать со всеми исходниками и установить прямо сейчас практически одним кликом (Windows) или одной командой (Linux/Debian).

Перевод статьи «Building robust web apps with React: Part 1, in-browser prototypes», Matt Hinchliffe

От переводчика: это первая статья из цикла «Building robust web apps with React».
Переводы:

• Построение надежных веб-приложений на React: Часть 1, браузерные прототипы
• Построение надежных веб-приложений на React: Часть 2, оптимизация с Browserify
• Построение надежных веб-приложений на React: Часть 3, тестирование с Jasmine
• Построение надежных веб-приложений на React: Часть 4, серверная генерация

Когда я смотрю на то, как устроены браузеры и протоколы, на которых работает веб, мне становится как-то тревожно. Есть столько всего, что может и, обычно, идет не так, что становится удивительно, как хоть что-то из того, что мы пишем, вообще работает. Надежность «вопреки всему» происходит от отказоустойчивости и обратной совместимости, которые укоренились в ключевые части веб-стека. Браузер всегда сделает все возможное, чтобы отобразить, что-то полезное, будь-то парсинг плохо написанного документа, в котором невозможно получить зависимости, или, который на 10 лет устарел.


404PageFound содержит до сих пор работающие сайты, созданные еще в 1993 году.

В этом году на //build2014 были представлены два больших анонса, относящихся к библиотеке Windows для JavaScript (“WinJS”). Первый обозначил работу MS Open Technology над тем, чтобы сделать библиотеку WinJS кроссплатформенной и с доступным открытым кодом. Теперь у разработчиков есть возможность привнести персональность Windows-приложений на другие устройства и браузеры. Больше информации об этом нововведении можно найти в статье Марии Канг.



Второй анонс – релиз версии 2.1. для WinJS. Теперь, с выходом Windows Phone 8.1, библиотека WinJS также доступна и на мобильной платформе. WinJS 2.1 адаптирует возможности WinJS 2.0 (для Windows-приложений) под особенности Windows Phone. Мы также добавили новые элементы управления и возможности, специфичные для телефона, при этом не жертвуя производительностью на недорогих устройствах.

Теперь портировать ваше существующее приложение для Windows Store можно легко и безболезненно, охватив тем самым также платформу Windows Phone. Используя привычные и знакомые вам языки и инструменты, вы можете разделять ресурсы между вашими приложениями для Windows и Windows Phone.Размещение таких файлов, как исходный код, изображения, данные для локализации и т.д. в одном месте позволяет уменьшить стоимость и усилия, которые потребовались бы для создания двух отдельных приложений, ориентированных на разные платформы. Такое совмещение лежит в основе идеи универсальных Windows-приложений, недавно анонсированной Дэвидом Трэдвилом в докладе на открытии первого дня конференции Build.

Visual Studio предоставляет вам три набора шаблонов: приложения для Windows, Windows Phone и универсальные приложения.

Если каждое из приложений под Windows и Windows Phone направлено на соответвующий форм-фактор, то с помощью универсальных приложений у вас есть потенциальная возможность написать приложение один раз и при этому покрыть обе платформы. Другими словами, разработчики могут создавать замечательные нативные приложения под обе платформы сразу.

В этот статье мы рассмотрим различия в дизайне и наборе функциональных возможностей, а также приведем ссылки на дополнительные ресурсы по данной теме.

Введение

В данные статье я хочу вам рассказать о моем способе загрузки файлов на сервер Node.js с помощью JQuery Ajax. Да, я понимаю что есть уже и другие решения, например JQuery File Upload, но все таки иногда хочется сделать что-то уже существующее, для того чтобы понять как это все устроено. Данное решение является учебным примером, все замечания по поводу кода или предложения по его улучшению оставляйте в комментариях.

Что будем использовать

1. Bootstrap
2. JQuery
3. Модуль для Node.js Multiparty

Angular Light — это самостоятельный клиентский MV(C/VM) фреймворк, который построен на идеях Angular.js и Knockout.js, и похож на упрощенный Angular.js

Основные изменения за последнее время:

• Поддержка «совеременных» браузеров без зависимостей (12kb): Google Chrome, Firefox, IE9+ (для IE8 нужен jQuery)
• Сделан модуль анимации, можно использовать CSS от Angular.js 1.2+
• Одноразовый биндинг — после получения первых данных $watch удаляется, для этого нужно дописать "::" в начало, например {{::variable}} вместо {{variable}}.
• Сохранение результирующего списка в директиве al-repeat, после применения фильтра исходный список может изменится и иногда нужно получить результат, например для определения кол-ва элементов или для вывода «список пуст». Использовать можно так: al-repeat="item in list | filter store to variable", пример.
• Появился «track by» для директивы al-repeat — способ идентификации элементов в списке, работает по аналогии ng-repeat из Angular.js
• Теги для al-app, позволяют делать биндинг разных частей DOM к одному scope. Бывает полезным когда на странице используется несколько разных фреймворков и не желательно «захватывать» весь документ, с помощью тегов приложение можно «раскидать» в разные места, пример.
• В ф-ии $watch появилось событие $finishBinding, оно срабатывает после того как произойдет биндинг. Это можно использовать в место timeout в директивах (или контроллерах :) ).
• Появилась возможность в любой момент сделать текстовую директиву статической с помощью env.finally()

Перевод статьи «5 Practical Examples For Learning The React Framework», Martin Angelov

Вы вероятно слышали о популярном JavaScript фреймворке от Facebook – React. Он используется на многих популярных веб-сайтах, в том числе в Facebook и Instagram. В этой статье вы увидите 5 практических примеров, построенных при помощи React, которые помогут вам начать работать с этим фреймворком.

Доброго времени, суток уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Awesome Awesomeness

В прошедшие несколько недель мне регулярно попадались Awesome-* проекты, о которых я упоминал в последних подборках. Началось все с Awesome-PHP, потом появились «живые списки» полезностей для сисадминов и питонистов. Все заметили положительную тенденцию и как по желанию это переросло в целый тренд. Сейчас есть коллекции инструментов для языков Ruby, Go, NodeJS, JavaScript, Java, Scala, Bash и др. Уже даже существуют подобные наборы для целых направлениям в ИТ, к примеру Big Data. Awesome Awesomeness — это живой список живых списков всего самого необходимого для разработчика из той или иной сферы.

Breach — полноценный браузер на JavaScript

Перевод статьи «Pub/Sub JavaScript Object», David Walsh

Есть три техники написания AJAX веб-сайтов: делегация событий, управление историей и коммуникация pub/sub на уровне приложения. Я использую все три техники и я хотел бы поделиться с вами самой простой из них: крошечным pub/sub модулем, который я использую на своем веб-сайте.

Если вы не знаете, что такое pub/sub, то суть в том, что вы публикуете в некую тему(topic), и кто угодно может на нее подписываться. Это похоже на то, как работает радио: радиостанция вещает (публикует) и каждый может слушать (подписываться). Это превосходный подход для модульных веб-приложений; это способ глобальной коммуникации без привязки к какому-то конкретному объекту.

Предыстория

Хотелось бы начать с предыстории. В данный момент я разрабатываю некое веб-приложение на Java, ничего необычного, но в документе от заказчика есть требование: будущие администраторы приложения должны иметь возможность налету подгружать код бизнес логики на сервер. Вроде бы ничего сверхъестественного, нужно будет сделать подгрузку java-классов, думал я, пока на днях мне в голову не пришла идея: “А что, если дать возможность программировать методы бизнес логики на JavaScript?”.
В тот момент идея показалась мне очень хорошей, и я видел целый ряд преимуществ этой идеи перед простой подгрузкой java-классов:

• Во-первых, JavaScript — это очень простой язык описания логики, писать на нем может любой программист, знакомый с принципами ООП и C-подобным синтаксисом.
• Во-вторых, т.к. внешнее API сервера спроектировано в стиле REST, js-код отлично ложится в рамки ресурса, без проблем сериализуется в JSON-строку и не требует компиляции и дополнительных манипуляций.
  
• В-третьих, исполнение JavaScript-кода интерпретатором — это исполнение кода в рамках песочницы безопасности, что дает нам возможность четко настраивать правила поведения кода бизнес-логики.

Но не стоит забывать, что большая сила — это большая ответственность, поэтому, вслед за новыми возможностями, появляются новые вопросы, которые требуют развернутого ответа.
В этой статье я бы хотел вкраце рассказать об идее описания бизнес логики на чистом js, затронуть теоретическую и практическую части, а так же описать некоторые нюансы, которые могут возникнуть вслед за этим решением.

Двенадцатый митап MoscowJS прошёл 26 июня в офисе компании Mail.ru. На встрече выступили ребята из Яндекса, Mail.ru и Tai.st. Говорили об облаках, оптимизациях мобильного веба и, конечно, расчёсках! Мы собрали видео и другие материалы события в одном посте.

Вот как это было…

Когда я разрабатываю системы на Zend Framework, то всегда использую gettext и Zend_Translate. Всё лаконично просто и обычно не возникает никаких проблем с переводом даже больших проектов. Для каждого языка генерируются свои файлы .po и .mo, переводы пляшут от дефолтного языка, ключи тоже на этом же языке. Переводчикам удобно передать эти файлы, которые они могут открыть в POEdit и удобно всё перевести. Так вот, на стороне сервера всё очень просто, но часто нужно переводить какие-то сообщения «на лету» в JavaScript, а он не понимает ваши .mo файлы. Но хотелось бы пользоваться именно ими, чтобы не разделять перевод одного проекта на 2 части (backend, frontend). И я начал искать. В Интернете существует достаточно большое количество таких решений, но все они почему-то обрастают зависимостями:

code.google.com/p/gettext-js (Prototype)
angular-gettext.rocketeer.be (Angular)
github.com/jakob-stoeck/jquery-gettext (jQuery)

А хотелось иметь именно «pure-js» решение. Ок, напишем своё.

Перевод статьи «JavaScript Modules» с сайта jsmodules.io.

В новой версии JavaScript появится модульная система, главным образом вдохновленная идеей модулей Node.js.
В этой статье я расскажу, как это будет работать.

Создание модуля

В качестве упражнения, мы построим простой asap модуль, который позволит назначать выполнение действий «как только так сразу» асинхронным образом. В Node.js, вы можете сделать это при помощи process.nextTick, есть и разные подходы, которые работают во многих браузерах. Мы создадим модуль, который будет работать в любом окружении.¹

Введение

Здравствуйте. Не так давно я решил попробовать себя в качестве разработчика под известную каждому платформу Android. На пути разработки я столкнулся с многими проблемами и одной из них оказалась создание картинок под разные разрешения экранов. Сначала я пробовал создать картинки в PhotoShop, но это оказалось муторно, нужно сохранять при любом изменении 5 картинок в разных разрешениях, да и не гений я этой программы. И тут мне пришла в голову мысль нарисовать картинки в SVG, до этого у меня был опыт работы с данным форматом, я делал визуализацию к курсачу по системам массового обслуживания (смайлики бегали в кассу и иногда скапливались в очереди).

Для начала хотел бы вам сказать, что моя специализация — это Backend, но версткой и клиентской частью приходится заниматься постоянно, особенно в своих проектах, которые я делаю в одиночку. Уже давно стало негласным правилом то, что сайт должен быть удобен на всех устройствах, включая всё их разнообразие, особенно в век популяризации мобильного интернета. Благо, CSS3 позволяет это делать при помощи медиа-выражений (media queries). Но есть еще один способ, показавшийся мне более удобным. В зависимости от размера экрана, его ориентации, типа устройства, устанавливать глобальные стили тегу html (можно и другим элементам). А в CSS, отталкиваясь от этих классов, задавать особые стили для разных случаев. Так CSS станет более понятным и мы избавимся от использования медиа-выражений. Для этого нам и понадобится Restive.JS. Так как я человек-практик, да и полное описание лучше читать на сайте плагина, то в статье я ограничусь созданием адаптивной мини-страницы, в процессе которого, надеюсь, станет понятно, для чего всё это необходимо.

В этом посте я хочу обобщить и поделится полученным опытом при разработке библиотеки node-queue-lib. Я расскажу о технологиях, которые помогли мне довести дело до финального конца — работоспособного кода, который уже работает на одном из моих сервисов. Особенностью данной библиотеки является кросс-платформенный клиент, т.е. клиент работающий в node.js и браузере и основан на одном и том же коде. В посте будут описаны следующие инструменты, без которых разработка этой библиотеки превратилась бы в ад:

• Тестирование (jasmine_node)
• Покрытие кода тестами (istanbul)
• Сборка клиенткой части библиотеки (browserify)
• Автоматизированное тестирование клиента (phantomjs)
• Поиск утечек памяти (memwatch)

Если Вы об этом ещё ничего не слышали и имеете желание написать законченный продукт в надёжности которого Вы будете уверены, эта обзорная статья поможет Вам познакомится с одним из вариантов комплекта инструментов для полноценного контроля качества кода javascript библиотеки.

И дополнительно, повторю, что статья обзорная, и не ставит целью научить Вас виртуозно пользоваться всеми перечисленными инструментами. Я лишь покажу дверь, но откроете Вы её сами…

В прошлой статье я рассказывал про свое первое знакомство с AngularJS. С тех пор прошел уже год, сейчас у меня новые проекты и другие, часто менее тривиальные задачи. Здесь я опишу несколько нюансов, с которыми мне пришлось столкнуться в процессе работы над одной из систем. Надеюсь, читатели смогут извлечь пользу из моих практик.

Поиск и якорь

Предположим, что нам поступила задача разработать клиентскую часть для нашего нового проекта. Это каталог, в котором будут храниться сотни тысяч документов. Поскольку он довольно большой, в API предусмотрена возможность загружать элементы постранично (с указанием начального индекса) а также фильтровать по отдельным полям в документе.
А для того, чтобы пользователи не терялись в системе и могли делиться между собой информацией, клиент должен сохранять свое состояние в адресной строке.

Что ж, задание понятно. Приступаем.

Перевод статьи «JavaScript CustomEvent», David Walsh

С самого появления JavaScript, события были шлюзом ко взаимодействию пользователя в браузере. События сообщают нам не только о том, что происходит взаимодействие, но также вид взаимодействия, задействованные элементы и предоставляют методы для работы с событием. Создание и инициирование(triggering) кастомных событий всегда являлось более сложной задачей. С использованием JavaScript CustomEvent API, эта сложность может быть устранена. CustomEvent API позволяет разработчикам не только создавать кастомные события, но также инициировать их на элементах DOM, передавая данные по цепочке. Самое главное, что API максимально прост!