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

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

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

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

Transcript

1. Танки, React, боль и унижение Илья Комса Wargaming.net
2. Укрепрайоны
4. Проблемы масштабирования разработки • Слишком сложно добавлять функционал в клиент • Слишком много хотели гейм-дизайнеры • Слишком мало успевали программисты • Слишком напряжно выкатывать обновления
5. Chromium embedded framework • JS, CSS, HTML • Browser  Application • DevTools • import\export, async\await, wasm, CSS grid layout…
6. Chromium embedded framework • JS, CSS, HTML • Browser  Application • DevTools • import\export, async\await, wasm, CSS grid layout…
9. • Above the fold optimization • Critical rendering path • Lazy loading
10. Webpack config for web gamedev • CSS in JS • Images in JS (base64) • 25 chunks • 35Mb total size
11. 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 { … } Загадка
12. МачетеJavascript убивает • (10Tb лишнего кода) / (8Mbit/s средней скорости) = 121 суток чьей-то жизни
13. Релизы World Of Tanks 2017 7 релизов 10-15 патчей GitHub 2012 +-100 релизов в день Укрепрайоны 2017: >30 релизов
14. Релизы • Игроки играют • Тестировщики тестируют • Локализаторы локализуют
16. Feature toggles Whatever.jsx … render() { if( featureEnabled(‘magic_wand’)){ return <ToHogwarts/>; } else { return <BackToCupboard/>; } } app_config.yaml feature_toggles: magic_wand: enabled: true
17. 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
20. That’s all, folks! twitter.com/ vk.com/ facebook.com/ linkedin.com/in/ github.com/ v1vendi