SDUI, или Как бэкенд-разработчику почувствовать себя фронтендером

Server Driven UI (SDUI) — это пользовательский интерфейс, управляемый сервером. Он сокращает клиентскую логику и обеспечивает согласованность между клиентскими платформами (web, iOS, Android и т. д.) за счёт возврата информации о продукте (элементов экрана для отображения и их содержимом) из API.

Другими словами, эта технология позволяет UI сделать запрос к API и получить в ответ JSON, в котором содержатся компоненты экрана (кнопки, checkbox’ы, поля для ввода и т. д.), а также логика их отображения под необходимую платформу.

Как это работает, рассказали в статье.

#ui #бэкенд #sdui

Делаем из простого ToDo App приложение уровня enterprise

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

https://www.youtube.com/watch?v=nYlv0I9Ips0

Best Practices for Fetching Data in Vue.js

https://blog.jobins.jp/best-practices-for-fetching-data-in-vuejs#heading-separate-api-calls-into-services

#coding
#vuejs

Making and publishing components with Vue 3 and Vite

https://www.matijanovosel.com/blog/making-and-publishing-components-with-vue-3-and-vite

#coding
#vue

Александр Моргунов — Разбираемся в Feature-Sliced Design

Александр из Samokat.tech рассказывает, что из себя представляет архитектурная методология Feature-Sliced Design и ее основные концепты.

https://www.youtube.com/watch?v=H_rJ0zB8rqc

How to run a Windows cmd.exe command using Node.js and detach the process?

const { spawn } = require('child_process');

// Command to run (replace it with your actual command)
const command = 'cmd.exe';
const args = ['/c', 'your_command_here'];

// Spawn the process
const child = spawn(command, args, {
  detached: true,
  stdio: 'ignore', // This option redirects the stdio of the child process to /dev/null
});

// Unref the child process to allow the parent to exit independently
child.unref();

Replace 'your_command_here' with the actual command you want to run. The detached: true option ensures that the child process runs independently of the parent process. The stdio: 'ignore' option redirects the standard input/output/error of the child process to /dev/null (or equivalent on Windows), which is suitable for a detached process.

Keep in mind that detaching the process means that it will continue running even if the parent Node.js process exits. Ensure that your Node.js script handles any necessary cleanup or waits for the child process to complete if needed.

#coding
#node

10 backend понятий, о которых желательно знать frontend разработчику

Чтобы быть в теме и понимать, о чем говорят бекендеры на стендапах, вот небольшая обзорная статья, рассказывающая о таких понятиях как шардинг, балансировщик, API Gateway и еще некоторых других.

https://dev.to/thesanjeevsharma/10-backend-terms-every-frontend-developer-should-know-2o2h

Sonar Docs

Documentation for SonarQube Server, SonarQube Cloud, and SonarQube for IDE.

https://docs.sonarsource.com

Што-то про юнит тесты
https://dev.to/byteminds/how-i-started-writing-unit-tests-for-vue-components-1771?bb=206787

Frontend Stuff

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

#инструменты #фронтенд #github

Как задеплоить вебаппку «Телеграма» всего за 20 минут

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

#telegram #webapp #miniapp

AbortController в JavaScript

Сегодня мы рассмотрим интересный инструмент в JS. AbortController в JS — инструмент, который позволяет отменять асинхронные операции в любой момент. В этой статье разберёмся, как он работает, где пригодится и какие у него есть проблемы.

👉 @frontendInterview

Event loop для чайников: простыми словами о сложном механизме браузера

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

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

Preventing the Layout Shift Caused by Scrollbars

https://dev.to/rashidshamloo/preventing-the-layout-shift-caused-by-scrollbars-2flp

#coding
#css

Украл с GitHub красивую шпаргалку по Docker на русском языке.

Тут есть всё: базовые команды, сборка образов, отладка, сети и т.д. Проще говоря, всё, что нужно знать уважающему себя портовому работяге.

Сохраняем.

Feature-Sliced Design – альтернативный подход к организации кода приложений

https://habr.com/ru/companies/avito/articles/752536/

#coding
#architecture

Creating multi-window Electron apps using React portals

https://pietrasiak.com/creating-multi-window-electron-apps-using-react-portals

#coding
#react

AbortController для отмены запросов при смене страницы (SPA)

https://habr.com/ru/articles/746740/

#coding
#js