На чем писать веб приложение
Перейти к содержимому

На чем писать веб приложение

  • автор:

На каких языках программирования пишут backend?

На каких языках программирования пишут backend?

Дмитрий Степанов

Дмитрий Степанов Системный архитектор ABCSolutions (бренд Goodt)

Во frontend лидирует JavaScript, а в backend все разнообразнее. Технологий десятки, для каждой задачи — своя. Разбираемся, какие языки в backend-разработке используют чаще всего. В бэкенде выделяются несколько востребованных языков: PHP, Java, Python, Ruby, JavaScript, C# и Go. Например, JavaScript активно используется для создания динамичных веб-приложений, в то время как Python славится своей простотой и расширенной библиотекой. Ruby с фреймворком Ruby on Rails подходит для быстрой разработки, в то время как Java обеспечивает надежность и масштабируемость. C# ориентирован на Windows-платформу, а Go – на высокую производительность. PHP остается одним из основных выборов для создания динамических веб-страниц на серверном языке. Для небольших проектов выбор языка программирования для серверной части может показаться незначительным. Времена сложных конфигураций и XML ушли в прошлое, а с современными MVC-фреймворками разработчики могут легко создать простое приложение на практически любом из указанных языков. Однако, при более серьезных задачах стоит учитывать особенности каждого языка и его способность эффективно решать поставленные задачи.

Каким должен быть язык для backend?

Backend переводится с английского как «задний, дальний край» и означает внутреннюю, серверную часть сайта или приложения, которая не видна пользователю. Она соединяет клиента и базу данных и отвечает за взаимодействие между сервером и интерфейсом. Во frontend главное требование к языку — способность работать в браузере, в backend важны удобство, скорость и производительность. А еще — то, насколько язык подходит для конкретной задачи.

Fullstack-разработчик на Python

Fullstack-разработчики могут в одиночку сделать IT-проект от архитектуры до интерфейса. Их навыки востребованы у работодателей, особенно в стартапах. Научитесь программировать на Python и JavaScript и создавайте сервисы с нуля.

картинка - 2023-03-14T190323.524

Профессия / 12 месяцев
Fullstack-разработчик на Python
Создавайте веб-проекты самостоятельно
4 116 ₽/мес 7 483 ₽/мес

dffsdd (3)

Универсальной технологии не существует: под каждую выбирается своя, со своими преимуществами и недостатками. Для больших проектов обычно выбирают Java, средних — PHP, а быстро развивающихся стартапов — Ruby или Go. Почему так — читайте дальше.

PHP

По данным W3Techs, в 2022 году это один из самых знаменитых веб-языков, на котором написано 77,4% всех сайтов в мире. На момент появления у PHP не было аналогов. Ни один язык не мог динамически подгружать данные и «собирать» их в веб-страницы. Сейчас появились другие технологии, но PHP — по-прежнему классика.

Преимущества

  • Популярность и относительная простота изучения. PHP дружелюбен к новичку, прощает ошибки, легко устанавливается и настраивается по сравнению с рядом других сред.
  • Язык динамически типизируется, разобраться в его основах легко, а большое сообщество и количество материалов упрощают изучение.

Недостатки

  • Из-за динамической типизации PHP бывает непредсказуемым и неочевидным при чтении.
  • Его нелегко масштабировать, поэтому для быстро меняющихся проектов язык подходит плохо.
  • По сравнению с другими технологиями он достаточно медленный — и в работе, и в скорости отладки.
  • Опытные программисты часто ругают PHP за архитектуру: язык развивался не целенаправленно, а хаотично, поэтому некоторые принципы кажутся нелогичными.

Применение

Это универсальный язык для веб-разработки. На PHP написано огромное количество «старых» проектов, например Википедия, Viber или Facebook*.

Сейчас используются современные версии PHP, лишенные части недостатков, поэтому PHP — хороший вариант для начинающих.

О том, почему в 2023 году стоит учить PHP и как это сделать, мы рассказали в статье.

Станьте веб-разработчиком и найдите стабильную работу на удаленке

C# + ASP.NET

ASP.NET — это фреймворк от Microsoft для разработки веб-приложений, который работает с языком C# и платформой .NET, а также с Visual Basic и F#. Он бесплатный, и кроссплатформенный. По рейтингу W3Techs сейчас он второй по популярности после PHP — на нем написано 7,7% сайтов.

