DEV Community: Muhammed Sobirov

Muvaffaqiyatli dasturiy ta'minotning siri nimada?

Muhammed Sobirov — Mon, 08 Jan 2024 12:58:08 +0000

Dasturiy ta'minotni ishlab chiqish dunyosida biz ko'pincha aysbergning porloq uchida darhol ko'rinadigan xususiyatlarga e'tibor qaratamiz. Biroq, sirt ostida chindan ham ajoyib dasturiy ta'minotni yaratish uchun zarur bo'lgan juda ko'p muhim elementlar mavjud. Ushbu maqolada men dasturiy ta'minot muvaffaqiyatiga hissa qo'shadigan ko'rinadigan va ko'pincha e'tibordan chetda qoladigan jihatlar haqida qisqacha ma'lumot beraman.

Ko'rinadigan qism: foydalanuvchining birinchi taassurotlari

Dasturlash tillari va ramkalari: har qanday dasturiy mahsulotning qurilish bloklari, ularning to'g'ri tanlovi ishlash, miqyoslilik va kelajakdagi o'sish uchun zamin yaratishi mumkin.
UI/UX: bu erda inson va kompyuterning o'zaro ta'siri sodir bo'ladi va u intuitiv va sezgir bo'lishi kerak. Ajoyib dasturiy ta'minot o'z foydalanuvchilarini qulaylik va bashorat qilish bilan quvontiradi.
Kod sifati va ishlashi: toza, samarali kod dasturiy ta'minot ishonchli va tezkor ekanligini anglatadi. Ilova tezligi foydalanuvchilarning qoniqish ko'rsatkichidir.
Sinovga asoslangan rivojlanish (TDD): TDD har bir kod parchasi zarur va funktsional bo'lishini ta'minlaydi. Bu kelajakdagi xatolar va nosozliklarga qarshi profilaktika chorasi.

Yashirin poydevor: chidamlilik va moslashuvchanlik asoslari

Tizim arxitekturasi: shahar infratuzilmasi singari, mustahkam arxitektura dasturiy ta'minot xususiyatlarini qo'llab-quvvatlaydi va yanada kengaytirishga imkon beradi.
CI/CD: CI/CD usullari dasturiy ta'minotning o'zgarishlarga chidamliligini saqlab, ilovalarni muntazam yangilab turishga imkon beradi.
Agile metodologiyasi: Agile jamoaga moslashuvchan bo'lishga va fikr-mulohazalarga javob berishga imkon beradi, shu bilan birga doimiy takomillashtirish madaniyatini rivojlantiradi.
Domenga asoslangan dizayn (DDD): dasturiy ta'minotni ishlab chiqishda ushbu strategik yondashuv asosiy biznes tushunchalariga qaratilgan bo'lib, dasturiy ta'minotning dolzarbligini va foydalanuvchi ehtiyojlariga mos kelishini ta'minlaydi.
Dizayn naqshlari va eng yaxshi amaliyotlar: ular ko'p yillik jamoaviy tajriba orqali to'plangan ko'p yillik donolikni ifodalaydi va dasturiy ta'minotni ishlab chiqishda keng tarqalgan muammolarga yechim taklif qiladi.
Kodlanri tekshirish va hamkorlik madaniyati: tajribali va kuchli ishlab chiquvchilar tomonidan kodni qayta ko'rib chiqish kodning yuqori sifatini ta'minlaydi va hamkorlik madaniyati jamoaviy javobgarlikni rivojlantiradi.
Texnik qarzni boshqarish: bu dasturiy mahsulotni ish holatida saqlashning asosiy jihati. Texnik qarzni faol boshqarish uzoq muddatli muammolardan qochadi va shu bilan mahsulotning silliq va barqaror rivojlanishi uchun yo'lni osonlashtiradi.
Xavfsizlik: ma'lumotlar buzilishi halokatli bo'lishi mumkin bo'lgan davrda xavfsizlik shunchaki xususiyat emas, balki foydalanuvchilar uchun va'dadir.
Foydalanuvchi va bozorni o'rganish: bozor va foydalanuvchini tushunish dasturiy ta'minotning haqiqiy ehtiyojlarga javob berishini va dolzarb muammolarni hal qilishini ta'minlash uchun juda muhimdir.
Moslashuvchanlik va o'rganish: texnologiya dunyosi doimiy ravishda rivojlanib bormoqda va bizning dasturiy ta'minotimiz xuddi shu tarzda rivojlanishi kerak. O'rganish va moslashtirish madaniyati dasturiy ta'minotning dolzarbligini ta'minlaydi.

