• Размыкаем замыкания и внедряем Dependency Injection в JavaScript

    • Tutorial

    image


    В этой статье мы рассмотрим, как писать чистый, легко тестируемый код в функциональном стиле, используя паттерн программирования Dependency Injection. Бонусом идет 100% юнит-тест coverage.

    Читать дальше →
  • Hyperapp для беженцев с React/Redux

    • Перевод

    image


    Я люблю Redux


    Именно благодаря Redux для меня началось путешествие в мир удивительного функционального программирования. И это первое из функциональщины, что я попробовал в production. Прошли те времена, когда я использовал DOM для хранения состояния и неуверенно манипулировал им с помощью jQuery.


    Redux — это инструмент для управления состоянием приложения (state), который позволяет полностью отделить его от представления (view). Представление (view) становится производным состояния (state), которое предоставляет пользователю интерфейс для его изменения. Действия пользователя (actions) не изменяют состояние (state) напрямую. Вместо этого они попадают в редюсер (reducer). Это такая чистая функция, которая на основе предыдущего состояния (state) и действия (action) генерирует следующее состояние (state). Такой подход к обновлению данных во многом был вдохновлен архитектурой языка программирования Elm и концепцией однонаправленного потока данных Flux. Это, возможно, самая популярная JavaScript-библиотека для иммутабельного изменения состояния из тех, что существуют сегодня. Авторы Redux сфокусировались на решении одной единственной проблемы — управление состоянием приложения (state), и сделали это хорошо. Redux получился достаточно модульным, чтобы работать с различными библиотеками для отображения представления (view).


    React использует аналогичный сфокусированный подход для представления (view), имеет эффективный виртуальный DOM, который можно подключить к DOM браузера, нативным мобильным приложениям, VR и прочим платформам.


    Что бы создавать надежные, функциональные и легко отлаживаемые web-приложения, можно использовать React и Redux. Правда, потребуются вспомогательные библиотеки вроде react-redux и куча boilerplate-кода. А можно попробовать Hyperapp.

    Читать дальше →
  • Первый официальный релиз Webpack 2. Что нового по сравнению с Webpack 1?

    • Перевод

    Webpack 2 Release


    Предупреждение: проверьте, как установлена версия Webpack в package.json. Возможно скоро ваш continuous integration сломается.


    Наконец-то Webpack 2 преодолел рубеж beta и release candidate. Это значит, что всё работает стабильно, и можно без опаски использовать его в production.


    Список изменений/улучшений:


    • Нативная поддержка ES6-модулей;
    • Разбиение кода на чанки — Code Splitting with ES6;
    • Поддержка динамических выражений при загрузке модулей — Dynamic expressions;
    • Изменения при работе с Babel;
    • ES6-специфичные оптимизации;
    • Breaking Changes;
    • Новый сайт с документацией.

    Подробности под катом.

    Читать дальше →
  • React, Web Components, Angular и jQuery — друзья навеки. Универсальные JavaScript-компоненты

    • Tutorial

    image
    Эта статья о том, как написать универсальный JavaScript-компонент, который можно будет использовать


    • как React-компонент;
    • как Preact-компонент;
    • как Angular-компонент;
    • как Web Component;
    • как jQuery функцию для рендеринга в DOMElement;
    • как нативную функцию для рендеринга в DOMElement.

    Зачем и кому это нужно


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

    Читать дальше →
  • Честный MVC на React + Redux

    • Tutorial

    MVC


    Эта статья о том, как построить архитектуру web-приложения в соответствии с принципами MVC на основе React и Redux. Прежде всего, она будет интересна тем разработчикам, кто уже знаком с этими технологиями, или тем, кому предстоит использовать их в новом проекте.


    Читать дальше →
  • Иммутабельность в JavaScript

    • Tutorial

    habracut


    Что такое иммутабельность


    Неизменяемым (англ. immutable) называется объект, состояние которого не может быть изменено после создания. Результатом любой модификации такого объекта всегда будет новый объект, при этом старый объект не изменится.

    Читать дальше →
  • Стилизация React-компонентов

    image


    Введение


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


    • Использование React предполагает, что View нашего Web-приложения разбито на компоненты, и каждый из них, так или иначе, отвечает за собственное отображение и функциональность.


    • Подразумевается, что будут использованы современные инструменты разработки вроде babel, webpack, browserify, gulp, post- pre- css-процессоры.

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