C# похож похож на Java, но в нем есть некоторые функции C++, которых нет в Java. C# проще С++: например, в нем есть сборщик мусора, который облегчает работу программиста. Это быстрый, высокоуровневый язык, но не самый простой для входа в IT.

Visual Basic, наоборот, простой и ориентированный на ООП. Он очень наглядный, поэтому часто применяется для прототипирования, но у него есть минус: язык требует много ресурсов.

Преимущества

  • ASP.NET — мощный фреймворк, который реализует архитектуру MVC.
  • C# — универсальный язык общего назначения: его также используют в gamedev и в разработке десктопных приложений.

Недостатки

  • Это сложный инструмент для новичков, который требует много ресурсов.
  • Продукт полностью принадлежит компании Microsoft. Только она занимается его поддержкой, поэтому ASP.NET — технология, сильно зависимая от поставщика.

Применение

ASP.NET используют крупные компании. На нем написан StackOverflow, незаменимый инструмент разработчика, а также сайты Microsoft и Starbucks.

Посмотреть примеры кода на C# и прочитать про другие базовые инструменты можно в статье.

Ruby + Ruby on Rails

Ruby — язык общего назначения. Его часто используют в веб-разработке с фреймворком Ruby on Rails. «Рельсы», как их еще называют, реализуют архитектуру MVC. Они были прорывными: технологии переняли другие фреймворки. Ruby — язык «для людей», на нем приятно и удобно писать, он поддерживает концепцию объектно-ориентированного программирования.

Достоинства

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

Недостатки

  • Ruby не так популярен, как предыдущие технологии, но зато разработчики на нем очень ценятся.
  • У языка не очень высокая производительность, но ее хватает для большинства задач.

Применение

Ruby on Rails часто выбирают стартапы, которым важно быстро создать работающий проект. Фреймворк используют для создания MVP — минимально жизнеспособного продукта. Но на нем работают и «старые» проекты: Kickstarter, Airbnb и другие. Язык был на пике популярности в начале 2000-х, с тех пор хайп спал и Ruby стабильно развивается в своей нише.

Java

У Java репутация «языка для энтерпрайза», которая закрепилась очень давно. Он полностью кроссплатформенный: все написанное на нем переводится в байт-код, который можно выполнить везде. Java — мощный, функциональный и производительный, поэтому на нем пишут крупные и высоконагруженные проекты.

Достоинства

  • Это язык со строгой типизацией, которая нравится многим программистам.
  • Для Java есть множество фреймворков и разнообразных библиотек.
  • Язык универсален благодаря виртуальной машине и байт-коду — инструментам, которые позволяют работать под любой платформой. Например, язык подходит для мобильной разработки на Android.
  • У Java большое и открытое сообщество.

Недостатки

  • Язык не так дружелюбен к новичку, как многие другие, а подробность кода может запутать — некоторые считают его избыточным, слишком объемным.
  • Из-за особенностей Java в коде много повторяющихся участков.
  • Платформы для программирования требовательны к ресурсам.

Применение

Язык часто используют в банках, страховых компаниях, розничных сетях. На Java написаны PayPal и eBay, Amazon и другие гиганты рынка. Код на нем можно встретить в Airbnb, Pinterest и прочих проектах.

О том, как стать Java-программистом с нуля, мы рассказали в статье.

Станьте Java-разработчиком
и создавайте сложные сервисы
на востребованном языке

Scala

Язык основан на Java, но более современный. У него есть преимущества Java вроде байт-кода и виртуальной машины, но синтаксис лаконичнее, а структуры — сложнее. Scala — язык с сильным функциональным уклоном, а Java — в первую очередь объектно-ориентированный.

Достоинства

  • Язык мощный и кроссплатформенный, как Java, но код на нем лаконичнее и изящнее.
  • У Scala нет многословности — особенности Java, за которую его часто критикуют.
  • Scala на 20% быстрее предшественника.
  • В Scala можно интегрировать код на Java: языки совместимы друг с другом.

Недостатки

  • Язык сложный в изучении.
  • Иногда Scala называют преемником Java, но пока он не так популярен, как «родитель». Для него меньше фреймворков и библиотек, а сообщество уже.

