- Видео 25
- Просмотров 41 643
DreyLiky Dev. 🇺🇦
Украина
Добавлен 20 дек 2019
Привіт! Я створив бібліотеку ngx-os для Angular, щоб на її прикладі показати що чистий код існує =)
Тут я намагатимуся розповісти все що знаю і розумію щодо того, що таке чистий код і все це буде підкріплено реальними прикладами з Open Source проекту, який можна помацати на сайті, подивитися на github і встановити собі через npm. Дякую!
Тут я намагатимуся розповісти все що знаю і розумію щодо того, що таке чистий код і все це буде підкріплено реальними прикладами з Open Source проекту, який можна помацати на сайті, подивитися на github і встановити собі через npm. Дякую!
РЕАКТИВНІ ФОРМИ - РЕКОМЕНДАЦІЇ [ANGULAR]
Розповідаю про те, як покращити свої реактивні форми. Показую напрацювання зі свого досвіду, які допоможуть вам краще описувати, типізувати та генерувати свої реактивні форми.
Stackblitz прикладу:
stackblitz.com/edit/stackblitz-starters-pzqbe3?file=src%2Fform%2Fuser-form.class.ts
Формуємо україномовну Angular спільноту:
t.me/angular_community_ua
Донат на підтримку каналу:
patreon.com/dreyliky
www.buymeacoffee.com/dreyliky
00:00 - Опис реактивних форм;
01:32 - Типізація реактивних форм через FormGroupDef;
04:30 - Поля та методи в реактивній формі;
05:24 - Взаємодія контролів один з одним всередині реактивної форми;
05:52 - setControlEnabledState утиліта для встановлення enabled/disabled на базі boolea...
Stackblitz прикладу:
stackblitz.com/edit/stackblitz-starters-pzqbe3?file=src%2Fform%2Fuser-form.class.ts
Формуємо україномовну Angular спільноту:
t.me/angular_community_ua
Донат на підтримку каналу:
patreon.com/dreyliky
www.buymeacoffee.com/dreyliky
00:00 - Опис реактивних форм;
01:32 - Типізація реактивних форм через FormGroupDef;
04:30 - Поля та методи в реактивній формі;
05:24 - Взаємодія контролів один з одним всередині реактивної форми;
05:52 - setControlEnabledState утиліта для встановлення enabled/disabled на базі boolea...
Просмотров: 1 125
Видео
ОПТИМІСТИЧНИЙ UI [ANGULAR]
Просмотров 888Год назад
Розповідаю про концепцію "Оптимістичний UI" та в чому його відмінність від "Песимістичного UI" на приклад Angular проєкту. Optimistic UI & Pessimistic UI: uxplanet.org/faster-user-experience-optimistic-ui-41b151feaa28 Формуємо україномовну Angular спільноту в телеграмі: t.me/angular_community_ua Код Angular проєкту з відео: github.com/dreyliky/optimistic-and-pessimistic-ui-example Код NestJS пр...
ОБРОБКА СТАТУСІВ OBSERVABLE [ANGULAR]
Просмотров 826Год назад
Потік із даними або бізнес-логікою має кілька статусів, як нам часто потрібно візуально відображати: Loading, Error and Success. Директива ngxAsync допомагає візуально представити ц статуси простим способом. Просто додайте структурну директиву ngxAsync до свого елемента. Стаття на Medium: medium.com/@dreyliky/c406ca91549c Github: github.com/dreyliky/ngx-async Приклади з відеоролику (StackBlitz)...
ТИПІЗОВАНІ NG-TEMPLATE [ANGULAR] - GUIDE
Просмотров 746Год назад
Розповідаю про те, як налаштувати типізацію для роботи з даними контексту ng-template. ng-template & ngTemplateOutlet type checking setup. Формуємо україномовну Angular спільноту: t.me/angular_community_ua Проєкт з відео на Github: github.com/dreyliky/ng-template-type-safe-example Стаття з описом найбільш схожої реалізації цієї задачі: medium.com/@thomas.laforge/ngtemplateoutlet-type-checking-5...
NG-TEMPLATE [ANGULAR]
Просмотров 784Год назад
Розповідаю про роботу з ng-template. Для чого потрібн шаблони як ними користуватись? Оговорюємо як даними в формат "контексту" в шаблонах. Розглядаємо роботу з шаблонами на приклад створення тупого компоненту з можливістю кастомізації його контенту. Формуємо україномовну Angular спільноту в телеграмі: t.me/angular_community_ua Код проєкту: github.com/dreyliky/ng-template-usage-example Запропон...
КОМПОНЕНТИ-АГНОСТИКИ [ANGULAR]
Просмотров 871Год назад
Розповідаю про концепцію "Data Agnostic Components". Концепція дозволяє робити гнучк туп компоненти без прив'язки до конкретного формату даних. Формуємо україномовну Angular спільноту в телеграмі: t.me/angular_community_ua Data Agnostic Components InDepth: indepth.dev/posts/1314/agnostic-components-in-angular Код проєкту з відео: github.com/dreyliky/data-agnostic-components-example Запропонуват...
КОД РЕВЬЮ ДЛЯ ПІДПИСНИКА #1 [ANGULAR]
Просмотров 1,3 тыс.Год назад
Дивлюсь на проєкт підписника даю свої коментар щодо того що бачу перед собою. Код ревью Angular проєкта для підписника. Формуємо україномовну Angular спільноту в телеграм: t.me/angular_community_ua Мій Github: github.com/dreyliky Запропонувати ідею каналу: t.me/ Wgg1OUUP46k0NmUy Донат на підтримку каналу: patreon.com/dreyliky www.buymeacoffee.com/dreyliky
NO REDUX СТЕЙТ МЕНЕДЖЕР - ОГЛЯД [ANGULAR]
Просмотров 6542 года назад
Огляд NO REDUX стейт менеджеру - ngx-base-state. Дивимось як працювати з цією бібліотекою. Бібліотека ngx-base-state містить набір базових класів як полегшують операції (екшени) з даними як зберігаються всередині. Створюємо свої класи, наслідуємось від базових в нас є стейт. Викликаємо методи стейтів через прошарок сервісів. ngx-base-state має DevTools для відслідковування змін в стейтах. На в...
СТЕЙТ МЕНЕДЖМЕНТ [ANGULAR]
Просмотров 1,1 тыс.2 года назад
Розповідаю про те, як працювати з NO REDUX стейтами в Angular. Вс приклади розглядаються на баз бібліотеки ngx-base-state. Бібліотека ngx-base-state містить набір базових класів як полегшують операції (екшени) з даними як зберігаються всередині. Створюємо свої класи, наслідуємось від базових в нас є стейт. Викликаємо методи стейтів через прошарок сервісів. ngx-base-state має DevTools для відсл...
ДИНАМІЧНЕ СТВОРЕННЯ КОМПОНЕНТІВ [ANGULAR]
Просмотров 1,1 тыс.2 года назад
Розповідаю, на прикладі, про те як динамічно створювати компоненти. Що таке ViewContainerRef, ComponentRef, ComponentFactoryResolver..? Як є нюанси при динамічному створенн компонентів? Сподобалось? Підпишись на канал став лайк цьому відео. Дякую! Github посилання на проєкт з відеоролику: github.com/dreyliky/dynamic-component-creation-example Моя бібліотека: ngx-os.io github.com/dreyliky/ngx-o...
ChangeDetection ADVANCED [ANGULAR]
Просмотров 1,2 тыс.2 года назад
Розповідаю про детал роботи з ChangeDetection. Обговорюємо ApplicationRef.tick & ChangeDetectorRef (detectChanges, markForCheck, detach, reattach). Що таке хвиля ChangeDetection? Що таке ExpressionChangedAfterItHasBeenCheckedError як з нею боротися? Сподобалось? Підпишись на канал став лайк цьому відео. Дякую! Перша частина: ruclips.net/video/PQRSR1YVlgc/видео.html Моя бібліотека: ngx-os.io g...
ChangeDetection [ANGULAR]
Просмотров 2 тыс.2 года назад
Розповідаю про ChangeDetection розбираємось як він працює. Порівнюємо стратегії Default & OnPush. Розбираємо роботу методів detectChanges & markForCheck. Оговорюю нюанси даю поради щодо роботи з OnPush. Сподобалось? Підпишись на канал став лайк цьому відео. Дякую! Моя бібліотека: ngx-os.io github.com/dreyliky/ngx-os Запропонувати ідею каналу: t.me/ Wgg1OUUP46k0NmUy Донат на підтримку каналу:...
ЧИСТЫЙ КОД - КЛАССЫ [ANGULAR] #2 - GUIDE
Просмотров 1,8 тыс.2 года назад
ЧИСТЫЙ КОД - КЛАССЫ [ANGULAR] #2 - GUIDE
ControlValueAccessor - КАК РАБОТАЕТ [ANGULAR] - GUIDE
Просмотров 6 тыс.2 года назад
ControlValueAccessor - КАК РАБОТАЕТ [ANGULAR] - GUIDE
КАК СДЕЛАТЬ ПОДДЕРЖКУ ТЕМ [ANGULAR] - GUIDE
Просмотров 1,5 тыс.2 года назад
КАК СДЕЛАТЬ ПОДДЕРЖКУ ТЕМ [ANGULAR] - GUIDE
ОПТИМИЗАЦИЯ ОБРАБОТЧИКОВ СОБЫТИЙ [ANGULAR] - GUIDE
Просмотров 2,2 тыс.2 года назад
ОПТИМИЗАЦИЯ ОБРАБОТЧИКОВ СОБЫТИЙ [ANGULAR] - GUIDE
УМНЫЕ И ГЛУПЫЕ КОМПОНЕНТЫ [ANGULAR] - GUIDE
Просмотров 3,7 тыс.2 года назад
УМНЫЕ И ГЛУПЫЕ КОМПОНЕНТЫ [ANGULAR] - GUIDE
ЧИСТЫЙ КОД - МЕТОДЫ [ANGULAR] #1 - GUIDE
Просмотров 3,5 тыс.2 года назад
ЧИСТЫЙ КОД - МЕТОДЫ [ANGULAR] #1 - GUIDE
СОЗДАЛ БИБЛИОТЕКУ ДЛЯ ANGULAR. ЗАЧЕМ?
Просмотров 1,1 тыс.2 года назад
СОЗДАЛ БИБЛИОТЕКУ ДЛЯ ANGULAR. ЗАЧЕМ?
НЕ ПИШИ ЛОГИКУ В ШАБЛОНЕ [ANGULAR] - GUIDE
Просмотров 2,9 тыс.3 года назад
НЕ ПИШИ ЛОГИКУ В ШАБЛОНЕ [ANGULAR] - GUIDE
Українською 😍 Підписуюсь ✅
И хотелось бы спросить про paths, когда работаем с nx. Меня вот очень раздражает увеличенное количество '../../' в каждом проекте (импорты внутри самого проекта), т.к. абсолютные пути настраиваются только для импорта из других проектов. И настройка удалась только при указании абсолютного импорта в tsconfig.base, но eslint от nx не рекоммендует использовать абсолютные пути вот таким образом. в видео тоже упомянуто (прим 9 минута), что не оч круто между фичами использовать абсолютные пути. но у меня кейс с nx, что думаете об этом? Можно ли настроить абсолютные пути, глушить eslint от nx или смириться с паровозом ../../ во внутренном импорте каждого проекта?
Влияет ли импорт из index.ts, когда мы работаем с lazy loading modules? может ли в lazy module импортироваться так же ненужные нам файлы, тем самым увеличивая размер бандла?
Усього лише прочитав декілька статей, двічі подивився цей відос і вауля, я розумію як це працює 🥹 Дякую автору 🥹
Дякую за відео )
Дякую за відео :)
Це дивитися було чистою насолодою 🔥
Круто. Прикольна ідея
Может быть можешь подсказать как решить проблему когда добавила алиасы, такую как core.mjs:6531 ERROR TypeError: Cannot read properties of undefined (reading 'ɵcmp') at getComponentDef (core.mjs:2529:12) at extractDirectiveDef (core.mjs:2418:12) at core.mjs:2592:21 at Array.map (<anonymous>) at core.mjs:2592:10 at createTView (core.mjs:11394:63) at getOrCreateComponentTView (core.mjs:11343:28) at createRootComponentView (core.mjs:15966:49) at ComponentFactory.create (core.mjs:15845:39) at ViewContainerRef2.createComponent (core.mjs:16265:47)
Если у тебя тот компонент который = undefined становиться,то скорее всего ты находишься в состоянии циклической зависимости компонентов
@@kostik706 можно проверить по команде, циклических зависимостей нет
Как же здорово, что снимаешь на выдуманном языке, ограничиваешь людей от гавнокода.
Залупа контент, бред сумашедшего, гавнокод высшего сорта.
Але якщо бити все на велику кількість серввсів (класів), то це норм - тримати їх в одному загальному файлі, типу users.service.ts? Чи то лише для зразка, і кожен з них має бути винесений в окремий файл?
подивився до кінця, але для мене як для початківця трішки складнувато. Думаю це відео для більш досвідчених..
дякую вам за україномовний контент!!! ще не переглядав відео. тільки почав, але вам лайк і підписка!)
На украинском тяжело смотреть. Делайте контент более доступным для соседей
вчи українську мову😊
Ну как-то ради этих видосиков язык учить - такое себе 😂
де ти пропав?
а люлей ты получил за то, что вычисления, перенесённые из шаблона в компонент, запускались при каждом цикле обнаружения изменений. а их мноооого. так что синьор тоже вполне себе прав был
Привет. Записывайте пожалуйста на русском тоже, я понимаю это из за войны, но не записывая на русском вы сразу обрубаете целый пласт русскоязычных стран СНГ, а это потенциальные подписчики и благодарные зрители
Вот вот
пора вчити українську мову
@@maximbarishov4120 varbūt Tu labāk latviešu valodu iemācīsies, ko? Es tevi vismaz saprotu 😅
Дуже класно пояснюєш різницю між цими двома підходами. Я, мабуть, песімист чи реаліст і я більше за песимістичний UI. Але підходи можна спробувати і заміксувати для різних елементів UI, як на мене ;)
Hello and a big thanks for video. I like a lot how you explain. Could you please touch how CD work in lazy loaded modules.
Привіт) Дякую за контент! Дуже хочу вирости як розробник до мідл рівня,можливо в тебе є якісь курси чи менторінг? Чи можливо ще якось можеш допомогти з цим? Дякую.
Чудове відео! Ми у нашій компанії робим дуже схоже, правда описуємо форму завжди, більше коду, але якось наглядніше. Цікаво ще попробувати утиліту для типізації форм групи, ми також пробували таку додати, але були проблеми з внутршніми форм групами
Да на самом деле, норм, что одно и тоже много раз повторяешь, для обучалки так и нужно, чтоб точно дошло, так объяснить, потом еще раз другими словами. Крутой урок, после него начинаешь куда больше понимать логику построения любого приложения ангуляр в принципе. Еще было бы интересно послушать про принцип деления приложения на модули)
Просто супер - дуже корисне відео! З нетерпінням чекаю на нові)
дуже корисно, дякую!
Як нам не вистачає такого контенту українською! Так тримати)
можно добавить [style.width.px]='size' и textSize(){ return this.textSizeInPx}
Яка насолода слухати таки приємну українську про Ангуляр 🤤
Дзякуй вялікі! Вельмі карысны фільмік!
Дякую, класний контент
красавчик!
Прикольна штука хоча і занадто складна щоб на проект звати джунів.
Повернувся! І Макс Гром повернувся. Ви прям майже одночасно. Тепер я щасливий)
Може планується відео, про динамічне створення форми? Мені зараз треба)
лучше скажи що з роботами стало ) рік досвіду є не можу найти вже чуть не пів року знаю rxJs є трохи розуміння ngrx )
якщо з синтаксисом справи, як і з інтонацією та орфографією, то тоді складно буде
Дуже цікаво. Так тримати)
Є вже такий метод як new FormGroup().markAllAsTouched(), краще використовувати його. Мені здається краще вже додати до класу @Injectable() декоратор, чим передавати туди Injector, або загорнути в абстракцію щоб його не бачили джуни. А так мені теж все сподобалось боюсь що тільки це можна використовувати на дуже примітивному функціоналі, зазвичай все набагато і набагато складніше, хоча може я і помиляюсь.
Очень интересный и удобный подход! Помню на одном проекте была такая реализация форм и мне понравилось тем, что компонент не нагромождается огромными формами.
випускай частіше відоси! Ти кльовий
Дякую за корисний контент)
Мені знається це трохи оверкіл якщо в твоєму проєкті не потрібно буде робити якихось великих і складних форм і достатньо стандартного найбільш розповсюдженого методу створення форм, а то що тобі це підхід не подоється не значить що такий спосіб гірший. Але взагальному круте та цікаве відео)))
Цінна інформація та корисні утиліти, дякую!
Чудове відео, лаконічне і все по суті. Дякуємо і чекаємо продовження 🤘
Круті відео, але було б добре переписати українською 😊 на фоні останніх записів, ці вже аж слух ріжуть))
Вітаю, друже! Слава Україні!
Спасибо за подробный разбор темы.
Дякую за позицію. Моя повага