Я могу создавать красивые пользовательские интерфейсы только с помощью JavaScript? Внезапно у меня появилась мощь JavaScript внутри HTML и CSS?

Мне очень понравилось. Все было прекрасно.

Я пользовался этим инструментом в течение многих лет, но не мог удержаться от наблюдения за ажиотажем вокруг Vue.js Судя по всему, каждый разработчик, который его использует, очень любит его!

Несколько месяцев назад я запустил Vue в коммерческом проекте и полностью ушел с React.

Но эти фреймворки — всего лишь инструменты; Мы никогда не должны принимать строгие карьерные решения, основываясь на них.

Это фронтенд-мир — все инструменты скоро исчезнут; Новые придут быстро.

Теперь, после огромного опыта во фронтенд-разработке и фреймворках, таких как Angular.js Vue.js, React и Ember.js, позвольте мне объяснить, почему я считаю Vue.js лучшим.

Одно очень простое приложение

Сегодня мы создаем очень простое приложение как на React, так и на Vue.js. Выглядит это примерно так:

Давайте углубимся в код. Реагируйте, вы на первом месте. Это проект, созданный с помощью ; Здесь я немного видоизменил. create-react-appApp.js

import { useState } from 'react';

function App() {
  const [isMagicalAnswerVisible, setIsMagicalAnswerVisible] = useState(false)

  return (
    <div className="App">
      <p className="magicalQuestion">
        Which FE framework is the best?
      </p>
      <button className="magicalButton" onClick={() => setIsMagicalAnswerVisible(true)}>
        Find out!
      </button>
      {isMagicalAnswerVisible && <p className="magicalAnswer">
        .....what is life?
      </p>}
    </div>
  );
}

export default App;

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

Зная это, я хочу знать, что будет отображаться на экране. Когда я смотрю на браузер, я вижу там только стилизованные HTML-элементы. Не JavaScript.

А здесь — все на JavaScript! Как узнать, что на самом деле будет отображаться на экране?

Я вижу, что это возвращает некоторый код, похожий на HTML, но это не HTML. Что это? function App()

Хорошо. Я предполагаю, что эта штука будет рендериться.

Что такое ? Почему я не могу просто использовать class?

onClick={() => setIsMagicalAnswerVisible(true)}почему я должен это делать, неужели я не могу просто сделать? О, теперь я получаю некоторые ошибки. Я верну стрелочную функцию, хотя и не знаю почему onClick={setIsMagicalAnswerVisible(true)}

{isMagicalAnswerVisible && <p className=”magicalAnswer”>…..what is life?</p>} Что это? Что там с фигурными скобками? Что, оператор JS здесь. будет рендерить, если isMagicalAnswerVisible === true ?

Представьте себе огромный компонент. Я хочу видеть то, что я увижу на экране. Но я не могу, потому что мне приходится прокручивать первые 100 строк кода, чтобы найти оператор.return

Я доверяю именованию функций. Я верю, что они делают то, что говорят. Я не хочу сначала вдаваться в детали реализации.

Что Vue.js может предложить

<template>
  <p class="magical-question">
    Which FE framework is the best?
  </p>
  <button class="magical-button" @click="findOutMoreAboutThatMagicalFramework">
    Find out!
  </button>
  <p v-if="isMagicalAnswerVisible" class="magical-answer">
    .....what is life?
  </p>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isMagicalAnswerVisible: false
    }
  },
  methods: {
    findOutMoreAboutThatMagicalFramework() {
      this.isMagicalAnswerVisible = true
    }
  }
}
</script>

Хм, что я здесь вижу? Ох уж этот шаблон! Думаю, я увижу этот шаблон на экране.

О, хорошо, здесь. Это HTML-файл? class

Хм, вот , а также . Поначалу это звучит немного странно, но на самом деле даже для разрабочкика с небольшим опытом это должно быть очевидно @click, v-if

И это так просто.

data(); Что это? Мне нужно будет погуглить. О, это просто состояние компонента.

methods? Довольно просто.

Я точно вижу, что будет рендериться первым. Я вижу что-то, похожее на HTML.

Я хочу стилизовать свой компонент. Что мне нужно сделать? Я предполагаю, что это то же самое, что и в HTML; Я просто добавлю тег в нижнюю часть файла.

И это работает!

Кривая обучения React может быть огромной, особенно если вы имеете дело с более сложными вещами. Помните времена, когда еще не было Хуков? Так много Render Props, Higher-Order Components и куча других вещей.

Как насчет этого? Я знаю очень многих React-разработчиков, которые понятия не имеют, что происходит за кулисами.this.handleClick = this.handleClick.bind(this)

С другой стороны, с Vue.js все так просто. Это похоже на обновленную версию HTML.

Я так много работал с Vue.js за последние пару месяцев, и количество разочарований минимально.

Я могу сосредоточиться только на реальной проблеме, а не на фактической реализации.

Я все время задаюсь вопросом — как такое возможно? Я усвоил основные знания за 2 недели, и теперь могу построить почти все?

С React все было по-другому. Временами это было очень неприятно. Но я все равно любил его просто потому, что это JavaScript.

Все в JavaScript удивительно, но это просто неправда

Веб состоит из HTML, CSS и JavaScript. Если мы хотим иметь глубокое понимание этого, мы не должны путать себя с утверждением, что все является JavaScript.

С Vue.js у меня есть ощущение, что я получаю гораздо больше общих знаний, связанных с вебом, а не только с Vue.

С React все было наоборот. Вам нужно сломать свое глубокое понимание Интернета, чтобы принять этот образ мышления.

Проблема в том, что веб останется, а React исчезнет. Это не язык программирования, а просто библиотека.

Vue работает как веб. Это набор компонентов, похожих на HTML, генерирующих события, как настоящий Интернет

Да, вы не передаете функцию в качестве входного параметра. Вы перехватываете всплывшее событие, созданное дочерним компонентом.

Так же, как и в реальной сети.

Не преувеличиваю?

Хорошо, возможно!

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

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