Применение

Как и Java, Scala считается «языком для энтерпрайза», поэтому на нем написаны крупные платформы. Самые известные примеры — Twitter и LinkedIn, а также частично Тинькофф.

Kotlin

Как и Scala, язык основан на Java и работает под виртуальной машиной. Но сейчас интерес к нему выше, чем к Scala: он более простой и удобный. Kotlin разработала компания JetBrains как менее многословную и более компактную альтернативу Java. Язык полюбил и начал продвигать Google. Сейчас Kotlin — официальный стандарт для разработки под Android. Но на нем пишут и backend.

Достоинства

  • Kotlin лаконичнее и быстрее Java и Scala. Код на нем понятен и легко читается.
  • Это современный и мощный язык, поэтому он популярен в современной разработке.
  • В Kotlin можно использовать любые библиотеки Java.

Недостатки

  • Большинство технологий для Kotlin создано для мобильной разработки, хотя существуют и для backend.
  • Код на Kotlin компилируется в среднем на 30% медленнее, чем на Java.

Применение

Наиболее известные примеры — Adobe и Shazam, а также сайт Spring — популярного фреймворка для Java. Язык частично используется в серверной части Amazon. Часто backend на Kotlin выбирают молодые компании, которым сразу нужен современный и удобный инструмент.

Python

Удобный и лаконичный Python называют «языком для математиков и машинного обучения». На нем также пишутся сайты и десктопные приложения. Python поддерживает разные парадигмы написания кода, у него понятный и четкий синтаксис, который подходит для множества задач.

Достоинства

  • Язык легко начать изучать.
  • Python универсален: разработчику открыты все дороги.
  • Красота: язык лаконичный и изящный, код на нем понятный и легко читается.
  • Для Python есть много хороших фреймворков, например Django, которые позволяют быстро создать форум, интернет-магазин, блог и т.п.

Недостатки

  • Производительность Python ниже, чем у аналогов: это не самый быстрый язык, а на сервере скорость бывает критична.
  • В нем сложно работать с асинхронностью и многопоточностью. Такая же проблема есть и у PHP.

Применение

Для Python много «математических» и «научных» фреймворков, он хорошо подходит для сложных расчетов. Поэтому проекты, связанные с активными вычислениями, часто выбирают его. Но это не единственный вариант. На Python написана часть Instagram*, Netflix, Uber и Pinterest.

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

C++

C++ — универсальный язык, который используют в огромном количестве сфер, от системного программирования до GameDev. Иногда он встречается и в backend.

Достоинства

  • Это старый язык, который известен высокой скоростью, функциональностью и эффективностью.
  • C++ универсален.
  • Для языка есть множество разнообразных фреймворков и библиотек, в том числе для веб-разработки.

Недостатки

  • Сначала C++ не использовался для веб-разработки, поэтому фреймворков для backend не много, а некоторые хостинги сайтов плохо его поддерживают.
  • C++ — очень сложный язык, на котором тяжело писать и легко ошибиться. Быстро и хорошо запрограммировать серверную часть сайта не получится.

Применение

Обычно язык нужен для оптимизации, чтобы сервис работал быстро. Backend, полностью написанный на C++, считается редкостью: обычно на нем пишут часть, требовательную к скорости. Язык часто использует Яндекс.

О том, кому и для чего нужен C++, мы подробно разобрали в статье.

Rust

Rust — относительно новый и современный язык от компании Mozilla. Он поддерживает несколько парадигм программирования и работает очень быстро. Rust часто сравнивают с Go, но первый сложнее, хотя производительнее.

Достоинства

Это быстрый и мощный язык, по надежности сравнимый с Haskell, а по скорости — с C++. Из-за достоинств он входит в топ любимых языков программирования разработчиков по всему миру.

Недостатки

  • Несмотря на то, что Rust проще C++, его сложно изучать, особенно работу с объектами. Популярная парадигма ООП поддерживается не до конца.
  • Язык очень быстро развивается и порой серьезно меняется за короткий промежуток времени.
  • Некоторые разработчики ругают его документацию: она сложная, избыточная и запутанная, в ней нелегко разобраться.

Применение

