Рубрика «React» - 72

2 недели назад мы полностью обновили WebStorm — нашу IDE для front-end-разработки и Node.js. Мы уже анонсировали некоторые улучшения в WebStorm 9, в том числе поддержку новых фреймворков и инструментов. С тех пор было проделано еще немало работы, результаты которой можно увидеть в WebStorm 9. В этом посте мы подробно расскажем об этом новом функционале и кратко напомним обо всем остальном.

image

Читать полностью »

Это перевод публикации «Evolving Yahoo Mail» из блога разработчиков Yahoo.

image

Почтовый сервис Yahoo Mail изначально был запущен в 1999 году. На протяжении 15 лет код эволюционировал из серверного Web 1.0 приложения в один из крупнейших YUI одностраничных приложений в интернете.

В прошлом месяце Yahoo провел React JS митап в главном оффисе в Sunnyvale, CA. Митап (слайды с митапа) посетило более 120 человек, где мы делились знаниями и идеями о разработке приложений, используя Javascript, React, Flux и т.д. Также мы рассказали об эволюции Yahoo Mail и причинах, по которым мы выбрали ReactJS + Flux как основу для нашего нового Mail продукта.
Читать полностью »

Перевод статьи «Building robust web apps with React: Part 4, server-side rendering», Matt Hinchliffe

От переводчика: это перевод четвертой части цикла статей «Building robust web apps with React»
Переводы:

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

В предыдущей части этой серии я блуждал в поисках стратегии тестирования, и эта часть не сильно отличается. И хотя здесь есть примеры и базовые демо изоморфного JavaScript, здесь не так много опенсорс реализаций для изучения. В сторону детали реализации, для меня, самое большое отличие, от написания клиентского JavaScript, это то, что e меня изначально есть данные.
Читать полностью »

Перевод статьи «Building robust web apps with React: Part 3, testing with Jasmine», Matt Hinchliffe

От переводчика: это перевод третьей части цикла статей «Building robust web apps with React»
Переводы:

Во второй части я покрыл процесс оптимизации моего браузерного приложения Tube Tracker, но каждое вносимое мной изменение до сих пор требует обновление браузера, чтобы проверить, что все работает. Приложение серьезно потребует набора тестов, чтобы ускорить процесс разработки и избежать регрессии кода. Как оказалось, это проще сказать, чем сделать, когда начинаешь работать с новой технологией, как React.
Читать полностью »

Перевод статьи «Building robust web apps with React: Part 2, optimising with Browserify», Matt Hinchliffe

От переводчика: это перевод второй части цикла статей «Building robust web apps with React», вот ссылка на перевод первой части. Перевод следующей части появится через несколько дней.

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

Код, который в начальном демо был представлен на выполнение браузеру, не проходит ни один базовый тест производительности; скрипты должны быть прекомпилированы, объединены и минифицированы перед отправкой на продакшн.Читать полностью »

Перевод статьи «Building robust web apps with React: Part 1, in-browser prototypes», Matt Hinchliffe

От переводчика: это первая статья из цикла «Building robust web apps with React», если статья пойдет хорошо, переведу остальные части.

Когда я смотрю на то, как устроены браузеры и протоколы, на которых работает веб, мне становится как-то тревожно. Есть столько всего, что может и, обычно, идет не так, что становится удивительно, как хоть что-то из того, что мы пишем, вообще работает. Надежность «вопреки всему» происходит от отказоустойчивости и обратной совместимости, которые укоренились в ключевые части веб-стека. Браузер всегда сделает все возможное, чтобы отобразить, что-то полезное, будь-то парсинг плохо написанного документа, в котором невозможно получить зависимости, или, который на 10 лет устарел.

image
404PageFound содержит до сих пор работающие сайты, созданные еще в 1993 году.
Читать полностью »

Перевод статьи «5 Practical Examples For Learning The React Framework», Martin Angelov

Вы вероятно слышали о популярном JavaScript фреймворке от Facebook – React. Он используется на многих популярных веб-сайтах, в том числе в Facebook и Instagram. В этой статье вы увидите 5 практических примеров, построенных при помощи 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» (от названия компании).Читать полностью »

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».
Читать полностью »

Современный мир программирования, а особенно веб и javascript уже давно не тот и имеет очень большое колличество инструментов для той или иной задачи. В сегодняшнем посте я хотел бы рассказать как скрестить мощь AngularJS и молниеносность отображения view – Facebook React.

Всем известно, что когда мы генерируем коллекцию во view через Angular, то каждый элемент этой коллекции становится observable. Я конечно понимаю и знаю что есть определенный набор библиотек и решений как это обойти, но сегодня речь не об этом. Что же дает нам React? Ну одно из его преимуществ, это jsx синтаксис, который есть не что иным как html в javascript. Также есть возможность создавать reusable компоненты, наследовать их и использовать всю мощь что позволяет делать эта библиотека. Что же приступим.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js