Полезное для разработчика

13
Дек
2019

Создание сложных макетов с использованием CSS Grid

От автора: это руководство предназначено для людей, которые слышали о css-grid и хотят узнать, что она может, или, возможно, не уверены, как ввести ее в свой рабочий процесс. Также статья будет вам интересна, если вы оттачиваете навыки верстки, не прибегая к фреймворкам, таким как Bootstrap. Базовые знания о css — это хорошо, но вы должны […]

11
Дек
2019

Разработка Android приложения. Часть 1. Установка Qt

Статья о том, как  запустить ваше первое мобильное приложение Android, используя фреймворк Qt. И о том, как подготовить всё необходимое для этого, шаг за шагом. 1. Загрузка и установка Qt Загрузка и запуск Qt Installer Первое что вам нужно сделать это …

11
Дек
2019

Голосовой DeepFake, или Как работает технология клонирования голоса

Как научить искусственный интеллект читать текст любым голосом? Рассказываем, что известно о технологии клонирования голоса, на примере открытого репозитория Real-Time Voice Cloning.

Проблема синтеза речи и…

10
Дек
2019

Как развивалась система доменных имен: часть первая


Свое начало система доменных имен берет в 50-х — 60-х годах прошлого века.

Тогда она помогла упростить адресацию хостов в сети ARPANET и очень быстро перешла от обслуживания сотен компьютеров к работе с сотнями миллионов.

10
Дек
2019

Как мы на JFuture 2019 ходили: обзор большой JVM-конференции

16 ноября в Минске прошла вторая по счёту конференция для всех адептов JVM-языков — JFuture 2019. Сотрудники редакции Tproger посетили её и приготовили обзор.

10
Дек
2019

Многостолбцовый макет и column-span в Firefox 71

От автора: Firefox 71 — увлекательный релиз для тех, кто интересуется CSS Layout. Хотя я очень рада, что в Firefox стала доступна подсетка, есть еще одно свойство, за которым я следила. В Firefox 71 реализовано column-span из многостолбцовой компоновки. В этом посте я объясню, что это такое, и немного о продвижении спецификации Multiple-column Layout. Многостолбцовый […]

10
Дек
2019

Полноэкранное меню на CSS с эффектом анимации

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

10
Дек
2019

ТОП 10 трюков на C++, которые облегчат вам жизнь

Мы подобрали приёмы, которые сделают программирование на С++ легче или, как минимум, интереснее. Освежите свои знания!

Изучение С++ – дорога длиною в жизнь. Сегодня этот язык является рекордсменом по количе…

09
Дек
2019

Используйте модули для создания модульного приложения JavaScript

От автора: одна из главных особенностей ES6 — поддержка JavaScript встроенных модулей. Модули позволяют совместно использовать код различными файлами, используя синтаксис export и import. Это значительное улучшение по сравнению с использованием тегов script и глобальных переменных для совместного использования кода. Использование тегов script было сопряжено с ошибкам, так как порядок загрузки имеет значение. Указание script […]

08
Дек
2019

10 суперполезных плагинов для Visual Studio Code

Максимально упрощай и ускоряй свою работу! Visual Studio Code и прилагающиеся к нему плагины помогут тебе в этом.

Если в качестве IDE ты используешь Visual Studio Code, у тебя есть возможность
сделать свою …

07
Дек
2019

Redux и Vuex: правая и левая палочки Twix

Абсолютно разные создатели, совершенно разные фабрики и такие разные библиотеки для управления состоянием. Попробуй обе и реши – на чьей стороне ты?

Redux и Vuex – это две совершенно разные библиотеки или одно и то же в разной обертке? Пора разобраться в этой загадке. Начнем с начала – с понимания задачи, которую они пытаются решить.

Управление состоянием

И в документации Redux и в документации Vuex можно найти очень похожие друг на друга фрагменты, объясняющие, зачем вам нужен один или второй инструмент. Идея сводится к тому, что чем сильнее разрастается ваш проект, тем сложнее контролировать поток данных в нем.

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

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

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

Каждый компонент приложения взаимодействует напрямую с хранилищем состояния

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

Одна цель

Redux и Vuex созданы для решения одной и той же задачи – управления состоянием большого приложения. Возможно, они делают это принципиально разными способами, давайте посмотрим.

Хранилище состояния

И в Redux, и во Vuex данные приложения хранятся в виде обычного объекта. На самом деле, в JavaScript довольно сложно придумать другой способ, так что особого выбора у них не было.

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

Redux

Создадим хранилище Redux:

            const store = new Store(reducers, initialState); 
        

В reducers передается набор обработчиков, изменяющих данные. Как именно происходит этот процесс, мы увидим чуть позже. initialState – это исходные данные, которые нужно положить в хранилище в самом начале работы.

У хранилища в Redux есть несколько полезных методов:

  • getState() – получение актуального состояния;
  • dispatch() – вызов действия для изменения состояния;
  • subscribe() – подписка на изменения.
