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

Ад клиентской разработки на JavaScript

CUSTIS
November 07, 2019

Ад клиентской разработки на JavaScript

Выступление Георгия Минашина, нашего разработчика-эксперта, на конференции DotNext (Москва, 7 ноября 2019).

CUSTIS

November 07, 2019
Tweet

More Decks by CUSTIS

Other Decks in Programming

Transcript

  1. DotNext
    Москва, 7 ноября 2019
    Ад клиентской разработки
    на JavaScript
    Георгий Минашин
    Разработчик-эксперт

    View full-size slide

  2. Психотерапия

    View full-size slide

  3. Почему «ад»?

    View full-size slide

  4. Как было раньше

    View full-size slide

  5. Выбираем технологии
    для сайта

    View full-size slide

  6. Каркас для графического интерфейса

    View full-size slide

  7. Каркас для графического интерфейса
    Пакетный менеджер

    View full-size slide

  8. Каркас для графического интерфейса
    Пакетный менеджер
    Дополнительные зависимости

    View full-size slide

  9. Куда ставить npm?

    View full-size slide

  10. Компьютер
    разработчика
    Сервер
    для сборки
    и публикации
    Боевой
    сервер

    View full-size slide

  11. Компьютер
    разработчика
    Сервер
    для сборки
    и публикации
    Боевой
    сервер

    View full-size slide

  12. Компьютер
    разработчика
    Сервер
    для сборки
    и публикации
    Боевой
    сервер

    View full-size slide

  13. Продолжаем выбирать технологии
    для сайта

    View full-size slide

  14. Каркас для графического интерфейса
    Пакетный менеджер
    Дополнительные зависимости

    View full-size slide

  15. Каркас для графического интерфейса
    Пакетный менеджер
    Дополнительные зависимости
    AMD Common
    JS
    UMD
    ES6
    modules
    Системы модулей

    View full-size slide

  16. Каркас для графического интерфейса
    Пакетный менеджер
    Дополнительные зависимости
    Компоновка и минификация
    AMD Common
    JS
    UMD
    ES6
    modules
    Системы модулей

    View full-size slide

  17. Каркас для графического интерфейса
    Пакетный менеджер
    Дополнительные зависимости
    Компоновка и минификация
    Расширение каркаса
    AMD Common
    JS
    UMD
    ES6
    modules
    Системы модулей

    View full-size slide

  18. Каркас для графического интерфейса
    Пакетный менеджер
    Дополнительные зависимости
    Компоновка и минификация
    Расширение каркаса
    Статическая типизация
    AMD Common
    JS
    UMD
    ES6
    modules
    Системы модулей

    View full-size slide

  19. Каркас для графического интерфейса
    Пакетный менеджер
    Дополнительные зависимости
    Компоновка и минификация
    Расширение каркаса
    Статическая типизация
    AMD Common
    JS
    UMD
    ES6
    modules
    Системы модулей

    View full-size slide

  20. Это известная проблема

    View full-size slide

  21. Общая схема
    разработки на React

    View full-size slide

  22. Visual Studio

    View full-size slide

  23. React
    + Redux
    TypeScript
    Visual Studio

    View full-size slide

  24. React
    + Redux
    TypeScript
    npm
    Node.js
    Visual Studio

    View full-size slide

  25. webpack
    React
    + Redux
    TypeScript
    npm
    Node.js
    Visual Studio

    View full-size slide

  26. webpack
    React
    + Redux
    TypeScript
    npm
    Node.js
    bundle
    Visual Studio

    View full-size slide

  27. webpack
    React
    + Redux
    TypeScript
    npm
    Node.js
    bundle

    View full-size slide

  28. Мораль?

    View full-size slide

  29. А теперь наоборот:
    погружаемся в серверную
    разработку на .NET

    View full-size slide

  30. Каркас для графического интерфейса
    Пакетный менеджер
    Дополнительные зависимости
    Компоновка и минификация
    Расширение каркаса
    Статическая типизация
    AMD Common
    JS
    UMD
    ES6
    modules
    Системы модулей

    View full-size slide

  31. Каркас для приложения
    Пакетный менеджер
    Дополнительные зависимости
    Компоновка и минификация
    Расширение каркаса
    Статическая типизация
    AMD Common
    JS
    UMD
    ES6
    modules
    Системы модулей

    View full-size slide

  32. Каркас для приложения
    Пакетный менеджер
    Дополнительные зависимости
    Компоновка и минификация
    Расширение каркаса
    Статическая типизация
    AMD Common
    JS
    UMD
    ES6
    modules
    Системы модулей

    View full-size slide

  33. Каркас для приложения
    Пакетный менеджер
    Дополнительные зависимости
    Компоновка и минификация
    Расширение каркаса
    Статическая типизация
    AMD Common
    JS
    UMD
    ES6
    modules
    Системы модулей

    View full-size slide

  34. Каркас для приложения
    Пакетный менеджер
    Дополнительные зависимости
    Компоновка и минификация
    Расширение каркаса
    Статическая типизация
    Файл проекта csproj
    старый
    project
    .json
    csproj
    новый

    View full-size slide

  35. Каркас для приложения
    Пакетный менеджер
    Дополнительные зависимости
    Сборка
    Расширение каркаса
    Статическая типизация
    Файл проекта csproj
    старый
    project
    .json
    csproj
    новый

    View full-size slide

  36. Каркас для приложения
    Пакетный менеджер
    Дополнительные зависимости
    Сборка
    Объектно-реляционное отображение
    Статическая типизация
    Файл проекта csproj
    старый
    project
    .json
    csproj
    новый
    Dapper

    View full-size slide

  37. Каркас для приложения
    Пакетный менеджер
    Дополнительные зависимости
    Сборка
    Объектно-реляционное отображение
    Статический анализ
    Файл проекта csproj
    старый
    project
    .json
    csproj
    новый
    Dapper

    View full-size slide

  38. Каркас для графического интерфейса
    Пакетный менеджер
    Дополнительные зависимости
    Компоновка и минификация
    Расширение каркаса
    Статическая типизация
    AMD Common
    JS
    UMD
    ES6
    modules
    Системы модулей

    View full-size slide

  39. Разработка через StackOverflow

    View full-size slide

  40. Спасибо за внимание!
    Георгий Минашин
    [email protected]

    View full-size slide