Веб-страница
25.3K subscribers
1.54K photos
483 videos
1 file
3.73K links
Всё по фронтенду, бэкенду и девопсу в одном месте

Разместить рекламу: @tproger_sales_bot

Правила общения: https://tprg.ru/rules

Другие каналы: @tproger_channels

Сайт: https://tprg.ru/site

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Media is too big
VIEW IN TELEGRAM
Продвинутый бэкенд на Node.js

В этом видео вы узнаете, как реализовать масштабируемый бэкенд на Node.js с использованием фреймворка Nest.js. В качестве СУБД здесь используется PostgreSQL в связке с ORM Sequelize на Node.js. Вы также увидите, как обернуть приложение на Node.js в docker и docker compose.

https://youtu.be/dDeWWQWMM-Y

#бэкенд #nodejs #nestjs #postgresql

p.s. Дайте знать, если будут проблемы с видео на мобилках. Telegram в последнее время багует, особенно с видео
👍11🔥8
Современный способ разработки серверов на JS

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

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

#nodejs #javascript #бэкенд
👍7
Media is too big
VIEW IN TELEGRAM
Современная бэкенд архитектура: Как сегодня создаются масштабируемые и высоконагруженные приложения

Бэкенд — это не только API. Это еще и множество сервисов и приложений, помогающих делать крутые высоконагруженные приложения. Здесь вы:

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

#видео #бэкенд
👍61
Как устроен Node.js изнутри

Node.js — интересный инструмент для веб-разработчиков. В этой статье мы узнаем, из чего состоит Node.js, разберёмся, как внутренние компоненты Node.js взаимодействуют друг с другом, и изучим репозиторий проекта Node.js на GitHub.

https://www.smashingmagazine.com/2020/04/nodejs-internals/

#бэкенд #nodejs
5👍3
Как создать мини-приложение в Telegram

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

Вы сможете создать простой кликер с таблицей лидеров. В основе будет React и Nest.js. Подробности по ссылке.

#telegram #бэкенд #фронтенд #react #nestjs
🔥21
Какой фреймворк выбрать новичку для бэкенда на JavaScript

Если вы только начинаете изучать бэкенд-разработку на JavaScript, вам наверняка интересно, какой фреймворк выбрать для своих первых шагов. В этом посте мы рассмотрим несколько популярных вариантов, которые помогут вам быстро войти в тему.

Node.js — база для фреймворков

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

Express.js — проще некуда

Если вы хотите что-то простое и легкое для старта, попробуйте Express.js. Этот фреймворк считается стандартом для разработки веб-приложений на Node.js. Он предлагает минималистичный подход, позволяя сосредоточиться на логике вашего приложения без лишних сложностей.

Вот пример простого сервера на Express.js:

const express = require('express');
const app = express();
const PORT = 3000;
app.get('/', (req, res) => {
res.send('Hello, World!');
});
app.listen(PORT, () => {
console.log(`Server is running on https://localhost:${PORT}`);
});


С помощью этого кода вы создадите простой сервер, который отвечает на запросы по адресу "/".

Koa.js — больше гибкости

Если вы хотите большей гибкости и современного подхода, посмотрите на Koa.js. Этот фреймворк был создан создателями Express и предлагает более чистый и современный подход к написанию middleware. Если вас интересует асинхронное программирование с использованием async/await, Koa очень подойдет.

Пример применения Koa:

const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
router.get('/', async (ctx) => {
ctx.body = 'Hello, Koa!';
});
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000, () => {
console.log('Koa server running on https://localhost:3000');
});


NestJS — для тех, кто хочет быть на острие технологий

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

Выбор фреймворка зависит от ваших целей и уровня подготовки. Если вы только начинаете, рекомендуем начать с Express.js — он прост в освоении и отлично подходит для небольших проектов. Если уже есть опыт или вы хотите изучить что-то новое, Koa.js или NestJS могут стать отличным выбором. Удачи в изучении бэкенда на JavaScript!

Есть что-то ещё, что мы упустили? Поделитесь своим вариантов в комментариях.

