От автора: первоначально я не был front-end разработчиком, я обычно много работаю с back-end API в C#, Go, Node или Python. Несколько лет назад, когда я перешел в новую компанию, меня перевели на full-stack. Мне было поручено создать внутреннее решение, которое бы поддерживало управление пользователями, возможность обмена мгновенными сообщениями, возможность делать заметки / делиться и много других вещей. Это было действительно мое первое большое знакомство с front-end разработкой, я делал кое-что для front-end, но ничего такого обширного.
В то время я имел в своем распоряжении AngularJS, что сразу перевело мое внимание в сторону Angular. Я до сих пор помню свое волнение по поводу нового релиза Angular (Angular 2), и с тех пор этот энтузиазм не угас.
Я рад сообщить, что я работаю с Angular с момента его создания в 2016 году и очень рад, что выбрал этот фреймворк. В этой статье я расскажу вам, как Angular может помочь в реализации вашего следующего проекта front-end.
Короткая кривая обучения
Если вы новичок в разработке front-end, количество доступных фреймворков может показаться вам огромным. Я не буду углубляться в рассмотрение каких-либо других фреймворков, так как это будет выходить за рамки этой статьи, но я скажу, что выбор Angular сделает вашу жизнь намного проще. Из всех доступных front-end фреймворков Angular, вероятно, потребует наименьшее количество времени на изучение. Существует множество факторов, объясняющих, почему у Angular короткая кривая обучения, о многих из которых я расскажу позже.
Удобный Angular CLI
Angular CLI является одной из тех вещей , которые дают кривую обучения такой короткой. Кривая обучения может быть сокращена еще больше с помощью сторонних инструментов, таких как Angular Console (независимо от того, новичок вы в Angular или нет, вам понравится этот инструмент, но он не обязателен), который дает вам визуальный инструмент для CLI. Одним из главных преимуществ CLI является то, что он позаботится обо всем, что вам нужно сделать, от создания нового проекта Angular до разворачивания служб, компонентов или чего-либо еще, что нужно вашему проекту. Многим людям нравится то, что для каждого нового компонента, сервиса, пайпа и т. д. CLI также создает соответствующий тест. CLI также дает вам стандартизированный способ запуска всех тестов. Это дает дополнительную гибкость, позволяя знать, что в каждом новом файле есть тест, и вы можете обновлять тесты на любом этапе разработки. Я мог бы написать целую статью только о CLI, но в интересах краткости, пожалуй, на этом и закончу.
Стандарты Angular
У CLI есть еще одно дополнительное преимущество — он очень конкретный. Для некоторых людей это проблема, но на самом деле это должно помогать вам. Когда вы используете Angular CLI, он автоматически устанавливает собственный набор стандартов для проекта, по сути, делая правильные шаги для Angular. Это поможет вам избежать множества ошибок, особенно когда вы подключаете проект. Это действительно хорошо, когда вы работаете с командой или подключаете нового члена команды. Если они знакомы с Angular, они уже знают, как принять ваш проект, и они станут эффективны в гораздо более короткие сроки.
TypeScript
Angular изначально использует TypeScript, что было для меня огромным преимуществом. Если вы исходите из опыта использования типизированных языков, TypeScript дает вам возможность применить к коду JavaScript блестящую систему типов. Если вы человек .NET, вам точно это понравится. Даже если вы никогда в жизни не написали ни строки кода и хотите начать, TypeScript — довольно хороший первый язык для использования. Он познакомит вас со многими принципами ООП, которые можно напрямую перенести на другие языки, чего в противном случае с JavaScript у вас не получится.
Библиотеки компонентов
Это не уникально для Angular, все фреймворки имеют множество библиотек компонентов, которые вы можете использовать, однако команда Angular создала Angular Material, который является одним из моих любимых. Если вы не знакомы с ним, я расскажу вам немного об истории. В 2014 году хорошие люди из Google создали язык дизайна под названием Material Design. Если вы когда-либо использовали Gmail, вы знакомы с этим типом дизайна. Он приобрел большую популярность с самого начала. Angular Material — это уникальная реализация Google Material Design для Angular, которая, на мой взгляд, великолепна. Он инкапсулирует и стандартизирует большинство компонентов, которые вам понадобятся для создания сайта или приложения любого типа. Если в ней нет нужного вам компонента, вы можете легко создать его, используя то, что вам дают.
Ivy
Angular Ivy — это новый компилятор и движок рендеринга для Angular. Он не полностью поставляется с Angular, но вы можете использовать его сейчас. Отличная особенность Ivy заключается в том, что он меняет работу Angular под капотом, не влияя на то, как мы создаем приложения Angular.
Инкрементальный DOM
Я не буду вдаваться в подробности о том, что такое инкрементный DOM, но если вы хотите получить более детальный анализ, то вот отличная статья. В ней рассказывается об инкрементном DOM и о том, чем он отличается от виртуального DOM, в основном это будет версия TLDR. Как правило, виртуальный DOM использует кучу памяти хостинга, создавая и разделяя деревья DOM. Это явно не хорошо для мобильной производительности. Инкрементальный DOM был разработан, чтобы использовать как можно меньше памяти при быстром отображении изменений. На самом деле, инкрементальный DOM почти не использует память. Ivy использует память только тогда, когда узлы DOM добавляются или удаляются, а используемое количество прямо пропорционально размеру изменения. Это приводит к значительной экономии памяти и повышению производительности мобильных устройств.
Размер пакета, время сборки и Tree Shaking
Наряду с дополнительным DOM, у Ivy также есть невероятные возможности для Tree Shaking. Это в основном просто удаляет неиспользуемые фрагменты кода, уменьшая размер пакета. Крутая вещь в Ivy — это то, что использование инкрементального DOM также может быть шоковым. Angular традиционно характеризовался гораздо большими размерами пакетов, чем в других средах, но с каждой итерацией они становятся все меньше. То же самое можно сказать о времени сборки.
Angular идеален?
Я всегда стараюсь быть честным, и хотя я люблю Angular, он не идеален. Хотя я думаю, что он лучше, чем другие фреймворки, возможно, эти вещи могут немного разочаровать. Лучше, если вы будете знать об этом заранее.
Размер сборки
Если вы используете Ivy, вы можете оптимизировать размер сборки примерно на 15–20%, но он все равно немного велик, если сравнивать его с другими платформами. Чем больше размер сборки, тем медленнее первый рендеринг. С течением времени ситуация будет улучшаться, но сейчас это определенно является слабым местом Angular.
Стандартизация
В зависимости от того, какой вы разработчик, это действительно может быть обоюдоострым мечом. Лично мне нравится тот факт, что Angular является конкретным. Я могу посмотреть на любой Angular-проект и получить действительно хорошее представление о том, как все работает с первого взгляда. Однако, если вам нравится делать что-то по-своему или вам просто не нравится Angular, я могу понять, что это будет неприятно для вас.
Разработано в Google
Angular создан и поддерживается Google. Как все мы знаем, инженеры Google обычно известны своей исключительностью. Тем не менее, у них есть склонность просто отказываться от продуктов. AngularJS является ярким примером этого. Некоторые могут беспокоиться, что судьба Angular может закончиться тем же, но я не думаю, что есть веские причины для беспокойства. Одна из вещей, благодаря которым это не особо меня беспокоит, заключается в том, что при создании Ivy они перестроили работу Angular под капотом, но убедились, что это не повлияет на то, как пользователи пишут приложения на Angular. Я очень надеюсь, что Angular будет жить еще довольно долго.
Заключение
Независимо от вашего уровня квалификации, я надеюсь, что вы решите попробовать Angular. Я думаю, что у него есть некоторые невероятные особенности, и они продолжают развиваться.
Автор: Sam Redmond
Источник: https://blog.usejournal.com
Редакция: Команда webformyself.