Краткая история всех партий
1. Фреймворк Angular
Angular — это фреймворк, разработанный и выпущенный Google в 2009 году. Выпуск AngularJS (также известного как Angular.js) имел огромный успех и привлек огромное количество разработчиков JavaScript.
В 2016 году была запущена вторая версия Angular 2, известная также под названиями Angular и Angular 2+, так как была написана с нуля и не имеет ничего общего с предшественником, так как основана на языке TypeScript, позволяющем писать JavaScript на более продвинутом и современном языке.
Многие крупные компании полагаются на фреймворк Angular, например, Google (в ряде своих приложений), Wix и Forbes.
2. Библиотека React.js
ReactJs определяется как библиотека JavaScript для создания пользовательских интерфейсов. Впервые она была запущена в 2013 году компанией Facebook, которая использовала ее для разработки большого количества компонентов для Facebook.com. Эта библиотека добилась беспрецедентного успеха в последние годы и смогла создать вокруг себя интегрированную экосистему, что сделало ее всеобъемлющей структурой, а не просто библиотекой.
Большое количество гигантских веб-сайтов выбрали React.js для создания своих интерфейсов, таких как PayPal, Walmart, Instagram, Twitter, Udemy, Airbnb, Tumblr и многие другие крупные веб-бренды.
3. Фреймворк Vue.js
Фреймворк Vue.js рос быстрыми темпами и был заметен, особенно после выпуска Vue.js 2 в 2016 году, первая версия которого была выпущена бывшим сотрудником Google в 2014 году. Эван Ю. Эта структура использует стиль MVVM, чтобы отделить аспект пользовательского интерфейса от модели источника данных.
В отличие от Angular и React.js, Vue.js был разработан одним человеком, а не крупной компанией. Тем не менее, этот проект имел огромный успех и стал вторым по популярности фреймворком JavaScript на платформе Github после React.js, и ему удалось убедить ряд интернет-гигантов, таких как Alibaba и Baidu, два крупнейших и самых популярных веб-сайта в Китае. .
Компонентный подход
Все три стороны полагаются на то, что стало известно как компоненты или компоненты в мире JavaScript. Этот подход или философия позволяет разработчикам создавать приложения, состоящие из нескольких независимых и гармоничных частей, в то же время формирующих общую структуру веб-приложения. Эти части можно повторно использовать в разных местах одного и того же приложения или в других отдельных проектах, и мы говорили о преимуществах такого подхода в предыдущей статье под названием «Введение в компоненты в Angular Framework».
Как писать код javascript
Выбор фреймворка Angular означает, что вы решили работать с новым языком программирования под названием Typescript. Этот язык был создан Microsoft в 2012 году, и это язык, созданный поверх JavaScript для добавления новые возможности для него. Некоторые из этих функций появились позже в современных версиях JavaScript, таких как классы, импорт и экспорт, но все еще есть много функций, которые по-прежнему являются эксклюзивными для Typescript, и мы еще не видели официального появления в JavaScript, таких как дизайнеры и статическая типизация.
В итоге коды Typescript конвертируются Транспилером в обычный код JavaScript, понятный браузерам, а это значит, что в финальном пакете проекта от Typescript не останется и следа :)
React и Vue в этом вопросе оригинальны, так как они официально основаны на языке программирования JavaScript и оба поддерживают недавний релиз ES6.
система шаблонов
Мы всегда думали, что отделение кода JavaScript от HTML является хорошей практикой для любого веб-разработчика, и этот подход преобладал до тех пор, пока не вышел React.js, который явно бросил вызов этому понятию, которое считалось аксиомой, что почти один в мире будет против.
В React.js HTML-коды записываются в файлы JavaScript, то есть между кодами JavaScript, а формат, поддерживаемый для написания кодов шаблонов для компонентов (Components), называется JSX. Следует помнить, что JSX — это не HTML, это просто оболочка Javascript, которая на этапе компиляции преобразуется в обычный код JavaScript с помощью Babel. Например, в JSX не разрешено использовать свойство класса в тегах, потому что это зарезервированное слово в javascript, вместо этого для этой цели используется свойство className.
****************************************
function getGreeting(user) { if (user) { return ‹h1 className="greeting"›Здравствуйте, {formatName(user)}!‹/h1›; } return ‹h1 className="greeting"›Здравствуйте, дорогой.‹/h1›; }
***************************************
Обратите внимание, что в этом примере мы можем использовать всю мощь JavaScript внутри JSX, последний является просто расширением языка программирования JavaScript.
С другой стороны, Angular и Vue придерживаются традиции разделения JavaScript и HTML, и каждый из них по-своему реализует эту стратегию на практике.
В приложениях Angular мы обнаруживаем, что каждый компонент имеет свой собственный HTML-шаблон в принимающем файле с расширением .html, в то время как Vue.js полагается на так называемые однофайловые компоненты — метод, изобретенный самим Vue.js, который сочетает в себе шаблон HTML, файл JavaScript и CSS с расширением vue. Но без смешивания элементов, как это делает React.js, у каждого из этих трех есть своя область в файле.
Следующее изображение может быть более информативным, чем мое объяснение:
Между фреймворком и библиотекой есть разница
Важно не забывать, что фреймворк Angular и две другие стороны — React.js и Vue.js — это просто библиотеки JavaScript. Это означает, что при создании проекта Angular вам не нужно будет использовать какую-либо внешнюю библиотеку для добавления новых базовых функций в этот фреймворк, потому что с самого начала он был спроектирован так, чтобы отвечать всем требованиям одностраничных веб-приложений, таких как Routing. система, модуль Http для выполнения операций AJAX, система модульного тестирования. Таким образом, он подходит для крупных и более сложных проектов, поскольку с самого начала навязывает вам определенную структуру и метод работы, которые вы должны соблюдать. В целом, структуры обеспечивают хорошую согласованность между различными единицами и их составными частями.
Что касается Vue.js и React.js, то это просто библиотеки JavaScript, каждая из которых представляет букву V в стиле MVC. Оба ответственны и сосредоточены только на вопросе отображения представлений или представлений в пользовательских интерфейсах. Именно по этой причине экосистема React.js и Vue.js явно богаче, чем у Angular. Разработчики в сообществе JavaScript создали множество внешних библиотек, чтобы добавить больше возможностей и функций как в React, так и в Vue, поэтому мы всегда описываем их как фреймворки JavaScript и прямые конкуренты Angular и тому подобное.
Возможно, единственная разница на данный момент между React.js и Vue.js заключается в том, что самые важные библиотеки, составляющие экосистему последнего, напрямую поддерживаются самой командой Vue, и вот список самых известных:
Vue-router
Vuex
Vue-cli
Vue-loader
Vue-server-renderer
Vue-devtools
В то время как официальная команда React.js не не слишком увлекаться этим вопросом и больше сосредотачивается на разработке проекта React.js, оставляя другие вопросы своему активному сообществу.
Управление потоком данных и состоянием
Веб-приложения состоят из нескольких сложных компонентов, при этом некоторые из них взаимосвязаны друг с другом, а это означает, что если изменение производится на уровне определенной части страницы, другие части, связанные с ним, должны измениться, и их состояние обновится. Этот процесс известен в современных веб-приложениях как управление состоянием.
В React.js состояние компонентов управляется с помощью собственного API .setState(), предоставляемого этой библиотекой. Этот API делает свое дело в ограниченных приложениях, не имеющих большой степени сложности, в то время как мы начинаем ощущать его ограничения в больших, а иногда даже средних приложениях и проектах. По этой причине появление ряда библиотек для облегчения управления состоянием в веб-приложениях, Redux и Mobx являются наиболее известными из этих библиотек, и обе широко используются в проектах React.js, зная, что они являются независимыми проектами и могут использоваться в различных проектах JavaScript.
Ситуация не сильно отличается в среде Vue.js. Библиотека Vuex разработана командой Vue для управления состоянием в приложениях Vue.js. Он вдохновлен некоторыми идеями стиля Flux, принятыми в Redux, но его механизм действия отличается от механизма Redux, так как последний выдвигает лозунг Immutability, который можно использовать для обновления состояния, тогда как Vuex — который был разработан специально для Vue.js — использует подход реактивности и изменяет состояние напрямую, без учета принципа неизменности, который является той же логикой, на которой изначально была основана библиотека Vue.js. Как мы говорили ранее о React.js, использование Vuex не является обязательным в проектах и приложениях Vue.js, но становится необходимым, когда сложность проекта, над которым мы работаем, возрастает. Дин Абрамов, основатель Redux, говорит:
Фреймворк Angular занимает уникальную позицию в этом отношении, поскольку он основан на системе MVC. Управление кейсами в Angular-проектах осуществляется по совершенно отличному от паттерна FLUX механизму, используемому в библиотеках Redux и Vuex, и зависит в основном от двух фич (Services) и Dependency Injection), расположенных в ядре Angular.
Разработка мобильных приложений
Освоение фреймворка Angular не только поможет вам в разработке веб-приложений, но вы также сможете войти в мир приложений для смартфонов, используя фреймворк Ionic, а также NativeScript, о которых мы уже говорили в предыдущая статья.
React.js также имеет множество применений, которые распространяются на область виртуальной реальности через платформу React VR, поддерживаемую Facebook, но самая важная и самая известная область, в которой мы находим большое присутствие библиотеки React — помимо Интернета — это поле приложений для смартфонов, использующих платформу React. Native хорошо известен и выбран рядом крупных брендов и компаний для создания своих мобильных приложений.
Присутствие Vue.js в доменах, отличных от Интернета, на данный момент скромно по сравнению с его конкурентами Angular и React, за исключением фреймворка Weex для программирования кроссплатформенных мобильных приложений, я не знаю другого проекта, который поддерживает и зависит на Vue.js за пределами веб-домена.
Рендеринг на стороне сервера
Один из негативных побочных эффектов одностраничных веб-приложений заключается в том, что они страдают с точки зрения SEO и видимости в поисковых системах. Последний сильно развился за последние годы и улучшил свою способность читать и выполнять код JavaScript в этих приложениях и, таким образом, получать доступ к содержимому различных страниц. Но, несмотря на это улучшение — в частности, от Google — есть еще другие проблемы, с которыми сталкиваются приложения этого типа с SEO и роботами поисковых систем, в дополнение к проблемам с появлением и участием на сайтах социальных сетей.
Вторым побочным эффектом является медленная первая загрузка этих приложений в браузерах, что вредит пользовательскому опыту в них, особенно если код JavaScript, который выполняется при загрузке страницы, много, сложен и истощает память.
К счастью, существуют решения и противодействия этим неблагоприятным последствиям, решения, которые в основном зависят от выполнения первой загрузки и подготовки HTML на сервере, а не в браузере, как это происходит на традиционных веб-сайтах. Этот процесс известен как рендеринг на стороне сервера, и Node.js используется для выполнения кода JavaScript на сервере, поэтому, когда пользователь впервые заходит на сайт, он получает копию, сгенерированную Node.js на сервере, и процесс очень быстро по сравнению с тем, что происходит внутри браузера. Пауки поисковых систем также находят готовые и архивируемые веб-страницы, как они всегда делают с традиционными HTML-страницами и веб-сайтами.
Существует ряд проектов и сред, которые помогают разработчикам выполнять рендеринг на стороне сервера для приложений JavaScript:
Для разработчиков Angular есть проект Angular Universal.
Фреймворк Next.js для разработчиков React.js.
Фреймворк Nuxt.js для поклонников Vue.js.
конец
Надеюсь эта статья будет для вас руководством, которое поможет вам понять и понять различия между тремя фреймворками.
В общем, Vue.js можно считать продуктом брака между фреймворком Angular и React.js, благодаря чему Эван Ю попытался добавить к нему ряд функций, которые составляют сильные стороны React, такие как зависимость от Virtual DOM для улучшения производительность и эффективность. Кроме того, Vue кажется хорошим выбором для поклонников идеи разделения HTML, CSS и JavaScript, которую мы также находим в Angular. Вариант Vue можно считать подходящим для новичков и тех, кто привык создавать и разрабатывать пользовательские интерфейсы с использованием традиционных техник, таких как jQuery, не забывая при этом, что официальная документация для этого фреймворка — лучшая документация, которую я когда-либо видел в области веб-разработки. технологии.
Вездесущие сторонники JavaScript и функционального программирования предпочтут React.js, потому что последний использует подход, который придает большое значение принципам функционального программирования, таким как неизменяемое состояние и функциональные компоненты.
Поклонники традиционной архитектуры MVC и те, кто любит делать как можно меньше опций и настроек, конечно же, полюбят Angular, потому что, как мы уже говорили, это интегрированный фреймворк, который включает в себя все необходимые инструменты для создания одностраничных веб-приложений.
Я был бы очень рад услышать ваше мнение и опыт об этих технологиях в поле для комментариев, чтобы мы могли обмениваться идеями и получать пользу друг от друга :D
