«Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)

•Download as PPTX, PDF•

3 likes•11,695 views

Обычно компонентный подход используют в крупных проектах из-за издержек по поддержке такого кода. Андрей рассказал, как даже в небольших проектах с помощью AngularJS и компонентного подхода можно улучшить качество кода, ускорить и упростить разработку. Доклад актуален для AngularJS 1 и 2. Он также будет полезен тем, кто вообще не используют данный фреймворк.

Software

Компонентная верстка
с AngularJS
MoscowJS 28
Докладчик:
Яманов Андрей
http://tenphi.me

Проекты
2
TeamHunt.co TweetWorthy.co Quotable.Tips
Beta Beta

Содержание
• Angular-компоненты
• Верстка
• Стили
3

4
Поиск “идеальной”
методологии для
компонентов

Особенности
module.component()
8
• Вся логика реализована через controller.
• Можно привязать только к элементу.
• Scope всегда изолирован.
https://docs.angularjs.org/guide/component
angular@1.5.0 и выше

Создание компонента
9
module.directive()
* до angular@1.5.0

Создание компонента
10
module.component()

Наследование
компонентов
13
• Object.assign()
• class “extends”

Минусы БЭМ
16
• Строгие правила для определения стилей;
• Почти нет ограничений для верстки;
• Значения модификаторов возможно излишни.

Block As Component
17
• Компонентный подход в вёрстке;
• Контекстные селекторы;
• Значений модификаторов нет.

angular-bem
21
https://github.com/tenphi/angular-bem

angular-bem
и компоненты
22
• Генерация классов BEM на основе
атрибутов;
• Установка модификаторов по
состоянию компонента;
• Не замедляет компиляцию
шаблона.

Наследование
24
http://learnjade.com/tour/template-inheritance/
На примере Jade:
base.jade
child.jade

–Разработчик с большим и грустным опытом
“Никакая документация, методология или
устоявшаяся практика не избавляет
разработчика от необходимости думать.”
33

34
Спасибо за внимание!
Вопросы?
Инструменты:
http://bit.ly/1WItKwI
GitHub:
https://github.com/tenphi

Алексей Мычко, Минск, компания JazzTeam, Software Engineer (test automation) «Эволюция тестирования на Selenium». Лекция и мастер-класс. Development секция. Для заинтересованных. Для автоматизации web-приложений самым популярным средством является Selenium. Этот продукт дает возможность создавать как очень простые тесты, так и сложные тестовые фреймворки, позволяющие тестировать системы любой сложности. В мастер-классе будет наглядно показано создание следующих видов тестов: - с использование программ, генерирующих тесты по манипуляциям с браузером - тесты в стиле процедурного программирования - тесты в стиле объектно-ориентированного программирования - тесты на DSL (Domain Specific Language) языке

Rambler.iOS #5: VIPER a la Rambler

RAMBLER&Co

Автоматизация визуального тестирования адаптивного дизайна на примере Galen F...

SQALab

Расширяемая платформа для создания и управления автоматизированными тестами н...

jazzteam

Продукт XML2Selenium - это расширяемая, плагинная платформа для создания и управления автоматизированными тестами на основе технологии Java. XML2Selenium имеет интеграцию с JUnit, работает поверх Selenium (это изменяемо). XML2Selenim позволяет создавать автоматизированные тесты в простом и понятном обычному (без навыков программирования) QA инженеру формате. XML2Selenium позволяет также управлять всеми стадиями работы с автоматизированными тестами, начиная от стадии создания и заканчивая управлением тестами. Главными конкурентными преимуществами являются - низкая стоимость вхождения. Начинающие автоматизаторы, и даже QA инженеры без навыков программирования создают качественные тесты, а значит легко поддерживаемые, легко изменяемые, с использованием DDT (Data Driven Testing) подходов, что увеличивает повторно-используемость тестов - встроенные возможности структуризации тестов по папкам и файлам, а также по тегам, что позволяет качественно отобразить документацию на тесты. Внедряя эту платформу, вы автоматически улучшаете свои процессы управления тестами - XML2Selenium - это плагинная, расширяемая платформа, позволяющая кастомизировать процессы под ваши нужды, создать новые плагины, добавить интеграцию с нужными системами, и многое другое - все повторно-используемые части (инклюды, плагины) могут помещаться в репозитории, откуда ими могут пользоваться QA инженеры с других проектов компании, тем самым распространяется опыт и знания в области автоматизации - XML2Selenium имеет широкий спектр полезных свойств в области автоматизации, таких как поддержка создания видео, снепшотов и скриншотов страниц, Groovy и JS скриптинга, поддержки объектно-ориентированного программирования на XML и многих других Традиционно многие компании не инвестируют много в QA инженеров, при этом сложность продуктов и количество Use Cases растёт, и компании утыкаются в барьер, когда архитектура тестов становится сравнительно такого же уровня, как и архитектура приложения. Это же касается и автоматизации тестирования. Ключевыми проблемами становятся: - вопросы поддержки и тестирования многих инсталяций продукта на стороне заказчика - вопросы тестирования нескольких версий (бренчей) одного и того же продукта - повторн

