JavaScript

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

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

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

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

Источник

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

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

Сначала были компоненты на классах:

class Square extends React.Component {
  constructor() {
    super()
    this.state = {
      value: null,
    }
  }
  render() {
    const { value, onClick } = this.props
    return (
      <button className="square" onClick={onClick}>
        {value}
      </button>
    )
  }
}

Потом явились функциональные компоненты:

const Square = ({ value, onClick }) => {(
  <button className="square" onClick={onClick}>
    {value}
  </button>
)}

В чём разница? Выкидываем: объявление класса, constructor(), render(), const для деструктуризации props, this. А ещё исчезло состояние компонента — мы получаем stateless functional components.

Как дальше жить без локального состояния: 1) или применять функциональные компоненты только там, где не нужно хранить состояние; 2) или перенести всё состояние в стор redux-а (как единственный источник правды). Локальные состояния компонентов — это дополнительный уровень абстракции, требующий обслуживания. А зачем?

Ещё желательно преодолеть коннектобоязнь — не тащить все свойства через родительские компоненты, а применять connect() для дочерних компонентов по мере использования свойств.

Источник

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

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

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

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

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



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

Источник

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

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

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

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

Источник

ЛЕТУЧИЕ МЫШИ ДЛЯ САЙТА НА ХЭЛЛОУИН

Для любителей декорирования своих сайтов к празднику, хочу порекомендовать летучих вышей для сайта на Хэллоуин. Каждый год все время забываю сохранять интересные варианты, и по этому, буду постить их в блоге, что бы не потерялись. Сегодня у нас небольшой javascript для внедрения летучих мышей на сайт. Летают они рандомно, браузер не грузят.

Скачать jsbat.js (v.1.2 1.9Kb)

ИНСТРУКЦИЯ ПО УСТАНОВКЕ

Скачайте файлик, залейте к себе куда-нибудь на сайт, что бы потом вызывать его.

<script type="text/javascript" async src="//ваш_путь_к_файлу/jsbat.js"></script>

Вставляете этот вызов столько раз, сколько хотите летучих вышей запустить на сайте.

В этом коде гифка уже закодирована в base64, по этому добавлять еще что-то или беспокоиться, что картинка будет удалена — не нужно.

Работает во всех современных браузерах.

Источник

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

Большинство разработчиков начинает знакомство с 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).

Источник

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

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

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

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

Источник

The State of Reactive in JS: практический обзор FRP библиотек

Статья родилась из этого ответа на StackOverflow и переросла в этот блог пост (на английском), но я думаю она не утратила актуальность.

Сейчас очень много шума вокруг Reactive Programming. Я потратил какое-то время на изучение этой дисциплины применимо к JavaScript и Node.js и сложил свое мнение о самых, на мой взгляд, интересных библиотеках.

Источник

Упрощаем универсальное/изоморфное приложение на React + Router + Redux + Express

На Хабре уже было предостаточно статей про то, как делать универсальное (изоморфное) приложение на стеке React + Redux + Router + Koa/Express (Google в помощь), однако я заметил, что все они содержат повторяющийся код для серверного рендеринга. Я решил упростить задачу и выделить этот общий код в библиотеку, так и появился на свет react-router-redux-middleware, работает примерно так:

import Express from "express";
import config from "./webpack.config";
import createRouter from "./src/createRouter";
import createStore from "./src/createStore";
import {createExpressMiddleware} from "react-router-redux-middleware";

const app = Express();
app.use(createExpressMiddleware({
  createRouter: (history) => (createRouter(history)),
  createStore: ({req, res}) => (createStore())
}));
app.use(Express.static(config.output.path));
app.listen(port);

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

Суть серверного рендеринга довольно проста: на сервере нам нужно определить на основе правил роутера, какой компонент будет показан на странице, выяснить, какие данные ему нужны для работы, запросить эти данные, отрендерить HTML, и выслать этот HTML вместе с данными на клиент. Если мы хотим быть совсем крутыми, можно еще пробежаться по дереву компонентов и для всех них загрузить данные (а не только для контентной области), но это выходит за рамки статьи, хотя и запланировано для имплементации в библиотеке.

Если вам лень во всем этом разбираться — присмотритесь к другим кандидатам, например Next.JS и Electrode из моей обзорной статьи Что взять за основу React приложения.

Подробнее

