Обновить
256K+

JavaScript *

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

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

Трудные уроки: пять лет с Node.js

Время на прочтение11 мин
Охват и читатели35K
После пяти лет работы с Node.js я многое понял. Я уже делился некоторыми историями, но в этот раз хочу рассказать о том, какие знания дались труднее всего. Баги, проблемы, сюрпризы и уроки, которые вы можете использовать в собственных проектах!

Базовые концепции


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

Классы


Когда я только начал работать с Node.js, то написал скрапер. Очень быстро я понял, что если ничего не предпринять, то он будет осуществлять много запросов параллельно. Одно это стало важным открытием. Но поскольку я ещё не полностью усвоил мощь экосистемы, то сел и написал собственный ограничитель параллелизма. Он работал и проверял, что в каждый момент времени активны не более N запросов одновременно.
Читать дальше →

Все, что вам нужно знать об обнаружении изменений в Angular

Время на прочтение8 мин
Охват и читатели94K
Наткнулся на хорошую статью об устройстве Angular'овского механизма обнаружения изменений (change detection). Т.к. тема достаточна важна, но при этом недостаточно глубоко раскрыта даже на англоязычных ресурсах, а найти русскоязычные материалы на эту тему, вообще, не представляется возможным, решил перевести данную статью.
Перевод под катом

Как Reddit создал r/Place

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

enter image description here


Над проектом работали несколько команд — фронтенд, бэкенд, мобильная разработка. По большей части он был реализован на уже существовавших в Reddit технологиях. В этой статье мы рассмотрим, как с технической стороны создавался Place. Если хотите посмотреть код Place, то он здесь.

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

Что нам стоит автоматизацию построить. Использование HTTP API в Google Sheets

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

В эпоху повальной автоматизации пользователям хочется «нажать на кнопку и получить ответ». Ну или дополнительно немного подвигать мышкой. Автоматизация же отчетов и других штук, которые удобно представить в виде таблички, часто строится в Excel с использованием своих макросов или же просто встроенных формул. Плагинами к Excel нынче никого уже не удивишь, кстати, у нас такой тоже есть, но это предмет отдельной статьи. А как насчет Google Sheets? Ранее мой коллега рассказывал, как можно прикрутить наше API к Telegram, я же попробую рассказать, как использовать его в гуглотаблицах.


image


Под катом чуть-чуть кода и много костылей.

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

TypeScript в Slack

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

Или как мы перестали беспокоиться и научились доверять компилятору




Когда Брендан Эйх создал самую первую версию JavaScript для Netscape Navigator 2.0 всего за десять дней, вряд ли он ожидал, в какой степени Slack Desktop App будет использовать его изобретение. Мы используем только кодовую базу JavaScript для многопоточного десктопного приложения, которое постоянно взаимодействует с нативным кодом и работает под Windows, macOS и Linux.

Управлять большими кодовыми базами JavaScript непросто. Всякий раз, когда мы мимоходом передаём объекты из JavaScript браузера Chrome в Objective-C, чтобы просто получить обратный вызов через другой поток на Node.js, нужна гарантия, что все кусочки складываются вместе. В десктопном мире маленькая ошибка может привести к сбою приложения. С этой целью мы внедрили TypeScript (статически типизированное надмножество JavaScript) и быстро поняли, как жить без волнений и с любовью к компилятору. И не только мы: опрос разработчиков на Stack Overflow показывает, что TypeScript является третьей самой любимой технологией программирования. Учитывая, насколько быстро статическая проверка типов набирает ход, мы хотим поделиться нашим опытом и методиками.
Читать дальше →

Нативные ECMAScript модули — первый обзор

Время на прочтение11 мин
Охват и читатели34K
Бандлеры и компайлеры против нативных модулей

В этой статье хочу поделиться переводом статьи о нативных ECMAScript модулях, которые все больше и больше обсуждаются среди фронтендеров. Javascript ранее никогда не поддерживал нативно работу с модулями, и нам, фронтендерам, всегда приходилось использовать дополнительные инструменты для работы с модулями. Но вы только представьте, что в скором времени не нужно будет использовать Webpack для создания бандлов модулей. Представьте мир, в котором браузер будет собирать все за вас. Подробнее об этих перспективах я и хочу рассказать.
Читать дальше →

Запись WebRTC видеопотока с веб-камеры браузера с буксировкой на Amazon S3

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

