Обновить
128K+

JavaScript *

Прототипно-ориентированный язык программирования

239,62
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Чем полезен мономорфизм?

Время на прочтение14 мин
Охват и читатели33K


Выступления и посты в блогах о производительности JavaScript часто обращают внимание на важность мономорфного кода, однако обычно не дается внятного никакого объяснения, что такое мономорфизм/полиморфизм и почему это имеет значение. Даже мои собственные выступления зачастую сводятся к дихотомии в стиле Невероятного Халка: «ОДИН ТИП ХОРОШО! ДВА ТИП ПЛОХО!». Неудивительно, что когда люди обращаются ко мне за советом по производительности, чаще всего они просят объяснить, что на самом деле такое мономорфизм, откуда берется полиморфизм и что в нем плохого.

Ситуацию осложняет еще и то, что само слово «полиморфизм» имеет множество значений. В классическом объектно-ориентированном программировании полиморфизм связан с созданием дочерних классов, в которых можно переопределить поведение базового класса. Программисты, работающие с Haskell, вместо этого подумают о параметрическом полиморфизме. Однако полиморфизм, о котором предупреждают в докладах о производительности JavaScript – это полиморфизм вызовов функции.

Я объяснял этот механизм столькими различными путями, что наконец-то собрался и написал данную статью: теперь можно будет не импровизировать, а просто дать на нее ссылку.

Я также попробовал новый способ объяснять вещи – изображая взаимодействие составных частей виртуальной машины в виде коротких комиксов. Кроме того, данная статья не покрывает некоторые детали, которые я посчитал незначительными, излишними или не связанными напрямую.
Читать дальше →

Синхронизация данных в приложениях реального времени c Theron

Время на прочтение8 мин
Охват и читатели10K
Иногда я рисую себе граф того, как должна выглядеть архитектура современных систем и нахожу те моменты процесса разработки, которые могут быть улучшены и те практики, которые могут быть применены для улучшения этих процессов. После очередной такой итерации я еще раз убедился, что существуют потрясающие фреймворки и методологии для разработки и серверной и клиентской частей, но синхронизация данных между клиентом, сервером и базой данных работает не так, как того требуют современные реалии: быстрое реагирование на изменение состояния системы, распределенность и асинхронность обработки данных, повторное использование раннее обработанных данных.

В последние годы требования к современным приложениям и методы их разработки значительно изменились. Большинство таких приложений используют асинхронную модель, состоящую из множества слабо связанных компонентов (микросервисов). Пользователи же хотят, чтобы приложение работало безотказно и всегда было в актуальном состоянии (данные должны быть синхронизированы в любой момент времени), проще говоря, пользователи чувствуют себя более комфортно, когда им не нужно каждый раз нажимать кнопку «Обновить» или полностью перезагружать приложение, если что-то пошло не так. Под катом немного теории и практики и полноценное приложением c открытым исходным кодом со cтеком разработки React, Redux/Saga, Node, TypeScript и нашим проектом Theron.

image
Rick and Morty. Рик открывает множество порталов.
Читать дальше →

Декораторы и рефлексия в TypeScript: от новичка до эксперта (ч.3)

Время на прочтение5 мин
Охват и читатели11K

Эта статья — третья часть серии:



В прошлый раз мы узнали, что такое декораторы и как они реализованы в TypeScript. Мы знаем, как работать с декораторами классов, свойств и методов.


В этой статье мы расскажем про:


  • Последний оставшийся тип декораторов — декоратор параметра
  • Реализацию фабрики декораторов
  • Реализацию конфигурируемых декораторов
Читать дальше →

Руководство по работе с Redux

Время на прочтение80 мин
Охват и читатели288K
Сегодня Redux — это одно из наиболее интересных явлений мира JavaScript. Он выделяется из сотни библиотек и фреймворков тем, что грамотно решает множество разных вопросов путем введения простой и предсказуемой модели состояний, уклоне на функциональное программирование и неизменяемые данные, предоставления компактного API. Что ещё нужно для счастья? Redux — библиотека очень маленькая, и выучить её API не сложно. Но у многих людей происходит своеобразный разрыв шаблона — небольшое количество компонентов и добровольные ограничения чистых функций и неизменяемых данных могут показаться неоправданным принуждением. Каким именно образом работать в таких условиях?

В этом руководстве мы рассмотрим создание с нуля full-stack приложения с использованием Redux и Immutable-js. Применив подход TDD, пройдём все этапы конструирования Node+Redux бэкенда и React+Redux фронтенда приложения. Помимо этого мы будем использовать такие инструменты, как ES6, Babel, Socket.io, Webpack и Mocha. Набор весьма любопытный, и вы мигом его освоите!
Читать дальше →

