На каком стеке мы разрабатываем веб-сервисы и мобильные приложения

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

Каждый заказчик хочет знать, на каком стеке будут разрабатывать его продукт. Почему? За этим стоят опасения: будет ли проект поддерживаться в будущем? Получится ли найти на него разработчиков? Вынесет ли большую нагрузку? Получится ли интегрировать его с другими системами? Не произойдет ли так, что технологии уйдут из России, как это было с SAP, Oracle и прочими?

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

Backend: Laravel, Node.js, Nest.js

Frontend: React Native, Flutter, MobX State Tree, MobX, TypeScript

Backend: Laravel, Node.js, Nest.js

Frontend: React, Next.js, Sapui5, MobX State Tree, MobX, TypeScript. Дополнительно Vue.js и Angular

Node.js — это среда выполнения для JavaScript. Nest.js — фреймворк, построенный на базе первого — Node.js. А Laravel — фреймворк для написания сайтов на языке PHP. Они нужны для ускорения работы разработчика, облегчения и улучшения возможностей самого языка.

Laravel

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

Внутри него есть много готовых вещей: маршрутизация, HTML-шаблонизаторы, ORM, CLI и другое. Если программисту понадобится написать сервер для обработки запросов (API для мобильного приложения), CMS или CRM, то Laravel — идеальный выбор. Это не самые масштабные, но и немалые проекты, в которых фреймворк чувствует себя идеально.

Laravel подходит для разработки крупных проектов со сложной архитектурой и высокой нагрузкой, для которых нецелесообразно использовать CMS вроде Битрикса.

Примеры проектов, которые мы разрабатывали на Laravel: социальная сеть, сервис по аренде яхт, онлайн-аукцион, корпоративное приложение для корпорации Сервико-Авто.

Чем хороши продукты на нем:

Они производительны — будут быстро и четко выполнять задачи. Почему? Потому что фреймворк содержит оптимизированные компоненты и инструменты. Например, механизмы кэширования, которые уменьшают нагрузку на сервер и ускоряют загрузку страниц;
Продукт на нем разрабатывается быстрее, чем, например, на Symfony (второй по популярности PHP-фреймворк). Все потому, что в процессе разработчики могут обходиться без сложного кода.
Можно не переживать за безопасность своего продукта, потому что у Laravel есть встроенные базовые механизмы для защиты от угроз и атак.
Продукт легко масштабировать. У фреймворка есть нативные инструменты, через которые можно расширить функционал. А так как у него большое комьюнити, то найти разработчиков для поддержки проекта будет несложно.

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

Node.js

Это платформа на C++, которая превращает JavaScript в язык общего назначения, поэтому с Node.js можно писать код и для бэкенда, и для фронтенда.

Чаще всего используем его для разработки проектов с постоянным обменом информацией с пользователем: социальных сетей, чатов, систем совместной работы над проектом, текстовых онлайн-редакторов. Пример — сервис онлайн-аукциона новых авто. Технологию используют Netflix, LinkedIn, НАСА, Yahoo, Netflix, Uber, Walmart, Google и еще много кто.

Nest. js

Nest. js — это фреймворк, который ускоряет и упрощает разработку масштабируемых серверных приложений на основе Node.js. То есть дополнение. Подходит для разработки сайтов, мобильных и десктопных приложений, в которых нужно участие сервера с передачей динамического контента (по большей части для реализации сокетов).

Используем из-за хорошей реализации микросервесной архитектуры и статической типизации, так как Nest. js идет в связке с TypeScript — языком программирования, в котором исправлены недостатки JavaScript, об этом еще расскажем позже.

У фронтенда основным языком программирования, на котором завязаны все технологии, является JavaScript, а его фреймворками и библиотеками — React, Angular и Vue.js. На чистом JS мы не пишем, так как это нецелесообразно, долго и дорого.

Почему?

Если говорить простыми словами, то для создания сайта на чистом JS мы потратили бы 1000 строк кода, а вот с React — 500, так как в этой библиотеке есть специальные методы, которые объединяют в себе функционал взаимодействия с контентом. За счет этого мы просто вызовем одну функцию в одной строке кода, чтобы добавить элемент. Вместо того, чтобы расписывать 10 строк на чистом JS.

Используем всё перечисленное — React, Vue.js и Angular, но активнее именно первый.

React

Это не фреймворк, а библиотека для языка программирования JavaScript.

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

React считается самой популярной библиотекой среди фронтендеров, поэтому проблем с поддержкой не будет

Цель React — предоставить высокую скорость, простоту и работоспособность приложений на разных платформах.