#простымисловами #бэкенд
👍11👎93
Media is too big
VIEW IN TELEGRAM
Как правильно изучать бэкенд-разработку

В этом видео вы разберетесь во всем, что касается Backend-разработки:

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

#видео #бэкенд
👍2
Знакомство с Koa

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

В этой статье вы сможете ближе познакомиться с ним и посмотреть ключевые особенности.

#koajs #бэкенд
🔥7👍1💩1
Микросервисы. Исследование кухни

Что такое микросервисная архитектура и в чём её плюсы и минусы? Эта статья объясняет концепцию микросервисов простым языком. Вы узнаете, почему монолитные приложения – это не всегда плохо, когда стоит (и не стоит) переходить на микросервисы, а также какой технологический стек используется при таком подходе. Отличное введение в архитектуру, которая изменила мир бэкенд-разработки.

А вы за монолит или микросервисы?

#микросервисы@tproger_web #бэкенд@tproger_web
👍4
Эволюция конечных автоматов: от кода-монстра к визуальным схемам

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

Часть 1
Часть 2

А вы используете конечные автоматы в своих проектах?

#бэкенд #фронтенд #архитектура
👍31
Мини-Reddit в Telegram: бот + React-мини-апп за неделю

В этой статье показан полный путь создания сообщества «как на Reddit», но прямо в Telegram Mini App. Бот на node-telegram-bot-api управляет постами и голосами, мини-приложение на React рендерит древовидные комментарии и недельный ТОП, API-сервер на Express раздаёт данные, а MySQL и Redis держат хранилище. MVP подняли за одну рабочую неделю, активно используя ИИ для генерации 80–90 % кода.

#фронтенд #бэкенд #telegram
👎4🤔3
Как Node.js обрабатывает сотни тысяч запросов в одном потоке

Пошаговый разбор циклов событий, фаз timers → pending → poll → check → close и роли libuv. Вы узнаёте, кто будит коллбэки, почему промисы и таймеры попадают в разные очереди и как Node удерживает высокую производительность, оставаясь однопоточным.

#бэкенд #nodejs
6🔥4👍3
Docker для инженеров: 6 приёмов, которые выведут вас за пределы docker build

Если вы используете Docker только для запуска контейнеров, пора углубиться. В статье — шесть практик, которые помогут выйти за рамки docker build и научат думать как инженер.

#бэкенд #devops #docker
🔥6
MVP на Flask, а платите как за стартап: как «простое» приложение вышло на $2000 в месяц

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

В этой статье — путь от MVP на Flask до продакшна с Kubernetes, балансировкой и мониторингом, который стоит как SaaS среднего уровня.

А сколько стоит поддержка вашего проекта?

#бэкенд #инфраструктура #devops
🔥7
Перенаправления в Angie: return, rewrite и примеры их применения

Сколько времени вы тратите на настройку location, rewrite и редиректы в Nginx? Angie упрощает это до пары строк: return 301 для HTTPS, rewrite с регулярками и даже спец-код 444 для «отсечения ботов». Готовьтесь управлять запросами элегантно и безопасно — без избыточной конфигурации.

Все подробности — в статье.

#бэкенд #angie
👍2🔥1
Бэкенд без боли: что нужно знать фронтендеру

Вы начали разбираться во фронтенде, уже пишете интерфейсы и подключаете данные. Но тут появляется слово вроде «rate limiting» — и всё, паника.

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

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

#фронтенд #бэкенд
🔥102👍1
Деплоим свой React-сайт, или что делать на сервере

Когда ваш первый сайт готов, и VPS арендован, появляются закономерные вопросы: как развернуть проект на домене? Пост подойдет новичкам, которые впервые привязывают что-то свое к домену.


Шаг 1. Стягиваем код

Сначала клонируем репозиторий проекта на VPS:


git clone https://github.com/username/repo-name.git
cd repo-name/


Если для запуска понадобится Node.js определенной версии, установим через официальный скрипт:


curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs


После этого установим зависимости проекта (их указываем в package.json):


npm install


