Как стать автором
Обновить
2
0
Сергей @sinneren

Frontend

Отправить сообщение

Введение в React Hooks

Время на прочтение12 мин
Количество просмотров100K


Если вы читаете Twitter, вы, вероятнее всего, знаете что Hooks  -  это новая фича React, но вы можете спросить, как мы на практике можем их использовать? В этой статье мы покажем вам несколько примеров использования Hooks.
Одна из ключевых идей для понимания заключается в том, что Hooks позволяют использовать state и другие возможности React без написания классов.
Читать дальше →
Всего голосов 16: ↑14 и ↓2+12
Комментарии36

Кэширование обработчиков событий и улучшение производительности React-приложений

Время на прочтение9 мин
Количество просмотров12K
Сегодня мы публикуем перевод материала, автор которого, проанализировав особенности работы с объектами в JavaScript, предлагает React-разработчикам методику ускорения приложений. В частности, речь идёт о том, что переменная, которой, как принято говорить, «присвоен объект», и которую часто называют просто «объектом», на самом деле, хранит не сам объект, а ссылку на него. Функции в JavaScript тоже являются объектами, поэтому вышесказанное справедливо и для них. Если помнить об этом, проектируя React-компоненты и критически анализируя их код, можно усовершенствовать их внутренние механизмы и улучшить производительность приложений.


Читать дальше →
Всего голосов 26: ↑23 и ↓3+20
Комментарии7

Как стать React разработчиком в 2018 году

Время на прочтение17 мин
Количество просмотров77K


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

Адам Голаб, эксперт по React и JS, составил пошаговый учебный план, который поможет вам стать разработчиком с нуля либо укажет направление для дальнейшего повышения навыков в профессии.

План Адама представляет собой список основных пунктов, которые вам нужно изучить самостоятельно. Мы добавили описание, а в некоторых сложных моментах указали ссылки на дополнительные справочные материалы, с помощью которых вы получите ответ на вопрос: «Что я должен узнать как React-разработчик?».
Читать дальше →
Всего голосов 67: ↑62 и ↓5+57
Комментарии121

Разбираемся в redux-saga: От генераторов действий к сагам

Время на прочтение9 мин
Количество просмотров206K


Любой redux разработчик расскажет вам, что одной из самых тяжелейших частей разработки приложений являются асинхронные вызовы — как вы будете обрабатывать реквесты, таймауты и другие коллбэки без усложнения redux действий(actions) и редьюсеров(reducers).

В этой статье я опишу несколько различных подходов к управлению асинхронностью в вашем приложении, начиная от простых подходов как redux-thunk, заканчивая более продвинутыми библиотеками вроде redux-saga.
Читать дальше →
Всего голосов 13: ↑12 и ↓1+11
Комментарии22

Четыре уровня одностраничных приложений, о которых вам нужно знать

Время на прочтение14 мин
Количество просмотров26K

image


В этой статье мы с нуля разработаем React-приложение, обсудим домен и его сервисы, хранение, сервисы приложения и представление (view).

Читать дальше →
Всего голосов 35: ↑30 и ↓5+25
Комментарии33

Рассказ о том, как создать хранилище и понять Redux

Время на прочтение12 мин
Количество просмотров21K
Redux — это интересный шаблон, и, по своей сути, он очень прост. Но почему его сложно понять? В этом материале мы рассмотрим базовые концепции Redux и разберёмся с внутренними механизмами хранилищ. Поняв эти механизмы, вы сможете освоиться со всем тем, что происходит, что называется, «под капотом» Redux, а именно — с тем, как работают хранилища, редьюсеры и действия. Это поможет вам вывести на новый уровень отладку приложений, поможет писать более качественный код. Вы будете точно знать, какие именно функции выполняет та или иная строка вашей программы. Мы будем идти к пониманию Redux через практический пример, который заключается в создании собственного хранилища с использованием TypeScript.

image

Этот материал основан на исходном коде хранилища Redux, написанном на чистом TypeScript. Автор предлагает всем желающим взглянуть на этот код и разобраться с ним. Однако, он указывает на то, что этот проект предназначен для учебных целей.
Читать дальше →
Всего голосов 22: ↑16 и ↓6+10
Комментарии23

Текстовый туториал по React.js и Redux на русском

Время на прочтение2 мин
Количество просмотров204K

(у учебника по Основам React вышло второе издание, Redux-учебник в процессе обновления)

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


Курс про Redux попал в официальную документацию.


Оба руководства бесплатны и выложены на gitbook (можно скачать PDF, ePub, mobi).


В текстах нарочно участвуют термины переведенные на русский (например, состояние), английские (state), либо английский термин написанный по-русски — стейт. Считаю это допустимым, и даже более того, удобным для читателя.

Читать дальше →
Всего голосов 37: ↑35 и ↓2+33
Комментарии22

Текстовый туториал по react-router, а так же react-router + redux. На русском

Время на прочтение3 мин
Количество просмотров43K

Всем добрый день. Немного с задержкой, но все же выходит третий мини-учебник. На этот раз разобран react-router. А так же две главы посвещены интеграции react-router + redux.