Хранилище в Redux и его взаимодействие с компонентами

Vuex

А вот так создается хранилище во Vuex:

            new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
}); 
        

Сами данные хранятся в объекте state. getters, как вы, вероятно, догадались, будет содержать геттеры для получения информации. С mutations и actions разберемся чуть позже, сейчас достаточно понимать, что их основное предназначение – изменять данные в хранилище.

Одна идея

Между хранилищами в Redux и Vuex нет принципиальной разницы, но есть организационная. Объект с данными прячется внутри некоторого Store и его изменение осуществляется только опосредованно – через мутации (Vuex) или действия (React). Это позволяет защитить данные от неконтролируемых прямых изменений.

Перейдем к реализации взаимодействия компонентов с хранилищем.

Получение данных

В реальном проекте важно не только получить данные, но и узнать, если они изменятся. Как справляются с этим наши испытуемые?

Redux

Redux обзавелся специальным методом getState(), который возвращает все состояние приложения разом.

            <HelloWorld text={store.getState().text} /> 
        

Для отслеживания изменений данных и реакции на них обычно используется какая-нибудь дополнительная система UI-биндинга, например, библиотека react-redux (при использовании Redux в React-приложениях). Но при желании вы можете напрямую подписаться на обновления состояния с помощью метода subscribe.

            store.subscribe(() => console.log(store.getState())) 
        

Vuex

Во Vuex вы можете обратиться к свойствам напрямую, достав их из store.state:

            computed: {
  count() {
    return this.$store.state.count;
  }
} 
        

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

Пример из документации:

            // определяем геттер при создании хранилища

const store = new Vuex.Store({
  state: {
    todos: [ ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    }
  }
});

// затем обращаемся к нему в компоненте

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
} 
        

Во Vuex есть еще несколько плюшек, облегчающих труд разработчика (вроде mapState), но они не вносят радикальных перемен в концепцию.

Что касается отслеживания изменений данных, вы можете полностью положиться на Vuex. Хранилище реактивно, поэтому компоненты, полагающиеся на его состояние, будут автоматически обновляться при необходимости.

Разные методы

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

Изменение данных

Переходим к самому интересному – изменению данных в хранилище. Это ключевой момент, влияющий на все приложение. Здесь важно сохранить новые данные, не потеряв при этом все остальное.

Redux

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

В Redux есть лишь один законный способ изменить состояние приложения – совершить действие (actions).

Экшн – это самый обычный объект, который описывает происходящее изменение. Например, он может выглядеть вот так:

            let action = {
  type: 'ADD_USER',
  user: {name: 'Dan'}
}; 
        

Поле type – обязательное, оно содержит тип действия. Все остальное зависит только от вас.

Теперь это действие нужно передать в хранилище с помощью метода dispatch:

            store.dispatch(action);
 
        

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

            const someReducer = function(state, action) {
  ...
  return newState;
} 
        

Все очень просто:

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

Философия Redux требует, чтобы редьюсеры соответствовали концепции чистых функций (pure functions), то есть не имели никаких побочных эффектов и не зависели от внешних условий.

Vuex

Во Vuex тоже всего один законный способ изменять состояние – мутации (mutations).

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

            const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state, count) {
      state.count += count
    }
  }
}); 
        

Первым параметром передается текущее состояние, вторым – дополнительные данные мутации (нагрузка). Внутри мутации мы просто обращаемся к свойству state.count напрямую.

Вызов мутации во Vuex очень похож на вызов экшна в Redux:

            store.commit('increment', 10); 
        

Каждая мутация состояния отслеживается и реактивно передается компонентам.

Разные понятия

На первый взгляд, подходы Vuex и Redux к изменению состояния принципиально отличаются. Редьюсеры и иммутабельность данных против мутаций. Разные концепции, разные понятия, но суть для разработчика одна: не лезь в данные напрямую, используй только разрешенные методы изменения.

Redux несколько серьезнее относится к отсутствию сайд-эффектов, Vuex предоставляет несколько более интуитивный интерфейс.

Асинхронное изменение данных

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

Есть компонент-кнопка, при нажатии на которую отправляется запрос на сервер. Пока не получен ответ, нужно вывести прелоадер, чтобы пользователь знал, что что-то происходит. Затем нужно отобразить полученные данные (например, вывести табличку) или показать ошибку, если запрос завершился неудачно.

Redux

В Redux нет асинхронной функциональности из коробки.

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

Vuex

Мутации в Vuex тоже являются синхронными, внутри них нельзя отправлять запросы к серверу. Но у библиотеки тут есть козырь в рукаве – действия (не путать с действиями в Redux).

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

            const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  }
}); 
        

Вызвать такое действие не сложнее, чем запустить мутацию:

            store.dispatch('increment'); 
        

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

Документация советует избегать запуска мутаций напрямую, а вызывать их только внутри действий.

Обратите внимание: действия являются лишь оберткой над мутациями – единственным законным способом изменения состояния.

Разные возможности

