Веселого Рождества и счастливого Нового года! DigitalCrafts — иммерсивный буткемп, но не варварский, поэтому нас угостили недельным перерывом на каникулы. Я решил продолжать учиться в это свободное время, потому что у меня нет друзей или семьи, с которыми я мог бы проводить время. Помимо самоуничижительного юмора, у меня действительно было много свободного времени, которое я хотел использовать продуктивно.

Так в чем же был вызов для меня? Я решил изучить, по крайней мере, основы некоторых интерфейсных фреймворков. Теперь я всегда боялся изучать один из этих фреймворков, потому что у меня почему-то была идея, что это инструмент с полным стеком. Возможно, это было потому, что они всегда упоминались вместе с серверными технологиями со словами, такими как стек MEAN, и такими фразами, как «выберите фреймворк javascript для своего приложения с полным стеком». Но, к моему удивлению, эти фреймворки намного проще. Так что я хотел рассеять пугалку этих модных словечек.

Это просто JQuery на стероидах!

Итак, во-первых, что это такое? Фреймворки — это всего лишь инструменты, помогающие создавать пользовательский интерфейс и взаимодействие с пользователем. Разве это не звучит знакомо? Да, это в основном то, для чего вы всегда использовали jQuery. Так что же отличает его от более распространенного jQuery, которому нас всех учат с самого начала? Ну, первое самое большое отличие заключается в том, что манипуляции с DOM больше не происходят с реальным документом, вместо этого он создает и отображает виртуальный DOM. Если вам интересно, почему это полезно, это в основном для скорости и абстракции со стороны клиента.

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

Компоненты: самодельные HTML-элементы

Одним из самых больших преимуществ Vue и Angular является то, что вы можете писать JavaScript в своем HTML. Или, в случае с React, напишите HTML в своем JavaScript. Так что вам не нужно писать какой-то шаткий код, такой как document.createElement, теперь вы можете просто вставить цикл for в свои теги li.

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

Назад в мир компиляции

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

Есть много других преимуществ, связанных с использованием этих технологий. Существует множество ресурсов об Angular, React и Vue; конкретные преимущества, что выбрать и так далее. Вы можете легко прочитать больше информации о нем, чем я могу предложить лично.

Каждому свое

Я знаю, что все согласны с тем, что у Vue самая низкая кривая обучения, но я должен не согласиться, я искренне думаю, что это зависит. Vue определенно проще для тех, кто занимается веб-разработкой. Каждый файл vue похож на некоторые веб-инструменты, такие как codepen и jsfiddle, где у вас есть доступ к HTML, CSS и JavaScript с первого взгляда. Принимая во внимание, что React исходит из точки зрения все есть javascript, поэтому он будет более естественным для тех, кто мыслит программно. Лично я обнаружил, что React намного проще в освоении.

Без сомнения, Angular имеет самую высокую кривую обучения из всех, поскольку для его использования требуется изучить TypeScript. В отличие от этого, Vue и React предлагают вам изучить версию JavaScript ES6, но это не обязательно. Однако TypeScript не так уж сложно освоить тем, кто знаком с другими языками программирования, такими как Java или Swift. Это статическая типизированная и более объектно-ориентированная версия JavaScript. Так что, если вы программист, не связанный с веб-разработкой, вы можете чувствовать себя как дома с Angular.