В мире JS существует большой зоопарк разных библиотек и фреймворков.
Популяризация и появление JS на сервера (в виде Node.JS) добавила еще больше неразберихи. К фронтэнд добавились бекэнд фреймворки, значительно дополнив список.
На фронте, наиболее известные это Angular от Google, React от Facebook, Vue.js тоже косвенно от Google и jQ от народа.
Сегодня разговор про Angular.
Angular - это клиентский WEB фреймворк. Именно фреймворк. Большой и сложный в отличии от R и V.
React - легкая библиотека реализующая идеологию WebComponents. Vue - изначально писался как движок прототипирования, но в виду удачной реализации и простоте, смог стать полноценной библиотекой для разработки web приложений.
Если рассматривать всё веб приложение (вместе с серверной частью) в рамках концепции MVC его основная задача - заниматься презентацией данных. View.
Основным языком разработки для Angular - служит TypeScript.
TS - это надмножество языков JS, цель которого сделать из JS подобие типизированного языка.
Чтобы понять какая ниша у Angular необходимо разобраться в предпосылках создания TS. Для чего он создавался и когда его удобно использовать.
В качестве критики TS часто выдвигают аргумент, что этот язык слишком многословен, что замедляет разработку(глупые люди, они не видели java!), заставляет создавать лишние конструкции.
На мой взгляд критика обоснована, но только в случае, если пытаться писать на нем простую веб-форму, или даже не сложную браузерную игру вроде tic tac toe.
Теперь представьте, что перед вами огромная задача в виде разработки системы управления проектами.
В рамках задачи необходимо будет использовать графики, сложные динамические формы, всевозможные редакторы, отчеты, элементы управления уровня десктопных приложений, сложные расчеты как на клиенте так и на сервере, как следствие - сложные структуры данных.
Добавьте к этому факт, что работаете Вы не один, а 5 человек. Эти люди мало того, что живут в разных странах, часовых поясах, еще и говорят на разных языках. Сложно?
Тут сразу начинаются определенные сложности, и всплывают давно известные закономерности:
Чем больше объем кода, тем больше в коде ошибок
Ошибки в коде возрастают с геометрической прогрессией
Чем менее документирован код, тем тяжелее его понимать. Тем более если документация на 5и разных языках!
Чем менее стандартизирована документация - тем тяжелее в нее вникнуть, и тем дороже разработчик.
Очень много подобного.
Существуют механизмы, решающие большинство этих проблем, но чем меньше проблем нужно решать, тем эффективнее работает команда.
Что предлагает в этих рамках TS:
- Типизация. Это в том числе стандартизированная форма документации.
Благодаря типизации разработчик всегда знает где у него что, и никогда не приделает ноги к ушам (как минимум не намеренно). Никто не приделает, не в зависимости от того на каком языке он разговаривает.
Что лучше, потратить две минуты и быть уверенным что в твою микроволновку можно запихнуть только то, что похоже по свойствам на пирожок, а не брикет термита, или пол дня склеивать то, что осталось от микроволновки, затыкая дыры тем, что попалось под руку?
Из типизации так же возникают и расширенные подсказки в IDE. Часто одного только названия переменной не хватает для того, чтобы понять, за что она отвечает.
В общем TS сильно проигрывает в индивидуальном зачете на короткие дистанции, но в командном марафоне отлично себя показывает.
Из сказанного вытекает назначение самого Angular. Этот фреймфорк для больших проектов, для командной разработки.
Использовать его для HellowWord проектов идеологически не верно.
Angular включает в себя практически все, что может понадобиться для проекта любого масштаба.
Из коробки присутствует роутинг, DI, RxJS, удобная организация кода, гибкая библиотека работы с HTTP, хуки жизненного цикла приложения, валидаторы, реактивные формы, продвинутый шаблонизатор, набор всевозможных директив и фильтров для форматирования.
В одну строку в консоли подключается модный flux (NgRx), разные UI библиотеки. Если нужны отдельные от Angular компоненты, то Angular Elements позволяет сделать и это!
В итоге все это собирается вебпаком в один или несколько компактных бандлов, автоматически дополняется необходимые полифилы под соответствующие реализации js, по стандартам формируются стили css.
Все это происходит практически без вмешательства и конфигурирования.
Если смотреть на React или Vue в данном контексте, очевидно что это библиотеки а не полноценные фреймворки.
Чтобы реализовать все то, что предоставляет Angular тут надо подключать дополнительные библиотеки, настраивать их взаимодействие.
В этих библиотеках тоже можно писать на TS, но только выглядит это очень не органично, и неудобно.
React действительно легче и проще писать на чистом JS.
Что React что Vue.js имеют свои механизмы противодействия ошибкам.
Эти механизмы заключаются в модульности и простоте. То есть вы пишите много мелких простых компонентов а затем объединяете их в более сложные...
Но далеко не всегда можно разделить сложные вычислительные или графические задачи на отдельные простые части.
Если Вы заинтересовались рекомендую использовать для работы VisualStudioCode (https://code.visualstudio.com/) и пакетом расширений Angular Essentials (https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials)
О том как установить Angular и создать первый проект можно прочитать на сайте https://cli.angular.io/