В процессе интеграции rr+redux я не использовал react-router-redux и redux-router. Как указано в самой книге, из-за активного развития библиотек, мне хотелось бы «научить вас рыбачить», а не просто «дать рыбу».


Также, приведенный способ по интеграции основан на личном опыте, плюс ответах разработчика redux (его твиттер) на SO, и изучении различных репозиториев. Он не является «единственно верным». Пожалуйста, укажите ссылки на ваши репозитории, либо предложите свои варианты в комментариях.


Поехали!


book_screen

Читать дальше →
Всего голосов 11: ↑11 и ↓0+11
Комментарии5

Sagи из жизни

Время на прочтение10 мин
Количество просмотров14K

Доброго времени суток.


У вас тоже есть знакомый react-разработчик, который рассказывает восхитительные истории о сайд-эффектах в redux? Нет?! Могу я стать этим человеком?



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

Читать дальше →
Всего голосов 16: ↑16 и ↓0+16
Комментарии9

React и Code Splitting

Время на прочтение6 мин
Количество просмотров15K

С code splitting я познакомился очень давно, в году так 2008, когда Яндекс немного подвис, и скрипты Яндекс.Директа, синхронно подключенные на сайте, просто этот сайт убили. Вообще в те времена было нормой, если ваши "скрипты" это 10 файлов которые вы подключаете в единственно правильном порядке, что и до сих пор (с defer) работает просто на ура.
Потом я начал активно работать с картами, а они до сих пор подключаются как внешние скрипты, конечно же lazy-load. Потом уже, как член команды Яндекс.Карт, я активно использовал ymodules возможность tree-shaking на клиенте, что обеспечивало просто идеальный code splitting.


А потом я переметнулся в webpack и React, в страну непуганных идиотов, которые смотрели на require.ensure как баран на новые ворота, да и до сих пор так делают.


Code splitting — это не "вау-фича", это "маст хэв". Еще бы SSR не мешался...


Разберемся?
Всего голосов 13: ↑12 и ↓1+11
Комментарии2

React. Lazy loading

Время на прочтение4 мин
Количество просмотров41K

Доброго времени суток.


Занимаюсь разработкой проекта на React и Redux. Хочу в этой статье описать архитектуру своего проекта.

Итак, начнем. Файловая структура:



Для подключения редьюсеров создаем класс singleton reducerRegister:

./reducerRegister.js
class ReducerRegistry {
  constructor () {
    if (!ReducerRegistry.instance) {
      this._emitChange = null
      this._reducers = {}
      ReducerRegistry.instance = this
    }
    return ReducerRegistry.instance
  }

  getReducers () {
    return {...this._reducers}
  }

  register (name, reducer) {
    this._reducers = {...this._reducers, [name]: reducer}
    if (this._emitChange) {
      this._emitChange(this.getReducers())
    }
  }

  setChangeListener (listner) {
    this._emitChange = listner
  }
}

const reducerRegistry = new ReducerRegistry()

export default reducerRegistry

С помощью этого класса редьюсеры могут сами себя регистрировать в store.
Читать дальше →
Всего голосов 9: ↑9 и ↓0+9
Комментарии15

Быстрая разработка на 1С-Битрикс или как я познакомился с gulp

Время на прочтение7 мин
Количество просмотров27K


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

Не судите сторого


Так судьба сложилась, что я столкнулся с CMS 1С-Битрикс. Я прекрасно понимаю насколько она громоздкая и «грязная», но приходится иметь дело с тем, что есть. Исходя из этого прошу сильно не критиковать статью, она в первую очередь нацелена на тех, кто работает с этой системой.
Читать дальше →
Всего голосов 17: ↑14 и ↓3+11
Комментарии18

Вёрстка адаптивных email-писем: подробное руководство (часть 2)

Время на прочтение10 мин
Количество просмотров35K


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

Сегодня речь пойдет о применении media queries для разных устройств, оптимизации изображений для «мобайла» и повышении эффективности форм подписки.
Читать дальше →
Всего голосов 14: ↑12 и ↓2+10
Комментарии13

Вёрстка адаптивных email-писем: подробное руководство (часть 1)

Время на прочтение8 мин
Количество просмотров86K


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

Зачем нужно адаптировать письма для мобильных устройств


Значительная часть аудитории различных компаний, занимающихся email-маркетингом, просматривают письма на мобильных устройствах. Во время исследования Campaign Monitor от 2011 года выяснилось, что почти 20% открытий писем происходили на смартфонах и планшетах — в 2009 году эта цифра находилась на уровне всего в 4%. Почти 90% от этих открытий осуществлялись на устройствах под iOS. Сейчас цифры еще выше.

В этом руководстве мы рассмотрим несколько способов улучшения отображения почтовых рассылок на мобильных устройствах (от использования media queries при вёрстке адаптивных шаблонов до более продвинутых техник). Кроме того, мы рассмотрим различные вопросы дизайна, которые возникают еще на этапе планирования рассылки, а также поговорим о том, каким образом стоит размещать формы подписки для получения писем на смартфонах и планшетов.
Читать дальше →
Всего голосов 22: ↑17 и ↓5+12
Комментарии10

