Angular и front-end разработка.

Почему следует выбрать Angular для front-end проектов.

По правде говоря, меня нельзя назвать front-end разработчиком. Зачастую я занимаюсь разработкой back-end/API на C#, Go, Node или Python. Около года назад я сменил компанию и получил должность full-stack девелопера. Мне было поручено создать пользовательский интерфейс, в котором присутствовала возможность обмена мгновенными сообщениями, возможность делать заметки/ делиться ими, и множество других вещей. Это было моё первое знакомство с front-end разработкой — я сделал пару небольших вещей, но сделать что-то действительно весомое я был еще не способен на тот момент. Как-то я решил начать использовать Angular(до этого я использовал Angular JS). До сих пор помню как вышел новый релиз Angular(Angular 2) и то, как я радовался по этому поводу. Сейчас с гордостью могу говорить, что я работаю с Angular еще от самого его зарождения и действительно рад, что выбрал именно этот фреймворк. В этой статье я расскажу, как Angular поможет сделать ваш следующий front-end проект более интересным.

Низкий порог вхождения

Если вы еще небольшая рыба в океане front-end разработки, то количество фреймворков вас должно обескуражить. Я не буду говорить о каких-либо других фреймворках, так как это выходит за рамки темы повествования. Я скажу одно: выбрав Angular, вы значительно упростите себе жизнь. Angular имеет низкий порог вхождения и высокую скорость разработки.

CLI

Angular CLI — это та вещь, которая значительно упрощает изучение Angular. Более того, изучение фреймворка можно облегчить с помощью сторонних инструментов, таких как Angular Console(независимо от того, являетесь ли вы новичком в Angular или нет, вам понравится этот инструмент, но его использование необязательно), что дает вам визуальный инструмент для CLI. Одно из главных преимуществ CLI заключается в том, что CLI позаботится обо всем, что вам нужно. Создание нового проекта? Окей! Создание различных сервисов, компонентов или любых других нужд проекта? — Без проблем! CLI справится и с этим. Многие люди любят Angular CLI за то, что для каждого нового компонента, сервиса, канала и т.д. CLI также создает связанный тест. CLI также предоставляет стандартизированный способ запуска этих тестов. Это дает вам дополнительную гибкость и уверенность в том, что каждый новый файл имеет тест, и вы можете обновить эти тесты на любой стадии разработки. Я мог бы написать целую статью о CLI, но в интересах лаконичности делать этого не буду.

Стандарты Angular

CLI имеет еще одно дополнительное преимущество, он очень стандартизирован. Многим людям это не нравиться, но уверяю вас, это сделано лишь для того, чтобы упростить разработку. При использовании CLI Angular он автоматически устанавливает собственный набор стандартов для вашего проекта. Это позволяет избежать ряда ошибок, особенно тогда, когда вы присоединяетесь к уже сформированной команде, у которой есть проект, либо берете в команду нового разработчика.

TypeScript

Angular использует TypeScript по умолчанию и лично для меня это огромное преимущество. Если у вас есть весомый бекграунд в использовании типизированных языков, TypeScript дает вам отличную возможность использовать систему типов в вашем JavaScript коде. Если вы человек из .NET, вам определенно это понравится. Даже если вы не написали в своей жизни ни одной строки кода, TypeScript — отличный язык для начала! Он познакомит вас со многими принципами программирования такими, как например ООП.

Библиотеки Компонентов

Многие фреймворки, включая Angular, имеют огромное количество библиотек компонентов, которые вы вольны использовать. Разработчики Angular создали невероятно крутую библиотеку Angular Material, которую я просто обожаю!

Теперь небольшой экскурс в историю. В 2014 году несколько добрейших людей из Google создали язык дизайна Material Design. Если вы когда-либо использовали Gmail, принципы материального дизайна должны быть вам знакомы(по крайней мере интуитивно). Популярность Material Design значительно выросла со времен его создания. Angular Material — это, в свою очередь, уникальная реализация Google Material Design, но только для Angular. Данная библиотека инкапсулирует и стандартизирует большинство компонентов, которые нужны при создании практически любого сайта или приложения. В случае, если компонента, в котором вы нуждаетесь, нет, вы спокойно можете создать его с помощью заданных инструментов.

Ivy

Angular Ivy — это новый компилятор и движок рендеринга для Angular. Его нет в стандартном пакете Angular, но вы можете вручную выбрать его использование. Крутой фичей Ivy является фактическое изменение того, что творится под капотом Angular, но при этом Ivy никак не влияет на способ создания приложения.

Incremental DOM

Я не буду углубляться в Incremental DOM, но если вы хотите изучить его более подробно, вот вам отличная статья ), которая рассказывает о том, что это вообще такое и чем Incremental DOM отличается от Virtual DOM. В основном Virtual DOM использует очень много памяти хоста для создания и распространения DOM-деревьев. Очевидно, что это не особо хорошо для мобильных приложений. Incremental DOM был разработан с целью уменьшения количества используемой памяти без потерь в скорости рендеринга. Incremental DOM фактически не использует память. Ivy будет использовать память только в том случае, когда узлы DOM добавляются или удаляются. Это приводит к значительной экономии памяти и улучшению производительности мобильных приложений.

Размер пакета, время сборки и встряхивание дерева(Tree Shaking)

Наряду с Incremental DOM, у Ivy также есть невероятные возможности для встряхивания деревьев. Встряхивание дерева в основном просто удаляет неиспользуемые фрагменты кода, уменьшая размер вашего пакета.

Крутой вещью в Ivy является то, что использование Incremental DOM также может быть встряхиванием дерева. Angular традиционно имеет гораздо больший размер пакета, чем другие фреймворки, но с каждой итерацией он становится меньше. То же самое можно сказать о времени сборки.

Идеален ли Angular?

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

Размер сборки

Используя Ivy, вы можете оптимизировать размер сборки примерно на 15–20%, но это все еще уступает место другим фреймворкам. Чем больше размер вашей сборки, тем медленнее будет ваш первый рендер. Эта проблема постепенно решается, но в данный момент это все еще остается слабым местом Angular.

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

Тут все зависит от вашего бекграунда. Мне нравится это свойство. Я могу понять основной принцип работы проекта, лишь взглянув на его код. Но в том случае, если вы предпочитаете писать аутентичный код, стандартизация станет для вас проблемой.

Детище Гугла

Angular был разработан и поддерживается компанией Google. Инженеры Google известны своей исключительностью — у них есть склонность к закрытию проектов. AngularJS — отличный пример этому. Некоторые волнуются, что история Angular может закончиться также, но я не думаю, что стоит волноваться по этому поводу.

Такс… Буду заканчивать!

Я искренне надеюсь, что вне зависимости от вашего уровня программирования, вы все таки решитесь попробовать Angular. Фреймворк Angular действительно имеет много крутых фич, которые помогут вам в разработке приложений.

Спасибо!