Библиотека сосредоточена на создании пользовательских интерфейсов SPA, PWA и крупных сайтов, доработки новой функциональности с любым стеком. Удобна при разработке сложной логики клиентской части (особенно когда есть много повторно используемых компонентов). На React необязательно разрабатывать весь сайт. Библиотека не зависит от остального инструментария и будет хорошо работать, на чем бы ни был написан код. Мы в основном используем React в связке с Laravel.

Чем крута эта библиотека для заказной и продуктовой разработки:

У него высокая скорость разработки — если обычное веб-приложение на запрос от браузера возвращает ему HTML-разметку с CSS, чтобы тот отрисовал страницу, то в случае приложений на React, браузер сначала скачивает набор скриптов, которые выполняются на устройстве пользователя. Короче говоря, это снимает нагрузку с сервера, улучшая производительность проекта;
У проектов на React чистая архитектура, в которой легко обнаруживать и исправлять баги, и которую легко поддерживать. Разработчик контролирует потоки данных, разметку и стилизацию. И в идеале знаком с паттернами программирования, а значит может собирать приложения быстрее и гибче.

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

React может использоваться без каких-либо фреймворков, но чаще нужен кто-то дополнительный, чтобы улучшить его эффективность и гибкость. Мы применяем технологию в тандеме Next.js.

Next.js

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

Next.js используют и поддерживают крупные компании вроде Google, другие предлагают инфраструктуру для деплоя. Так что Next.js в ближайшем будущем будет жить и процветать — его можно спокойно использовать.

TypeScript (TS)

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

Мы используем TS, а не JS, чтобы сократить ошибки из-за неправильных типов данных еще на этапе написания кода, не доходя до этапа исполнения кода или прямого тестирования на сайте.

SAPUI5

Практически полнейший аналог React. SAP — один из ведущих мировых производителей программных решений. Но в России больше распространен именно 1С.

Sapui5 — неплохой фреймворк для больших энтерпрайз решений в экосистеме SAP. Мы используем его на нескольких проектах, в которых экосистема изначально построена на SAP. Например, в ERP для корпорации Таркетт. Но в плане разработки React быстрее и эффективнее.

MobX и MobX State Tree — это стейт-менеджеры. Стейт-менеджер — это глобальное хранилище данных внутри приложения или сайта.

Они нужны для управления состоянием и потоком данных крупных приложений. Этот инструмент позволяет управлять состоянием из любого места приложения, но при этом само хранилище находится в одном месте.

React Native (RN) и Flutter

На этих фреймворках пишутся приложения под 2 флатформы сразу — Android и iOS.

Но технологии разные: React Native реализован на базе языка программирования JavaScript, а Flutter — на Dart.

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

Но зачем эти фреймворки, когда есть нативные языки программирования? Дело в стоимости и скорости разработки. У нас есть подробная статья о том, кому это нужно. Если кратко — чтобы разработать продукт нативно, придется нанять 2 команды разработчиков. А используя Flutter или RN, понадобится только одна команда. Из-за чего выигрывает скорость и цена, а это важно для заказчиков, которые:

планируют запускать MVP, чтобы быстрее занять рынок;
их ЦА пользуется 2-мя платформами — и iOS, и Android;
будущий продукт не предполагает сверхнагруженных эффектов: анимаций, интерактивов;
в будущем собираются масштабироваться.

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

Со стороны фронтенд- и бекенд-разработки можем сказать, что у нас самый актуальный стек на рынке для определенного сегмента: высоконагруженных сервисов, мобильных приложений, сайтов и ERP. Есть, конечно, спорные моменты с MobX или MST, которые мы используем вместо Redux. И с MySQL, который используем вместо PostgreSQL на бэкенде. Это сказывается сугубо на удобстве разработки, но не на качестве конечных продуктов.

Иногда требования заказчика влияют на выбор технологического стека. Например, разработчики подключаются к Symfony, Vue.js, Angular, Sapui5 и другим технология, когда проект действительно того требует.

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

Если у вас есть задача разработать сайт или мобильное приложение, то напишите в Телеграм, мы это обсудим: https://t.me/sashadzen

Заказать разработку сайта, веб-сервиса или мобильного приложения на нашем сайте: https://vk.cc/cuglQZ

Партнерская программа, где мы платим от 10 000 до 200 000 рублей за контакты тех, кому нужен дизайн или разработка: https://vk.cc/cuglXT

Телеграм-канал Саши Комбарова про управление агентством, проектами, людьми: https://t.me/sasha_kombarov

Телеграм-бот, который бесплатно выдает чек-листы, памятки и регламенты по управлению, маркетингу, аналитике, дизайну и разработке: https://t.me/regulations_pyro_bot