Прогресс выполнения тяжелой задачи в PHP

Время на прочтение6 мин
Количество просмотров51K
Случилось мне как-то иметь дело с тяжелым PHP-скриптом. Нужно было каким-то образом в браузере отображать прогресс выполнения задачи в то время, пока в достаточно длительном цикле на стороне PHP проводились расчёты. В таких случаях обычно прибегают к периодичному выводу строки вроде этой:

<script>document.getElementById('progress').style.width = '1%';</script>

Этот вариант меня не устраивал по нескольким причинам, к тому же мне в принципе не нравится такой подход.
Читать дальше →
Всего голосов 48: ↑31 и ↓17+14
Комментарии45

Несколько интересностей и полезностей для веб-разработчика #42

Время на прочтение6 мин
Количество просмотров37K
Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Webtorrent




Полноценный торрент клиент для NodeJS и браузеров. Стримминг будет работать прямо в браузере благодаря WebRTC (data chanels) для P2P транспортировки. А самое главное «It's Just JavaScript™», то есть не нужны никакие дополнительные плагины или расширения. Проект собрал более 3000 звезд на GitHub и на данный момент предоставляет следующие возможности: непосредственно саму потоковую передача данных, загрузка нескольких торрентов одновременно, поддержку magnet uri, peer discovery и protocol extension api, возможность подключения WebTorrent клиентов на разных доменах, стримминг видео в <video> тег в формате (webm (vp8, vp9) или mp4 (h.264)), а также в AirPlay, Chromecast, VLC player и прочие устройства.

var WebTorrent = require('webtorrent')

var client = new WebTorrent()
var magnetUri = '...'

client.add(magnetUri, function (torrent) {
  // Got torrent metadata!
  console.log('Torrent info hash:', torrent.infoHash)

  torrent.files.forEach(function (file) {
    // Get a url for each file
    file.getBlobURL(function (err, url) {
      if (err) throw err

      // Add a link to the page
      var a = document.createElement('a')
      a.download = file.name
      a.href = url
      a.textContent = 'Download ' + file.name
      document.body.appendChild(a)
    })
  })
})

Читать дальше →
Всего голосов 49: ↑44 и ↓5+39
Комментарии17

Что такое хорошо: как мы разрабатывали критерии для оценки качества вёрстки веб-проектов

Время на прочтение9 мин
Количество просмотров94K


На Хабре уже было немало материалов о том, как проводить качество вёрстки веб-проектов (вот отличная статья на эту тему) — как правило, речь в таких топиках идёт о коммерческих сайтах. В ходе развития образовательного проекта HTML Academy мы также столкнулись с необходимостью выработки критериев для оценки работ учеников.

Очевидно, что учить нужно так, чтобы потом люди (не все из которых «технари») могли приходить в компании и работать «правильно» — то есть создавая вёрстку, которая красиво выглядит и не требует больших усилий по поддержке. Процесс создания списка универсальных критериев для оценки занял довольно длительное время и был сопряжён с рядом трудностей. Сегодня мы расскажем о том, что же у нас в итоге получилось.
Читать дальше →
Всего голосов 41: ↑39 и ↓2+37
Комментарии47

Как отобразить количество оповещений в названии вкладки браузера

Время на прочтение3 мин
Количество просмотров32K


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

Существует пара наиболее распространенных способов оповещения пользователя. С одной стороны, социальные сети Facebook, Twitter и LinkedIn указывают определенное число, которое соответствует количеству обновлений. С другой стороны, Trello отображает небольшой красный кружок поверх favicon.

Trello Facebook and Twitter notifications
Оповещения Trello, Facebook и Twitter

В этом уроке мы воссоздадим подобные оповещения. Посмотрите демо (англ.), чтобы понять, чем мы будем заниматься.

Посмотреть на GitHub
Демо (рус.)
Читать дальше →
Всего голосов 53: ↑40 и ↓13+27
Комментарии17

Создаем свое Amazon-like навигационное меню

Время на прочтение3 мин
Количество просмотров23K
Ранее на Хабре уже рассказывали о загадочном меню. Изобретение по истине гениальное и полезное. Уверен, каждый из вас хотел бы модифицировать меню на своем сайте таким же образом.

image
Читать дальше →
Всего голосов 34: ↑23 и ↓11+12
Комментарии10

Выравнивание модального окна по центру

Время на прочтение3 мин
Количество просмотров87K
Мой первый пост.
Центрирование блока относительно другого блока относительно часто-попадающаяся задача, это очередное ее решение. Для меня оно стало самым универсальным и покрывающим все кейсы, с которыми я когда-либо сталкивался.
Читать дальше →
Всего голосов 34: ↑24 и ↓10+14
Комментарии28
1
23 ...

Информация

В рейтинге
Не участвует
Откуда
Санкт-Петербург, Санкт-Петербург и область, Россия
Дата рождения
Зарегистрирован
Активность