Az.js: JavaScript-библиотека для обработки текстов на русском языке

Время на прочтение8 мин
Охват и читатели29K
Как чуден и глубок русский курлык
Генератор постов

Обработка естественного языка (natural language processing, NLP) — тема, на мой взгляд, очень интересная. Во-первых, задачи тут чисто алгоритмические: на вход принимаем совершенно примитивный объект, строчку, а извлечь пытаемся вложенный в него смысл (ну или хотя бы частичку смысла). Во-вторых, необязательно быть профессиональным лингвистом, чтобы решать эти задачи: достаточно знать родной язык на более-менее приличном уровне и любить его.

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

Бессвязность текстов в нынешней версии «Генератора» вызвана тем, что на самом деле никакого анализа он производить не умеет. Просто в одних случаях «предсказывает» продолжение предложения по собранным биграммам, а в других — заменяет в готовом предложении некоторые слова на другие, которые заканчиваются похоже. Вот и вся начинка.

Конечно, хочется сделать что-нибудь поинтереснее. Беда в том, что модные сейчас нейросети не очень-то применимы здесь: им нужно много ресурсов, большую обучающую выборку, а в браузере у пользователя соцсети всего этого нет. Поэтому я решил изучить вопрос работы с текстами с помощью алгоритмов. К сожалению, готовых инструментов для работы с русским языком на JavaScript найти не удалось, и я решил сделать свой маленький велосипед.
Читать дальше →

Правильное использование require в node.js

Время на прочтение4 мин
Охват и читатели27K

Предисловие


Не так давно проект, на котором я работаю в данный момент, начал использовать модульную систему ES2015. Я не буду заострять внимание на этой технологии JavaScript, т.к статья совсем не об этом, а о том как технология сподвигла меня к одной мысли.

Читать дальше →

jQuery UI Datepicker — добавление возможности выбора нескольких дат на одном календаре

Время на прочтение3 мин
Охват и читатели79K
image Всем привет, дорогие читатели Хабра!

Статья посвящена jQuery UI и его виджету выбора дат.

Часто бывает, что на странице необходимо сделать выбор периода дат (а иногда даже нескольких разрозненных дат). Но Datepicker от jQuery UI позволяет выбирать только одну дату в пределах одного календаря.

Поэтому частым решением на практике является создание двух полей ввода с контролем по типу «от и до». Также можно найти много «костыльных» способов для решения данной задачи — это нам не подходит.

Итак, наша цель — решить задачу самыми минимальными усилиями используя только jQuery UI Datepicker.

Для решения этой задачи существует небольшое расширение для jQuery UI Datepicker, которое увеличивает его стандартные возможности без подключения сторонних виджетов, плагинов и стилей.
Читать дальше →

Конкурс по программированию на JS: Классификатор слов (предварительные результаты)

Время на прочтение2 мин
Охват и читатели10K
Спасибо за ожидание! Публикуем предварительные результаты конкурса по программированию.

Протестировано 312 решений, из них 50 упало или зависло, ещё 3 оказались слишком медленными, чтобы пройти все тесты. Из оставшихся 259 решений 12 по разным причинам были объявлены «вне конкурса»: решения не работали без поправки типа файла данных (авторы забыли галочку «gzip») или были присланы сотрудниками Hola.

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

Решение победителя конкурса показало результат в 83.67% правильных ответов. Полные списки решений с результатами тестирования находятся в английской версии поста на GitHub.

Там же мы публикуем «сырые» машиночитаемые результаты тестирования каждого из решений, где разнообразной информации больше, чем в сводных таблицах. На основе этих данных Вы можете провести собственный анализ результатов, чему мы будем очень рады.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №215 (6 — 12 июня 2016)

Время на прочтение6 мин
Охват и читатели26K
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда


Читать дальше →

jQuery 3.0 Final Released

Время на прочтение9 мин
Охват и читатели57K
9 июня 2016 года состоялся официальный релиз jQuery 3.0, которая была в разработке с октября 2014 года. Нашей целью было создание более легкой и быстрой версии jQuery (конечно, с обратной совместимостью). Мы удалили все старые костыли для IE и использовали некоторое более современное веб API там, где это необходимо. jQuery 3.0 является продолжением ветки 2.x, но с некоторыми изменениями, которые давно хотели внести. Такие ветки как 1.12 и 2.2 будут получать критические патчи в течение некоторого времени, но ожидать новый функционал в них не стоит. jQuery 3.0 — это будущее jQuery. Если вдруг Вам нужна поддержка IE 6-8, Вы можете продолжать использовать релиз версии 1.12.

image
Подробнее