Rust отлично подходит для сложных вычислений, на нем можно писать крупные проекты вроде браузерных движков. Код на нем хорошо оптимизирован. Сейчас Rust можно встретить в энтерпрайзе и различных высоконагруженных сервисах, где активно идут вычисления: в FinTech, blockchain, EdTech и пр. На Rust написаны сервисы Mozilla, высоконагруженные части Twitter и Dropbox.

Go (Golang)

Современный и «модный» язык от Google, который еще не успел завоевать большой процент рынка, но уже популярен в веб-разработке.

Достоинства

  • Go — быстрый, легкий и понятный язык с лаконичным синтаксисом, который похож на C.
  • Это язык со строгой статической типизацией и поддержкой горутин: позволяет выполнять несколько строк кода одновременно.
  • Go активно развивается, разработчики на нем нужны во многих компаниях.
  • У него простой интерфейс, поэтому язык не сложно изучать.

Недостатки

  • Пока что Go уступает по популярности другим языкам для backend.
  • Несмотря на то, что сам язык простой, в нем много сложных инструментов.

Применение

Go — эффективный, многопоточный язык, который подходит для создания быстрых и нагруженных приложений. На Go написаны сайты Тинькофф, Domino’s, а также такие проекты, как Docker и Kubernetes.

JavaScript + Node.js

JavaScript известен как язык для frontend, потому что браузеры полностью поддерживают только его. Но он тоже может использоваться для написания серверной части сайта. Платформа Node.js позволяет запускать JS на backend без браузера. Это не единственная ее полезная возможность, поэтому Node.js используют не только бэкендеры.

Достоинства

  • JavaScript — очень гибкий язык с малым количеством настроек.
  • Для него не нужно долго настраивать специальную среду, потому что код можно выполнить в любом браузере.
  • У JavaScript простой и понятный синтаксис, огромное сообщество, поэтому язык часто выбирают новички.

Недостатки

  • JavaScript динамически типизируется, поэтому может вести себя непредсказуемо, а проекты на нем бывает сложно масштабировать. Эта проблема частично решается с помощью TypeScript — доработки языка со строгой типизацией.
  • Из-за гибкости JS может работать довольно медленно.
  • Популярность приводит к высокой конкуренции на ранних этапах «входа» в профессию.

Применение

JavaScript создавался как язык общего назначения, и сейчас с ним можно писать не только сайты — на нем работает ряд десктопных и мобильных приложений. В качестве backend-языка JavaScript используется там, где нужны гибкость и понятность. Среди крупных компаний им пользуются Airbnb, eBay и другие.

Мы подготовили подробную инструкцию, с чего начать изучать JavaScript, и рассказали о популярных фреймворках, библиотеках и многом другом.

Что из перечисленного выбрать?

Хотите создать высоконагруженный проект? Подойдет Java или C#. Планируете писать на чем-то «классическом» и неизменно востребованном? Выбирайте PHP. А если хотите писать на простом и развивающемся языке с перспективой перехода в DataScience и ML, то стоит присмотреться к Python. Помните, что один большой проект может быть написан на нескольких языках — хотя бы тот же eBay или Airbnb.

Смотрите, что востребовано на рынке и к каким технологиям лежит душа. Если вам нравится язык, то и достичь на нем вы сможете большего.

* Принадлежит компании Meta, деятельность которой признана экстремистской в России.

Дмитрий Степанов Системный архитектор ABCSolutions (бренд Goodt)

Разработка веб-приложений: основные этапы

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

Разберемся, как проходит разработка веб-приложений, для чего такие приложения нужны бизнесу и как их создают.

Время чтения: 8 минут

Как создать веб приложение

Зачем нужны веб-приложения

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

Веб-приложения могут пригодиться, чтобы:

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

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

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

Виды веб-приложений

Способов разработки приложений много. От выбранного типа приложения будет зависеть цена, сроки и функциональность. Давайте рассмотрим каждый вид и определим, для каких задач будет оптимальна та или иная архитектура.

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

Хотите больше узнать о специфике ноукод-решений и их отличия от классической разработки? Можете прочитать нашу статью: мы подробно разобрали специфику работы с конструкторами.

READ MORE Что такое «No-code»: простой способ сделать MVP или пустая трата времени и денег?

