Search
Write a publication
Pull to refresh
8
0
Павел Щеголев @Carduelis

Principle Front-end Engineer

Send message

Hyperapp для беженцев с React/Redux

Reading time5 min
Views18K

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.

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

Горячая перезагрузка компонентов в React

Reading time5 min
Views28K
У меня есть два любимых запроса в гугле:

— Что будет, если в унитаз поезда на полном ходу бросить лом?
— Что будет, если в реакту по полном ходу заменить компонент?

И если с первым вопросом все более менее понятно, то со вторым вопросом все не так просто — тут же вылезает Webpack-dev-server, Hot Module Replacement, и React-Hot-Loader.

И все бы хорошо, но эта гремучая смесь просто не работает, спотыкаясь на первом же сложном коде, HOC, композиции, декораторе и нативных arrow функциях.

В общем третья версия Reac-hot-loader заводилась далеко не у всех.


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

Анализ производительности React 16 приложений с помощью инструментов разработчика Chrome

Reading time5 min
Views16K
React — это один из ведущих фронтенд-фреймворков не только потому, что за ним стоит Facebook, но и благодаря его высокой производительности. Виртуальный DOM React известен благодаря эффективному рендерингу компонентов. Но как быть, если эти компоненты внезапно становятся не такими уж и быстрыми? Куда стоит посмотреть? Как это исправить?

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


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

Переходим на сторону сервера с bem-express

Reading time14 min
Views15K

— Сначала вы его отрицаете, потом вы его ненавидите, а потом вы не можете без него жить.
из доклада Артема Курбатова «БЭМ: мастер-класс»


Методология БЭМ существует достаточно долго и принята на вооружение в Google, EPAM Systems, BBC, Альфа-Банке. При этом она все еще вызывает беспокойство у типичного разработчика и менеджера проектов среднего звена.




У некоторых смельчаков изучение БЭМ не ушло дальше ограничения возможностей CSS для получения более предсказуемых результатов. И хотя БЭМ давно вышел за пределы верстки, до сих пор на вопрос «Знаете ли вы БЭМ?» можно услышать: «Конечно, это про подчеркивания в классах».


Если ваше представление о БЭМ близко к этому, я отвечу вам словами работодателя при приеме на работу новоиспеченного выпускника: «Забудьте о том, что вы слышали о БЭМ ранее». Методология БЭМ настолько интересна, насколько большинству о ней ничего не известно. Чтобы понять всю прелесть БЭМ, необходимо иметь представление обо всех технологиях, библиотеках, фреймворках и инструментах, которые БЭМ предоставляет. Изучите их, оставайтесь инопланетянином, ребенком, который удивляется тому, с чем взрослые смирились.


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

Управление разработкой технологически сложных интернет-приложений в условиях острой нехватки времени

Reading time45 min
Views17K

Вступление


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


В заметке так же рассматривается больной вопрос трудностей с выплатой зарплаты и как их можно эффективно решать.

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

React Native: от простой анимации до интерактивной на скорости 60 FPS

Reading time15 min
Views21K

Необходимость в обмене данными между UI и JS процессами в React Native неизбежно сказывается на производительности препятствуя выполнению JavaScript анимации с высокой частотой кадров. Современные библиотеки, такие как Animated, решают эту проблему минимизацией количества сообщений, передаваемых через мост. Следующий шаг — это элементы управления, которые непрерывно реагируют на жесты пользователя. Как мы можем анимировать их со скоростью 60 кадров в секунду?

Осторожно, Траффик!

Как правильно использовать переменные в препроцессорах LESS и SASS

Reading time10 min
Views37K

Правила управления переменными в препроцессорах и методика переопределения настроек


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


Предыстория