Использование webrtc для взаимодействия с asterisk-сервером или как заставить рации говорить с браузером

Время на прочтение4 мин
Охват и читатели12K
Доброго времени суток, хабравчане.
Сегодня я расскажу вам о работе sip-телефонии, а именно о том, как я организовывал звуковой сеанс между мобильными рациями (или ИКН) о которых вы слышали ранее из других статей нашей компании и web-клиентом через webRTC с использованием sipML5 в качестве библиотеки и asterisk 11 в качестве АТС.
image
Всем кому небезразлична данная тема — добро пожаловать под кат.
Читать дальше →

Асинхронность в JavaScript: Пособие для тех, кто хочет разобраться

Время на прочтение4 мин
Охват и читатели156K

image


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


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

Читать дальше →

Конкурс по программированию на JS: Классификатор слов (о ходе тестирования)

Время на прочтение7 мин
Охват и читатели13K
Прежде всего, мы приносим всем участникам конкурса по программированию извинения за задержку с результатами. Сегодня мы публикуем все присланные решения и официальные скрипты для генерации тестов и тестирования, а также рассказываем, как идут дела с проверкой решений.

Английская версия этого поста размещена на GitHub.

Протестировать 312 решений


Большое спасибо всем участникам! Мы получили 603 решения от 312 участников. Поскольку мы принимаем к тестированию самое последнее из присланных в срок решений, то протестировать надо 312 решений. Это был неожиданный результат. Надеюсь, это немного объясняет, почему это занимает так много времени.
Читать дальше →

Ближайшие события

Ресайз картинок в браузере. Все может стать еще хуже

Время на прочтение3 мин
Охват и читатели51K

 


Знакомьтесь, это Маня. Маню поразил страшный недуг и теперь она нуждается в вашей помощи. Маня росла обычной девочкой, жизнерадостным счастливым ребенком. Но чуть больше года назад врачи поставили ей страшный диагноз — алиазинг. И она стала выглядеть вот так.



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

Читать дальше →

Создание арканоида на чистом JavaScript с нуля. CANVAS

Время на прочтение1 мин
Охват и читатели21K
Началось все с небольших уроков на тему того, как сделать игровой цикл, как организовать отрисовку, как заставить работать клавиатуру и т.д. И на фоне этих небольших уроков пришла мысль сделать полноценную (почти) игру, так же, с нуля.
Желание воплотилось в виде 7 уроков, которые я бы и хотел представить ниже.
Читать дальше →

Прикручивание диаграммы Гантта

Время на прочтение15 мин
Охват и читатели13K
При разработке системы документооборота возникла необходимость отображать данные в виде диаграммы Гантта. После непродолжительных поисков был найден подходящий бесплатный компонент, который нужно было прикрутить к «движку» easla.com.

Мой опыт прикручивания JS-компоненты к движку на Yii с описание, кодом и примерами под катом.
Читать дальше →

Web scraping на Node.js и проблемные сайты

Время на прочтение14 мин
Охват и читатели34K

Это вторая статья в цикле про создание и использование скриптов для веб-скрейпинга на Node.js.


  1. Web scraping при помощи Node.js
  2. Web scraping на Node.js и проблемные сайты
  3. Web scraping на Node.js и защита от ботов
  4. Web scraping обновляющихся данных при помощи Node.js

В первой статье разбиралась простейшая задача из мира веб-скрейпинга. Именно такие задачи достаются веб-скрейперам в подавляющем большинстве случаев – получение данных с незащищённых HTML-страниц стабильно работающего сайта. Быстрый анализ сайта, HTTP-запросы при помощи needle (организованные при помощи tress), рекурсивный проход по ссылкам, DOM-парсинг при помощи cheerio – вот это вот всё.


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


Цель этой статьи (как и прошлой) – показать весь процесс создания и использования скрипта от постановки задачи и до получения конечного результата, однако темы, уже раскрытые в первой статье, освещаются здесь довольно кратко, так что начать я рекомендую с первой статьи. Тут акцент будет на анализ сайта с точки зрения веб-скрейпинга, выявление подводных камней и способы их обхода.

Читать дальше →

Как парсить интернет по-гусиному

Время на прочтение3 мин
Охват и читатели40K
“Распарсить сайт” — словосочетание, которое повергало меня в уныние всего полгода назад. В моей голове сразу же проносились знакомые проблемы с настройкой фантома, или возней с селениумом. Мысли о возможной необходимости подменять useragent, пагинации и других действиях во время парсинга заставляли откладывать эту задачу в долгий ящик…

Но всё изменилось, когда я встретил Гуся. Мир парсинга заиграл новыми красками. Под катом я хочу показать несколько простых примеров, которые могут помочь распарсить непростые сайты.

