- 9
- 67 280
Frontend не для всех
Russia
Приєднався 29 бер 2020
Фронтенд не для всех, он для каждого.
Все, что вы искали по нему в гугле, но так и не нашли.
ТГ-канал - t.me/frontend_not_for_everyone
Все, что вы искали по нему в гугле, но так и не нашли.
ТГ-канал - t.me/frontend_not_for_everyone
Секция код ревью на собеседовании для Angular разработчика
Одно из популярных заданий на собеседовании - ревью кода. Важный навык для проверки умения быстро ориентироваться в чужом коде и выявлять всевозможные упущения, ошибки и антипаттерны.
Пример кода из видео: gist.github.com/diamond-darrell/b6792be3b3699e1ba649cbf62dddc184
Уровень: junior, middle
Подпишись, пока не потерял:
Канал в ТГ: t.me/frontend_not_for_everyone
ВК: frontend_not_for_everyone
Пример кода из видео: gist.github.com/diamond-darrell/b6792be3b3699e1ba649cbf62dddc184
Уровень: junior, middle
Подпишись, пока не потерял:
Канал в ТГ: t.me/frontend_not_for_everyone
ВК: frontend_not_for_everyone
Переглядів: 1 268
Відео
TypeScript. Для чего нужен type guard?
Переглядів 8 тис.3 роки тому
Рано или поздно в typescript, все приходят к работе с объединенными типами, потому что это быстро и удобно. Впрочем иногда с ними бывают сложности. Здесь-то и приходит на помощь type guard. Как именно его использовать и зачем, в сегодяшнем коротком выпуске. Продолжительность: 6 минут. Уроверь: junior, middle Подпишись, пока не потерял: Канал в ТГ: t.me/frontend_not_for_everyone ФБ: facebook.com...
Как тестироваить асинхронный код в Angular TestBed - Unit тестирование в Angular
Переглядів 2,8 тис.3 роки тому
Второй выпуск про тестирование асинхронного кода, на этот раз с помощью утилиты Angular TestBed. В этом выпуске рассмотрены два инструмента: fakeAsync и waitForAsync, для чего каждый из них используется, в чем их преимущество, чем они отличаются от встроенных инструментов Jasmine, и когда и какой из них стоит использовать. После просмотра вы научитесь тестировать асинхронный код и поймете, что ...
Как тестировать асинхронный код в Jasmine - Unit-тестирование в Angular
Переглядів 5 тис.3 роки тому
Как тестировать Observable? Как тестировать Promise? Какие сложности возникают при написании тестов для асинхронного кода? Какие способы доступны в Jasmine для создания асинхронных тестов? Как можно из асинхронного кода сделать синхронный. Это и многое другое в сегодняшнем выпуске. После просмотра вы научитесь тестировать асинхронный код и поймете, что это гораздо проще, чем кажется. Продолжите...
Главные ошибки при написании кода на TypeScript
Переглядів 3,4 тис.3 роки тому
TypeScript прекрасный язык, главное в нем разобраться и не допускать ошибок, которые делает большинство разработчиков. Каких именно, смотрите в сегодняшнем выпуске. Продолжительность: 33 минуты. Уроверь: junior, middle Подпишись, пока не потерял: Канал в ТГ: t.me/frontend_not_for_everyone ФБ: olga.fomina.58555 ВК: dreamhelg
Как тестировать компоненты - Unit-тестирование в Angular
Переглядів 13 тис.3 роки тому
Как писать юнит-тесты к компонентам Angular. В чем разница между тестированием сервисов и компонентов. Как эмулируются события и проверяются инпуты. В чем особенности мока зависимостей. Продолжительность: 55 минут. Уроверь: junior, middle Тестовое приложение из видео - github.com/dreamhelg/angular-components-unit-test Подпишись, пока не потерял: Канал в ТГ: t.me/frontend_not_for_everyone ФБ: fa...
Jasmine SpyOnProperty - Unit-тестирование в Angular
Переглядів 4 тис.3 роки тому
Как использовать Jasmine Spy для геттеров и сеттеров? Какие сложности могут возникнуть в ходе использования SpyOnProperty? Как можно скомбинировать мок зависимости, с геттером, методами и статическими полями класса. Все ответы в текущем видео, скорее смотри. Продолжительность: 27 минут Уровень: Middle, Senior Тестовое приложение из видео - github.com/dreamhelg/angular-jasmine-spy-on-property Сс...
Unit-тестирование в Angular. Как использовать Jasmine Spy?
Переглядів 11 тис.3 роки тому
Что такое Jasmine Spy и как он может помочь с тестами. Чем отличается spyOn от createSpy. В чем разница между callFake() и callThrough(). Как самостоятельно сделать, а потом починить flacky-тесты. Очень подробно, с примерами, ошибками и слезами радости. Продолжительность: 55 минут. Уроверь: junior, middle Тестовое приложение из видео - github.com/dreamhelg/angular-unit-test-jasmine-spy Ссылки: ...
Unit-тестирование в Angular. Jasmine, Karma, Test coverage report
Переглядів 18 тис.4 роки тому
Как начать писать юнит-тесты в Angular, что такое Jasmine и Karma. Как тестировать зависимости, что такое отчет Test coverage. Подробно и с примерами. Продолжительность: 23 минуты. Уроверь: junior, middle Тестовое приложение из видео - github.com/dreamhelg/angular-unit-test-beginner/ Ссылки: Канал в ТГ: t.me/frontend_not_for_everyone ФБ: olga.fomina.58555 ВК: dreamhelg
Годнота 👍 Отличный вводный урок, как раз то что нужно
Спасибо) очень полезное видео!
14:23 опечатка, вместо createSpyObj('fakeFirstDependency' -> должно быть createSpyObj('fakeFirstDependencyService'. Поэтому 23:20 отсутствует поле name. После исправления поле появляется, поэтому нет необходимости в defineProperty. определяем set и get как в прошлом примере /// age: 0, get name(): string {return ''}, set name(val: string) {}, /// и в тестах используем spyOnProperty как указано на видео
хотя get и set можно определить и через defineProperty
Годно! Спасибо за видео !
Было очень полезно. Спасибо.
Кстати когда используешь createSpyObj и оставляешь массив названий методов пустым - выпадает ошибка о том, что нужен заполненный массив Может быть кто-нибудь знает почему нельзя оставить массив пустым?
С возвращением)
Не, ну тут очевидно реди фор продакшен код был :) . Ой как режет ухо Транспортный слой
Приветствую! у меня вопрос не по теме наверно - а как вы учили ангуляр? дока у ангуляра хорошая но это на уровень мидла наверно. а дальше как? DDD, чистая архитектура, луковая, микросервисы/микрофронтенды в ангуляре? хочется ведь не только делать сделать big ball of mat но и спроектировать хорошее приложение что ангуляр позволяет сделать со своим DI и TS из коробки.
Опыт и еще раз опыт, хороший проект с грамотной архитектурой, плотная команда с хорошим код ревью 2-3 годика и вопрос отпадет :) МФ это инструмент решение как-то проблемы, опять же пока не столкнешься с проблемой нет смысла все на микрофронтендах строить. Чистая архитектура на каждом проекте своя, где то сервисы где то состояние, где то граф, кто-то extends не любит при построение копонентов, кто-то с контекстом любит побаловаться. Сколько проектов столько и подходов есть основа и она в целом в доке описана. Дальше только подстраиваешься под проекты.
@@volodimiryemshyn715 согласен. Где ж его взять то хороший проект с хорошей командой ;)
Хотел отписаться, но нет. Канал жив!
Пожалуйста, люди, не забывайте писать type в тегах button 😭
круто, здорово, спасибо! Было бы интересно посмотреть ролик на тему архитектуры ангуляр приложений, как вы организовываете структуру, различные слои и абстракции)
есть мысль кстати сделать такой, да, если это будет интересно
Плюсую
Плюсую
@@frontend-not-for-everyone про NX было бы бомбезно, и не про feature и data-access, а как выделить доменную модель, как раскидать зацепление, как сделать приоритетом абстракции и отделить их от реализаций в домене, как выделить use cases и все такое прочее неинтересное никому на ютубе ))))
@@andreidetenkov ну и душнила ты
Отличный контент, спасибо) Я бы разделил сервисы в любом случае)
ого-ого, не думал уже увидеть самого красивого ангулярщика на ютубе) учил когда-то тесты по Вашим видео А из несогласий, то в ngOnchanges то что он написал, то это норм выглядит, если у компонента действительно может меняться id юзера, без нового инита компонента и без стейт-менеджмента на проекте. И вместо сетера можно просто сделать if (changes['userId']). Сетеры - более устаревший подход, имхо. По поводу везде писать void возвращаемый тоже как-то избыточно.... Можно договориться, что писать возвращаемый тип лишь когда метод действительно что-то возвращает... имхо) Сегодня тоже 2 часа на собеседовании был, то это еще не может мозг отойти и генерирует все подряд))
Чтобы избежать лишнего ререндера, я вместо `if (changes['userId'])` пишу `if (changes['userId'].currentValue)`
@@VasyaFFну это от кейса зависит... Такой код не отработает, когда прилет null или undefined. Иногда это норм, а иногда может быть какая-то логика, когда сущности нет.
Она подсветила этот момент если у тебя не стоит OnPush то твой компонент будет рередериться постоянно, как бы ты там не старался с if (changes['userId']) этот код будет только вызывать лишний if потому что потому :) слово ИМХО устарело примерно лет 10 назад :) Но почему то ты его используешь) я сеттеры люблю удобны) Но и ngOnchanges пользуюсь когда есть динамический компонент где действительно нужно следить за состоянием.
@@volodimiryemshyn715 при чем там повторный рендер?) Зачем мы пишем сетер или хук этот? Мб чтобы выполнять дополнительную логику? Или ты каждый раз сеттер пишешь просто ради инкапсуляции?) И вот чтобы эта логика не срабатывала при любом инпуте и нужна проверка. А рендер и так не произойдет, если значение не изменится. В сетере тебе приходитяс писать еще дополнительное свойство какое-то приватное, чтобы сетить его. С хуком это не нужно. Но да, с хуком другая проблема - отсутствме типизации(( Если инпут точно будет только один, тогда в этом случае сеттер еще оправдан. А если больше, то спорно. А "имхо" не может устареть, учитывая его значение. Я его добавил, чтобы не звучало как общепринятое мнение или т.п.
@@user-san-chous Я не так чтобы поспорить написал, есть кейс - у тебя идет запрос на сервер получаеться user после ты передаешь этого юзера в инпут, если у тебя onpush стратегия, то ? или ? а как? :) вот тут и не обходим ручной перерндер ввиде settera или changes/ChangeDetectorRef.
Не верю своими глазам! Очень рад!
Мне кажется сейчас уже все используют id как uuid, а представить его лучше всего в виде строки ))
да, именно поэтому нужно уточнить, все может быть)
Спасибо за видео! ❤
Спасибо было интересно послушать - все грамотно расказано
Для тех, кто будет смотреть в будущем (на новых версиях Ангуляра и RxJS): Чтобы в subscribe не использовать undefined: subscribe({ next: result => console.log('could be deleted here'), err => { expect(err).toBe('name is undefined'); done(); }, complete: () => console.log('could be deleted here') }); return throwError(() => 'name is undefined'); Observable и Subject'ы принято обозначать долларом (легче читать код): subjectExample$
Вам бы тоже подошло имя Жасмин!
Несправедливо мало просмотров и лайков. Спасибо за полезную информацию.
спасибо, куколка)
Спасибо за информацию! Только можно экран увеличить, шрифт маленький, сложно порой смотреть
спасибо
красава)продолжай
00:40 SpyOnProperty 12:48 CreateSpyObj
😍
27:28 вообще более точно 500 - это внутренняя ошибка сервера(Internal server error)
раньше такое не использовал, да, было полезно, можно делать ещё заметки по TS (вопрос: почему нельзя было на 11 строке поставить number | undefined вместо || 0 на 13 строке??)
4:06 12-16 строка: можно было тернарником - чуть короче запись
hi, 3:50 почему на 17 строке не просто boolean вместо person is Woman??
Я все понимаю. Но Кли и Хит... Леди точно умеет читать не по-русски?
чеш так мелко то, ну все ж спасиб
Большое спасибо за информативный ролик.
Вы потрясающе рассказываете!
Ахаххах "есть люди который считают что динамическая типизация лучше"😂😂😂 сказала так будто это больные люди😂 дмнамическая типизация для средних и маленьких проектов чамое то. А их в интернете 70%
Не понял прикола. Какой смысл передавать в аргументы тип Man, если функция должна возвращать Woman? Убрать Man из аргумента и не потребуется этот type guard. В общем сами создали себе проблему и решаем её, ясно
дело в том, что такие примеры встречаются на практике, когда функция работает с разными типами и выполняет похожие действия, поэтому здесь разбирается этот вопрос
Спасибо! Жаль что мало контента на канале. У Вас хорошо получается преподносить информацию
ничего не видно, поэтому информация плохо усваивается
Огонь, спасибо за проделанную работу!
Доходчиво разобрали довольно сложную тему для меня, спасибо!
Все четко и понятно, спасибо!
Большое спасибо за ролик!
Спасибо большое за ваш труд!
24:45 по идее, вместо spread оператора, можно использовать `Object.assign`: ``` const fakeFirstDependencyService = Object.assign(jasmine.createSpyObject("fakeFirstDependency", ["doSomething", "doSomethingElse"], ["name"]), {age: 0}); ``` У вас очень позновательные уроки. Спасибо за ваш труд.
И красивая и умничка еще и angular)) одно слово влюбился)) Спасибо за уроки
Здравствуйте, подскажите пожалуйста, как тестировать void методы?
02:49 ошибка компиляции шаблона 09:55 использование блока: schema CUSTOM_ELEMENT_SHEMA и NO_ERRORS_SCHEMA - пропустить тестирование дочерних компонентов 13:06 Change detection cycle 15:13 @Input и detectChanges 21:47 @Output метод Jasmin spyON 26:22 Эмуляция события из шаблона 30:22 проверка CSS в шаблоне, detectChanges 37:52 тестирование зависимостей приложения Dependency Injection 41:20 мок провайдеров компонента, устранение зависимости зависимостей - TestBed.overrideComponent 51:30 ошибки тестирования форм, включение реальных модулей форм
Отличный материал по тестированию, спасибо большое! Видно, что вы имеете хороший опыт и, что отрадно, делитесь им. Я даже рассматриваю данные видео в виде best practice по написанию тестов и особенно стилистике, потому как хоть пишу тесты, но как Бог на душу положит - хороших развернутых примеров не так много. Я обычно пишу на Jest, но применить всё, что есть в Jasmine, можно. А с данными роликами - так без труда, ведь понятна становится вся суть техник, использующихся в тестировании. Уже просто неважно, что именно использовать в проекте. Полагаю, что у вас есть богатый опыт и обычном программировании, поэтому буду надеяться на выход других видео (по TS или Angular). Не могу не отметить хорошую подачу материала - очень всё понятно, нет никаких темных пятен в логике. Я прям с большим удовольствием все посмотрела!
Спасибо, очень полезно! Вас приятно слушать