Как мы делаем проекты: разработка вебсайтов

Если вы пропустили

Знакомство

Проектирование и прототипирование

Дизайн

Участники со стороны Лайв Тайпинг:

• аккаунт-менеджер;
• руководитель проекта;
• мобильные и веб-разработчики.

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

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

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

Чем занимаются разработчики сайтов

Фронтенд. Что там происходит

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

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

Хотя термины «фронтенд», «интерфейс» и «клиент» относятся к видимой части сайта или мобильного приложения, их можно ошибочно принять за синонимы. В этой статье каждый термин строго определён.

Базис пользовательского опыта закладывается на стадии дизайна. Однако пока набор созданных дизайнером элементов не пришёл в движение, это, скорее, концепция. За конечное впечатление пользователя от работы с вашим продуктом отвечает разработчик — специалист, который вдыхает в дизайн жизнь.

Если функциональность сайта позволяет, например, делать покупки, то сайт называется веб-сервисом. В них больше элементов и их сложнее создавать. Среди веб-сервисов, которые разработал Лайв Тайпинг — сайт для подбора летнего языкового лагеря для ребёнка LinguaCompass и сервис для подбора местных гидов Locals. Maps. Me.

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

Из каких уровней состоит фронтенд

Сложность реализации вашего продукта силами кода зависит от того, какие задачи он призван решать. Базовые технологии (HTML5, CSS и JavaScript) используются на всех видах, поэтому повторяться о них не будем. В Лайв Тайпинг веб-проекты делятся на три типа:

1. Промо-страницы (лендинги):
   
   1. создание анимаций;
   2. оптимизация скорости загрузки и работа на максимально возможном количестве устройств (чаще всего промо-страницы рассчитаны на максимальный круг потребителей, нежели продуктовый проект).
2. Типовые продукты:
   1. работа с конструктором сайтов (Webflow, Tilda, Readymag и т. д.);
   2. работа с CMS (Битрикс, Craft).
3. Уникальные кастомные проекты:
   1. работа с фронтенд-фреймворками;
   2. работа с API;
   3. работа с инструментами для создания Single Page Application (React, Angular, Vue.js);
   4. работа с инструментами для создания кроссплатформенных приложений (PhoneGap, React Native и другие фреймворки);
   5. работа с инструментами для создания Progressive Web Apps.

Воплощение каждого из таких проектов требует использования разных технологических стеков и, соответственно, разного опыта фронтенд-разработчика.

Бэкенд. Что там происходит

С бэкендом, в отличие от фронтенда, у пользователя взаимодействовать не получится: он состоит чаще всего из баз данных, хранящихся на сервере, и API, получающим запросы к этим базам от фронтенда и посылающим ему данные в ответ.

Если описывать смысл бэкенд-разработки максимально кратко и объективно, то он заключается в динамической манипуляции данными и динамической генерации контента. Клиент обращается к серверу за данными (например, браузер просит загрузить сайт через строку поисковой системы), из которых фронтенд «рисует» интерфейс. За то, чтобы ответ от сервера доходил до клиента, отвечают бэкенд-разработчики.

Нужен ли бэкенд вообще

Учитывая, что проекты делятся по сложности и технологическим требованиям, заметим, что на каких-то из них бэкенд нужен, а на каких-то — нет. Системы управления контентом (CMS) или некоторые веб-приложения имеют бэкенд внутри себя и не нуждаются в серверной части. Генераторы статического контента, такие как Hugo, Gatsby или Sphinx, на котором мы разрабатывали Tarantool, создают сайты за счёт единичного запуска утилиты, которая обрабатывает данные и шаблоны и выдаёт файл или набор файлов — и тоже обходятся без активного сервера. Но даже если браузер или приложение обращаются к серверу, то работа последнего подчас сводится только к отдаче файлов или страницы без постоянного общения с клиентом, и о бэкенде как о технологии для динамической работы с данными здесь говорить не приходится.

Ответ на вопрос, нужен ли бэкенд вашему проекту, доверьте нашим аналитикам и тимлидам.

Разработка приложений похожа на разработку сайтов? В крайне общих чертах. Читайте дальше.