Webpack считается лучшим инструментом для сборки приложений на React и Redux. Полагаю, многие из тех, кто сегодня использует Angular 2 и другие фреймворки, не обходят вниманием и Webpack. И поскольку начинать работу с данным инструментом всегда непросто, я решил посвятить этой теме несколько публикаций в надежде облегчить старт другим разработчикам и заодно продемонстрировать некоторые особенности Webpack.
Рубрика «ReactJS» - 56
10 особенностей Webpack
2016-09-05 в 13:07, admin, рубрики: framework, javascript, JS, React, ReactJS, redux, webpack, Блог компании Plarium, джаваскрипт, Программирование, разработка мобильных приложений, фреймфорк, фреймфорки
RxConnect — когда React встречает RxJS
2016-09-05 в 11:58, admin, рубрики: javascript, React, reactive, ReactJS, redux, rx, rxjsДанный перевод является русскоязычной интерпретацией документации, которую я сам и написал, поэтому не стесняйтесь задавать вопросы.
Введение
Обрабатывать пользовательский ввод может быть не так просто, как кажется. Мы же не хотим отправлять запросы на сервер пока пользователь всё ещё набирает свой запрос? И, конечно же, пользователь должен всегда видеть результат на последний запрос, который он отослал.
Существуют разные способы реагирования на интерактивные события в React приложениях, и, по моему мнению, реактивный подход (благодаря таким библиотекам, как RxJS или Bacon) — один из самых лучших. Вот только для того, чтобы использовать RxJS и React одновременно, Вам придётся иметь дело с жизненным циклом React компонента, вручную управлять подписками на потоки и так далее. Хорошая новость — всё это можно делать автоматически с помощью RxConnect — библиотеки, разработанной в процессе миграции с Angular на React в ZeroTurnaround.
Webpack + React. Как уменьшить бандл в 15 раз
2016-08-31 в 11:37, admin, рубрики: javascript, javascript webpack reactjs, node.js, ReactJS, метки: javascript webpack reactjs
Ясной инструкции по сборке webpack для продакшена я не нашел. Поэтому решил написать эту статью. Надеюсь, пригодится. Существует множество сборщиков скриптов. Я выбрал для себя Webpack по таким критериям:
- Гибкость настройки
- Большое количество плагинов и лоадеров
- Lazy loading
- Использование es6 и es7 синтаксиса с помощью babel-loader
Из недостатков я бы выделил отсутствие ясной документации. Для тех, кто никогда не сталкивался с Webpack, я рекомендую скринкаст от Ильи Кантора. В данной статье хочу рассказать о настройках сборки проекта, написанного на React + Redux.
Я не буду углубляться в основы, а расскажу, какие плагины использую для сборки.
Читать полностью »
Выбираем состав изоморфных React-приложений на следующие 12 месяцев
2016-08-29 в 15:58, admin, рубрики: boilerplate, eslint, javascript, node.js, npm, ReactJS, redux, starter kit, webpackДрузья, уже шесть часов вечера, последний понедельник августа, а это значит — последняя неделя лета. Давайте подведём итог и немного пофантазируем?
Сейчас формируем некий Isomorphic React App бойлерплейт на следующие 12 месяцев, с которым можно быстро стартовать новые проекты. Пока видим такой набор:
1. React 15.
2. На сервере — Node.js и Express.
3. CSS modules и isomorphic-style-loader для автоматической генерации Critical CSS при Server-side Rendering. Или всё-таки JSS? Читать полностью »
Год использования ReactJS: подводим итоги
2016-08-22 в 9:18, admin, рубрики: ReactJS, Блог компании Voximplant, откровения о ReactJS, Программирование, Разработка веб-сайтов, Тестирование веб-сервисов, метки: откровения о ReactJS
React мы в Voximplant любим и ценим. Вовсе не из-за хайпа (полторы тысячи твитов о новом SDK просто потому, что это React Native) а потому, что фреймворк действительно удобный. Простое дробление интерфейса на маленькие изолированные кусочки – это то, чего так не хватало и Jade/Pug, и Web Components, и даже Angular. Под катом адаптированный перевод статьи, в которой разработчики JetRuby Agency делятся впечатлениями о React: что использовали, что не использовали и что еще только планируют использовать.
Читать полностью »
Прогрессивная загрузка web-приложения с помощью разделения кода
2016-08-15 в 7:32, admin, рубрики: javascript, progressive loading, progressive web apps, React, ReactJS, web-разработка, webpackВ этой статье мы рассмотрим как можно ускорить первоночальную загрузку web-приложения c помощью разделения кода (code splitting). Для реализации задуманного я буду использовать webpack v1, а для демонстрации — React (не обязателен).
В большинстве своих проектов я собираю все javascript файлы (а иногда css и картинки тоже) в ОДИН ОЧЕНЬ БОЛЬШОЙ bundle.js. Возможно ты, дорогой читатель, делаешь точно так же. Это достаточно стандартная практика для современных веб-приложений.
Но этот подход имеет один (и иногда достаточно важный) недостаток: первоночальная загрузка приложения может занимать очень долгое время, так как web-браузер должен (1) загрузить огромный файл и (2) распарсить тонну js-кода. Загрузка файла может занять долгое время, если у пользователя медленный интернет. Так же этот огромный файл может содержать код компонентов, которые пользователь НИКОГДА не увидит (например, пользователь просто не откроет некоторые части вашего приложения).
Что делать?
Читать полностью »
Интернационализация приложения в React (и не только)
2016-08-12 в 14:20, admin, рубрики: internationalization, javascript, pluralization, React, ReactJSНедавно я уже писал статью о том, как можно достаточно удобно валидировать формы в React с помощью компонента Formsy-React. Сегодня я бы хотел рассказать о подходе, который использовал для интернационализации разрабатываемого приложения. Как бонус, используемая библиотека добавляет возможность плюрализации, что является весьма полезной фишкой при разработке многоязычного приложения. Если интересно, прошу под кат!
Читать полностью »
Повторное использование строк для высокоэффективной работы со списками React Native ListView
2016-08-02 в 12:59, admin, рубрики: ListView, ListView android, react native, react.js, ReactJS, Блог компании Wix.com, разработка мобильных приложений, Разработка под android, метки: react nativeПовторное использование ранее размещенных в памяти строк, которые при прокрутке выходят за пределы экрана, ― широко распространенная техника оптимизации использования компонента ListView, изначально реализованная в iOS и Android. Реализация ListView как компонента React Native по умолчанию не содержит непосредственно эту оптимизацию, но имеет ряд других приятных преимуществ. Тем не менее, это отличный образец, достойный изучения. Рассмотрение этой реализации в рамках изучения React также будет интересным мысленным экспериментом.
Списки являются важной частью разработки мобильных приложений
Списки – это сердце и душа мобильных приложений. Множество приложений отображают списки: это и список публикаций в вашей ленте приложения Facebook, и списки бесед в Messenger, и список сообщений электронной почты Gmail, и список фотографий в Instagram, и список твитов в Twitter и т.д.
Когда ваши списки становятся более сложными, со значительным количеством источников данных, тысячами строк, медиа-файлами, требующими большого объема памяти, их разработка также становится сложнее.
С одной стороны, вы хотите сохранить скорость работы вашего приложения, т.к. прокручивание со скоростью 60 FPS стало золотым стандартом нативного опыта взаимодействия (UX). С другой стороны, вы хотите сохранить низкое потребление памяти, потому что мобильные устройства не располагают избыточными ресурсами. Не всегда просто выполнить оба эти условия.
Поиск идеальной реализации элемента ListView
Основополагающим правилом разработки программного обеспечение является то, что нельзя предусмотреть оптимизацию для любого сценария. Читать полностью »
Валидация форм в React
2016-07-27 в 9:16, admin, рубрики: form validation, React, ReactJS, метки: form validationЕсли вы когда-нибудь пользовались фреймворком AngularJS, то вы знаете, как легко в нем валидируются формы. Однако в React ситуация несколько хуже. Оно и понятно, ведь это всего лишь библиотека. Но благодаря сообществу из этой библиотеки можно сделать мощное средство для создания полноценных SPA-приложений. На данный момент создано огромное множество компонентов, которые способны удовлетворить большинство нужд разработчиков на React. В данной статье я бы хотел описать подход, который использовал для валидации форм с помощью компонента Formsy-react.
Читать полностью »
Порталы в React.js
2016-07-21 в 8:16, admin, рубрики: javascript, ReactJS, Блог компании SmartProgress, метки: портал
Наверное, каждому фронтенд-разработчику доводилось делать разного рода выпадайки или всплывающие подсказки. И почти всегда настает момент, когда такую штуку надо отобразить внутри элемента с overflow: hidden. Настал такой момент и в SmartProgress.
Мы на SmartProgress используем React для разработки интерфейсов и нам очень хотелось найти react-way решение. На помощь нам спешат порталы.