Что ж, тут Vuex из коробки обошел Redux, создав собственную (и весьма простую!) асинхронную функциональность.

Правая и левая палочки Twix

Redux и Vuex – это две палочки Twix. Они производятся на разных фабриках и по уникальным технологиям, но в итоге мы имеем очень похожие продукты.

На палочку Redux карамель льется волнами, а на палочку Vuex – струится:

  • Redux многословнее и строго придерживается принципов функционального программирования.
  • Vuex понятнее для изучения и проще при разработке.

На палочку Redux шоколад наливается вертикально, а на палочку Vuex – сверху вниз:

  • Redux не привязан к конкретному фреймворку и может работать где угодно, но требует дополнительных зависимостей.
  • Vuex прочно связан с Vue и имеет много плюшек от тесной интеграции.

А чему отдаете предпочтение вы?

06
Дек
2019

Возвращаем JavaFX к жизни: 21 урок для начинающих

Решил, что пора написать грандиозное многофункциональное приложение на Java, но не знаешь, с чего начать? Держи крутой видеокурс!

Мы собрали новую статью по просьбам трудящихся под этим материалом. Да, Java…

05
Дек
2019

Что почитать по NGINX — подборка книг на русском и английском + дополнительные материалы

Давно хотели попробовать сервер NGINX, но не знали, где про него спросить? Держите список самых полезных материалов по настройке и принципам работы системы.
— Читать дальше «Что почитать по NGINX — подборка книг на русском и английском + дополнительные…

05
Дек
2019

Некоторые стратегии CSS Grid для создания согласованных макетов дизайна

От автора: в мире веб-разработки всегда наблюдался разрыв при переходоме от дизайна к разработке. Амбициозные дизайнеры хотят, чтобы конечный результат их усилий выглядел уникальным и красивым (и соответствовал их первоначальному видению), тогда как многие разработчики находят большую ценность в результате, который является последовательным, надежным и стабильным (и легко кодируемым). Эта динамика может привести к напряженности […]

05
Дек
2019

Свойство clip-path и интересный эффект для сайта

От автора: в предлагаемом уроке будет показан интересный эффект, который может подойти для шапки сайта или какой-то из его секций. Суть эффекта заключается в размещении нескольких изображений в секции и показе только части каждого из изображений. Другая часть при этом скрывается при помощи свойства clip-path. При наведении мыши на часть изображения – будет показана полная […]

05
Дек
2019

Как в действительности исполняются наши программы? (Ассемблер и его друзья)

Понимание того, как выполняются написанные им программы отличает опытного разработчика и является маркером его профессионализма и открывает возможности его профессионального и карьерного роста. А раз так, то и мы должны в этом разобраться!

04
Дек
2019

Библиотека libxml2 для работы с XML-файлами

Программисту часто бывает нужно работать с XML-документами. Самой популярной библиотекой для этого является libxml2. Научимся ее подключать к своему проекту. 1. Что такое libxml2? libxml2 — это библиотека для парсинга XML-документов. Это означает…

04
Дек
2019

Безопасность прежде всего: как защитить Linux на сервере VPS

В сжатой форме обсуждаем минимальные настройки безопасности для защиты виртуального выделенного сервера (VPS) на базе Linux.

VPS эмулирует работу отдельного физического сервера. На одной машине запускается …

03
Дек
2019

Как TypeScript помогает вам стать лучшим разработчиком JavaScript

От автора: что общего у Airbnb, Google, Lyft и Asana? Все они перенесли несколько кодовых баз в TypeScript. Наши люди любят самосовершенствование, будь то здоровое питание, физические упражнения или крепкий сон. То же самое относится и к нашей карьере. Если кто-то делится советами о том, как стать лучшим программистом, вы будете слушать внимательно. Цель этой […]

02
Дек
2019

Как пройти собеседование на английском? Мнение экспертов школы «Инглекс»

Собеседование — вещь серьезная. А собеседование на английском — зачастую еще и пугающая. Какие есть лайфхаки для успешного прохождения этого испытания? Разберемся в статье.

Ведь нужно за довольно короткое в…

02
Дек
2019

7 декабря, Краснодар: конференция GDG DevFest Kransodar 2019

Ежегодное мероприятие от сообщества Google Developers Group c обсуждениями новостей веба, мобильных платформ, дизайна и маркетинга в IT.
— Читать дальше «Конференция GDG DevFest Kransodar 2019»

30
Ноя
2019

20 лучших инструментов для хакинга на Kali Linux

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

Удивительно, сколько людей заинтересовано в том, чтобы научиться взламыват…

29
Ноя
2019

Что такое super() в JavaScript?

От автора: что происходит, когда вы видите некоторый JavaScript, который вызывает super()? В дочернем классе вы используете super() для вызова конструктора его родителя и super.&ltmethodName> для доступа к методам его родителя. Эта статья предполагает хотя бы небольшое знакомство с понятиями конструкторов и дочерних и родительских классов. Super не уникален для Javascript — многие языки программирования, […]