Приложения, написанные кодом, тоже различаются между собой — по своей архитектуре или системе организации программы. Давайте рассмотрим, какие они бывают.

Single Page Application — это одностраничное приложение. Для разработки таких приложений используют HTML и JavaScript. По сути, это разработка лендинга , только интерактивного. Но SPA могут быть достаточно сложными. Суть одностраничных приложений в том, что на сервере хранится одна HTML-страница, контент на которой обновляется по мере прокрутки или переходов по ссылкам. То есть когда вы нажимаете на кнопку, вы не переходите на новую страницу — элементы добавляются к уже загруженной. Например, по этому принципу работает Gmail.

  • Разрабатывать такие приложения проще, чем многостраничные.
  • Приложения работают быстро: контент на странице просто меняется по мере движения пользователя, его загрузка не требует много ресурсов.
  • На одной странице проще сделать однообразный дизайн, а пользователь точно не потеряется и не запутается.
  • Настройка SEO-оптимизации для SPA будет более трудоемкой, чем для других вариантов.
  • Трудно гарантировать безопасность таких страниц: они больше подвержены взломам и утечкам, чем MPA и PWA, которые мы рассмотрим ниже.

Multi Page Application — это многостраничные приложения. Они позволяют пользователю не просто скроллить окно браузера, а переходить между отдельными страницами. И загрузка контента в таких приложениях происходит целыми страницами. Это значит, например, что если пользователь совершил оплату, в SPA подгрузится окошко с подтверждением, а в MPA страница оплаты полностью обновится. Пример многостраничного приложения — интернет-магазин Amazon.

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

Progressive Web Application — прогрессивные веб-приложения. Это что-то среднее между разработкой мобильного приложения и вебсайта. PWA можно сразу из браузера установить на главный экран смартфона в обход магазинов приложений. А ещё такие приложения работают офлайн и отправляют push-уведомления, но при этом открываются в браузере. Это возможно благодаря технологии Service Worker — скрипту, через который проходят все взаимодействия между фронтэндом и бэкендом. У этого скрипта есть доступ к кэшу и данным. По сути к большинству сайтов можно дописать Service Worker — и получится PWA. Поэтому часто на эту технологию переходят СМИ — например, The Washington Post.

  • Сочетание офлайн- и онлайн- режима удобно для пользователя.
  • Такие приложения можно сравнительно быстро разработать.
  • Приложение может работать с перебоями в старых версиях браузера.
  • Есть браузеры, которые вообще не поддерживают подобные приложения — например, Firefox.
SPA MPA PWA
Плюсы — Экономия времени и бюджета

— Приложение быстро работает

Мы работаем на платформе Node.js для разработки бэкенда и React — для фронтенда.

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

Кто занимается разработкой

Нанимать свою команду для разработки приложения — долго и дорого. По данным Indeed.com , расходы на найм одного сотрудника начинаются от $4000 без учёта зарплат. Чтобы сэкономить, можно обратиться за веб-приложениями к фрилансерам. Но зачастую это не лучшее решение. Для полноценного приложения нужна команда из аналитиков, дизайнеров и программистов, и вряд ли один человек будет обладать всеми знаниями сразу. А если вы нанимаете нескольких фрилансеров, вам придётся брать на себя работу менеджера проектов. Так что самый простой способ разработать сайт для компании — обратиться в студию, где над проектом будет работать опытная и слаженная команда.

В процессе создания веб-приложения участвуют:

  • Аналитики — они помогают лучше изучить нишу, определить целевую аудиторию и понять, какая функциональность необходима для успеха на рынке.
  • UX/UI-дизайнеры. Продумывают пользовательский путь и создают прототипы. Потом отрисовывают непосредственно дизайн сайта : кнопки, иконки и другие элементы интерфейса.
  • Фронтенд-разработчики. Превращают дизайн сайта (макет) в работающий сайт: оживляют кнопки и блоки с помощью кода.
  • Бэкенд-разработчики. Отвечают за функциональность: подключают базы данных, платежные системы, выстраивают внутреннюю логику приложения.
  • Тестировщики. Проверяют приложение на баги и помогают выпустить на рынок продукт, который работает без ошибок.

Этапы разработки

