2 недели назад мы полностью обновили WebStorm — нашу IDE для front-end-разработки и Node.js. Мы уже анонсировали некоторые улучшения в WebStorm 9, в том числе поддержку новых фреймворков и инструментов. С тех пор было проделано еще немало работы, результаты которой можно увидеть в WebStorm 9. В этом посте мы подробно расскажем об этом новом функционале и кратко напомним обо всем остальном.
Рубрика «React» - 72
Новый WebStorm 9: просто лучше. Поддержка Meteor, React и JSX, интеграция с Gulp, PhoneGap и многое другое
2014-11-06 в 11:55, admin, рубрики: dart, eslint, gulp, IDE, javascript, jscs, Meteor, React, webstorm, Блог компании JetBrains, Веб-разработкаЭволюция Yahoo Mail
2014-11-05 в 15:24, admin, рубрики: javascript, mail, mvc, node.js, React, Веб-разработкаЭто перевод публикации «Evolving Yahoo Mail» из блога разработчиков Yahoo.
Почтовый сервис Yahoo Mail изначально был запущен в 1999 году. На протяжении 15 лет код эволюционировал из серверного Web 1.0 приложения в один из крупнейших YUI одностраничных приложений в интернете.
В прошлом месяце Yahoo провел React JS митап в главном оффисе в Sunnyvale, CA. Митап (слайды с митапа) посетило более 120 человек, где мы делились знаниями и идеями о разработке приложений, используя Javascript, React, Flux и т.д. Также мы рассказали об эволюции Yahoo Mail и причинах, по которым мы выбрали ReactJS + Flux как основу для нашего нового Mail продукта.
Читать полностью »
Построение надежных веб-приложений на React: Часть 4, серверная генерация
2014-07-19 в 23:08, admin, рубрики: javascript, node.js, nodejs, React, server-side, web-разработка, Веб-разработкаПеревод статьи «Building robust web apps with React: Part 4, server-side rendering», Matt Hinchliffe
От переводчика: это перевод четвертой части цикла статей «Building robust web apps with React»
Переводы:
- Построение надежных веб-приложений на React: Часть 1, браузерные прототипы
- Построение надежных веб-приложений на React: Часть 2, оптимизация с Browserify
- Построение надежных веб-приложений на React: Часть 3, тестирование с Jasmine
- Построение надежных веб-приложений на React: Часть 4, серверная генерация
Несколько месяцев назад я написал первую часть этой серии, я очень заинтересовался возможностями использования React'а для создания разумных приложений, которые могут избежать слабостей, существующих во многих современных JavaScript приложениях. Наконец, я собираюсь сделать так, чтобы мое приложение запускалось сначала на сервере, а потом запускало тот же код в браузере, завершая цикл изоморфного или адаптивно-гибридного приложения.
В предыдущей части этой серии я блуждал в поисках стратегии тестирования, и эта часть не сильно отличается. И хотя здесь есть примеры и базовые демо изоморфного JavaScript, здесь не так много опенсорс реализаций для изучения. В сторону детали реализации, для меня, самое большое отличие, от написания клиентского JavaScript, это то, что e меня изначально есть данные.
Читать полностью »
Построение надежных веб-приложений на React: Часть 3, тестирование с Jasmine
2014-07-16 в 20:04, admin, рубрики: jasmine, javascript, React, unit-testing, Unit-тестирование, web-разработка, Веб-разработка, тестированиеПеревод статьи «Building robust web apps with React: Part 3, testing with Jasmine», Matt Hinchliffe
От переводчика: это перевод третьей части цикла статей «Building robust web apps with React»
Переводы:
- Построение надежных веб-приложений на React: Часть 1, браузерные прототипы
- Построение надежных веб-приложений на React: Часть 2, оптимизация с Browserify
- Построение надежных веб-приложений на React: Часть 3, тестирование с Jasmine
- Построение надежных веб-приложений на React: Часть 4, серверная генерация (в переводе)
Во второй части я покрыл процесс оптимизации моего браузерного приложения Tube Tracker, но каждое вносимое мной изменение до сих пор требует обновление браузера, чтобы проверить, что все работает. Приложение серьезно потребует набора тестов, чтобы ускорить процесс разработки и избежать регрессии кода. Как оказалось, это проще сказать, чем сделать, когда начинаешь работать с новой технологией, как React.
Читать полностью »
Построение надежных веб-приложений на React: Часть 2, оптимизация с Browserify
2014-07-15 в 8:11, admin, рубрики: browserify, javascript, React, web-разработка, Веб-разработкаПеревод статьи «Building robust web apps with React: Part 2, optimising with Browserify», Matt Hinchliffe
От переводчика: это перевод второй части цикла статей «Building robust web apps with React», вот ссылка на перевод первой части. Перевод следующей части появится через несколько дней.
В первой части, я осветил причины, почему по моему мнению, React захватывающий инструмент, который может быть использован для построения изоморфный или адаптивно-гибридных веб-сайтов, что может равняться динамичности мобильных приложений и надежности статичной страницы двадцатилетней давности. Я также написал базовое демо приложение, чтобы исследовать некоторые парадигмы и особенности React и показать, как быстро можно прототипировать динамические браузерные приложения, но это едва ли демонстрирует надежность, к которой я изначально стремился.
Код, который в начальном демо был представлен на выполнение браузеру, не проходит ни один базовый тест производительности; скрипты должны быть прекомпилированы, объединены и минифицированы перед отправкой на продакшн.Читать полностью »
Построение надежных веб-приложений на React: Часть 1, браузерные прототипы
2014-07-14 в 17:07, admin, рубрики: javascript, React, web-разработка, Веб-разработкаПеревод статьи «Building robust web apps with React: Part 1, in-browser prototypes», Matt Hinchliffe
От переводчика: это первая статья из цикла «Building robust web apps with React», если статья пойдет хорошо, переведу остальные части.
Когда я смотрю на то, как устроены браузеры и протоколы, на которых работает веб, мне становится как-то тревожно. Есть столько всего, что может и, обычно, идет не так, что становится удивительно, как хоть что-то из того, что мы пишем, вообще работает. Надежность «вопреки всему» происходит от отказоустойчивости и обратной совместимости, которые укоренились в ключевые части веб-стека. Браузер всегда сделает все возможное, чтобы отобразить, что-то полезное, будь-то парсинг плохо написанного документа, в котором невозможно получить зависимости, или, который на 10 лет устарел.
404PageFound содержит до сих пор работающие сайты, созданные еще в 1993 году.
Читать полностью »
5 практических примеров для изучения фреймворка React
2014-07-12 в 23:37, admin, рубрики: dom, javascript, React, web-разработка, Веб-разработкаПеревод статьи «5 Practical Examples For Learning The React Framework», Martin Angelov
Вы вероятно слышали о популярном JavaScript фреймворке от Facebook – React. Он используется на многих популярных веб-сайтах, в том числе в Facebook и Instagram. В этой статье вы увидите 5 практических примеров, построенных при помощи React, которые помогут вам начать работать с этим фреймворком.
Читать полностью »
Morearty.js — новая pure JavaScript прослойка над React для разумного управления состоянием
2014-07-11 в 12:31, admin, рубрики: javascript, morearty, moreartyjs, React, Веб-разработка, ПрограммированиеВведение
В прошлом году произошло революционное событие в разработке веб-приложений: компания Facebook выпустила React — библиотеку для создания пользовательских интерфейсов в браузере, использующую радикально отличающийся подход к структурированию кода и написанию графических компонентов. Вместо того, чтобы, имея размётку, «цепляться» к ней из JavaScript, т.е. работать напрямую с DOM, вводится понятие компонента — самодостаточной единицы, которая представляет собой легковесное описание DOM. Когда «реакт» определяет, что необходимо перерисовать что-либо на странице, он рассматривает дельту изменений этого виртуального DOM и перерисовывает только изменённые части. Благодаря тому, что при таком подходе обращение к DOM происходит гораздо реже, возрастает отзывчивость интерфейса и скорость работы: работа JIT не прерывается тяжеловесными обращениями к нативному коду.
React предоставляет возможность сохранения состояния для каждого компонента, при изменении этого состояния он запускает «перерисовку». Таким образом, состояние вашего приложения может оказаться «размазанным» по дереву компонентов. Это не является недостатком React: наоборот, библиотека обеспечивает базовые необходимые блоки и не навязывает лишних правил, когда это возможно. Кто пробовал строить приложение по такой схеме, когда каждый компонент имеет своё изменяемое состояние, рано или поздно столкнулся с возрастающей неуправляемостью кода и сложностью понимания происходящего в приложении. В связи с этим начали появляться библиотеки-надстройки над React, наиболее известной из которых является Om на ClojureScript от David Nolen. Почитать подробнее про Om можно в его блоге.
Каждый React-компонент имеет возможность переопределить метод shouldComponentUpdate
, чтобы помочь библиотеке узнать, необходима ли его перерисовка. По умолчанию React возвращает true
, и это значит, что «перерисовке» подвергаются все компоненты. Под перерисовкой в данном контексте понимается вызов метода render
каждого компонента для построения виртуального DOM, который впоследствии сравнивается с предыдущим значением, после чего перерисовываются в реальном DOM только затронутые части.
В Om был использован централизированный подход к управлению состоянием: оно хранится в ClojureScript атоме на самом верху иерархии компонентов. Дочерние же компоненты получают «указатели» на подразделы этого состояния, которое является иммутабельным значением. Это довольно очевидное решение с точки зрения функционального программирования. Таким образом это позволяет определить метод shouldComponentUpdate
так, чтобы он сравнивал текущее состояние с предыдущим с помощью оператора ===
, а также хранить всё состояние в одном месте, что значительно упрощает понимание работы приложения.
В компании, в которой я работаю, для проекта было принято решение создать концептуально похожую надстройку над React с нуля и на чистом JavaScript, т.к. использовать ClojureScript не было возможности и желания. Так было положено начало Morearty.js — «more» + «react» + «art» (от названия компании).Читать полностью »
Diff-алгоритм React
2014-03-29 в 20:05, admin, рубрики: diff, Facebook, javascript, React, Алгоритмы, переводReact — это JavaScript библиотека для создания пользовательских интерфейсов от Facebook. Она была разработана «с нуля», с упором на производительность. В этой статье я расскажу вам о diff-алгоритме и механизме рендеринга, который использует React, что позволит вам оптимизировать ваши приложения.
Diff Алгоритм
Перед тем как мы углубимся в детали реализации, довольно важно, чтобы вы имели представление о том, как работает React.
var MyComponent = React.createClass({
render: function() {
if (this.props.first) {
return <div className="first"><span>A Span</span></div>;
} else {
return <div className="second"><p>A Paragraph</p></div>;
}
}
});
В любой момент времени вы можете описать, как будет выглядеть ваш UI. Важно понимать, что результат рендеринга не является фактическим DOM деревом. Это всего лишь легковесные JS объекты, которые мы называем «виртуальный DOM».
Читать полностью »
AngularJS и ReactJS или как сделать ваше приложение быстрее
2014-03-12 в 22:47, admin, рубрики: AngularJS, javascript, React, метки: AngularJS, javascript, ReactСовременный мир программирования, а особенно веб и javascript уже давно не тот и имеет очень большое колличество инструментов для той или иной задачи. В сегодняшнем посте я хотел бы рассказать как скрестить мощь AngularJS и молниеносность отображения view – Facebook React.
Всем известно, что когда мы генерируем коллекцию во view через Angular, то каждый элемент этой коллекции становится observable. Я конечно понимаю и знаю что есть определенный набор библиотек и решений как это обойти, но сегодня речь не об этом. Что же дает нам React? Ну одно из его преимуществ, это jsx синтаксис, который есть не что иным как html в javascript. Также есть возможность создавать reusable компоненты, наследовать их и использовать всю мощь что позволяет делать эта библиотека. Что же приступим.
Читать полностью »