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. Танки, React, боль и унижение
    Илья Комса
    Wargaming.net

    View full-size slide

  2. Укрепрайоны

    View full-size slide

  3. Проблемы масштабирования разработки
    • Слишком сложно добавлять функционал в клиент
    • Слишком много хотели гейм-дизайнеры
    • Слишком мало успевали программисты
    • Слишком напряжно выкатывать обновления

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. • Above the fold optimization
    • Critical rendering path
    • Lazy loading

    View full-size slide

  7. Webpack config for web gamedev
    • CSS in JS
    • Images in JS (base64)
    • 25 chunks
    • 35Mb total size

    View full-size slide

  8. 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 {

    }
    Загадка

    View full-size slide

  9. МачетеJavascript убивает
    • (10Tb лишнего кода) / (8Mbit/s средней скорости) = 121 суток
    чьей-то жизни

    View full-size slide

  10. Релизы
    World Of Tanks 2017
    7 релизов
    10-15 патчей
    GitHub 2012
    +-100 релизов в день
    Укрепрайоны 2017: >30 релизов

    View full-size slide

  11. Релизы
    • Игроки играют
    • Тестировщики тестируют
    • Локализаторы локализуют

    View full-size slide

  12. Feature toggles
    Whatever.jsx

    render() {
    if( featureEnabled(‘magic_wand’)){
    return ;
    } else {
    return ;
    }
    }
    app_config.yaml
    feature_toggles:
    magic_wand:
    enabled: true

    View full-size slide

  13. Feature toggles
    Whatever.jsx

    render() {
    if( featureEnabled(account, ‘magic_wand’)){
    return ;
    } else {
    return ;
    }
    }
    app_config.yaml
    feature_toggles:
    magic_wand:
    enabled: true
    beta: true

    View full-size slide

  14. That’s all, folks!
    twitter.com/
    vk.com/
    facebook.com/
    linkedin.com/in/
    github.com/
    v1vendi

    View full-size slide