Testing real Vue apps - Speaker Deck

Slide 1

Slide 1 text

Никита Соболев Enterprise-Ready шаблон для Vue

Slide 2

Slide 2 text

Talk is cheap, show me the code! bit.ly/wemake-vue 2

Slide 3

Slide 3 text

Поговорим про бизнес wemake.services/meta 3

Slide 4

Slide 4 text

С чего начитается любой проект? 4

Slide 5

Slide 5 text

Nuxt Gitlab CI Flow Docker Jest Jest eslint remark Vue Vuex Vue-Router Babel TestCafe stylelint JSDom 5

Slide 6

Slide 6 text

Все начинается с документации! bit.ly/wemake-vue-docs 6

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Мы любим разработчиков • Актуальные зависимости, via @dependabot • Поддержка VSCode прям сразу • Конфигурация проста как огурец • Чтобы заработало: одна или две команды 8

Slide 9

Slide 9 text

Простые решения Vue + Nuxt Vue \w SSR + Webpack 9

Slide 10

Slide 10 text

Находим ошибки рано • Actions • Mutations • API calls 10

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Я все-таки не понял. Почему не TypeScript? flow ~ TypeScript 12

Slide 13

Slide 13 text

Но есть некоторые проблемы • Не аннотируется this • Нельзя расширить существующие дефиниции • https://github.com/sobolevn/vue-flow-typed 13

Slide 14

Slide 14 text

Продолжаем находить ошибки рано @vue/test-utils + jest 14

Slide 15

Slide 15 text

О вкусах не спорят • eslint-config-wemake • eslint-plugin-vue • eslint-plugin-jsdoc • eslint-plugin-json • eslint-plugin-jest • eslint-plugin-security • eslint-plugin-flowtype • eslint-plugin-unicorn • stylelint • stylelint-scss • stylelint-cssmodules • remark 15

Slide 16

Slide 16 text

У нас блокирующие Pull Requests 16

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Все по-прежнему должно работать • TestCafe инициирует e2e тесты с настоящими браузерами • Запускается в ручном режиме при PR • Выполняется долго 18

Slide 19

Slide 19 text

Деплой • Можно статикой • Можно при помощи `yarn start` • Можно Docker 19

Slide 20

Slide 20 text

А что с backend? • Django с похожими принципами: bit.ly/wms-django • Koa / Express / etc • Elixir! 20

Slide 21

Slide 21 text

Развитие • Nuxt2 + Babel7 + Webpack4 • VSCode + Debugger • PWA 21

Slide 22

Slide 22 text

Мы предлагаем бесплатную поддержку [email protected] 22

Slide 23

Slide 23 text

Вопросы? github.com/sobolevn Никита Соболев bit.ly/wemake-vue