ИИ-будущее фронтенд-разработки

В последние годы мир программирования развивается быстрыми темпами, и интеграция искусственного интеллекта в процесс разработки является одним из наиболее интересных достижений. Такие инструменты искусственного интеллекта, как ChatGPT, сделали работу по программированию более простой, чем когда-либо, и это имеет значительные последствия для будущего фронтенд-разработки. В связи с этим крайне важно изучить, как ИИ влияет на сферу программирования, в частности на фронтенд-разработку.

По мере того как мы продолжаем внедрять средства искусственного интеллекта в программирование, возникает множество вопросов, которые мы должны рассмотреть. Например, как это повлияет на то, как мы работаем? Изменит ли это природу фронтенд-разработки? Каковы последствия этого для бизнеса, разработчиков и конечных пользователей? Как трансформируется работа фронтенд-разработчика под воздействием ИИ? Вот некоторые из важнейших вопросов, которые мы рассмотрим, погружаясь в будущее фронтенд-разработки с использованием ИИ.

В своем видеоролике под названием "Я попробовал использовать ИИ. Это меня напугало" Том Скотт предлагает свой взгляд на потенциальное влияние ИИ в ближайшие годы. Он считает, что мы, возможно, находимся в начале сигмовидной кривой развития ИИ, которая может разрушить отрасли подобно тому, как Napster разрушил музыкальную индустрию в начале 2000-х годов. Это привело к тому, что компакт-диск устарел, и появилась потоковая передача музыки в том виде, в котором мы знаем ее сегодня. ИИ может существенно изменить наши представления о работе, жизни и взаимодействии с технологиями. Возможно, это даже приведет к тому, что некоторые области техники устареют.
По мере распространения средств искусственного интеллекта можно ожидать повышения уровня автоматизации инженерной деятельности. Это будет включать автоматизацию таких задач, как создание страниц, разработка компонентов и многое другое. Однако важно отметить, что роль каждого человека, работающего в инженерной сфере, будет заключаться в том, чтобы выполнять функции привратника на выходе этих инструментов. Инженеры будут отвечать за использование и максимальное применение этих инструментов.

С ростом автоматизации работа инженеров, скорее всего, сместится в сторону более стратегической направленности, с большим акцентом на решение проблем и принятие решений. В результате инженерам придется развивать новые навыки эффективного взаимодействия с инструментами ИИ и внедрять их в рабочий процесс, чтобы еще быстрее создавать ценности. Хотя эти изменения могут показаться пугающими, потенциальные преимущества работы с инструментами ИИ очень велики и могут привести к значительному прогрессу в области фронтенд-разработки.
ИИ означает "искусственный интеллект" и относится к компьютерным системам, способным выполнять задачи, похожие на человеческие, такие как обучение, решение проблем, распознавание образов, принятие решений и понимание языка.
- Спасибо ChatGPT за это определение искусственного интеллекта

Искусственный интеллект как таковой используется в качестве термина для обозначения множества инструментов и подходов к работе.
В целом ИИ принято делить на три стадии:
Искусственный узкий интеллект (ANI): шахматная программа, которая может выиграть у любого человеческого интеллекта, подумайте о Siri, Alexa - полностью доступна сегодня.
Искусственный общий интеллект (Artificial General Intelligence, AGI): ИИ способен выполнять действия, сравнимые с человеческими: свободно разговаривать, варить кофе, устраиваться на работу и делать ее хорошо. Мы еще не достигли этого уровня, ученые считают, что для полного раскрытия этого уровня нам потребуется еще несколько десятилетий, возможно, 2070 год.
Искусственный сверхинтеллект (ИСИ): На этом уровне ИИ будет учиться сам у себя и станет более интеллектуальным, чем человек, подумайте о фантастике - это в далеком будущем.