Amazon S3 — это файловое облачное хранилище, которое используют такие известные сервисы как Dropbox, Trello и миллионы других проектов. Несмотря на сбой 28 февраля 2017 года, в результате которого кое-где перестали работать даже холодильники, S3 остается, пожалуй, самым популярным распределенным хранилищем, в котором пользователи и бизнес хранят фотки, видео, бэкапы и другой полезный контент.

Web Call Server — это медиасервер с поддержкой технологии WebRTC и записи видеопотоков из браузеров и мобильных устройств. HTML страница в браузере или мобильное приложение может захватить видеопоток с веб-камеры и отправить на сервер для дальнейшей ретрансляции и записи.

В этой статье мы расскажем как записать видеопоток со страницы браузера Google Chrome с последующей отправкой mp4-файла в хранилище Amazon S3.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №258 (10 — 16 апреля 2017)

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

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

Функциональные компоненты

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

Как говорится, в редакцию пришло письмо: "не могли бы вы подробно разъяснить..." Отвечаю публично, кому оно надо, а применение можно пощупать тут.

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

N причин, чтобы использовать Create React App

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


Create React App — отличный инструмент для быстрого старта React-приложений. Вы не тратите время на настройку Webpack, Babel и других привычных инструментов. Они заранее настроены и спрятаны, так что разработчики могут сфокусироваться на коде и бизнес-логике приложения.
Читать дальше →

Flow + tcomb = типизированный JS

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

Рано или поздно, все приходят к выводу, что нам нужна строгая типизация. Почему? Потому что проект разрастается, обрастает if-ами; функциональное программирование — всё функция — неправда, мне только что консоль сказала "undefined is not a function". Вот эти проблемы появляются всё чаще-чаще, становится сложнее отслеживать, возникает вопрос — давайте строго типизировать, хотя бы на этапе написания кода будет подсказывать.


Знаете рекламу: TypeScript — это надмножество JavaScript-а. Маркетинговый BS. Мы честно попытались, грубо говоря, переименовать проект из JS в TS — оно не заработало. Оно не компилируется, потому что некоторые вещи, с точки зрения TypeScript-а являются некорректными. Это не означает, что TypeScript — плохой язык, но продвигаться на идее надмножества, и подводить меня так, TypeScript — я не ожидал.


Как только вы вычеркиваете TypeScript, остаётся ровно одна альтернатива — Flow. Что я могу сказать про Flow? Flow мегакрутой тем, что заставит вас выучить систему типов OCaml, хотите вы того, или нет. Flow написан на OCaml. У него гораздо строже и гораздо мощнее вывод типов, чем у TypeScript-а. Вы можете переписывать проект на Flow частично. Количество бонусов, которые вам приносит Flow, сложно описать. Но, как всегда, есть парочка "но".

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

Отчет и материалы SPA meetup'а 8 апреля 2017

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

В прошедшую субботу в офисе Avito прошел SPA Meetup. Это митап-сателит Moscow.js, ориентированный на фронтенд-разработчиков, которым интересна тема веб-приложений (Single Page Application), и сочувствующих им. Это уже третья встреча, которая получилась весьма насыщенной: 3 доклада, 2 блица, свободный микрофон, панельная дискуссия и, конечно же, живое общение. В этом посте мы немного расскажем о том, как это было, и поделимся видеозаписями докладов.

Добавили возможность встраивать JS-скрипты в доски. Как мы делаем свою систему управления проектами

Время на прочтение5 мин
Охват и читатели11K
Первого апреля системе YouGile исполнился год. Нешуточный срок для проекта, который начался с мысли — «А давайте на выходных сделаем себе удобную систему управления проектами». Сейчас несколько тысяч пользователей, в основном переходят с BaseCamp и Trello, все открыто для тестирований и присылания нам обратной связи.

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

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

Работает просто — по комбинации клавиш Ctrl+~ вызывается встроенный редактор JavaScript.



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

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

Архитектура модульных React + Redux приложений

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


Большинство разработчиков начинает знакомство с Redux с Todo List Project. Это приложение имеет следующую структуру:

actions/
  todos.js
components/
  todos/
    TodoItem.js
    ...
constants/
  actionTypes.js
reducers/
  todos.js
index.js
rootReducer.js

На первый взгляд такая организация кода кажется логичной, ведь она напоминает стандартные соглашения многих backend MVC-фреймворков:

app/
  controllers/
  models/
  views/

