Типы без границ

фронтенд-разработка с GraphQL и умным компилятором

О чём доклад?

Вроде про GraphQL и Elm...

О чём доклад?

На самом деле...

Сложность.
Ограничения.
Developer Experience.
Trade-offs.

План

Кратко про GraphQL.
Кратко про Elm.
GraphQL-типы в IDE разработчика: как рассказать компилятору, что ждёт БД от фронта.
Выводы и впечатления от работы с таким стэком.
Рекомендации желающим разобраться подробнее.

GraphQl

Гибкое API: фронтенду хорошо, бэкенду тоже неплохо
Типизировано, документировано
Спецификация: реализуй сам
Запросы, мутации, подписки
Хорошо для агрегирования данных

Почему компилируют в JS?

Что такое программирование?
Управление сложностью.
It's all about predictability.
В JS сложно управлять сложностью.

Managing complexity is the most important technical topic in software development. In my view, it's so important that Software's Primary Technical Imperative has to be managing complexity. Complexity is not a new feature of software development.
― Steve McConnell, Code Complete

JS, the bad parts

Слово создателю

JS, the bad parts

Нельзя просто взять и исправить язык — сломается Веб.
Много языковых возможностей — много возможностей делать плохо.

Что можно убрать из языка?

Циклы
Присваивание
Мутации
Инструкции (statements)
Объекты
Классы
return и множественный возврат
Сайд-эффекты

Что можно убрать из языка?

null
undefined
NaN

Как так? 😱

Циклы → Функции (рекурсия, HoF)
Присваивание → Связывание
Мутации → Иммутабельные структуры данных
Инструкции (statements) → Выражения (expressions)
Объекты → Модули, замыкания
Классы → Типы, хэш-мапы
return и множественный возврат → Единичный возврат без return
Сайд-эффекты → Управляемые (managed) эффекты
null, undefined, NaN → Явная обработка (Maybe/Option)

Elm

A delightful language for reliable web applications.

Типы

Для моделирование предметной области.

Типы

Пример: да-нет.


                type Bool = True | False
                if isReady then go() else stop()

Типы

Пример: светофор.


                type TrafficLights = Red | Yellow | Green

                tlAction tl =
                    case tl of
                        Red -> "Stop"

                        Yellow -> "Prepare"

                        Green -> "Go"

Типы

Пример: загрузка данных

источник

Типы

Пример: загрузка данных


type RemoteData error value
    = NotAsked
    | Loading
    | Failure error
    | Success value

How Elm Slays a UI Antipattern

Типы

Пример: загрузка данных


viewPostsOrError model =
    case model.posts of
        RemoteData.NotAsked ->
            text ""

        RemoteData.Loading ->
            h3 [] [ text "Loading..." ]

        RemoteData.Success posts ->
            viewPosts posts

        RemoteData.Failure httpError ->
            viewError (buildErrorMessage httpError)

Типы

Пример: GraphQL


type alias User =
    { name : Maybe String
    , account : Eos.Name
    , avatar : Avatar
    }

selectionSet =
    SelectionSet.succeed User
        |> with User.name
        |> with User.account
        |> with (Avatar.selectionSet User.avatar)