Angular *

Понимание организации сущностей, с которыми работаешь — не то, что сразу получается у разработчика, пишущего свои первые проекты на Angular.

И одна из проблем, к которой можно прийти — неэффективное использование Angular модулей, в частности — излишне перегруженный app модуль: создали новую компоненту, забросили в него, сервис — тоже туда. И вроде всё здорово, всё работает. Однако со временем такой проект станет тяжело поддерживать и оптимизировать.

Благо, Angular предоставляет разработчикам возможность создавать свои модули, и ещё называет их feature модулями.

Svelte — сравнительно новый UI фреймворк, разработанный Ричем Харрисом, который также является автором сборщика Rollup. Скорее всего Svelte покажется совершенно не похожим на то, с чем вы имели дело до этого, но, пожалуй, это даже хорошо. Две самые впечатляющие особенности этого фреймворка — скорость и простота. В этой статье мы сосредоточимся на второй.

Поскольку мой основной опыт разработки связан с Angular, вполне естественно, что я пытаюсь изучить Svelte, копируя уже привычные мне подходы. И именно об этом будет рассказано в этой статье: как в Svelte делать те же самые вещи, что и в Angular.

Привет, Хабр! Представляю вашему вниманию перевод статьи «Understanding @Input, @Output and EventEmitter in Angular» автора foolishneo.

Приветствую всех желающих накапливать информацию о тонкостях работы фреймворка Angular.

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

Надеюсь найдутся те, для кого перевод статьи с Medium будет полезен.

Давно имея желание начать переводить полезные статьи с английского, решил начать с простенькой, весьма не объемной, но возможно, дополняющей имеющиеся знания статейки. К Вашему вниманию, господа…

И снова здравствуйте. На связи Омельницкий Сергей. Сегодня я поделюсь с Вами одной из своих головных болей, а именно — что делать, когда проект пишут много разноуровневых программистов на примере angular приложения.

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

И тут мы разрослись. Появился новый проект с унаследованным кодом, а к нему в придачу новые разработчики в размере 4-х добрых молодцев. И чет тут пошло не по плану.

07–08–2019

Релизы:

angular: 8.2.0
angular-cli: 8.2.0, v8.3.0-next.0
angular material: 8.1.2 bologna-bayou

Всем привет. На связи Омельницкий Сергей. Не так давно я вел стрим по реактивному программированию, где рассказывал про асинхронность в JavaScript. Сегодня я бы хотел законспектировать этот материал.

Но перед тем как начать основной материал нам нужно сделать вводную. Итак, давайте начнем с определений: что такое стек и очередь?

Стек — это коллекция, элементы которой получают по принципу «последний вошел, первый вышел» LIFO