Если на сервере маловато оперативной памяти (например, минималка на 1-2 ГБ RAM) — может помочь добавление swap-файла:


sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile


Шаг 2. Настраиваем переменные окружения

Создаем файл .env в корне проекта. Админ использует условно бесплатную БД Supabase, потому шаблон состоит из таких средовых переменных:


NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=


Обратите внимание на префикс NEXT_PUBLIC_ — он необходим, чтобы переменные стали доступны на клиенте в приложениях, построенных на Next.js.


Шаг 3. Собираем проект

Для деплоя нужна готовая сборка с оптимизированными файлами в папке build/


npm run build



Шаг 4. Автоматический запуск с PM2

pm2 — удобный менеджер процессов для Node.js, с его помощью каждый новый коммит будет «усвоен» автоматически. Устанавливаем глобально:


sudo apt install -y curl
sudo npm install -g pm2


Запускаем приложение через конфигурационный файл:


pm2 start ecosystem.config.js
pm2 save
pm2 startup


Последняя команда создаст автозапуск после перезагрузки сервера.


Шаг 5. Установка и настройка Nginx

nginx будет выступать обратным прокси и обеспечит работу по доменному имени. Устанавливаем:


sudo apt update
sudo apt install -y nginx


Создаём конфигурацию сайта:


sudo vim /etc/nginx/sites-available/helenkapatsa


Это стартовая версия конфиги. Адаптировать ее под свои нужды помогут документация и нейронки:


server {
listen 80;
server_name example.com www.example.com;

location / {
proxy_pass https://localhost:3000; # порт вашего React-приложения или PM2 процесса
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}


Активируем сайт и проверяем конфигурацию:


sudo ln -s /etc/nginx/sites-available/domain/etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx



Шаг 6. Получаем SSL-сертификат Let's Encrypt

Для безопасной работы сайта нужен сертификат. Установим certbot:


sudo apt install -y certbot python3-certbot-nginx


Добавим в доменном регистраторе (например, reg.ru) ресурсные записи:
A - @ - [IP-адрес сервера без портов]
А - www - [IP-адрес сервера без портов]

«Усвоение» записей обычно занимает не больше получаса.

Запустим получение сертификата:


sudo certbot --nginx -d example.com -d www.example.com


Certbot автоматически настроит Nginx на использование HTTPS. Его, правда, придется перегенерировать раз в 4 месяца. Но можно настроить и автообновление.

Бывает, что, несмотря на отсутствие правил файервола, блокирующих порты 80 и 443, генерация SSL-сертификата через Let's Encrypt падает. Это может быть связано с политиками хостинг-провайдера, NAT, или другими непрозрачными ограничениями.

Если столкнулись с такой проблемой, попробуйте сменить хостинг-провайдера — чаще всего это решает вопрос с выдачей сертификата.

Это последний шаг, теперь ваш сайт на домене, и у вас в копилке новая ачивка :)

#бэкенд #react
@tproger_web
👍213👎2🤔2🔥1😁1🗿1
Зачем нужен BFF: архитектура, которая избавит фронтенд от боли

Когда у вас один API сразу для разных платформ, это усложняет логику, удлиняет ответы и вообще делает отладку и работу с кодом сложнее. Здесь на помощь приходит BFF — Backend For Frontend — прослойка между клиентскими приложениями и основным API.

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

🤔 А как у вас организован диалог фронта и бэка?

#бэкенд #фронтенд #bff
😁52👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Ngrok: безопасный туннель к локальному серверу за пару секунд

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

Так, вы можете безо всякого труда прямо в VS Code расшарить свой localhost, чтобы похвастаться другу или обсудить детали с клиентом.

#бэкенд #инструменты
🤔6👍43👎2
JSON в веб‑разработке: как работать правильно и не ломать данные

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

В статье собраны советы и примеры: как парсить и сериализовать данные без потерь, избегать ловушек с undefined и циклическими ссылками, и что учесть при работе с большими файлами.

Признавайтесь, косячили с JSON?

#фронтенд #бэкенд #json
4👎3