Каждый специалист отвечает за свой этап в разработке веб-приложения. Тем не менее, этапы и их последовательность в разных студиях могут незначительно различаться. Мы расскажем о том, как устроен процесс в Purrweb и какое участие владельцу бизнеса нужно будет принимать в процессе.

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

Результат: после работы с аналитиком вы будете четко понимать, для кого делаете приложение, какие задачи пользователей оно будет решать и как на этом зарабатывать.

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

Результат: Готовая схема приложения, в которой показаны блоки интерфейса и взаимосвязи между ними. По прототипу вы сможете оценить функциональность приложения и его доступность.

Как создать веб приложение

Задача дизайнера интерфейса — визуализировать блоки, которые придумал UX-дизайнер. UI-дизайн — это отрисовка иконок и кнопок, вёрстка экранов, подбор цветов и шрифтов и подготовка руководства по стилю UI для дальнейшей разработки. Если вы хотите узнать больше о работе UI-дизайнера, прочитайте наши статьи — о дизайн-процессе и о том, как мы делаем руководства по стилю для наших проектов.

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

Как создать веб приложение

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

Результат: дизайн становится интерактивным: можно нажимать кнопки, переходить по ссылкам. Но свои функции приложение ещё не выполняет.

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

Результат: полностью работающее приложение.

Тестирование

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

Результат: приложение работает без ошибок, риск их появления сведён к минимуму.

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

Стоимость разработки

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

☝Разумеется, мы приводим только приблизительные цифры: итоговая цена приложения зависит от множества нюансов. Если нужно будет больше или, наоборот, меньше функций, то и стоимость изменится. Обычно финальную сумму можно назвать, когда готов дизайн: тогда уже точно понятно, как будет выглядеть приложение и что в нем будет.

Социальная сеть, в которой реализованы:

  • чат;
  • лента новостей с комментариями;
  • публичные страницы или форумы;
  • профиль пользователя.

Это приложение будет стоить у нас около 10 182 000 рублей.

Сервис-агрегатор для путешественников: с бронированием отелей, ж/д или авиабилетов. В нем должны быть:

  • личный кабинет;
  • поиск с фильтрами;
  • блог с рекомендациями по турам;
  • оплата
  • рассылка.

Такое веб-приложение будет стоить примерно 7 845 000 рублей.

Вот подробная таблица, в которой расписаны все этапы разработки с количеством часов и стоимостью:

Вид работы Стоимость для соцсети Стоимость для агрегатора
Аналитика 120 часов / 300.000 р. 120 часов / 300.000 р.
UX-дизайн 260 часов / 910.000 р. 150 часов / 525.000 р.
UI-дизайн
Фронтенд 1600 часов / 5.600.000 р. 1200 часов / 4.200.000 р.
Бэкенд 800 часов / 2.800.000 р. 600 часов / 2.100.000
Тестирование 540 часов / 972.000 р. 400 часов / 720.000 р.

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

Есть бизнес-идея? Обращайтесь к нам за консультацией!

Насколько публикация полезна?

Оцени эту статью!

28 оценок, среднее 4.3 из 5.

Оценок пока нет. Поставьте оценку первым.

Так как вы нашли эту публикацию полезной.

Подписывайтесь на нас в соцсетях!

Как разработать веб-приложение за 8 шагов

Если вы всерьез подумываете о разработке своего веб-приложения, сначала ответьте на два вопроса:

  • Для решения какой задачи будет использоваться это приложение?
  • Каким способом будет разработано данное приложение?

Первое — веб-приложение всегда разрабатывается для решения конкретной задачи, как правило, одной. Оно должно быстро реагировать на изменения, и чем проще и меньше время реакции, тем более веб-приложение жизнеспособно.

Второе — есть по меньшей мере 6 путей к разработке веб-приложения, самым современным из которых является реализация фронтенда как single page application, где контакт с бэкендом реализуется через REST API. Данный путь к созданию веб-приложения достигается за 8 шагов.

1. Работа с бизнес-логикой бэкенда

Есть два способа такой работы: вы можете сгруппировать бизнес-логику бэкенда в одном сервисе (монолитная логика) или реализовать каждый ее компонент в отдельном микросервисе. Работая с небольшим проектом, используйте первый способ, а при работе с крупным проектом идеально подойдет второй.