Xulosa qilib aytganda, dasturiy ta'minotning ko'rinadigan xususiyatlari ko'pincha barcha shon-sharaflarni o'ziga jalb qiladi, ularning asosiy tarkibiy qismlari ularning chidamliligi, xavfsizligi va moslashuvchanligini ta'minlaydigan noma'lum qahramonlardir. Ajoyib dasturiy ta'minot nafaqat sirtda ko'rgan narsangiz, balki uning ko'rinmas qismlariga ehtiyotkorlik, dizayn va g'amxo'rlik chuqurligidir.

What makes a great software product?

Muhammed Sobirov — Mon, 08 Jan 2024 11:30:38 +0000

Unveiling the Hidden Depths of Software Excellence

In the world of software development, we often fixate on the features that are immediately visible, the gleaming tip of the iceberg. However, beneath the surface lies a mass of critical elements that are essential to creating truly great software. Here’s an exploration of both the visible and the often-overlooked aspects that contribute to software success.

The Visible Peak: The User's First Impressions

Programming Languages and Frameworks: The building blocks of any software product, the right choice can set the foundation for performance, scalability, and future growth.

UI/UX: This is where the human-computer interaction happens, and it must be intuitive and responsive. Great software delights its users with a seamless experience.

Code Quality and Performance: Clean, efficient code means the software is reliable and fast. Performance is the heartbeat of user satisfaction.

Test-Driven Development (TDD): TDD ensures that every piece of code is necessary and functional. It's a proactive measure against future bugs and issues.

The Submerged Foundation: The Core of Longevity and Flexibility

System Architecture: Like a city's infrastructure, a robust architecture supports the software's features and allows for future expansion.

CI/CD: CI/CD practices enable regular application updates, keeping the software resilient against changes.

Agile Methodology: Agile keeps the team nimble and responsive to feedback, fostering a culture of continuous improvement.

Domain-Driven Design (DDD): This strategic approach to software design focuses on the core business concepts, ensuring the software is relevant and aligned with user needs.

Design Patterns and Best Practices: They are the distilled wisdom from years of collective experience, offering solutions to common problems in software design.

Code Review and Collaborative Culture: Peer reviews ensure high-quality code, and a collaborative culture encourages collective ownership and shared responsibility.

Technical Debt Management: A crucial aspect of maintaining a software product's health. Actively managing technical debt helps to prevent long-term issues, facilitating a smooth and sustainable development path for the product.

Security: In an age where data breaches can be catastrophic, security is not just a feature but a promise to users.

User and Market Research: Understanding the market and the user is crucial for ensuring that the software meets real needs and solves actual problems.

Adaptability and Learning: The tech world is ever-evolving, and so must our software. A culture of learning and adaptation ensures software remains relevant.

In conclusion, while the visible features of software products often steal the spotlight, the underlying components are the unsung heroes that ensure its longevity, security, and adaptability. A great software product isn’t just about what you see on the surface—it’s also about the depth of thought, design, and care that goes into its unseen parts.

В чем секрет успешного софта?

Muhammed Sobirov — Mon, 08 Jan 2024 11:26:48 +0000

В чем секрет успешного софта?

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

Видимая часть: Первые впечатления пользователя

Языки программирования и фреймворки: Строительные блоки любого программного продукта, правильный выбор которых может заложить основу для производительности, масштабируемости и будущего роста.
UI/UX: Именно здесь происходит взаимодействие человека и компьютера, и оно должно быть интуитивно понятным и отзывчивым. Отличное программное обеспечение радует своих пользователей удобством и предсказуемостью.
Качество кода и производительность: Чистый, эффективный код означает, что программное обеспечение является надежным и быстрым. Скорость приложения - это показатель удовлетворенности пользователей.
Разработка на основе тестирования (TDD): TDD гарантирует, что каждый фрагмент кода необходим и функционален. Это превентивная мера против будущих ошибок и неполадок.

Скрытый фундамент: Основа долговечности и гибкости

Архитектура системы: Подобно городской инфраструктуре, надежная архитектура поддерживает функции программного обеспечения и позволяет дальнейшее расширение.
CI/CD: Методы CI/CD позволяют регулярно обновлять приложения, сохраняя устойчивость программного обеспечения к изменениям.
Методология Agile: Agile позволяет команде быть гибкой и реагировать на обратную связь, способствуя культуре постоянного совершенствования.
Дизайн, основанный на предметной области (DDD): Этот стратегический подход к разработке программного обеспечения фокусируется на основных бизнес-концепциях, обеспечивая актуальность программного обеспечения и соответствие потребностям пользователей.
Дизайн паттерны и Best Practices: Они представляют собой многолетную мудрость, накопленную за годы коллективного опыта, и предлагают решения распространенных проблем при разработке программного обеспечения.
Код ривью и культура совместной работы: Ревью кода со стороны более опытных и сильных разработчиков обеспечивает высокое качество кода, а культура совместной работы развивает коллективную ответственность.
Управление техническим долгом: Это ключевой аспект поддержания программного продукта в рабочем состоянии. Активное управление техническим долгом позволяет избегать долгосрочных проблем, облегчая тем самым путь для гладкого и устойчивого развития продукта.
Безопасность: В эпоху, когда утечки данных могут быть катастрофическими, безопасность - это не просто функция, а обещание для пользователей.
Исследование пользователей и рынка: Понимание рынка и пользователя имеет решающее значение для обеспечения того, чтобы программное обеспечение отвечало реальным потребностям и решало актуальные проблемы.
Адаптивность и обучение: Мир технологий постоянно развивается, и наше программное обеспечение должно развиваться таким же образом. Культура обучения и адаптации гарантирует, что программное обеспечение остается актуальным.

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

Кастомный React хук— useDebounce

Muhammed Sobirov — Mon, 16 Jan 2023 18:59:13 +0000

Одна из замечательных особенностей React заключается в том, что он позволяет создавать собственные хуки и предлагать более эффективные способы решения проблем. Понимание того, как создать собственный хук, является ценным навыком разработчика. Есть много отличных кастомных хуков, которые «стандартизированы» в сообществе разработчиков React, и useDebounce() — один из них.

В этой статье мы собираемся создать мини-приложение, которое позволит пользователям искать изображения из Unsplash API. Я также предоставлю ссылку на репозиторий Github.

Создание акаунта в Unsplash

Сначала нам нужно зарегистрироваться в Unsplash
Далее нам нужно создать там новое приложение

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

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

Создание приложения

Просто создайте минимальное React приложение. Я использую Vite.

npm create vite@latest

Выберите простой шаблон React на основе JavaScript и позвольте ему настроить проект. После завершения настройки нажмите npm i.

Когда все будет готово, создайте файл .env в корневой папке проекта.

И добавьте ключи доступа и секретные ключи, как показано ниже. Если вы используете Vite, важно начинать имя ключа с «VITE».

VITE_ACCESS_KEY="your key"
VITE_SECRET_KEY="your key"

Затем перейдите к файлу App.jsx и удалите оттуда лишний код, как показано ниже:

import { useState } from "react";
import "./App.css";