Очередь — это коллекция, элементы которой получают по принципу («первый вошел, первый вышел» FIFO

Окей, продолжим.

JavaScript — это однопоточный язык программирования. Это значит, что он имеется только один поток выполнения и один стек, в который помещаются функции в очередь на выполнение. Следовательно в один момент времени JavaScript может выполнить только одну операцию, другие операции при этом будут ждать своей очереди в стеке, пока их не вызовут.

Если вы занимаетесь frontend разработкой, то наверняка вам знакома следующая мизансцена: сроки по проекту стремительно сжимаются, ваше руководство, или заказчик, а-то и оба вместе желают увидеть глазами работающее приложение прямо сейчас, пусть и с ненастоящими данными. При этом back, возможно, и есть, но именно api слой взаимодействия с front'ом отсутствует от слова совсем.

Итак, недавно я столкнулся с такой ситуацией, и я разрабатываю frontend под angular (сидящие вокруг на стульях люди вяло похлопали, кто-то понимающе кивнул).

Теперь попробую серьезно. С одной стороны ситуация нередкая, и решений может быть выбрано много.

В голову приходило несколько вариантов решения:

1. Захардкодить данные на уровне компонент
2. Захардкодить данные на уровне resolver сервисов, приколотить их к нужным роутам
3. Захардкодить данные на уровне сервисов поставщиков данных
4. Запилить api, и, согласно оговоренным контрактам, возвращать захардкоженные данные

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

В большинстве случаев HTTP-запросы к серверу работают надёжно и возвращают желаемый результат. Однако в некоторых ситуациях запросы могут оказываться неудачными.

Представьте себе, как кто-то работает с вашим веб-сайтом через точку доступа в поезде, который несётся по стране со скоростью 200 километров в час. Сетевое соединение при таком раскладе может быть медленным, но запросы к серверу, несмотря на это, делают своё дело.

А что если поезд попадёт в туннель? Тут высока вероятность того, что связь с интернетом прервётся и веб-приложение не сможет «достучаться» до сервера. В этом случае пользователю придётся перезагрузить страницу приложения после того, как поезд выедет из туннеля и соединение с интернетом восстановится.

Перезагрузка страницы способна оказать воздействие на текущее состояние приложения. Это значит, что пользователь может, например, потерять данные, которые он ввёл в форму.

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



Материал, перевод которого мы сегодня публикуем, посвящён разбору нескольких способов повторения неудачных запросов в Angular-приложениях.

С помощью Angular можно сделать всё что угодно. Или почти всё. Но иногда это коварное «почти» приводит к тому, что разработчик губит время, создавая обходные решения, или пытаясь понять, почему что-то происходит, или почему что-то не работает так, как ожидается.



Автор статьи, перевод которой мы сегодня публикуем, говорит, что хочет поделиться советами, которые помогут Angular-разработчикам сэкономить немного времени. Он собирается рассказать о подводных камнях Angular, с которыми ему (и не только ему) довелось встретиться.

Сейчас лето — то время года, когда во всём мире проводятся различные конференции и другие мероприятия. Программистов в эту пору буквально заваливает новой информацией, которую обычно бывает довольно непросто усвоить.

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



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

Всем привет, меня зовут Виталик, я senior фронтенд-разработчик Skyeng. Наша команда делает онлайн-платформу Vimbox для изучения английского языка. Примерно год назад мы с дизайнером доделали небольшой UI kit, искоренивший хаос в интерфейсе и кодовой базе.

Оказалось, что в компании не мы одни хотели UI kit, и к нам стали приходить другие команды за советом «как написать собственный». Нам удалось отговорить их от этой затеи, пообещав темизировать свой – это сэкономило компании сотни часов разработки. Выбирая решение, мы рассмотрели Angular Material, кастомизированные сборки и CSS Variables и в итоге остановились на последних, несмотря на их слабую совместимость с SCSS, основой имевшегося UI kit. Под катом – подробности того, что мы сделали.

Разработкой расширений к Chrome я занимаюсь давно и за это время я прошел целый путь от Greasemonkey юзер-скриптов до полноценного Angular-приложения в оболочке chrome-extension. Моя задача в том, что я патчу некоторые уже работающие сайты, чтобы изменить их функционал и автоматизировать некоторые процессы на этих сайтах. Иногда моё приложение разрастается до больших масштабов и поддерживать plain-js расширение становится сложно (в приложении много настроек, CRUD функционала и тд). И тут на помощь приходит Angular.

В этой статье я расскажу вам как я подружил Chrome Extension и Angular CLI, и наладил процесс разработки, а также с какими трудностями я сталкивался и как их решал.

TODO-приложение во фронтенд-разработке — это то же самое, что «Hello world» в обычном программировании. При создании TODO-приложений можно изучить выполнение CRUD-операций средствами того или иного фреймворка. Но часто подобные проекты лишь весьма поверхностно касаются того, что на самом деле умеет фреймворк.

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



Для освоения Angular нужно очень много всего изучить. Многие разработчики застревают на начальных этапах освоения Angular. Происходит это из-за того, что они не знают о том, куда им двигаться, или не знают того, по каким ключевым словам им искать информацию, которая позволит им сделать шаг вперёд. Автор этого материала говорит, что ей, когда она начинала осваивать Angular 2+, хотелось бы, чтобы ей попалось бы руководство по данному фреймворку, похожее на это.

Про Angular Elements сейчас пишут много статей и регулярно читают доклады. Мол, больше не нужно разворачивать несколько полноценных ангуляров — достаточно собрать веб-компоненты и использовать их на своей странице.

Но, как правило, эти материалы ограничиваются рассмотрением довольно утопичной ситуации: мы делаем отдельный проект, создаем angular-компонент, настраиваем проект на сборку Elements и, наконец, компилируем несколько JS-файлов, подключение которых к обычной странице даст нам необходимый результат. Ура, компонент работает!..



На практике же возникает потребность вытащить несколько компонентов из готового работающего angular-проекта, да еще желательно так, чтобы не влиять на его текущую разработку и использование. Эта статья получилась как раз благодаря одной из таких ситуаций: я хотел не просто собрать отдельные элементы проекта, а сделать процесс компиляции целой UI-библиотеки на Angular в набор файлов с нативными веб-компонентами.

Считается, что во фронтенд-разработке эквивалентом «Hello world» является приложение — список задач. Да, это позволяет охватить CRUD-аспект создания приложения, однако возможности используемых фреймворка или библиотеки при этом часто затрагиваются весьма поверхностно.

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

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

Переведено в Alconost

Вот и вышел angular 8, он включает в себя превью Ivy, поддержку service workers, дифференциальную загрузку и несколько других завершающих штрихов. Manfred Steyer объясняет наиболее важные изменения в новейшем релизе.

Как и планировалось, сюрпризов не было: обновление фреймворка и CLI можно сделать с помощью ng update, а новые функции являются приятным дополнением в соответствии с девизом «эволюция вместо революции».

В этой статье автор рассказывает о наиболее важных новых функциях Angular 8 и Angular CLI 8. Примеры, используемые в статье, можно найти на GitHub.

Под катом:

• Первый взгляд на Ivy
• Web workers
• Дифференциальная загрузка
• Ленивая загрузка модулей
• Критические изменения в ViewChild и ContentChild
• Новые фичи ngUpgrade

Всем привет.
Все кто писал на фреймворке Angular, так или иначе сталкивался (или даже работал) с библиотекой Angular Material. Это очень хорошо написанная библиотека компонентов способная к гибкой стилизации, которая реализована через возможность создания различных тем вашего приложения, с большим набором компонентов на все случаи жизни.

В моей повседневной работе ни один проект без нее не обходится.

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

В этой статье я хочу с вами поделиться тем, как можно реализовать подход со сложным шаблоном который реализован в модуле MatTableModule.

Представляем вам перевод статьи Aditya Modi, опубликованной на blog.bitsrc.io. Статья посвящена использованию библиотеки jQuery в приложениях на Angular.

Достаточно часто в моей практике используется связка Spring + Angular. Хочу поделится своим опытом по подготовке подобного проекта в среде разработки IntelliJ IDEA.

Создаем пустой Gradle проект

Для начала создадим пустой Gradle проект в IDEA, при этом снимите все галочки библиотек и фреймворков.

Пусть наш артефакт будет «demo», а группа «com.habr». После создания проекта будет автоматически сгенерировано файлы settings.gradle и build.gradle со следующим содержанием:

Вот что вызывало вау-эффект в старом добром AngularJS, так это «двустороннее связывание». Эта магия мгновенно влюбляла в AngularJS, и ломала все представления о скучном программировании страниц и (о, ужас!) веб-форм. Изменения в данных мгновенно отображались на экране и наоборот. Те, кто раньше разрабатывал приложения на jQuery, воспринимали связывание, как попадание в сказку. А бородатые монстры, пилившие толстых клиентов ещё до jQuery, начинали судорожно пересчитывать бездарно потерянные человеко-месяцы.

И, более того, магия двустороннего связывания была доступна не только для специальных нотаций и избранных компонентов. Мы могли легко её использовать в наших собственных директивах и компонентах (просто установив параметр конфигурации).

В Angular2+ создатели отказались от встроенной двусторонней привязки данных (кроме как через ngModel). Но это не означает, что мы не можем использовать двустороннее связывание в собственных директивах… Просто халява кончилась и теперь нужно кое-что делать самостоятельно. И, желательно, c пониманием того, как оно устроено в Angular.