В нашем эпизоде "Рабочий проект", посвященном ChatGPT и инструментарию ИИ, Питер, Ванесса и я сформировали другой набор слоев, на которые способен инструментарий ИИ:
Оптимизация ввода (Recontextualize): Этот уровень включает в себя оптимизацию ввода на основе модели и запрашиваемой подсказки для данного контекста. Например, если пользователь предоставляет длинный текст, инструмент ИИ может быть использован для его обобщения и извлечения ключевой информации. Другой пример - перевод текста на другой язык или преобразование списка достижений в текст. Этот уровень полезен для автоматизации повторяющихся и трудоемких задач, позволяя инженерам сосредоточиться на более сложных проблемах.
Пересказ информации (Researching): Этот уровень предполагает пересказ информации, которой обучена модель, и включение ее в заданный контекст. В качестве примера можно привести отрывок из исторического события и сравнение его с другим событием. Говоря более инженерным языком, этот слой позволяет инструментальным средствам ИИ находить похожие случаи из того, что они узнали, и помещать их в контекст. Например, инструмент ИИ может помочь инженерам написать тесты модулей на основе заданных входных данных, найдя похожие случаи, которые уже тестировались ранее. Другой пример - получение ответа на вопрос, что такое RegEx для разбора адреса электронной почты, путем поиска схожих паттернов, изученных моделью ИИ.

Основой практически любого сайта или приложения сегодня является система дизайна в любом виде, как минимум описывающая тему и многократно используемые компоненты. Сначала остановимся на построении системы дизайна с использованием искусственного интеллекта.
Начиная с новой системы дизайна, можно получить представление и рекомендации по ее оптимизации, изучив существующие системы дизайна и их построение.
Инструментарий ИИ может быть использован для создания системы проектирования путем использования слоя синтеза для объединения нескольких точек данных и создания улучшенной версии. В потенциальный инструмент могут быть загружены данные о различных элементах дизайна, таких как цветовые схемы, типографика, взаимодействие компонентов, а также примеры существующих систем дизайна. На основе этих данных ИИ генерирует новую, целостную систему дизайна, соответствующую конкретным требованиям и ограничениям. Об этом мы поговорим ниже.
Инструментарий может быть использован для реконтекстуализации входных данных в соответствии с запрошенной подсказкой, например, для генерации вариантов кнопки в зависимости от различных контекстов, а также для обеспечения соответствия выходных данных конкретному контексту, в котором они используются.
Таким образом, искусственный интеллект имеет все шансы помочь в управлении системой проектирования и участвовать в создании ее активов. Но есть много-много камней, которые еще не перевернуты.
- Брэд Фрост, Системы проектирования в эпоху ИИ

Построение проектной системы - дело несложное. Достаточно спросить у ChatGPT. Флориан попытался создать систему дизайна с помощью ChatGPT. Я попробовал создать систему дизайна для сайта, посвященного беговым кроссовкам, и предоставить мне цветовую палитру и типографику. Результат получился весьма полезным.
Компоненты
Если взять это за основу системы дизайна, добавить немного дизайна для создания начальных компонентов или, что еще проще, попросить такой инструмент, как Midjourney, сгенерировать их, то это не такой уж большой шаг.
Хотя я и добился того, чтобы сгенерировать приличный выходной сигнал для компонента кнопки, это лишь вопрос опыта, разработки правильных команд и машины для получения правильных входных данных. Предположим, что на первом этапе вы обучаете свою модель на множестве существующих систем проектирования, которые можно найти через Design Systems Repo или аналогичные сервисы.
Затем вы создаете начальный компонент, скажем, кнопку, на основе стилей, сгенерированных ChatGPT с помощью инструмента, пока не достигнете желаемого уровня. Теперь вы можете использовать эту кнопку в качестве исходного компонента для следующего запроса, например, компонента карты.
Генерация любого последовательного компонента всегда будет соответствовать вашему стилю оформления. Всю тяжелую работу выполняет искусственный интеллект.

Инструмент Uizard позволяет автоматизировать процесс создания дизайна и компонентов на основе макетов. В статье 2021 Тони Белтрамелли рассказывает о технологии искусственного интеллекта, лежащей в основе Uizard и позволяющей ему преобразовывать изображения в редактируемые проекты.
Дизайн в код
Для дальнейшей оптимизации процесса разработки фронтенда инженеры могут использовать такие инструменты, как Fronty, для генерации кода на основе своих проектов. Этот искусственный интеллект позволяет создавать сайты на основе макетов и кода, избавляя инженеров от необходимости писать каждую строчку кода вручную.
После создания кода инженеры могут сосредоточиться на разделении его на управляемые компоненты, обеспечивая оптимизацию производительности и соответствие каждой части специфическим потребностям проекта. Использование искусственного интеллекта для автоматизации процесса генерации кода позволяет инженерам сэкономить время и сосредоточиться на более сложных аспектах разработки, что в конечном итоге приводит к ускорению и повышению эффективности проекта.
Одним из примеров такой эффективности является возможность генерировать код сразу для нескольких платформ. Инструмент способен предоставлять выходные данные как в виде компонента пользовательского интерфейса Swift, так и для React или другой библиотеки для веба.

Генерация веб-страниц
На веб-странице необходимо отобразить некоторые соответствующие данные. На основе этих данных автоматически генерируются новые типы страниц, что мы видим сегодня в полностью автоматически генерируемых персонализированных предложениях, создаваемых рекомендательными системами.
Переходя на новый уровень, искусственный интеллект может генерировать бесконечное множество страниц с динамическими типами страниц на основе предоставленных вами исходных данных, например, сигналов пользователей (аналитика) и KPI вашего бизнеса.

Вот его суть:
Сотрудничество: Работа с искусственным интеллектом
Суждение: контролировать результаты работы ИИ
Критическое мышление: Фокусировка на задачах высокого уровня
Индивидуальные решения: Интегрировать ИИ
Этическая ответственность: Обеспечение этичности использования ИИ
Позвольте мне объяснить это более подробно.
По мере того как ИИ будет все больше интегрироваться в разработку фронтенда, роль инженера будет смещаться в сторону сотрудничества и стратегии. Инженеры должны будут обладать навыками работы с искусственным интеллектом и создавать правильные подсказки для получения желаемого результата. Однако важно отметить, что результаты работы машин будут настолько хороши, насколько хороши потребляемые ими данные. Поэтому инженеры также будут играть важную роль в контроле результатов работы этих инструментов, обеспечивая соответствие генерируемых результатов контексту, в котором они используются, и их полезность для достижения желаемого результата. Более того, ваша роль как инженера будет смещаться от знания конкретных фронтенд-фреймворков к знанию конкретных инструментов Machine Learning.
Например, рассмотрим генерируемые компоненты для системы проектирования. Инженеры должны будут оценить необходимые варианты кнопок в заданном контексте, которые должен сгенерировать инструмент искусственного интеллекта. Они также должны будут оценить, насколько полезны сгенерированные варианты в том контексте, в котором они используются, и убедиться, что действия, вызываемые кнопками, правильно сопоставлены с взаимодействием с ними. По сути, инженеры будут выступать в роли важнейшего связующего звена между инструментами ИИ и конечным продуктом, используя возможности ИИ и одновременно привнося свой опыт и суждения для обеспечения оптимального результата.

Это может включать такие задачи, как проектирование сложных систем, оценка и выбор наиболее подходящих инструментов и технологий, оптимизация производительности и масштабируемости. Инженеры также должны будут понимать, как интегрировать ИИ в эти системы, оценивать потенциальное влияние и преимущества различных инструментов и технологий ИИ, а также разрабатывать индивидуальные решения для удовлетворения конкретных потребностей.
Кроме того, инженеры будут играть важную роль в обеспечении этичного и ответственного использования средств ИИ. Они должны знать о потенциальной предвзятости, которую могут внести инструменты ИИ, и работать над ее снижением. Они также должны будут следить за тем, чтобы инструменты ИИ использовались в соответствии с этическими нормами и передовым опытом.
В целом инженеры будущего должны быть высококвалифицированными, универсальными и адаптируемыми специалистами, способными работать в сотрудничестве с инструментами ИИ и в то же время привносить в работу свой уникальный опыт и взгляд на вещи. Таким образом, они будут способствовать развитию инноваций, повышению производительности труда и созданию более эффективных и результативных рабочих процессов разработки фронтенда.Помимо взаимодействия с инструментами ИИ и контроля генерируемых ими результатов, инженеры будущего, вероятно, будут уделять больше времени решению задач более высокого уровня, требующих критического мышления и принятия решений. После автоматизации рутинных и повторяющихся задач у инженеров появится возможность сосредоточиться на более сложных задачах и использовать свои навыки и опыт для решения более значимых проблем. Это приведет к тому, что роли дизайнеров пользовательского опыта и инженеров фронтенда станут более близкими.