function App() {
  return <div className="App"></div>;
}

export default App;

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

import { useState } from "react";
import "./App.css";

function App() {
  const [searchTerm, setSearchTerm] = useState("");

  return (
    <div className="App">
      <div>
        <label htmlFor="search-input">Search Unsplash images</label>
        <input type="search" id="search-input" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
      </div>
    </div>
  );
}

export default App;

Идея в том, что мы отправляем запрос в Unsplash API каждый раз, когда пользователь обновляет слово поиска. Простым способом реализации этой логики было бы использование useEffect с searchTerm в массиве зависимостей.

import { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [searchTerm, setSearchTerm] = useState("");

  const handleSearch = () => {
    console.log("searching for", searchTerm);
  };

  useEffect(() => {
    handleSearch();
  }, [searchTerm]);

  return (
    <div className="App">
      <div>
        <label htmlFor="search-input">Search Unsplash images</label>
        <input type="search" id="search-input" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
      </div>
    </div>
  );
}

export default App;

Можете ли вы угадать проблему с этим подходом? Откроем консоль браузера и проверим, что там происходит:

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

useDebounce()

Давайте создадим файл с именем useDebounce:

Внутри файла мы собираемся написать сам хук. Идея в том, что мы хотим предотвратить быстрое изменение состояния searchTerm . Этот хук принимает два входных параметра — значение, которое должно “отскочить”, и задержка в миллисекундах (обычно 500). При объединении useDebounce с useEffect вы можете быть уверены, что будет отражено только самое последнее значение, поскольку хук не будет вызываться в течение указанного времени. Вот код:

function useDebounce(value, delay) {
  // value and delay in ms (1000ms = 1s)
  // debounced values
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(
    () => {
      // Update debounced value after delay
      const t = setTimeout(() => {
        setDebouncedValue(value);
      }, delay);

      // clean up the timeout after value changes
      return () => {
        clearTimeout(t);
      };
    },
    [value, delay] // re-run if value or delay changes
  );
  return debouncedValue;
}

export default useDebounce;

Наконец, давайте объединим это с нашей существующей логикой и сравним с предыдущим поведением:

import { useState, useEffect } from "react";
import "./App.css";
import useDebounce from "./useDebounce";

function App() {
  const [searchTerm, setSearchTerm] = useState("");
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  const handleSearch = () => {
    console.log("searching for", searchTerm);
  };

  useEffect(() => {
    if (debouncedSearchTerm) {
      handleSearch();
    }
  }, [debouncedSearchTerm]);

  return (
    <div className="App">
      <div>
        <label htmlFor="search-input">Search Unsplash images</label>
        <input type="search" id="search-input" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
      </div>
    </div>
  );
}

export default App;

Разве это не безумие, насколько эффективной стала наша поисковая логика?

Unsplash интеграция

Теперь с этим кодом мы можем безопасно интегрировать поиск Unsplash.

import { useState, useEffect } from "react";
import "./App.css";
import useDebounce from "./useDebounce";

const API_URL = "https://api.unsplash.com/search/photos";

function App() {
  const [searchTerm, setSearchTerm] = useState("");
  const [results, setResults] = useState([]);

  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  const handleSearch = async () => {
    const response = await fetch(
      `${API_URL}?query=${debouncedSearchTerm}&client_id=${import.meta.env.VITE_ACCESS_KEY}`
    );
    const data = await response.json();
    return data.results;
  };

  useEffect(() => {
    if (debouncedSearchTerm) {
      handleSearch().then((results) => setResults(results));
    }
  }, [debouncedSearchTerm]);

  return (
    <div className="App">
      <div>
        <label htmlFor="search-input">Search Unsplash images</label>
        <input type="search" id="search-input" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
      </div>
      <div>
        {results?.map((result) => (
          <img key={result.id} src={result.urls.small} alt={result.alt_description} />
        ))}
      </div>
    </div>
  );
}

export default App;

Вот и все

