Skip to content

Latest commit

 

History

History
169 lines (120 loc) · 13.3 KB

00. Что такое Реакт?.md

File metadata and controls

169 lines (120 loc) · 13.3 KB
Raw

Что такое Реакт?

Реакт выбирают уже пять лет, почему это вряд ли когда-то закончится?

История фронтэнда

Если вы не читали Историю интернета — сейчас самое время.

В курсе по вёрстке мы разбирали самую обычную вёрстку через ХТМЛ и ЦСС. Да, стандарты развиваются, W3C и WHATWG делают правильные вещи, но на вёрстке интерфейсы не построишь.

jQuery — 2006, Google Chrome — 2008

Примерно в 2006 году появилась библиотека Джквери — мощная штука, цель которой была унифицировать поведение браузеров. На тот момент было не так много браузеров и у всех них была разная реализация одного и того же! Джквери это исправлял: прятал реализацию за небольшими функциями. Эти функции — АПИ библиотеки, про АПИ мы ещё поговорим.

Затем в 2008 году Гугл вышел на рынок браузеров со своим Хромом и движком V8: это был прорыв, браузеры, оказывается, могут быстро работать! После ИЕ6 и всяких Опер это был глоток воздуха, поэтому Хром очень быстро стал браузером №1. That shit cray!

Backbone.js и Knockout — 2010

Прошло два года, браузеры развиваются (Майкрософт сподобился выпустить ИЕ8 в 2009, но он давно уже был не жилец), железо улучшается, а DX (Developer Experience) не особо.

Посудите сами: у нас появилась возможность делать какие-то приложения, началось обсуждение Флекбоксов, через год появится Бутстрап, а мы до сих пор через Джквери пишем огромную лапшу кода чтобы работать с интерфейсом. Не очень удобно.

В те времена был популярен Ruby On Rails с подходом Model-View-Controller (он считался самым удобным), поэтому какой логичный результат? Давайте заберём его на фронтэнд и сделаем Backbone.js! Заодно и Knockout, но уже на MVVM (Model-View-ViewModel).

MVC это способ работы с данными: есть модель данных, есть контроллер, который ею управляет, есть вью, который их отображает.

MVVM ещё хуже, вот что вам про него нужно знать! Но если серьёзно, то это лежит в области two-way data binding: работа с данными в обе стороны (через вью обновляется модель, через модель обновляется вью).

AngularJS — 2010 и EmberJS — 2011

В том же 2010 вышел Ангулар — фреймворк от Гугла, в котором и был реализован MVVM. Отличие фреймворков от библиотек в том, что они диктуют вам правила и предоставляют много готовых решений: представьте как удобно получить несколько библиотек от одного поставщика!

Спойлер: неудобно. Потому что эти решения рассчитаны на типовые решения, если ваше в него не укладывается — здравствуйте, костыли и велосипеды.

Ангулар был неплохим: после Джквери (Нокаут и Бэкбон не особо завоевали популярность) это был глоток свежего воздуха. Проблем у Ангулара было несколько:

  • это всё ещё MVC/MVVM,
  • стандарты не были готовы к two-way data binding и в итоге он был очень прожорлив по ресурсам,
  • разработчики Ангулара тоже не особо умели это исправить,
  • Ангулар2 должен был быть совершенно другим — потеря обратной совместимости.

Тем не менее, с Ангуларом мы прожили несколько лет пока в марте 2013 года не появился Реакт. Примерно в те же времена был анонс Ангулара 2 без обратной совместимости, поэтому Реакт был весьма кстати!

Реакт — 2013

Реакт был удивительным: он принёс с собой компонентный подход, локальный стейт и декларативный подход, где интерфейс рендерится (показывается) от данных. Уравнением это выглядит как ui = render(state), чуть позже вы это поймёте.

Итак, представьте: у вас есть данные, например, вы работаете с недвижимостью и у вас есть список объектов, который нужно отрисовать. В MVC вам бы пришлось размазывать это на три слоя (и вообще помнить что они существуют! представьте как это неудобно), а тут всё в одном компоненте.

Я вам покажу псевдокод, думаю, вы его поймёте:

class PropertiesList extends React.Component {
  state = {
    properties: [
      {
        id: 101,
        title: "2-комнатная квартира в Хамовниках",
        images: [
          {
            id: "PRO-101-6c0mq7u3Qo",
            isPublic: true
          },
          {
            id: "PRO-101-7EScTXC6zT",
            isPublic: false
          }
        ]
      },
      {
        id: 201,
        title: "5-комнатный пентхаус в Тверском",
        images: [
          {
            id: "PRO-201-oazwaN0JTS",
            isPublic: true
          },
          {
            id: "PRO-201-zptmLoC38q",
            isPublic: false
          }
        ]
      }
    ]
  };

  render() {
    return (
      <section>
        <h2>Список квартир</h2>
        {this.state.properties.map(property => (
          <a href={`/properties/${property.id}`} key={property.id}>
            <img src={`https://images.com/${property.images[0].id}`} />
            <h3>{property.title}</h3>
          </a>
        ))}
      </section>
    );
  }
}

Не то чтобы сложный, но не то чтобы очень понятный. Это ок — это же курс, всё предстоит впереди :)

Тем не менее, уже видно что стейт и рендер находятся в одном классе. В одном компоненте.

Кстати, одно из важных отличий Реакта от всего остального типа Ангулара или Эмбера: он работает с Джаваскриптом, а не с придуманным шаблонизации.

Если вы посмотрите на Вью, то мало того что там MVVM, так ещё и свой птичий язык:

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

Все эти v-bind, v-if, v-for — это не из нативного ХТМЛа или Джаваскрипта. У Реакта всё построено на чистом Джаваскрипте и в этом его гигантский плюс.

Плюсы Реакта и его перспективы

  • Декларативен, а потому предсказуем: каждый раз вы будете получать один и тот же результат,
  • Быстр: он использует virtual dom и обновляет только измененный кусок,
  • Жив: коммьюнити Реакта — самое гигантское и оно не думает его забрасывать,
  • Используется Фейсбуком: eat your own dog food, как говорится,
  • Чертовски популярен: Реакт на первом месте в выборе работодателей и разработчиков. Пример: The State Of JavaScript 2017.
  • Подходит для всех проектов: от маленьких за день типа alisa2018.ru, vot-vot.net и 23na8.ru до крупных внутренних систем как Додо ИС.

Это не сейл-спич. Реакт действительно поменял фронтэнд и он идеален настолько, насколько это возможно. Реакт стал стандартом во фронтэнде.

Принципы Реакта

iframe: https://www.youtube.com/embed/f11f8ksArp4

Монтаж дерьмовый: звук с камеры (а не с микрофона), торчит "2 неделя", в будущем исправим

Кстати, часто спрашивают что плохого во Вью или Ангуларе (или хорошего, выбирают же их зачем-то). Курс по Реакту, но всё равно расскажу.

Ангулар или Вью не плохие, это просто технологии. Я уже писал обзор про все три столпа фронтэнда и хочу дополнить стереотипами.

  • Ангулар для энтерпрайза и сложных приложений: возможно, потому что он форсирует использование Тайпскрипта и грузит разработчикам мозг кучей сложных (и бессмысленных) вещей типа Dependency Injection, директив, сервисов и прочего. Лично я слишком глупый для этого, поэтому стараюсь не выбирать вещи, которые мешают мне добиваться решения задач и заставляют погружаться во внутреннюю реализацию. Зато в Ангуларе идёт в комплекте свой роутер и http-клиент.

  • Вью для простых проектов. Да: потому что его действительно можно подключить по-старинке через тег <script>.

Но вот в чём нюанс: эти положения не означают, что их нужно выбирать в приоритет перед Реактом. Реакт всё также подходит для маленьких проектов (благодаря create-react-app), его также можно воткнуть в уже существующий сайт, и он всё также подходит для больших проектов, потому что у него огромное сообщество и огромное количество готовых библиотек — в том числе тех, которые несколько раз ломали обратную совместимость потому что пытались найти так называемый react-way.

Итог

Сегодня мы очень коротко коснулись Реакта: узнали что он компонентный и предлагает использовать чистый Джаваскрипт в отличие от Вью, Ангулара или каких-либо ещё фреймворков и библиотек.

Зато мы узнали про историю фронтэнда!