На самом деле, это неудачный выбор как для MVC, так и для React+Redux приложений по следующим причинам:

  1. С ростом приложения следить за взаимосвязью между компонентами, экшнами и редюсерами становится крайне сложно
  2. При изменении экшна или компонента с большой вероятностью потребуется внести изменения и в редюсер. Если количество файлов велико, скролить IDE вверх/вниз не удобно
  3. Такая структура потворствует копипасте в редюсерах

Не удивительно, что многие авторы(раз, два, три) советуют структурировать приложение по «функциональности» (by feature).
Читать дальше →

DroidScript – простой и функциональный инструмент для разработки мобильных приложений под Android

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

Некоторое время назад мне была поставлена следующая задача: разработать прототип приложения под Android для беспроводной связи с Arduino в реальном времени. Погружаться ради этого с головой в Java, Qt или C# было непрактично, поэтому решил искать готовое решение на скриптовом движке. PhoneGap? Интересно, но не для работы с Bluetooth. Что-то из мобильных сред разработки? Возможно, но хотелось работать в привычной десктопной среде, а не на планшете с небольшим экраном. Вскоре желаемое нашлось – мобильная среда разработки DroidScript с возможностью подключения к ней из браузерной WiFi IDE, которую можно установить на Windows, Mac и Linux.
Читать дальше →

Асинхронные функции 101

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

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


doALongThing(() => console.log("I will be logged second!"));  
console.log("I will be logged first!");  

К сожалению, это также один из основных недостатков JavaScript. Задача выполнения синхронного кода становится сложнее, так как по умолчанию всё асинхронно.

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

Зачем использовать статические типы в JavaScript? (Преимущества и недостатки)

Время на прочтение15 мин
Охват и читатели19K
Мы о многом рассказали в первой части. Теперь с синтаксисом покончено, давайте наконец перейдём к самому интересному: изучению преимуществ и недостатков использования статических типов.

Преимущество № 1: Вы можете заблаговременно находить баги и ошибки


Статическая проверка типов позволяет проверять, что определённый нами инвариант принимает значение true, даже не запуская программу. И если имеется какое-то нарушение этих инвариантов, оно будет обнаружено перед запуском программы, а не во время её работы.
Читать дальше →

Технология APS: фронтенд контрольной панели и возможности JS SDK

Время на прочтение10 мин
Охват и читатели4.7K
В прошлый раз мы рассказали об APS (Application Packaging Standard) — нашей открытой технологии интегрирования приложений в платформу по продаже облачных сервисов (SaaS marketplace) Odin Automation. Наша платформа связывает разработчиков и потребителей облачных сервисов через инфраструктуру крупных сервис-провайдеров (поставщиков телекоммуникационных и хостинг-услуг), одновременно предоставляя точку входа для конечных пользователей: контрольную панель или портал, с помощью которого можно создать сайт, настроить почту, купить антивирус или виртуальную машину в облаке. В этом посте мы более подробно остановимся на том, как устроен фронтенд контрольной панели и APS-приложений и какие возможности предоставляет APS JavaScript SDK.


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

Первые шаги к Web SCADA-системе. Оживляем мнемосхему в браузере с помощью AngularJS

Время на прочтение8 мин
Охват и читатели21K
Сегодня мы поговорим об отображении мнемосхем технологических объектов в браузере посредством таких технологий как SVG, JavaScript и т.д.

Опишем, что мы хотим получить:

  • Мнемосхема открывается в браузере. Графика – SVG.
  • Вверху мнемосхемы кнопки переходов на другие мнемосхемы.
  • Данные обновляются раз в секунду.
  • По клику на изображение выключателя появляется окно, из которого его можно включить или отключить.

SCADA-система (точнее её серверная часть) позволяет добавлять пользовательские html-страницы. Я не буду вручную набирать код страницы, а нарисую простую схему в редакторе, потом покажу, что получилось и как это работает.
Читать дальше →

Зачем использовать статические типы в JavaScript? (Пример статической типизации на Flow)

Время на прочтение9 мин
Охват и читатели37K
Как разработчик JavaScript вы можете целый день программировать, но не встретить ни одного статического типа. Так зачем думать об их изучении?

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

Заинтересованы? Тогда вам повезло — именно об этом наша серия статей.

Во-первых, определение


Проще всего понять статические типы — это противопоставить их динамическим. Язык со статическими типами называют языком со статической типизацией. С другой стороны, язык с динамическими типами называют языком с динамической типизацией.
Читать дальше →