2. Выбор языка программирования

Если вам менее важна производительность веб-приложения, пишите на Python (фреймворки Django, Flask), Node JS (фреймворки Express JS, Koa JS, Gatsby JS), Ruby (фреймворки Ruby on Rails, Grape). Если в приоритете скорость приложения — используйте Golang (фреймворки Gingonic, Beego, Revel). Еще вы можете использовать популярный язык программирования от Microsoft — C#, который произносится как «си шарп». Он разработан в качестве языка прикладного уровня для CLR. С# вобрал в себя многое от C++, Модула, Delphi, Smalltalk и Java, но разница состоит в том, что С# исключает модели, которые зарекомендовали себя как проблемные при разработке ПС. К примеру, C# в отличие от C++ не поддерживает множественное наследование классов, но допускает множественную реализацию интерфейсов. Главное, какой бы язык вы не выбрали, кодить на том, который вы хорошо знаете.

3. Реализация бизнес-логики

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

Presenter обрабатывают события от пользовательского интерфейса (UI) и выполняют роль callback из внутренних уровней (Interactors). Presenters легко тестировать и их задача состоит в том, чтобы получить информацию от веб-приложения и преобразовать ее для перемещения presenters на экран с помощью представления (View).

Interactor по факту вмещают бизнес-логику веб-приложения, то есть проверку условий и обработку информации. Interactor работают фоном и перемещают события и информацию на верхний уровень, presenters, c помощью callback.

4. QA-тестирование бэкенда

Тестирование нужно обязательно делать для того, чтобы знать, правильно ли работает бизнес-логика вашего веб-приложения, а также для того чтобы не проверять постоянно «вручную» работоспособность кода. Используйте автоматическое тестирование для модулей и библиотек, соответствия UI/UX и API. Пропишите несколько вариантов тестирования. Разработайте roadmap для платформы, чтобы управлять испытаниями для всех типов тестирования. Обязательно сделайте подключение инструментов отслеживания текущего покрытия кода, чтобы убедиться в том, что ваше веб-приложение не «виснет» и работает без багов и перебоев.

5. Добавление поддержки сваггера

Swagger – это «умная» документация RESTful web-API. По сути, это фреймворк для спецификации REST API, дающий возможность не только просматривать спецификацию в интерактивном режиме, но и отправлять запросы, именуемые Swagger UI. А теперь на счет веб-приложения.

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

Рекомендую вам добавить поддержку сваггера, при этом очень здорово, если сваггер еще и поддерживает генерацию через тесты. Таким образом, он поможет вам документировать API.

6. Работа с бизнес-логикой фронтенда

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

7. QA-тестирование фронтенда

Фронтенд тестируют двумя основными видами тестов — на логику и на отображение. Тесты на логику проверяют логическую реализацию функций и классов. Тесты на отображение отвечают за то, чтобы наполнение демонстрировалось пользователю в том виде, который вы задумали, прописывая фронтенд. Для осуществления QA-тестирования фронтенда используйте такие фреймворки, как Mocha, Chai, Jest, Ava, Enzyme, Jest — они самые ходовые, простые в эксплуатации и наиболее понятные из всех.

8. Мониторинг качества веб-приложения

Когда вы завершили седьмой этап, ваше веб-приложение, можно сказать, готово. Ну, или оно находится на финальной стадии готовности — 98%. Что вам нужно знать по итогу? Естественно, первое, что нужно, — это понять, насколько качественно реализовано приложение, как оно будет работать и на какое время хватит его износостойкости. В этом вам поможет Lighthouse — автоматизированный инструмент с открытым исходным кодом для мониторинга качества вашего веб-приложения. Lighthouse проводит системный аудит производительности и доступности веб-приложения для понимания обычного пользователя.

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

Имейте в виду, что, начав разработку веб-приложения, вам нужно будет изучить все «подводные камни» каждого этапа, а также запастись терпением, потому как сама разработка может занять у вас несколько дней, а вот тестирование и доработка с устранением багов может затянуться и на многие месяцы. Будьте ко всему готовы и помните про первые и самые важные два вопроса: всегда ставьте конкретную задачу, которую должно решать ваше приложение, перед тем, как начать разработку, и выбирайте самый удобный и легкий для вас способ разработки, в котором вы хорошо ориентируетесь. Ведь разработка веб-приложения — это именно тот случай, когда надо идти путем наименьшего сопротивления.

