Почему JS-фреймворк это сейчас маст-хэв

Разбираемся, почему знание Javascript-фреймворков сейчас обязательно. Обсудим плюсы и минусы, а также попытаемся выбрать подходящий.

js frameworks

Кто такой этот ваш JS-фреймворк?

Хороший вопрос. Дать на него подходящий ответ не так уж и просто, если вы никогда с ним не сталкивались. Давайте представим, что выполняем вполне обычную задачу, например, делаем слайдер. Как мы его делаем нативно? Скорее всего примерно так:

const imgs = [
  '<img src="link" alt="Flower">',
  '<img src="link" alt="Flower">',
  '<img src="link" alt="Flower">'
];
let max = imgs.length - 1,
  cur = 0;

function changeSlide(dir) {
  const slide = document.getElementById("slide");
  cur =
    dir && cur == max ? 0 : dir ? cur + 1 : !dir && cur == 0 ? max : cur - 1;
  slide.innerHTML = imgs[cur];
}

document.getElementById("prev").addEventListener("click", () => changeSlide());
document
  .getElementById("next")
  .addEventListener("click", () => changeSlide(true));

Codepen

Это самый простой пример слайдера. Откройте вкладку со скриптом и вы увидите следующее: в константе imgs мы храним инлайн html с ссылками на изображения, а далее просто вставляем нужный html в контейнер #slide.

И тут вы, наверное, подумали, что неплохо было бы весь DOM переместить куда-то в JS, получив тем самым над ним полный контроль без селекторов и прочей мишуры. Такой подход можно назвать реактивным, о реактивности мы ещё поговорим позже, а пока стоит понять, что фреймворки в основном для этого и нужны: хранить виртуальный DOM в JS и манипулировать им как только вздумается.

Переделаем наш слайдер, только уже при помощи JS-фрейморка. Я буду использовать Vue.js, но идея одна: мы должны создать html-структуру и как-то ей управлять, давайте попробуем:

// Component
Vue.component("flower-component", {
  props: ["flower"],
  template: '<img :src="flower.src" :alt="flower.alt">'
});

// Instance
const slider = new Vue({
  el: "#slider",
  methods: {
    changeSlide(dir) {
      let max = this.flowers.length - 1;
        this.cur =
          dir && this.cur == max
            ? 0
            : dir
            ? this.cur + 1
            : !dir && this.cur == 0
            ? max
            : this.cur - 1;
    }
  },
  data: {
    cur: 0,
    flowers: [
      {
        src:
          "link",
        alt: "Flower"
      },
      {
        src:
          "link",
        alt: "Flower"
      },
      {
        src:
          "link",
        alt: "Flower"
      }
    ]
  }
});

Codepen

Работает так же, а что изменилось? Изменилось то, что мы создали экземпляр slider и сказали ему, что элемент с id #slider находится теперь под его управлением. В экземпляре мы создали локальное хранилище состояний. Там хранятся пути необходимых изображений и их описания. Вдобавок мы создали компонент flowers-component, куда будем передавать данные из хранилища. Компонент подставит эти данные в шаблон и выдаст нам готовые теги img. Осталось повесить события на кнопки и добавить метод, слайдер готов.

Выглядит сложнее? Действительно, для простого слайдера применение фреймворка кажется избыточным, но на более сложных проектах его использование полностью себя оправдает.

Итак, мы узнали, что JS-фреймворки нужны для того, чтобы делать элементы реактивными. Кстати, о реактивности можно почитать тут. А что ещё, помимо этого, может дать фреймворк?

Компонентный подход

Выше мы уже создавали компонент flowers-component, и теперь, работая с фреймворком, вы больше не будете писать код по два раза. Достаточно лишь единожды создать компонент с указанными входными параметрами и никакого БЭМа больше не требуется. Далее вы научитесь создавать изолированные компоненты и переиспользовать их в различных проектах.

Стандартизация

На сегодняшний день существует множество различных стеков и технологий, соответственно, поддерживать чужой код с каждым годом всё сложнее и сложнее. Само слово Framework предполагает наличие определенных рамок, в границах которых умеет работать большое количество людей. Рекрутинг становится проще, а работа в команде больше не приносит столько боли, к тому же многочисленное комьюнити всегда поможет плагинами и советами.

Если вы только начинаете свой путь во фронтенде и думаете, что изучать дальше, то просто забудьте про всякие Joomla, Wordpress и другие высокоуровневые решения. Надо понимать, что в данный момент ни один работодатель, ни одна студия не сможет отказаться от такого мощного и универсального инструмента как JS-фреймворк. Поэтому можно точно сказать, что знание хотя бы одного это маст-хэв 2020 года.