Эволюция автотестирования на SeleniumSQALab

Автоматизированное тестирование верстки веб-сайтов, используя сравнение с диз...

SQALab

Как улучшить тесты на Selenium с помощью "визуального тестирования"?

Oksana Avchinnikova

Продукт XML2Selenium - это расширяемая, плагинная платформа для создания и управления автоматизированными тестами на основе технологии Java. XML2Selenium имеет интеграцию с JUnit, работает поверх Selenium (это изменяемо). XML2Selenim позволяет создавать автоматизированные тесты в простом и понятном обычному (без навыков программирования) QA инженеру формате. XML2Selenium позволяет также управлять всеми стадиями работы с автоматизированными тестами, начиная от стадии создания, и заканчивая управлением тестами. Главными конкурентными преимуществами являются - низкая стоимость вхождения. Начинающие автоматизаторы, и даже QA инженеры без навыков программирования создают качественные тесты, а значит легко поддерживаемые, легко изменяемые, с использованием DDT (Data Driven Testing) подходов, что увеличивает повторно-используемость тестов - встроенные возможности структуризации тестов по папкам и файлам, а также по тегам, что позволяет качественно отобразить документацию на тесты. Внедряя эту платформу, вы автоматически улучшаете свои процессы управления тестами - XML2Selenium это плагинная, расширяемая платформа, позволяющая кастомизировать процессы под ваши нужды, создать новые плагины, добавить интеграцию с нужными системами, и многое другое - все повторно-используемые части (инклюды, плагины) могут помещаться в репозитории, откуда ими могут пользоваться QA инженеры с других проектов компании, тем самым распространяется опыт и знания в области автоматизации - XML2Selenium имеет широкий спектр полезных свойств в области автоматизации, таких как поддержка создания видео, снепшотов и скриншотов страниц, Groovy и JS скриптинга, поддержки объектно-ориентированного программирования на XML, и многих других.

«Winium — это как Selenium, только под Windows» – Глеб Головин, 2ГИС

2ГИС Технологии

knockout.js

Anton Patrushev

Web driver история одной миграции

Igor Khrol

А вы знаете что тестируют ваши тесты?

SQALab

Как не положить тысячи серверов с помощью системы централизованного управлени...

Ontico

В 2012 году мы начали внедрение CFEngine в нашу инфраструктуру. Переход на централизованное управление конфигурацией в проектах такого масштаба подобен ремонту - его невозможно закончить, его можно только прекратить. И уже весной 2013 года (в день 404 ошибки и международного дня Интернета) этот "ремонт" превратился в катастрофу и был остановлен. После 3 суток недоступности портала нам пришлось изобрести схему, которая бы физически ограничивала возможность повторения катастрофы. Схема включает в себя тестирование политик на тестовых серверах различной важности и конфигурации. "Маринование" в этой тестовой среде сопровождается автоматизированным контролем характеристик нагрузки этих серверов. Далее происходит обязательный ревью и плавное распространение последовательно по всем датацентрам. В докладе будет рассказано: 1. почему мы выбрали CFEngine, а не Chief или Puppet; 2. как мы научили CFEngine быть дружелюбным (примеры политик и выдержки из библиотеки); 3. 100500 предпринятых мер, что бы не повторить "день 404" и соблюсти баланс между безопасностью и удобством; 4. как ещё можно использовать системы управления серверами.

Причины и способы имитации back-end'а

Oksana Avchinnikova

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

