Отображение списка (множества) элементов на странице — это стандартная задача для практически любого web-приложения. В этом посте я хотел бы поделиться некоторыми советами по повышению производительности.
Для тестового примера я создам небольшое приложение, которое рисует множество «целей» (кругов) на элементе canvas. Я буду использовать redux как хранилище данных, но эти советы подойдут и для многих других способов хранения состояния.
Так же эти оптимизации можно применять с react-redux, но для простоты описания я не буду использовать эту библиотеку.
Данные советы могут повысить производительность приложения в 20 раз.
В апреле этого года мы перезапустили tinkoff.ru. Банк превратился в финансовый супермакет. Теперь не только клиент банка, но и любой посетитель оплатит мобильный, проверит налоги и оформит ипотеку — всё на одной платформе. В этой статье я поделюсь опытом и технологическими решениями, к которым мы пришли за год разработки.
DevConf — конференция web-разработчиков, а современный веб, точнее его UI часть, все больше и больше уходит на front-end. Такие технологии, как React от Facebook, позволили фронтэнду вырасти из JS-надстройки над HTML в серьезную технологию. И React Native, позволяющая писать нативные приложения — логичное развитие. Представляем интервью с открывающим секцию JS нашей конференции, Денисом Измайловым, который расскажет про его опыт разработки мобильных приложений на React Native с использованием Relay и GraphQL.
У тебя такой солидный опыт разработки. Скажи, с чего ты начинал?
Это были лихие 90-е. Мы развлекались, как могли. 1998 год. Сибирь. Старенький 486-й процессор. EGA-монитор с разрешением 640x350 (сейчас даже аватарки его превосходят). Загрузочные дискеты с MS-DOS. Жесткий диск? Это было роскошью. Интернет? Тогда я и слова такого не знал. У меня был QBasic от Microsoft и Pascal от Borland. Голодный до знаний, с горящими глазами, до поздней ночи я разбирался, как делают программы взрослые, а утром шёл в школу и чертил интерфейсы будущей ОС в тетрадке.
Читать полностью »
Неизменяемым (англ. immutable) называется объект, состояние которого не может быть изменено после создания. Результатом любой модификации такого объекта всегда будет новый объект, при этом старый объект не изменится. Читать полностью »
Существует множество подходов для того, чтобы стилизовать React-компоненты, и в этой статье будут рассмотрены некоторые из них. Но, для начала, определимся с ключевыми моментами, на которых основано повествование:
Использование React предполагает, что View нашего Web-приложения разбито на компоненты, и каждый из них, так или иначе, отвечает за собственное отображение и функциональность.
Подразумевается, что будут использованы современные инструменты разработки вроде babel, webpack, browserify, gulp, post- pre- css-процессоры.Читать полностью »
Всем добрый день. Немного с задержкой, но все же выходит третий мини-учебник. На этот раз разобран react-router. А так же две главы посвещены интеграции react-router + redux.
В процессе интеграции rr+redux я не использовал react-router-redux и redux-router. Как указано в самой книге, из-за активного развития библиотек, мне хотелось бы «научить вас рыбачить», а не просто «дать рыбу».
Также, приведенный способ по интеграции основан на личном опыте, плюс ответах разработчика redux (его твиттер) на SO, и изучении различных репозиториев. Он не является «единственно верным». Пожалуйста, укажите ссылки на ваши репозитории, либо предложите свои варианты в комментариях.
Поехали!
Привет,
Javascript и Front-end в целом становятся все сложнее и сложнее. На мой взгляд, стандартная поставка Rails не отвечает современным потребностям Front-end разработчика. К тому же использование Sprockets делает ваш код очень Rails-специфичным, что затрудняет он-бординг новых разработчиков, незнакомых с Rails.
В данном видео, на примере простого React.js приложения, я покажу, как можно мигрировать со Sprockets на Browserify.
Этот подход дает следующие бонусы:
На начальном уровне такие переводы — мой вклад в развитие rails сообщества.
Дальше в тексте все что выделено курсивом мои замечания (таких будет не много:) )
Введение в React.js
React.js это новый популярный парень из команды JavaScript фреймворков, он выделяется своей простотой. Когда другие фреймворки реализуют полный MVC (Model View Controller) подход, мы можем сказать React'у реализовать только View (Отображение) (факт — некоторые люди переписывают часть отображения (V) этих фреймворков c помощью React).
Приложения с реактом основаны на 2х основных принципах Компоненты и Состояния. Компоненты могут состоять из более мелких компонентов встроенных или пользовательских. Состояния, что ребята из Facebook называют односторонний реактивный поток данных, подразумевая что наш интерфейс(UI) будет реагировать на каждое изменение состояния.
Одна хорошая особенность React.js это то что он не требует каких-либо дополнительных зависимостей, что обеспечивает ему подключаемость с любой js библиотекой. Пользуясь этим, мы будем включаеть его в наш Rails стек для создания внешнего интерфейса или можно сказать для создания «Rails на стероидах».
Для этого гайда мы создадим маленькое приложение с нуля что бы отслеживать наши действия. Каждая запись(дальше, тоже самое что и Record) будет состоять из даты, названия и количества. Запись будет рассматриваться как Кредит(Credit) если его сумма больше нуля, в противном случае она будет рассматриваться каr дебет. Вот макет проекта:
Суммарно приложение будет вести себя так:
Закончил работу над парой подробных текстовых туториалов на русском. Постарался уделить как можно больше времени практике. По ходу повествования есть вопросы, задачи и решения.
Курс про Redux попал в официальную документацию.
Оба руководства бесплатны и выложены на gitbook (можно скачать PDF, ePub, mobi).
В текстах нарочно участвуют термины переведенные на русский (например, состояние), так и английские (state), либо английский термин написанный по-русски — стейт. Считаю это допустимым, и даже более того, удобным для читателя.Читать полностью »