В 2014 году в компании начали редизайн проекта и в основу вёрстки мы положили свежий на тот момент Bootstrap 3.0.1. Использовали мы его не как отдельную стороннюю библиотеку, а тесно заинтегрировали с нашим собственным кодом: отредактировали переменные под наш дизайн и компилировали кастомизированный Бутстрап из LESS исходников самостоятельно. Проект оброс собственными модулями, которые использовали бутстраповские переменные и добавляли в файл с настройками свои новые переменные.


В тот момент я думал, что это правильный подход.

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

Легальный вывод средств с Upwork в РФ

Reading time8 min
Views66K
На Хабре уже написано достаточно много статьей по теме, в частности:


В ответ на повторяющиеся просьбы написать статью, в которой:

  • разбросанные по разным статьям крупицы будут собранны в единое целое
  • всевозможные противоречия будут устранены
  • все сведения будут иметь актуальный характер
  • будут учтены пожелания такие как «а можно с картинками? :)»

родилось следующее руководство.

Матрица с идеями для стартапов

Reading time2 min
Views48K
Буквально на днях Эрик Стромберг, бывший совладелец книжного сервиса Oyster, чуть более года назад проданного Google, рассказал о матрице, которая поможет вам найти идею для нового стартапа. Сама задумка создания подобной матрицы многим показалась чрезвычайно интересной. Пост Эрика, размещенный в его блоге на Medium, спровоцировал обширную дискуссию и вызвал интерес у мировых СМИ. Тем, кто еще не слышал об этой концепции, мы предлагаем ознакомиться с переводом резонансной публикации.


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

Ресурсы для стартаперов: план действий в ссылках

Reading time3 min
Views9K
Стартапы рождаются каждый день. Некоторые из них становятся настоящей золотой жилой для своих создателей. Но лишь некоторые. Само собой, что запуск и продвижение собственного стартапа – адский, каторжный труд. И начинается он практически сразу после того, как вас угораздило озарило стать старатпером: необходимо трезво оценить перспективность идеи, получить обратную связь от потенциальных пользователей, довести проект до ума. Дальше больше: приходится прикладывать максмум усилий, чтобы о вашем детище узнали журналисты, инвесторы и возможные партнеры. Сегодня мы предлагаем вашему вниманию очередную подборку российских и зарубежных ресурсов, которые могут оказаться полезны тем отважным создателям стартапов, которых не остановливают перечисленные выше трудности.

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

Дайджест интересных материалов для мобильного разработчика #198 (2-9 апреля)

Reading time4 min
Views8.2K
Из нового дайджеста вы можете узнать, как устроено автоматическое тестирование в Почте, в нескольких вариантах о том, как работать с WebRTC, о том, что Android стал самой используемой ОС в мире, что MZ собирает все данные мира и о средней «по больнице» вовлеченности людей в приложения.

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

M* — алгоритм поиска кратчайшего пути, через весь мир, на смартфоне

Reading time13 min
Views47K


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

Под катом представлена обобщенная эвристика к алгоритму A*, полезная именно в свете практической пригодности на больших графах при ограниченных ресурсах, например, на мобилке.
Читать дальше →

Руководство по работе с Redux

Reading time80 min
Views286K
Сегодня Redux — это одно из наиболее интересных явлений мира JavaScript. Он выделяется из сотни библиотек и фреймворков тем, что грамотно решает множество разных вопросов путем введения простой и предсказуемой модели состояний, уклоне на функциональное программирование и неизменяемые данные, предоставления компактного API. Что ещё нужно для счастья? Redux — библиотека очень маленькая, и выучить её API не сложно. Но у многих людей происходит своеобразный разрыв шаблона — небольшое количество компонентов и добровольные ограничения чистых функций и неизменяемых данных могут показаться неоправданным принуждением. Каким именно образом работать в таких условиях?

В этом руководстве мы рассмотрим создание с нуля full-stack приложения с использованием Redux и Immutable-js. Применив подход TDD, пройдём все этапы конструирования Node+Redux бэкенда и React+Redux фронтенда приложения. Помимо этого мы будем использовать такие инструменты, как ES6, Babel, Socket.io, Webpack и Mocha. Набор весьма любопытный, и вы мигом его освоите!
Читать дальше →