Кстати, написав парсер, Гусь решил снять фильм про это, пока что вы можете насладиться трейлером:



Читать дальше →

xfcRS — оригинальный лаконичный шустрый рендер сглаженных тайлов, «expansion fast cell — Rounded Squares»

Время на прочтение13 мин
Охват и читатели4.5K
image

xfcRS — многофункциональный быстрый алгоритм, для тайлового рендера с гладкими переходами / для построения изоповерхности / для выделения края в растре / для постпроцессинга как пиксельный шейдер — для пиксельарт масштабирования 8х8 (для быстрой растеризации шрифтов, иной материал для upscale'инга без доработок не рекомендуется). Расшифровка акронима — «eXpansion Fast Cell — Rounded Squares»

В данной статье мы будем рассматривать его преимущественно в контексте рендера сглаженных тайлов:

Если у вас возникнут вопросы по терминам обезательно загляните сюда
Тезаурус:
— Рендеринг — процесс построения кадра на экране. Рендер, соответственно алгоритм который это делает.
— Растр — массив точек экрана или графического файла текстуры. Растеризация — процесс построения этого массива точек, из неких входных данных.
— Upscale — Так именуют процесс и осуществляющие его алгоритмы, предназначенные масшатбировать графику конкретно в сторону увеличения размеров. Основной фокус в них уделяется борьбе с появлением негативных эффектов искажения картинки, такие как излишняя зернистость, размытие, и др.
— Пиксельарт — растровая графика, либо в силу своего давнего года выпуска, либо специально имитирующая ретро компьютеры, не борющаяся за большое разрешение растра.
— Постпроцессинг — В общем случае, алгоритм который работает после некоторого другого предваряющего его работу алгоритма (тот может в таком случае называться препроцессинг).
— Шейдр — В общем случае алгоритм постпроцессинга реализованный для аппаратного исполнения на видеокарте.

— Тайл — элемент разбиения пространства, в частности кусок текстуры из тайлсета.
— Тайлсет — все тайлы некоторого набора, необходимого вашему алгоритму, собранные в одно изоображение.
— «Переходные тайлы» — здесь, те 16 тайлов четвертинок, из которых состоит «Диффузый круг», на котором две текстуры плавно переходят одна в другую. Комбинируя которые, выбирая по четвертинке на каждый из четырех углов, можно создать все необходимые для бесшовного сложения результирующей картинки варианты.
— Сабклетка — здесь подразумевается одна из четвертинок клетки, из которых полную составляет алгоритм. Сабтайл, соответственно кусочек текстуры этой клетки.

— Marshing Squares – алгоритм генерации изолиний на двумерном скалярном поле. см. ru.wikipedia.org/wiki/Marching_squares
— Изолиния — Условная линия служащая для приближенного отражения положения точной.
— Апроксимация — Приближенное значение чего либо точного.


Забегая вперед, скажу сразу: это не улучшенный Marshing Squares,
Читать дальше →

Подход игродела к созданию современных веб приложений

Время на прочтение5 мин
Охват и читатели11K

Скучное вступление


Не так давно, мне довелось участвовать в разработке некоего программно-аппаратного комплекса для одной американской компании. Разрабатывал я бэкенд, немного фронтенд, сращивал устройства с облаком (IoT то бишь). Стек технологий был обозначен четко. Ни в право, ни в лево — enterprise, одним словом. В определенный момент меня перекинули в помощь на фронтенд POS (Point of Sale) веб приложения.

Проблема. Становится интересней


Всё бы ничего, но веб приложение разрабатывалось для работы в 6 тыс. офисах по всей территории Америки (для начала). Где, как оказалось, с интернетом могут быть проблемы. Да да, в той самой, продвинутой Америке! Проблемы с покрытием не только проводного интернета, но и мобильной связью! Т.е. плохой интернет канал (часто, мобильный) — вполне себе обычная история для небольших американских городов.

А это же POS… Тут, понимаешь, клиенты стоят, надо инвойс быстро распечатать… Тормозов быть не должно! И livesearch… Были обсуждения, прикидки, в итоге — не стали грузить бэкенд запросами (трафик, опять же). Сошлись на том, что веб приложение должно по-максимуму подгружать данные и делать, тот же поиск, локально. Речь идет, конечно, о данных, размер которых позволяет это сделать.

Данных фронтенд тянул много, из разных сервисов. Как следствие — большой трафик и долгая загрузка страниц. В общем — беда.
Часть проблем решается бэкендом (сжатие, гео-кластеринг и тп), но это — отдельная история, сейчас только о фронтенде.
Читать дальше →