Даю слово, что через пару лет вы просто не найдете ни одного веб-проекта, построенного без помощи JS--фреймворка. Так что его изучение стоит начинать прямо сейчас.

А какие минусы?

Остановим своё внимание лишь на одном, но очень жирнющем минусе. Всё дело в том, что все наши манипуляции с DOM происходят только на стороне клиента, причём происходят они часто асинхронно. "Так в чём проблема?" - спросите вы. Проблема в поисковых роботах, не все из них могут сканировать и анализировать сайты, основанные на JavaScript, а уж анализировать асинхронный JS тем более. Это означает, что обычная статичная страница всегда будет проиндексирована лучше, чем наше условное веб-приложение.

broken robot

Но не всё так плохо. Всё что нужно в этой ситуации, так это переложить тяготы рендеринга с клиентской на серверную часть. Соответственно, пользователь и поисковый бот получат уже готовый результат - отрендеренную страницу. Как это сделать? Очень легко - с помощью таких фреймворков, как Nuxt.js и Next.js. Они функционируют на базе Vue.js и React Framework соответственно, но о них мы поговорим как-нибудь в другой раз. А пока стоит понять, что даже злые поисковые боты нам не помеха.

С чего начать? Какой выбрать?

Рассмотрим четыре варианта, три из них это самые популярные фреймворки в мире, и как бонус четвертый - потенциально лучший фреймоворк, который только начинает привлекать к себе внимание.

1. React

React logo

Самый популярный на данный момент JS-фреймворк, более половины разработчиков используют React в своих проектах. Документацию можно найти тут. Почему стоит выбрать React.js:

  • React имеет всё, что нужно отличному фреймворку: многоразовые компоненты, возможность интеграций, виртуальный DOM и многое другое.
  • Является SEO-friendly фреймворком и индексируется поисковыми системами без особых проблем. Есть возможность серверного рендеринга посредством Next.js.
  • Имеет самое большое в мире комьюнити и постоянно поддерживается своими создателями из Facebook.

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

2. Angular.js

Angular logo

Мне не доводилось использовал Angular в своих проектах, поэтому судить о нём достаточно непросто. Просто несколько фактов :

  • Подключение Angular гарантированно утяжелит вашу сборку на 500-600kb, что негативно скажется на производительности.
  • Плохие SEO показатели, что очень странно, ведь Angular это детище Google. Говорят, что первые приложения, написанные при помощи Angular, гуглбот попросту отказался индексировать.
  • Вшитый Typescript. Если вы хотите использовать Angular, придётся потратить какое-то время на изучение Typescript.

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

3. Vue.js

Vue logo

Второй по популярность JS-фреймворк. Он позиционирует себя как самый универсальный и доступный фреймворк на рынке и с каждым стремительно увеличивает свою аудиторию. Почему разработчики выбирают Vue :

  • В первую очередь из-за его простоты. Без шуток, вы можете просто открыть документацию и начать делать свой первый проект. К тому же документация движка и многих плагинов Vue переведены на русский язык.
  • Отсутствие дополнительного синтаксиса. С Vue не придётся учить JSX или Typescript, просто используйте хорошо известные HTML и Javascript.
  • Движок Vue занимает 20kb gzipped, а это значит, что его можно использовать почти в любом проекте без существенной потери производительности.

Мой выбор - это определённо Vue.js. Ведь его универсальность подкупает, вы когда-нибудь думали, что обычную промо-страницу можно создать с помощью JS-фреймворка? Так вот с Vue это возможно, причём делать это поразительно просто.

В этом блоге Vue.js будет уделяться особое внимание: мы расскажем, как использовать его огромный потециал.

4. Svelte

Svelte logo

По этому фреймворку обязательно будет отдельная статья. Он обещает перевернуть все представления о том, каким должен быть JS-фреймворк. Если кратко, то Svelte и не является фреймворком в классическом понимании этого слова. Отсутствие виртуального DOM компенсируется точечным обновлением только необходимых элементов. В результате Svelte достигает самого быстрого рендеринга по сравнению с любым другим фрейморком, и присмотреться к этой технологии, как к будующему тренду, определенно стоит. Ознакомиться со Svelte можно тут.

Заключение

Надеемся, что наша статья оказалась для вас полезной. Подписывайтесь на наш блог, дальше вас ждёт очень много интересного из мира веб-разработки. До встречи! Ваш Frontext.

Наши рекомендации
К сожалению, тут пока ничего нет.