Moscow Jenkins Meetup #1. Pipeline для инженеров. Обзор экосистемыOleg Nenashev
Рассказ о Configuration as Code в Jenkins и возможностях Pipeline: DSL, Multi-Branch, Pipeline Model Definition, восстановление после ошибок, параллелизация задач, интеграции. В каком направлении развивается экосистема?
Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular"Fwdays
В докладе расскажу о шишках, набитых в процессе настройки SEO для конкретного проекта. Речь пойдет о настройке SEO для своего одностраничного приложения как с привлечением сторонних сервисов, так и самостоятельно, используя PhantomJS или рендеринг на стороне сервера. Также, поделюсь особенностями размещения share-кнопок от различных провайдеров.
"Web Vitals monitoring & optimizations", Erik HimiranovFwdays
Performance is one of the key factors in determining a product's user experience. It is very important that the site loads quickly, is responsive and interactive, and the content remains stable.
I want to share why you need to monitor application performance, talk about Web Vitals metrics and tools for measuring them.
I also want to tell you about examples of optimizations that can positively affect performance and what results it can bring.
"Prom.ua shopping cart workflow as a microfrontend", Danylo KazymyrovFwdays
For a long time, the Prom.ua shopping cart was part of a monolith. After migration to SSR there was a need to reuse it and make it a separate application.
In my talk, I will tell about the approach to building interaction between frontend applications and show how we applied it to Prom.ua shopping cart.
Jenkins Imperative Pipeline vs Declarative Pipeline Кирилл Толкачёв
Презентация со встерчи JUG MSK про Groovy DSL
Проводитили сравнение новой фичи Jenkins – Declarative Pipelines путем попытки переписать уже существующий пайплайн по доставке ПО на декларативный. Описали подводные камни и обсудили проблемы.
Видео можно будет найти тут https://vk.com/jugmsk или тут https://plus.google.com/communities/115981831554057619568
Presentation from https://heisenbug-piter.ru/en/talks/2018/spb/kkw6oivsoywayacggksmk/
Once upon a time, we got a requirement to finish all testing in 2 days despite the number of tests to run. That number grew, and grew, and grew, and now there are tens of millions of them. So this is a story about building a dam against the never-ending flood which turned out to be not that scary. You are very welcome to join and see it for yourself.
Полной автоматизацией процесса сборки приложения уже никого не удивишь. Не в последнюю очередь благодаря Maven – системе управления жизненным циклом проекта. Однако проекты растут очень быстро: увеличивается количество модулей, тестов, зависимостей, используемых плагинов. И всего лишь за год легковесный проект, на сборку которого уходило 5 минут, превращается в монстра, который пожирает время разработчиков 30-минутной сборкой. Чтобы справится с этой проблемой разработчикам приходится постоянно чистить свой код и бороться со скоростью выполнения тестов. Это верное решение, но не следует забывать о том, что и сам процесс сборки можно улучшить. В этом докладе будет рассмотрено, как при помощи простых и нехитрых шагов можно оптимизировать работу с зависимостями и обогатить скрипты сборки полезными плагинами. Также будут обсуждаться тонкости конфигурации основных плагинов и особенности работы с командной строкой, которые появились в последней версии Maven.
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33MoscowJS
В 2016 году интернет-изданиям недостаточно просто писать интересные материалы, нужно быстро и качественно их оформлять и показывать на разных устройствах. Я расскажу о нашем опыте создания JS-редактора, с помощью которого ежедневно публикуются десятки постов для 3 миллионов читателей.
Сергей Татаринцев — Тестирование CSS-регрессий с GeminiYandex
Каждый разработчик интерфейсов долгоживущих сервисов сталкивается с регрессиями в вёрстке. Мы научились пользоваться инструментами для unit-тестирования js-кода, но до сих пор плохо понимаем, как тестировать на регрессии вёрстку. И ещё хуже понимаем, как делать это автоматически (continuous integration) и при этом писать небольшие и не очень хрупкие тесты. В этом году мы создали Gemini — инструмент для модульного тестирования вёрстки для нашей библиотеки компонентов. Мы используем его для тестирования внутренней библиотеки компонентов Яндекса, которая лежит в основе большинства наших сервисов (например, Поиска и Картинок). На BEMup я расскажу, как использовать этот инструмент — как разрабатывать тесты и запускать их на локальной машине или в уже существующей экосистеме (Travis CI, Sauce Labs).
Александр Русаков - TypeScript 2 in actionMoscowJS
В докладе речь пойдет об основных нововведениях TypeScript 2.0 и 2.1 (literal types, discriminated unions, mapped types...) и их использовании в реальных проектах.
«Continuous Integration — A to Z или Непрерывная интеграция — кто всё сломал?»FDConf
Доклад о том, зачем нужен CI, как он интегрируется в процесс разработки. В докладе есть небольшое демо о весьма известном cloud-based CI сервисе Travis-CI. В процессе демо будет «поломан» билд и затем сразу же починен. Весьма показательно в том плане, что это доказывает простоту всей технологии.
Тестируй это / Виктор Русакович (GP Solutions)Ontico
РИТ++ 2017, Frontend Сonf
Зал Дели + Калькутта, 5 июня, 18:00
Тезисы:
http://frontendconf.ru/2017/abstracts/2625.html
Как писать тесты?
Как запускать тесты?
Кто все сломал?
Все три вопроса рассмотрены в докладе. Также будет демо интеграции проекта, покрытого тестами, и cloud-based-сервиса по запуску этих тестов (github+travis).
Кроме того, расскажу об опыте по сокращению времени прогона тестов; о том, как добавить тесты в случае, если у вас уже есть большое приложение, но все еще без тестов.
Release management with Gradle #JokerConf2016Кирилл Толкачёв
Talk about Gradle. Best practice and Caveats.
Share build logic between project/team and discuss about result
Use netflix #nebula plugins.
Create super gradle plugin for apply other plugin and configure tasks by one line.
Zerg Rush strategy for developers - it`s good or bad? May be ugly? :)
And other topics and questions...
Готовим тестовое окружение, или сколько тестовых инстансов вам нужно / Алекса...Ontico
HighLoad++ 2017
Зал «Кейптаун», 8 ноября, 10:00
Тезисы:
http://www.highload.ru/2017/abstracts/2914.html
Казалось бы, что нужно для организации тестового окружения? Тестовая железка и копия боевого окружения - и тестовый сервер готов. Но как быть, когда проект сложный? А когда большой? А если нужно тестировать одновременно много версий? А если все это вместе?
Организация тестирования большого развивающегося проекта, где одновременно в разработке и тестировании около полусотни фич - достаточно непростая задача. Ситуация обычно осложняется тем, что иногда есть желание потрогать еще не полностью готовый функционал. В таких ситуациях часто возникает вопрос: "А куда это можно накатить и где покликать?"
...
Talk about Gradle in a big company. Best practice and Caveats.
How to share build logic between projects and teams.
Netflix way to solve this problem with #nebula plugins.
Create your own super gradle plugin for apply other plugins and configure tasks by one line.
Zerg Rush strategy for developers - it`s good or bad? May be ugly? :)
And other topics and questions...
Автоматизация тестирования в iOS-проекте на примере ICQ / Д.Куркин, М.Манаев ...Ontico
РИТ++ 2017, AppsConf
Зал Найроби + Касабланка, 5 июня, 16:00
Тезисы:
http://appsconf.ru/2017/abstracts/2807.html
- Как мы решили связаться с автоматизацией тестирования и что из этого вышло.
- Наша инфраструктура для тестирования. Что тестируем, как тестируем и как следим за результатами.
- Как получать пользу от автоматизации, если продукт сильно меняется минимум раз в год.
- Особенности текущего инструментария. Что стоит учитывать и на что обратить внимание.
Привет, Санкт-Петербург!
В разгар летнего сезона, мы поговорим об историях обновлений,
например, с 6.4 до 7.х, с разными трюками, а также об истории исследования разных регрессий на продуктах Atlassian и других плагинов.
Наша программа будет пополняться, и мы рады к сотрудничеству.
Ждем Вас на встрече в Яндекс Деньгах.
Изоморфные React-приложения производительность и масштабирование / Денис Изма...Ontico
Взглянем ещё раз на концепцию изоморфных приложений. На первый взгляд, всё красиво — полный порядок, высокая организованность, быстрая выдача результата. Но так ли всё оптимистично? Что случится после того, как мы развернём приложение на сервере? Почему при росте нагрузки наше React-приложение начинает тормозить? Как масштабироваться? Купить ещё несколько серверов? Потом ещё немного? Есть способ лучше.
В рамках доклада рассмотрим следующие темы:
1. Что представляют собой изоморфные приложения?
2. Зачем они на самом деле нужны?
3. Рассмотрим варианты архитектуры.
4. Найдём слабые места (bottleneck).
5. Посмотрим на способы решения и оценим их эффективность.
6. Обсудим возможности масштабирования изоморфных приложений.
7. И, самое главное, ответим на вопрос — стоит ли игра свеч?
Similar to Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, MoscowJs 33 (20)
Виктор Розаев - Как не сломать обратную совместимость в Public APIMoscowJS
Представьте что у вас есть публичный JavaScript API. Им пользуются сторонние девелоперы от Индии до Канады, чтобы писать свои облачные сервисы. Эти сервисы продают телекомуникационные компании с многомиллиардными оборотами превышающими стоимость вашей компании. Любая остановка сервиса - миллионные убытки. Представили? А нам и представлять не надо - это наша работа. Добро пожаловать в нашу реальность. В рамках доклада мы расскажем о том, как сохранить обратную совместимость при активном развитии и неизвестных пользователях, ну и причем тут вообще интерны.
Контекст в React, Николай Надоричев, MoscowJS 31MoscowJS
Контекст стал документированной фичей сравнительно недавно, но его использование либо осуждается, либо не понимается. Такие библиотеки как react-redux или react-router успешно используют для своих нужд. В докладе рассмотрим основные аспекты работы с контекстом: зачем он нужен и какие проблемы решает.
Верстка Canvas, Алексей Охрименко, MoscowJS 31MoscowJS
Зачем? Как и когда нужно создавать пользовательский интерфейс с помощью Canvas и как обогнать React Native - обо всем этом вы узнаете из этого доклада.
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31MoscowJS
This document discusses progressive web apps and how they can work offline through the use of service workers and caching. It provides examples of how to register a service worker to cache assets and provide offline fallback pages. It also covers how to implement features like sync, app manifests, and install prompts to make the web app experience more app-like.
Команда разработчиков Angular2 провела огромную работу над Change Detector, он стал быстрым и "умным". В докладе рассмотрим две основные фазы Angular2 приложения, куда все таки делся $apply(), и почему Angular2 обещает быть фантастически быстрым (в сравнении с AngularJs).
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...MoscowJS
При увеличении количества проектов в компании, разработчики сталкиваются с задачей унификации кодовой базы. Решением подобной задачи может быть библиотека, фреймворк или общий набор компонент. Такой инструмент позволит разработчикам сконцентрироваться только на новых задачах, избежать дублирования кода и повысить производительность.
В HeadHunter с такой задачей столкнулись в 2014 году. Решением данной проблемы стало создание унифицированной библиотеки компонент, которая успешно используется на всех проектах HH. В своем докладе я хотел бы поделиться опытом развития библиотеки, проблемами, которые возникали при разработке, и их последовательным решением.
"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29MoscowJS
Разработчики давно ищут способы оптимизации размера изображения без потери качества. Если вы готовы пуститься во все тяжкие, я расскажу как это сделать. Профит гарантирован!
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29MoscowJS
Для большинства пользователей мобильный интернет полон боли и страданий. При том что пользователей становится только больше — проблема не решается, а становится острее. Вас ожидает увлекательнейший доклад о том, как удалось разогнать до космической скорости мобильную Lenta.ru.
"Подход к написанию безопасного клиентского кода на примере React", Иван Елки...MoscowJS
The document discusses approaches to writing secure frontend code in React. It outlines common client-side vulnerabilities like XSS and how to prevent them. Specifically, it discusses escaping user input, using safe templating, and only allowing known attributes in React to prevent vulnerabilities.
29. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
30. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
31. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
32. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
3. Сборка скриншотов с сайта
37. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
3. Сборка скриншотов с сайта
38. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
3. Сборка скриншотов с сайта
$ git checkout 07e2422ce4e23b --force
4. Получение конкретного коммита
39. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
3. Сборка скриншотов с сайта
$ git checkout 07e2422ce4e23b --force
4. Получение конкретного коммита
5. Сборка и запуск проекта
$ npm run build && rails -s
40. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
3. Сборка скриншотов с сайта
$ git checkout 07e2422ce4e23b --force
4. Получение конкретного коммита
5. Сборка и запуск проекта
$ npm run build && rails -s
6. Сборка скриншотов с сайта
42. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
3. Сборка скриншотов с сайта
$ git checkout 07e2422ce4e23b --force
4. Получение конкретного коммита
5. Сборка и запуск проекта
$ npm run build && rails -s
6. Сборка скриншотов с сайта
43. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
3. Сборка скриншотов с сайта
$ git checkout 07e2422ce4e23b --force
4. Получение конкретного коммита
5. Сборка и запуск проекта
$ npm run build && rails -s
6. Сборка скриншотов с сайта
7. Сравнение скриншотов и поиск отличий
45. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
3. Сборка скриншотов с сайта
$ git checkout 07e2422ce4e23b --force
4. Получение конкретного коммита
5. Сборка и запуск проекта
$ npm run build && rails -s
6. Сборка скриншотов с сайта
7. Сравнение скриншотов и поиск отличий
46. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
3. Сборка скриншотов с сайта
$ git checkout 07e2422ce4e23b --force
4. Получение конкретного коммита
5. Сборка и запуск проекта
$ npm run build && rails -s
6. Сборка скриншотов с сайта
7. Сравнение скриншотов и поиск отличий
8. Отправка отчета с картинками в slack
49. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
3. Сборка скриншотов с сайта
$ git checkout 07e2422ce4e23b --force
4. Получение конкретного коммита
5. Сборка и запуск проекта
$ npm run build && rails -s
6. Сборка скриншотов с сайта
7. Сравнение скриншотов и поиск отличий
8. Отправка отчета с картинками в slack
50. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
3. Сборка скриншотов с сайта
$ git checkout 07e2422ce4e23b --force
4. Получение конкретного коммита
5. Сборка и запуск проекта
$ npm run build && rails -s
6. Сборка скриншотов с сайта
7. Сравнение скриншотов и поиск отличий
8. Отправка отчета с картинками в slack
53. Проблема #1 - BackstopJS из коробки не для команды
53
Как предлагают сделать создатели BackstopJS
54. Проблема #1 - BackstopJS из коробки не для команды
54
Как предлагают сделать создатели BackstopJS
1. Вы делаете эталонные скриншоты на своей машине.
55. Проблема #1 - BackstopJS из коробки не для команды
55
Как предлагают сделать создатели BackstopJS
2. Делаете commit и отправляете их в репозитарий.
1. Вы делаете эталонные скриншоты на своей машине.
56. Проблема #1 - BackstopJS из коробки не для команды
56
Как предлагают сделать создатели BackstopJS
Как есть на самом деле
2. Делаете commit и отправляете их в репозитарий.
1. Вы делаете эталонные скриншоты на своей машине.
57. Проблема #1 - BackstopJS из коробки не для команды
57
Как предлагают сделать создатели BackstopJS
Как есть на самом деле
2. Делаете commit и отправляете их в репозитарий.
1. Вы делаете эталонные скриншоты на своей машине.
3. Другой разработчик сливает себе скриншоты.
58. 4. Запускает тесты и они падают, так как у него windows,
а у вас unix и сайт рисуется по-разному.
Проблема #1 - BackstopJS из коробки не для команды
58
Как предлагают сделать создатели BackstopJS
Как есть на самом деле
2. Делаете commit и отправляете их в репозитарий.
1. Вы делаете эталонные скриншоты на своей машине.
3. Другой разработчик сливает себе скриншоты.
63. Проблема #3 - Удобство для команды
63
1. Сообщение должно быть сжатым и информативным.
64. Проблема #3 - Удобство для команды
64
2. Нужно облако для картинок или доступ к серверу через web.
1. Сообщение должно быть сжатым и информативным.
69. Минусы
69
3. Реальная польза только на ранее реализованном функционале.
2. Несколько раз переписывал функционал.
1. Потратил много времени - две или три недели.
70. Минусы
70
3. Реальная польза только на ранее реализованном функционале.
2. Несколько раз переписывал функционал.
1. Потратил много времени - две или три недели.
Все минусы - на этапе внедрения.
74. Плюсы
74
3. Все делается в автоматическом режиме, не нужно следить.
2. Появилась возможность проверить за собой без QA.
1. Уже выявили несколько косяков до релиза.
75. Плюсы
75
3. Все делается в автоматическом режиме, не нужно следить.
2. Появилась возможность проверить за собой без QA.
1. Уже выявили несколько косяков до релиза.
4. Повысилось качество работы разработчиков.
76. Плюсы
76
3. Все делается в автоматическом режиме, не нужно следить.
2. Появилась возможность проверить за собой без QA.
1. Уже выявили несколько косяков до релиза.
4. Повысилось качество работы разработчиков.
Все плюсы - после внедрения.
84. Материалы из презентации и контакты
84
Контакты, ссылки по теме
и сама презентация
Адрес для любых вопросов
и предложений
Профиль linkedin https://ru.linkedin.com/in/kondratenkopa
iam@kondratenko.me
http://goo.gl/UNeQV2