Критерии выбора
JS-фреймворков

Юрий Лучанинов / mobidev.biz

y.luchaninov@mobidev.biz

Наш опыт:

  • 220+ человек
  • 7 лет в бизнесе
  • Более 280 проектов

Офисы MobiDev:

Сан-Франциско, Харьков, Николаев, Черновцы, Мариуполь.

Почему JS?

Один кейс, два примера:

  • Enterprise
  • Startup

Все зависит от точки зрения:

  • Собственник программного продукта
  • Конечный пользователь
  • Разработчик

Заказчик

"Собственник программного продукта"

Критерии:

  • Бюджет проекта
  • Сроки
  • Реализация требуемого функционала
  • Удовлетворенность конечного пользователя

Бюджет проекта:

  • Создание
  • Поддержка

Бюджет - Создание:

Бюджет - Поддержка:

Сроки?

Сроки

Количество людей, владеющих технологией!

Конечный пользователель

"Тот, кто ничего не хочет знать о реализации"

Критерии:

  • "Нравится"
  • "Мне ЭТО надо"

Нравится:

  • "Не тормозит"
  • "Красиво и удобно"
  • "Выполняет все, что требуется, и так, как я этого ожидаю"

Разработчик

"Вы до сих пор серьезно считаете, что от вас многое зависит?"

"Редко кто из девелоперов задумывается о том, какие же критерии действительно важны для выбора фреймворка, и как эти критерии непосредственно влияют на бизнес, для которого разрабатывается приложение."

Производительность?

Что такое быстродействие?

"Чем быстрее, тем лучше"
в каждой фразе любой статьи

А на самом деле...

На самом деле

Производительность важна только в двух случаях:
  • Пользователь - "Не тормозит!"
  • Собственник - "Удовлетворяет функциональным требованиям!"

RAIL

  • Response - 100ms
  • Animation - 16ms
  • Idle - 50ms
  • Load - 1s

Именно поэтому:

“сколько FPS выдает фреймворк X или Y” бесполезно

Реально Важно:

  • Относительное быстродействие – если фреймворк X тормозит в похожем приложении у конкурентов, то какой примерно мы сможем получить прирост, если заменим на Y?
  • Возможность оптимизации - это позволит использовать ваше приложение на более слабых устройствах, то есть расширить покрытие.

Относительное быстродействие:

Относительное быстродействие:

Бюджет разработки:

  • Скорость разработки
  • “Расширяемость” – возможности использования сторонних модулей и необходимой адаптации стороннего кода
  • Комьюнити – чем оно больше, тем проще найти реализацию стандартных задач

Бюджет подержки:

  • "Самодостаточность"
  • Комьюнити

Для обоих Бюджетов:

"Write less, think more" - "Эргономика/Красота"
export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
    this.tick = this.tick.bind(this);
  }
  tick() {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      
{this.state.count}
); } } Counter.propTypes = { initialCount: React.PropTypes.number }; Counter.defaultProps = { initialCount: 0 };
@Component({
    selector: 'counter',
    template: '
{{count}}
' }) export class Counter { count = 0; tick(){ this.count += 1; } }
export Counter extend View {
    events = {
        'click div': 'tick'
    };
    counter = 0;
    tick(){
        this.counter +=1;
        this.render();
    }
}

FUN

  • Эргономика/Красота
  • Простота
  • Понятность
  • Мелочи, которые делают работу с кодом приятной и желанной

Итого:

  • Относительное быстродействие
  • Возможность оптимизации
  • Скорость разработки
  • Расширяемость
  • Самодостаточность

Итого:

  • Комьюнити
  • Краткость и прозрачность кода
  • Фан
  • Свитчинг/опыт
  • Модность + тренды + резюме

Что еще надо учитывать:

  • SEO
  • Социальные сети
  • Мобильная разработка

Как делать нельзя

Нельзя сравнивать, не зная специфики проекта

Правильно:

выбирать каждый инструмент, исходя из критериев конкретной поставленной задачи!

Алгоритм:

  1. Выяснить технические требования
  2. Выяснить НЕтехнические требования
  3. Выяснить приоритеты клиента
  4. Выставить весовые коэффициенты
  5. Провести сравнение

Шпаргалка

  • Энтерпрайз? - Angular 2
  • IT-контора? - React
  • Требуется продукт? - по требованиям
  • Если знаешь ТОЛЬКО ХХ - пиши на нем

Спасибо за внимание.

Вопросы?