Как сегодня делают веб-приложения? Часть 1

Друзья, всем привет! Я занимаюсь веб-разработкой уже 13 лет. Помню, как когда-то jQuery был настолько удобным, что повлиял на веб-платформу: так появился querySelector. В конце прошлого года в порыве рефлексии я был удивлен тем, насколько удобней с тех пор стали браузерные API: словно используя сборщики, транспиляторы и автопрефиксеры, я пользовался не веб-платформой, а чем-то другим, надстройкой, которая живет и развивается по своим правилам. Современные браузеры умеют асинхронно загружать js-модули, кешировать состояние страницы при переходах, отслеживать производительность, реагировать на предпочтения пользователя, не говоря уже о десятках API для всех случаев жизни, начиная NFC, заканчивая поддержкой геймпадов.

Но есть один важный вопрос, который нам с вами стоит обсудить: как нам делать веб-приложения, если завтра прилетит волшебник в голубом вертолете и заберет все привычные инструменты?

1. Использовать шаблонизацию

Типичное веб-приложение строит весь UI динамически, постоянно вызывая события перекомпоновки документа и перерасчета стилей. Тем временем уже давно существуют html шаблоны, которые разбираются браузером, но не рендерятся немедленно. Клонировать эти кусочки документа браузеру намного легче, чем разобрать кусок совершенно новой, незнакомой разметки.

Чем вам это не понравится

Склонировав шаблон, нужно будет наполнять его данными (и привязывать обработчики), обращаясь к дочерним элементам через DOM API.

2. Писать модульный js

ES6 модули — это реальность, которая с нами вот уже 5 лет. Они не просто способ разбить приложение на кусочки и загружать функционал по мере надобности. Это способ освободить главный процесс и не делать интерфейс неинтерактивным. Движок не будет останавливать процесс разбора документа и пользователь получит страницу, с которой можно будет взаимодействовать как можно быстрее. При этом загрузив модуль, повторно браузер не пойдет за ним на сервер, что выглядит как дедупликация кода, доступная сразу из коробки! Плюс tree shaking, так как невостребованные модули не будут загружены.

Приятный бонус — при локальной разработке сохранение файла с модулем доставит новый код на открытую страницу без ее перезагрузки (hot reloading из коробки!).

Чем вам это не понравится

Придется думать о приоритетах загрузки скриптов и том, как они повлияют на общее время загрузки модуля. Зато можно произвести очень тонкую настройку.

3. Учитывать обстоятельства

Низкая скорость соединения, отсутствие связи с сетью, низкий уровень заряда, предпочтения пользователя — на все это браузеры тоже реагируют, нужно только немного покопаться.

Network information API и matchMedia(‘prefers-reduced-data’) даст возможность узнать, есть ли сеть, какая пропускная способность нам сейчас доступна, чтобы не передавать лишние данные по сети и увеличить скорость работы, пожертвовав некоторыми необязательными вещами. Такими, например, как изображения или видео.

Battery status API и matchMedia(‘prefers-reduced-motion’) позволит отключить штуки, которые тратят заряд (в первую очередь, анимации).

4. Быть на шаг впереди браузера

При использовании ES6-модулей довольно быстро можно столкнуться с проблемой слишком длинных цепочек зависимостей. Корневой модуль загружает модуль, отвечающий за layout, тот, в свою очередь — модули компонентов и каждое звено этой цепочки увеличивает время загрузки. Решить эту проблему можно с помощью Early hints — это способ на ранней стадии запроса подсказать браузеру, какие еще ресурсы ему понадобятся в ближайшем будущем и загрузить их параллельно, не дожидаясь разбора и последовательных запросов. Получается почти как сборка бандла, но без самой сборки.

Без early hintsС early hints

Чем вам это не понравится

Для того, чтобы получить видимый эффект, нужен сервер с http/2. Плюс, это будет работать только для navigation-запросов.

Спасибо что дочитали статью до конца, оставайтесь на связи и высказывайте свое мнение о том, что в ней написано.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *