Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CodeFest 2018. Илья Комса (Wargaming) — Танки, React, боль и унижение

CodeFest
April 05, 2018

CodeFest 2018. Илья Комса (Wargaming) — Танки, React, боль и унижение

Посмотрите выступление Ильи: https://2018.codefest.ru/lecture/1279/

— Как современные веб-технологии чувствуют себя в геймдеве?
— Чем веб-приложение в игровом клиенте отличается от традиционного?
— Почему Javascript разработчики в Wargaming плачут по ночам?

Я расскажу о внутриигровом браузере World Of Tanks, нашем рабочем процессе и особенностях и странностях разработки игровых режимов для клановых игроков на базе React.

CodeFest

April 05, 2018
Tweet

More Decks by CodeFest

Other Decks in Programming

Transcript

  1. Проблемы масштабирования разработки • Слишком сложно добавлять функционал в клиент

    • Слишком много хотели гейм-дизайнеры • Слишком мало успевали программисты • Слишком напряжно выкатывать обновления
  2. Chromium embedded framework • JS, CSS, HTML • Browser 

    Application • DevTools • import\export, async\await, wasm, CSS grid layout…
  3. Chromium embedded framework • JS, CSS, HTML • Browser 

    Application • DevTools • import\export, async\await, wasm, CSS grid layout…
  4. Webpack config for web gamedev • CSS in JS •

    Images in JS (base64) • 25 chunks • 35Mb total size
  5. File: components/index.js export Button from './Button/Button.jsx' export Icon from './Icon/Icon.jsx'

    ... // 60 more components ... ------------------------------------------ File: contaners/SomeContainer/SomeContainer.jsx import { Button } from ‘components’ class SomeClassUsingButton extends React.Component { … } Загадка
  6. Релизы World Of Tanks 2017 7 релизов 10-15 патчей GitHub

    2012 +-100 релизов в день Укрепрайоны 2017: >30 релизов
  7. Feature toggles Whatever.jsx … render() { if( featureEnabled(‘magic_wand’)){ return <ToHogwarts/>;

    } else { return <BackToCupboard/>; } } app_config.yaml feature_toggles: magic_wand: enabled: true
  8. Feature toggles Whatever.jsx … render() { if( featureEnabled(account, ‘magic_wand’)){ return

    <ToHogwarts/>; } else { return <UnderStairs/>; } } app_config.yaml feature_toggles: magic_wand: enabled: true beta: true