Сергей Татаринцев — Тестирование CSS-регрессий с Gemini

Yandex

Каждый разработчик интерфейсов долгоживущих сервисов сталкивается с регрессиями в вёрстке. Мы научились пользоваться инструментами для unit-тестирования js-кода, но до сих пор плохо понимаем, как тестировать на регрессии вёрстку. И ещё хуже понимаем, как делать это автоматически (continuous integration) и при этом писать небольшие и не очень хрупкие тесты. В этом году мы создали Gemini — инструмент для модульного тестирования вёрстки для нашей библиотеки компонентов. Мы используем его для тестирования внутренней библиотеки компонентов Яндекса, которая лежит в основе большинства наших сервисов (например, Поиска и Картинок). На BEMup я расскажу, как использовать этот инструмент — как разрабатывать тесты и запускать их на локальной машине или в уже существующей экосистеме (Travis CI, Sauce Labs).

Тестирование web-приложений на базе технологий Ruby/Cucumber/Watir Webdriver

Alex Mikitenko

Автоматизируем тестирование UI с Ruby, Cucumber и Selenium

SQALab

Cовременный контроль качества: давай сделаем это по-быстрому...Igor Khrol

Selenide – лаконичные тесты на Selenium 2 WebDriver + Java bindings

COMAQA.BY

Dependency Injection Andrey Stadnik(enemis)

Андрей Стадник

Test Driven Development in .NET ApplicationsAnton Vidishchev

Повышаем надёжность тестов через JavaScript

Igor Khrol

Автоматизация тестирования. Разбор конкретного примера - продукта XML2Selenium

jazzteam

Сотрудница компании JazzTeam провела ряд лекций в Гродненском государственном университете имени Янки Купалы. После конференции Solit-2013 в рамках ознакомительного тура по Беларуси для одного из англозычных докладчиков, руководство компании посетило Гродненский государственный университет имени Янки Купалы, где состоялось знакомство с руководством кафедры программного обеспечения интеллектуальных и компьютерных систем. В рамках продолжения отношений между компанией и кафедрой представитель компании JazzTeam провела несколько лекции по тематике разработки программного обеспечения. Лекции проходили в рамках заседания студенческого семинара “Информатика – Сегодня”, которые университет и кафедра проводят регулярно. Вторая лекция была проведена 28 марта 2013 года на тему “Автоматизация тестирования. Разбор конкретного примера – продукта XML2Selenium”. Лекция была больше направлена на практические аспекты, общение со слушателями и донесение до них необходимости писать тесты, автоматизировать процесс тестирования проекта, на примере фреймворка xml2selenium – разобрали ключевые проблемы автоматизации тестирования, рассмотрели стадии разработки ПО, Continious Integration, планы фреймворка xml2selenium на будущее. На лекциях присутствовало много людей, начиная от первокурсников до преподавателей. Лекции охватывали большой спектр вопросов, и все моменты были разобраны на примерах. Публика вела себя очень оживленно и интересовалась больше примерами из жизни, практическими навыками. Впечатления о проведенных лекциях остались самые положительные. Спасибо за интересные вопросы и обсуждения!

Добиваемся эффективности каждого из 9000+ UI-тестов - Максим Сахаров (Tutu.ru)

AvitoTech

Любой проект со временем растет и наполняется новыми функциональными возможностями. QA-процессы должны оперативно и адекватно на это реагировать. Например, увеличением количества тестов всех видов. В этом докладе мы будем говорить про UI-тесты, которые играют важную роль в создании качественного продукта. Количество тестов постепенно растет: от 1000 к 3000, от 6000 к 9000+ и т.д. Чтобы эта лавина не "накрыла" наш QA-процесс, нужно с самого раннего этапа развития проекта автоматизации думать про эффективность всей системы и каждого теста в ней. В этом докладе я расскажу, как сделать систему гибкой к изменениям, а также про эффективное использование каждого из тестов. Кроме того, мы поговорим про оценку и метрики не только процессов автоматизации, но и всего QA. Avito Automation Meetup (26.08.2017) https://avitotech.timepad.ru/event/542380/

«Свой PhoneGap за 15 минут», Алексей Охрименко (IPONWEB)

«Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (20)

Similar to «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)

Similar to «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt) (20)

More from Mail.ru Group

More from Mail.ru Group (20)

«Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)

Editor's Notes