Существует несколько веских причин, по которым стремление к будущему, в котором искусственный интеллект будет в большей степени интегрирован во фронтенд-разработку, может оказаться весьма полезным.
Во-первых, это может существенно повысить производительность и эффективность. Автоматизируя рутинные и повторяющиеся задачи, инженеры смогут сосредоточиться на более сложных задачах и использовать свои навыки и опыт для решения более значимых проблем. Это может привести к ускорению циклов разработки, сокращению времени выхода на рынок и, в конечном счете, к повышению конкурентоспособности и инновационности отрасли.

От генерации тем к компоновке, от компоновки к коду для нескольких платформ
Давайте снова обратимся к приведенному выше примеру с несколькими платформами: Представьте, что вы хотите создать систему дизайна, которая могла бы использоваться на нескольких платформах, таких как веб, iOS и Android. Сегодня для этого пришлось бы писать код несколько раз для каждой платформы. Однако с помощью средств искусственного интеллекта такая адаптация может быть выполнена автоматически. Создав систему проектирования один раз на одном языке, инженеры могут экспортировать код и предоставить машинам возможность перенести его на несколько языков для разных платформ. Это приведет к значительной экономии времени и средств, что позволит инженерам сосредоточиться на более сложных задачах и инновациях.
Во-вторых, это поможет решить проблему нехватки квалифицированных кадров в сфере разработки фронтендов. Благодаря инструментам искусственного интеллекта, выполняющим часть тяжелой работы, инженеры могут быть обучены более эффективной и результативной работе, что позволит им решать более сложные задачи и развивать более широкий спектр навыков.
В-третьих, это поможет снизить вероятность ошибок и несоответствий при разработке фронтенда. Автоматизируя такие задачи, как генерация кода и компонентов, инструменты искусственного интеллекта могут снизить вероятность человеческих ошибок и обеспечить последовательность и качество разработки.

Наконец, интеграция ИИ в разработку фронтенда может способствовать развитию инноваций и улучшению пользовательского опыта. Используя такие методы ИИ, как обработка естественного языка и компьютерное зрение, инженеры смогут разрабатывать более интеллектуальные, отзывчивые и персонализированные пользовательские интерфейсы, которые будут лучше соответствовать потребностям и предпочтениям пользователей.
В целом будущее, в котором искусственный интеллект будет в большей степени интегрирован в разработку фронтендов, может принести значительные выгоды, повысив производительность, решив проблему нехватки кадров, улучшив качество и согласованность, а также стимулировав инновации в отрасли.

Выход за рамки фронтенд-разработки
Помимо использования таких инструментов ИИ, как Fronty, для автоматизации проектирования до кода, существует множество других возможностей применения ИИ во фронтенд- и бэкенд-разработке. Например, ChatGPT можно использовать для автоматизации задач бэкенда, таких как генерация системных диаграмм, оптимизация проектов баз данных и создание сервисных сеток. С помощью искусственного интеллекта инженеры могут быстро и легко генерировать сложные схемы инфраструктуры и проекты баз данных, экономя время и силы в процессе разработки. Кроме того, ИИ может использоваться для автоматизации таких задач, как тестирование и развертывание, что позволяет инженерам сосредоточиться на решении задач более высокого уровня и инновациях. В качестве примера можно привести GitHub Copilot. Он "использует OpenAI Codex, чтобы предлагать код и целые функции в режиме реального времени, прямо из вашего редактора".
Попросите машину, и она вам подскажет.