Борьба с багами
 

в реалиях
FrontEnd разработки

Максим Кожух

Бесполезная информация

Насекомые - самый успешный класс животных. 

На каждого из нас приходится 300кг

На каждые 2000 строк кода приходится 1 баг

На каждые 20 строк кода приходится 1 баг

Production

Development

Количество баго по времени

  • кодим-кодим-кодим
  • фиксим-кодим-фиксим
  • думаем

Что делать чтобы багов не было ?

- писать идеальный код

- написать много-много тестов

- пускай об этом думает QA

нет

нет

нет

TDD, BDD, прочее

Круто

- не тестирует внешний вид

- не тестирует поведение

- удваивает объем кода

- тестирует код

Не Круто

Первая линия обороны

Asserts

function show(date){
   //only dates in the past expected
   assert(date < new Date()); 

   calendar.select(date);
}

- ранний отлов ошибок

- хорошие error trace

- опциональны в production

Asserts

function show(count){
   //only dates in the past expected
   console.assert(list.childNodes.length < 10,
          "List item count is >= 10");

   list.load(count);
}

Первая линия обороны

jsHint

Проверка кода

- обязательно свои настройки

- интеграция с IDE

- малоэфективен без CI

Вторая линия обороны

Unit test

- без фанатизма

- только для сложных не UI модулей

- быстрые тесты

+ Mocha 

- Karma

- Jasmine

Вторая линия обороны

F.

- без фанатизма

- скриншоты наше все

- быстрые тесты

+ CasperJS

- Selenium

Вторая линия обороны

F.

- без фанатизма

- скриншоты наше все

- быстрые тесты

+ CasperJS

- Selenium

casper.
    start( url ).
    then(function(){

        // do something
        casper.click('button#open-dialog');

        // Take a screenshot of the UI component
        phantomcss.screenshot('#the-dialog',
                              'a screenshot of my dialog');

    });

Phantom CSS

CI - это не сложно

Drone.io

image: mkozhukh:drone
git:
  depth: 1
script:
  - npm install &>/dev/null
  - gulp lint --fail
  - gulp mocha
  - gulp test
notify:
  hipchat:
    room: Builds
    on_failure: true

Бездушные роботы

Gremlins.js

Production

rollbar.com

Бесполезная информация

Насекомые - появились
400 милионов лет назад

и процветают поныне

Люди приходят и уходят, а баги вечны.

Bug hunting in FrontEnd

By mkozhukh

Bug hunting in FrontEnd

Борьба с багами в реалях FrontEnd разработки

  • 4,260