4 вида утечек памяти в JavaScript и как с ними бороться

Reading time16 min
Views135K

В этой статье мы рассмотрим распространённые виды утечек памяти в клиентском JavaScript. Также мы узнаем, как их обнаружить с помощью Chrome Development Tools.


timeline в Chrome Dev Tools

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

D3.js. Визуализация графов

Reading time13 min
Views60K
D3.js — это библиотека JavaScript для управления документами, в основе которых лежат данные. D3 помогает претворить данные в жизнь, используя HTML, SVG и CSS. D3 позволяет привязывать произвольные данные к DOM, и затем применять результаты манипуляций с ними к документу.

Для понимания статьи пригодится знание основ D3, и в ней мы рассмотрим реализацию алгоритмов визуализации графа на основе сил (Force-directed graph drawing algorithms), которая в D3 (version 3) имеет название Force Layout. Это класс алгоритмов визуализации графов, которые вычисляют позицию каждого узла, моделируя силу притяжения между каждой парой связанных узлов, а также отталкивающую силу между узлами.

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

Количество и качество: как развиваются таск-трекеры в условиях конкуренции

Reading time11 min
Views48K
История знает не один десяток таск-менеджеров, которые стремятся захватить умы и завоевать сердца пользователей. Однако у последних есть достаточно аргументов «за» и «против», чтобы мотивировать разработчиков подобных сервисов на дальнейшие подвиги. Более того, кому-то не хватает существующих таск-менеджеров, и как известно, спрос рождает предложение.

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

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

Корпорация Microsoft запускает новый сервис — Planner. Он станет непосредственным конкурентом популярного таск-менеджера Trello. Сравнивая внешний вид и принцип работы двух сервисов, можно найти много общего.
Читать дальше →

Google's beacon platform. Часть 2 — Nearby meassages API

Reading time12 min
Views8.8K

Google's beacon platform — это решение для работы с Bluetooth маячками. Платформа работает с разными маячками от разных производителей, предоставляя разработчикам единый, простой и гибкий инструмент.



Перед прочтением этой статьи я рекомендую ознакомиться с концепцией Physical Web о которой я рассказывал в своей прошлой статье: Концепция Physical web. Bluetooth маячки. Сравнение стандартов iBeacon, AltBeacon и Eddystone.


Google's beacon platform. Часть 1 — Proximity beacon API
Google's beacon platform. Часть 2 — Nearby meassages API


Основным средством, в рамках Google's beacon platform, для работы на клиентской стороне с bluetooth маячками, является Nearby Messages API. В этой статье я расскажу как настроить проекты на а платформах Android и iOS, и добавить в приложение возможность получать и разбирать сообщения от ble-маячков.

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

Sublime Text: валидация синтаксиса, автодополнение (v.1.1)

Reading time2 min
Views30K
UPD: по совету комментаторов, заменил jsl на более новый eslint

Заметил у себя на работе, что многие JS-разработчики до сих пор используют «голый» Sublime Text, матерясь и чертыхаясь после каждой пропущенной запятой, непарной скобочки или еще какой опечатки. Поэтому написал краткий гайд по исправлению этого недоразумения, которым с вами и делюсь. Итак:
Читать дальше →

Транслируем видеопоток с IP-камеры с помощью WebRTC

Reading time9 min
Views265K
Решение задачи онлайн-вещания с IP-камеры, вообще говоря, не требует применения WebRTC. Камера сама является сервером, обладает IP-адресом и может быть подключена напрямую к маршрутизатору с целью раздачи видео-контента. Так зачем же применять технологию WebRTC?

image

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

Information

Rating
Does not participate
Location
Amsterdam, Noord-Holland, Нидерланды
Date of birth
Registered
Activity