Создаем изоморфное/универсальное приложение на Next.JS + Redux

Это вторая статья о Server Side Rendering и изоморфных/универсальных приложениях на React. Первая под названием "Упрощаем универсальное/изоморфное приложение на React + Router + Redux + Express" была больше про кастомное решение, эта же статья нацелена больше на тех, кому не хочется заморачиваться, а хочется готовое решение, с коммьюнити, и вообще поменьше головной боли с настройкой, отладкой, подбором библиотек и т.д.



В данной статье будем рассматривать Next.JS, который обладает преимуществами в виде отсутствия конфигурации, серверного рендеринга и готовой экосистемы.

Из коробки Next.JS не умеет работать с Redux, поэтому в процессе написания пробного проекта я выделил получившийся общий код в отдельный репозиторий next-redux-wrapper, с помощью которого в этой статье мы и соберем приложение-пример на Next.JS + Redux.

Подробнее

Что взять за основу React приложения

Каждый раз начиная писать React приложение, вы так или иначе выберите какой-то вариант:

• копи-паст вашего предыдущего проекта


• какой-то бойлерплейт или даже генератор (типа Yeoman)


• готовый фреймворк не требующий конфигурации


• пишете сами все с нуля

Каждый из способов имеет свои сильные и слабые стороны, как на длинной, так и на короткой дистанции.

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

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

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

Подробнее

Setting up your first Angular (2) Project Using Angular Material (2)

Подробнее

Angular — настройка среды разработки и production сборки с AOT-компиляцией и tree-shaking (Gulp, Rollup, SystemJS)

дна из особенностей Angular, присущая и первой и новой версии — высокий порог вхождения. Новый Angular, помимо всего прочего, трудно даже запустить. А и запустив, легко получить 1-2 Мб скриптов и порядка нескольких сотен запросов при загрузке hello world страницы. Можно, конечно, использовать всякие стартеры, seed'ы или Angular CLI, но для использования в серъезном проекте нужно самому во всем разбираться.

В этой статье я постараюсь описать, как настроить удобную среду разработки с использованием SystemJS, и production сборку Angular приложения на основе Rollup, с выходом около 100кб скриптов и нескольких запросов при открытии страницы. Использовать будем TypeScript и SCSS.

Попробовать все в деле можно в моем angular-gulp-starter проекте.



Подробнее

Первое приложение на Spring Boot + ReactJS

В жизни каждого Java разработчика может наступить момент, когда ничего не остаётся, как использовать в своём приложении ReactJS. Если, конечно, не AngularJS. Вы долго сопротивлялись, но этот момент настал и надо что-то делать. Вы слышали, что есть Node.JS, что он умеет быть web-сервером, но это уже через чур. У вас будет кошерный Spring Boot. К сожалению, поиск в гугл способен очень запутать. Много разных гайдов, все оперируют разными версиями реакта и сопутствующих средств. Данный гайд описывает процесс создания простейшего Spring Boot + ReactJS приложения, простой и приятный.

Подготовка среды разработки

Сначала надо скачать и установить Node.js. При установке (требуется наличие административных прав) важно убедиться, что устанавливается npm и прописываются системные пути. В случае Windows появляется «Node.js command prompt», в других OS наверное тоже что-то такое появляется. Запускаем его. Если вы работаете без доступа к интернету (это очень не удобно, но так бывает), вы можете указать пусть к локальному npm-репозиторию; им вполне может быть ваш корпоративный Nexus. Для этого в командной строке выполните команду

npm config set registry http://ваш_npm_репозиторий

Далее мы будем делать классическое maven-приложение. Поскольку статья предназначена прежде всего Java-программистам, рассказывать как это делать, и что указывать в pom.xml, чтобы получилось Spring Boot приложение, я не буду. Создайте папку src\main\resources\static (далее просто static). Перейдите в консоли в неё, и инициализируйте node-приложение, выполнив команду npm init. В интерактивном режиме вам будет предложено ввести основные параметры вашего приложения (название, автор и т.п.). По завершении работы появится файл static\package.json, его можно всегда поменять вручную. Перед выполнением дальнейших шагов крайне желательно обновить менеджер пакетов npm до актуальной версии. Для этого в консоли выполните команду

npm install npm@latest -g

Подробнее

Разработка Angular 2 приложений с бэкендом на Java EE