Я надеюсь, что вы нашли эту статью/туториал полезным. Я рекомендую вам попробовать useDebounce в своих проектах и создавать высококачественные приложения. Вот ссылка на репозиторий Github.

Оптимизация React приложения с помощью React.lazy

Muhammed Sobirov — Sun, 08 Jan 2023 15:05:40 +0000

Если вы ищете способ оптимизировать свое React приложение, React.lazy — отличный инструмент, который стоит иметь под рукой. Он позволяет уменьшить размер бандла вашего приложения, отображая только те компоненты, которые нужны пользователю. Это понятие известно как “lazy-loading” («ленивая загрузка»), другими словами, компоненты загружаются только тогда, когда они необходимы. Чтобы лучше понять преимущества React.lazy, важно иметь общее представление о таких понятиях, как «бандлинг» и «разделение кода».

Бандлинг

Проще говоря, «бандлинг» — это когда ваш импортированный код объединяется в один файл для загрузки всего приложения сразу. Ниже приведен простой пример того, как работает бандлинг:
hi.js

export const sayHi = () => {
        return "Hi";
}

index.js

import { sayHi } from './hi.js'

console.log(sayHi()); // Hi

Вот что происходит после объединения приложения:

export const sayHi = () => {
        return "Hi";
}

console.log(sayHi()); // Hi

Логично, не так ли?

Связывание выполняется на уровне Webpack и доступно из коробки, если вы используете CRA, Next.js и другие подобные инструменты.

Разделение кода

Таким образом, бандлинг определенно помогает нам, верно? Однако есть определенные случаи, которые следует учитывать. Когда ваше приложение вырастет, размер бандлинга тоже будет расти. Особенно когда мы используем сторонние библиотеки. Вот где в игру вступает разделение кода. Разделение кода — это процесс создания нескольких бандл пакетов, которые динамически загружаются во время ран тайма (выполнения). С разделением кода вы можете быть уверены, что в приложение загружается только тот код, который нужен пользователю в точное время. Условный рендеринг — неплохой вариант использования в этом сценарии. Давайте рассмотрим следующий фрагмент кода:

...
import Component1 from './Component1.jsx';
import Component2 from './Component2.jsx';

function Container() {
  const [expanded, setExpanded] = useState(false);

  const handleChange = () => {
    setExpanded(!expanded);
  };

  return (
    <div>
      <button onClick={handleChange}>toggle</button>

      {expanded ? <Component1 /> : <Component2 />}
    </div>
  );
}

...

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

Разделение кода с помощью React.lazy

React.lazy помогает динамически отображать компоненты с помощью динамического импорта. Он автоматически загрузит нужный бандл пакет при первой загрузке страницы.

React.lazy принимает функцию в качестве параметра с динамическим импортом в ней и возвращает Promise, содержащее разрешенный модуль с компонентом экспорта по умолчанию. Поскольку процесс является асинхронным, компоненты с «ленивой загрузкой» должны быть заключены в компонент Suspense, который можно использовать для указания того, что модуль загружается. Вот предыдущий пример, но теперь с использованием React.lazy:

...
import React, { Suspense } from 'react';

const Component1 = React.lazy(() => import('./Component1.jsx'));
const Component2 = React.lazy(() => import('./Component2.jsx'));

function Container() {
  const [expanded, setExpanded] = useState(false);

  const handleChange = () => {
    setExpanded(!expanded);
  };

  return (
    <div>
      <button onClick={handleChange}>toggle</button>

                <Suspense fallback={<div>Loading...</div>}>
              {expanded ? <Component1 /> : <Component2 />}
                </Suspense>

    </div>
  );
}

...

fallback свойство в Suspense принимает любой компонент React, который может быть отрендерен при загрузке “ленивого” компонента.

Есть гораздо больше и гораздо лучших вариантов использования React.lazy, например, разделение кода на основе раутинга. Обязательно ознакомьтесь с официальной документацией.

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