До речі, якщо ти любиш вміст на цьому каналі і хочеш й далі читати мої поради і знахідки, то твоє пожертвування допоможе забезпечити мене ресурсами, для регулярного створення якісного контенту - 5375411501575463, буду вдячний за будь-яку підтримку! 😌

Вітаю! 😃

Контекстний менеджер - це можливість в Python, яка дозволяє автоматично відкривати будь-який файл та редагувати його, й автоматично закривати цей файл

Контекстний менеджер в Python реалізується за допомогою ключових слів with і as

Приклад використання контекстного менеджера в Python:

with open('example.txt', 'r') as f:
f.write(ʼHello world!ʼ)
data = f.read()
print(data)

У цьому прикладі with open('example.txt', 'r') as f: створює контекст, у якому файл 'example.txt' відкривається та спочатку туди ми вписуємо текст, а потім створюємо зміну, у якій читаємо файл та виводимо його у термінал
Після виконання коду контекстний менеджер автоматично закриває файл

Ось так ось 😌
Сподіваюсь, тобі тепер стало зрозуміліше, як це працює 😉


Якщо ти насолоджуєшся моїми постами, донат допоможе мені віддавати більше часу на створення якісного контенту 🤗
5375411501575463

#python

Вітаю! 😃

ORM (Object-Relational Mapping) - це підхід до роботи з базами даних, через обʼєктноорієнтовану мову програмування

У фреймворку Django ORM використовується для спрощення взаємодії з базою даних

Замість того, щоб писати SQL код, ти можеш писати звичайні Python-функції для взаємодії з базою даних

Django ORM забезпечує можливість виконувати операції з базою даних, такі як додавання, зчитування, оновлення та видалення записів

Наприклад, ти можеш створити таблицю у базі даних, через Django, який створить користувача:

from django.db import models

class User(models.Model):
name = models.CharField(max_length=50)
email = models.EmailField()
age = models.IntegerField()

Якщо хочеш додати нового користувача, ви можете створити новий об'єкт моделі та викликати метод save() для збереження його в базі даних:

user = User(name='John', email='john@example.com', age=25)
user.save()

Щоб зчитати всіх користувачів з бази даних, ти можеш викликати метод all() на моделі:

users = User.objects.all()

Для оновлення запису користувача в базі даних ти можеш змінити відповідний атрибут об'єкта моделі та викликати метод save():

user = User.objects.get(name='John')
user.age = 26
user.save()

Отже, Django ORM дозволяє працювати з базою даних за допомогою об'єктів Python, що спрощує розробку веб-додатків та забезпечує безпеку й ефективність взаємодії з базою даних


Якщо ти насолоджуєшся моїми постами, донат допоможе мені віддавати більше часу на створення якісного контенту 🤗
5375411501575463

#python

Вітаю! 😃

Хотів тобі запропонувати розглянути деякі україномовні групи з програмування, у яких ти можеш ставити свої питання, дізнаватися щось цікаве та знаходити роботу/стажування:
- JS
- Angular
- Vue
- ReactJS
- Node.js
- Python
- PHP
- SQL
- Swift
…
- Різне


Якщо ти насолоджуєшся моїми постами, донат допоможе мені віддавати більше часу на створення якісного контенту 🤗
5375411501575463

#programming

Вітаю! 😃

Webpack - це інструмент для збирання JavaScript-програм в один файл (створюючи такі речі, як бандли (bundles))

Він використовується для збирання веб-додатків, написаних на JavaScript а також для збирання стилів та інших ресурсів

Webpack працює з такими поняттями, як модулі та залежності

Кожен JS файл який імпортує інший JS файл являється модулем)

Webpack автоматично визначає ці залежності та збирає їх в один файл

Це дозволяє зменшити кількість запитів до сервера та покращити швидкість завантаження веб-сторінки

Один з головних принципів роботи Webpack - це конфігураційний файл

В ньому вказується, які файли необхідно зібрати в один файл, які плагіни використовувати та які правила використовувати для обробки різних типів файлів

Нижче наведений приклад простої конфігурації webpack, яка збирає два модулі - index.js та styles.css - в один файл з назвою bundle.js:

const path = require('path');

module.exports = {
entry: {
main: './src/index.js',
styles: './src/styles.css',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
};


У даному прикладі властивість entry вказує на те, з яких файлів слід зробити збірку

Ключ main вказує на файл index.js, а ключ styles вказує на файл styles.css

Кожен ключ є назвою вихідного файлу

Не суть важливо, як вони будуть названі

Властивість output вказує на те, де повинен бути збережений скомпільований файл

В даному випадку файл буде збережений у папці dist з назвою [name].bundle.js, де [name] - це назва ключа властивості entry 😉👆

Властивість module використовується для налаштування правил для обробки різних типів файлів

У даному випадку використовується правило для обробки файлів з розширенням .css

Використовується плагін style-loader, який додає стилі до HTML-файлу (у тег <style>, та плагін css-loader, який забезпечує обробку CSS-файлів

Це один з прикладів конфігурації webpack, але він може бути значно складнішим і містити багато різних налаштувань і плагінів; для автоматизації та полегшенню створення твого проекту (зазвичай великого проекту)

Webpack має багато корисних функцій, наприклад, можливість створювати різні конфігурації для різних середовищ, таких як розробка та продакшн, можливість автоматичного перезавантаження сторінки після змін в коді та багато іншого)

Крім того, Webpack має велику кількість плагінів, що дозволяє розширювати його можливості

Наприклад, плагін для оптимізації зображень, який зменшує їх розмір без втрати якості, або плагін для генерації одного HTML-файлу з багатьох різних HTML-файлів

Узагальнюючи, Webpack - це потужний інструмент для збирання веб-додатків, який дозволяє покращити швидкість завантаження сторінок та має багато корисних функцій та плагінів 😌


Якщо ти насолоджуєшся моїми постами, донат допоможе мені віддавати більше часу на створення якісного контенту 🤗
5375411501575463

#web

Вітаю! 😃

Кожен веб-браузер має три різні механізми збереження даних: localStorage, sessionStorage та cookies

Кожен з цих механізмів має свої власні особливості, що робить їх підходящими для різних ситуацій)

LocalStorage і sessionStorage:

LocalStorage та sessionStorage дозволяють зберігати дані в браузері без використання сервера

Також вони дозволяють зберігати дані у вигляді ключ-значення
Дані можуть бути збережені у форматі строки, або числа

Є декілька різниць між localStorage та sessionStorage:

1.) localStorage зберігає дані, які будуть доступні на всіх сторінках в браузері, а в sessionStorage, будуть доступні лише на тій сторінці, де вони були збережені (тобто, коли нажимаєш відкирити сайт в новому вікні, це і мається на увазі різні сторінки)

2.) localStorage зберігає дані без обмеження часу, а в sessionStorage, зберігає дані, поки відкрите вікно браузера

3.) localStorage може зберігати дані максимального розміру 10 Мб, а sessionStorage 5 Мб

Cookies:

Cookies, навпаки, дозволяють зберігати дані на стороні клієнта та сервера

Cookies зберігаються у форматі ключ-значення і можуть бути використані для зберігання інформації про користувача, такої як логін-інформація або налаштування сайту

Одна з важливих рис cookies - це можливість встановлення терміну дії, який вказує на те, як довго cookies буде зберігатися на комп'ютері користувача

Це може бути встановлено на деякий час, після якого cookies буде видалено автоматично, або на необмежений термін

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

Одна з основних відмінностей між cookies та localStorage / sessionStorage полягає в тому, що cookies можуть бути передані на сервер, тоді як localStorage та sessionStorage залишаються тільки на боці клієнта, й можуть бути взяти тільки через JS!

Крім того, cookies дозволяють встановлювати додаткові параметри, такі як термін дії, доступ до cookie тільки через протокол HTTP або HTTPS та можуть містити практично будь-яку інформацію)

Cookies також мають обмеження на розмір, зазвичай більше 4 Кб

Ще одна відмінність полягає в тому, що cookies можуть бути доступні з будь-якої сторінки в межах домену, тоді як localStorage та sessionStorage зберігають дані лише в межах конкретної сторінки

Крім того, cookies захищені від доступу до даних інших доменів

Це означає, що cookies, створені для одного домену, не можуть бути доступні для іншого домену

Це забезпечує більшу безпеку для користувачів!

У підсумку, localStorage, sessionStorage та cookies є різними механізмами збереження даних на стороні клієнта веб-браузера

Кожен з них має свої власні особливості, що робить їх підходящими для різних типів збереження даних

localStorage та sessionStorage дозволяють зберігати дані в браузері без використання сервера, тоді як cookies дозволяють зберігати дані на стороні клієнта та сервера

Відмінності між цими механізмами полягають в тому, що localStorage та sessionStorage зберігають дані на одній сторінці, тоді як cookies можуть бути доступні з будь-якої сторінки в межах домену сайту)

Крім того, cookies мають додаткові параметри, такі як термін дії та обмеження на розмір 😌

(Вам буде фоточка таблиці знизу невеличкого порівняння цих механізмів 😉👇)


Якщо ти насолоджуєшся моїми постами, донат допоможе мені віддавати більше часу на створення якісного контенту 🤗
5375411501575463

#web

Вітаю! 😃

Symfony - це один з найпопулярніших фреймворків на мові програмування PHP

Він був створений у 2005 році і з того часу став одним з найбільш популярних інструментів для створення веб-програм на PHP

Symfony базується на принципах моделі-контролера (MVC) і є дуже гнучким та розширюваним

Фреймворк Symfony має велику кількість вбудованих компонентів, які дозволяють розробникам створювати різні функціональні додатки зі значно меншими зусиллями)

Symfony пропонує відкрите джерело коду та велику спільноту розробників, яка постійно вносить нові зміни і покращення в фреймворк

Це дозволяє отримувати доступ до великої кількості інформації та допомоги у разі потреби

Symfony також підтримує англійську та українську мови, що дозволяє створювати додатки, які легко інтегруються з різноманітними системами та можуть бути доступними для користувачів з різних країн

Крім того, Symfony пропонує широкий вибір інструментів для тестування додатків, що дозволяє забезпечити високу якість програм і допомагає зменшити кількість помилок під час розробки 😌

Symfony є ідеальним вибором для проектів будь-якої складності, від невеликих блогів до великих корпоративних систем

Завдяки цьому веб-додатки, розроблені з використанням Symfony, є надійними та стабільними)

Однією з найбільш сильних сторін Symfony є його підтримка PHP стандартів PSR (там є багато версій його; вони сприяють створенню більш доступного та єфективного PHP-коду)

Symfony також пропонує інтеграцію з багатьма іншими інструментами та фреймворками, такими як Doctrine, Twig, Swift Mailer та багатьма іншими

Ось чому Symfony є досить популярним інструментом у різних проектах 😉

Зразок коду з Symfony:

```PHP 👇👇👇
// src/Controller/ProductController.php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class ProductController extends AbstractController
{
/**
* @Route("/product/{id}", name="product_show")
*/
public function show($id)
{
$product = $this->getDoctrine()
->getRepository(Product::class)
->find($id);

if (!$product) {
throw $this->createNotFoundException(
'No product found for id '.$id
);
}

return $this->render('product/show.html.twig', ['product' => $product]);
}
}
```

У цьому прикладі коду створюється контролер ProductController, який містить метод show, що обробляє запити на URL /product/{id} ({id} - це дані, які передадуть по цій силці, наприклад: /product/10)

Метод show використовує об'єкт Doctrine для отримання продукту з бази даних та передає його дані в шаблон product/show.html.twig для відображення

Якщо продукт не знайдений в базі даних, метод викидає помилку NotFoundException

Шаблон product/show.html.twig містить HTML та Twig-синтаксис для відображення деталей продукту, отриманих з бази даних:
$product) {
throw $this->createNotFoundException(
'No product found for id '.$id
);
}

return $this->render('product/show.html.twig', ['product' => $product]);
}
}
```

У цьому прикладі коду використовуються вбудовані функції Symfony для взаємодії з базою даних та відображення контенту

Загальний підхід Symfony до розробки дозволяє розробникам зосередитися на реалізації бізнес-логіки своїх додатків, замість того, щоб детально розбиратися у взаємодії з базою даних та іншими компонентами...

Узагальнуючи, Symfony є потужним та розширюваним фреймворком, який дозволяє розробникам ШВИДКО та МАКСИМАЛЬНО ПРОСТО (ну, на скільки це можливо) створювати високоякісні веб-додатки з відкритим кодом

Його гнучкість та широкі можливості роблять Symfony одним з найбільш популярних фреймворків для розробки веб-додатків на PHP

Рекомендую спробувати його! Упевнений, що тобі буде просто вивчити його 😌 але, якщо у тебе будуть будь-які питання - можеш написати мені в особисті) я допоможу тобі 😉
@alex_demko_work


Якщо ти насолоджуєшся моїми постами, донат допоможе мені віддавати більше часу на створення якісного контенту 🤗
5375411501575463

#php

Вітаю! 😃️️️️️️

До речі, якщо ти спеціалізуєшся на Symfony, можеш написати ось цій людині: https://www.fiverr.com/testgorilla?source=inbox

Це акаунт команди testgorilla (https://www.testgorilla.com) платформа, яка створення для того, щоб можливо було наймати працівників зі впевненістью, що вони знають тему, на яку їх беруть (тобто, це платформа з тестами, які є замість резюме) 😉️️️️

Їм зараз треба розробник який працював мінумум 3 роки на роботі на повній зайнятості, їм потрібен експерт

Треба зробити 104 питання для тесту про Symfony)
Зарплата за виконання роботи - також на рівні

Так що, якщо тобі цікаво - реєструйся на Fiverr - та вперед!)


Якщо ти насолоджуєшся моїми постами, донат допоможе мені віддавати більше часу на створення якісного контенту 🤗
5375411501575463

#interesting

Вітаю! 😃️️️️️️

SQLite, PostgreSQL, MySQL та MongoDB - це популярні системи управління базами даних (СУБД), що використовуються в сучасній розробці програмного забезпечення)

Кожна з них має свої переваги та недоліки, і вибір правильної бази даних залежить від конкретних потреб вашого проекту

У цій статті ми дослідимо різницю між цими чотирма менеджерами 😌️️️️


SQLite:

SQLite - це легка, безсерверна (вона зберігається у вигляді файлу) система управління базами даних, яка часто використовується в мобільних додатках та невеликих веб-сайтах

Як я памʼяютаю, її навіть Телеграм використовує, щоб на твоєму пристрої зберігати дані переписок)

Оскільки SQLite не потребує налаштування сервера, його дуже легко встановити та використовувати

SQLite також підтримує багато мов програмування та має добру підтримку для транзакцій та індексів (поняття в SQL)

Через це, мені набагато простіше показати тобі приклад роботи з SQLite на Python)

Звернення до бази даних SQLite в Python виконується за допомогою модуля `sqlite3` (його треба імпортувати через: pip install sqlite3 , або pip3 install sqlite3

Давайте розглянемо приклад створення бази даних SQLite та вставки даних у таблицю


import sqlite3

# Відкриваємо з'єднання з базою даних
conn = sqlite3.connect('example.db')

# Створюємо курсор
cursor = conn.cursor()

# Створюємо таблицю
cursor.execute('''CREATE TABLE users
(id INTEGER PRIMARY KEY, name TEXT, age INTEGER)''')

# Додаємо користувачів у таблицю
users = [(1, 'John', 25),
(2, 'Kate', 30),
(3, 'Alex', 28)]

cursor.executemany('INSERT INTO users VALUES (?,?,?)', users)

# Зберігаємо зміни
conn.commit()

# Закриваємо з'єднання
conn.close()


У цьому прикладі ми створили базу даних з назвою example.db (це простий пустий файл, який можна просто створити на компʼютері, або через редактор коду) та створили таблицю users з трьома стовпцями: id, name та age

Потім ми вставили три рядки у таблицю за допомогою методу executemany(), що дозволяє додавати декілька рядків за один раз та знаки питання допомагають робити це безпечно, щоб хакери не поламали нашу базу даних)

На останок, ми зберегли зміни за допомогою методу commit() та закрили з'єднання з базою даних

Для вибірки даних з таблиці ми можемо використовувати метод fetchall()

Давайте розглянемо приклад вибирання данних всіх користувачів з таблиці users


import sqlite3

# Відкриваємо з'єднання з базою даних
conn = sqlite3.connect('example.db')

# Створюємо курсор
cursor = conn.cursor()

# Вибираємо всіх користувачів
cursor.execute('SELECT * FROM users')

# Отримуємо результат вибірки
users = cursor.fetchall()

# Виводимо результат
for user in users:
print(user)

# Закриваємо з'єднання
conn.close()


У цьому прикладі ми використали метод execute() для виконання запиту SELECT * FROM users, що вибирає всі рядки з таблиці users

Потім ми отримали результат за допомогою методу fetchall()

Пройшлись по всім даним завдяки циклу (вони у нас будуть у вигляді списку) та вивели їх в консоль

А потім закрили зʼєднання)
Ось такий невеличкий приклад роботи з SQLite, сподіваюсь тобі було корисно та зрозуміло 😌️️️️

Однак, SQLite не підходить для великих веб-проектів, які вимагають багато одночасних з'єднань з базою даних

Він також не має підтримки для багатокористувацьких систем управління базами даних


PostgreSQL:

PostgreSQL - це потужна, відкрита система управління базами даних, яка підтримує великий набір функцій та може використовуватися для будь-якого розміру проекту

PostgreSQL є безпечною та надійною, яка підтримує транзакції та запити з високою потужністю обробки даних.

PostgreSQL має гнучку архітектуру, яка дозволяє розширювати його функціональність за допомогою додаткових модулів

Він також має дуже активну спільноту, яка постійно вдосконалює та оновлює систему 😌️️️️

На мою думку, він найбільше використовується у Django (це фреймворк для Python)

Однак, PostgreSQL вимагає певних знань та досвіду для належного налаштування та управління базою даних

Він також може бути трохи повільнішим за інші системи управління базами даних, особливо при виконанні складних запитів

Але це, знову ж таки залежить від того, які запити ти будеш робити 😉️️️️️️


MySQL:

MySQL - це одна з найпопулярніших відкритих систем управління базами даних, яка використовується в багатьох веб-проектах

Переважно з мовою програмування PHP

Вона має широку підтримку та легку установку, тому її досить просто використовувати

MySQL є досить швидкою системою, яка дозволяє обробляти великі обсяги даних

Вона також має гнучку архітектуру та багато додаткових функцій, які дозволяють розширювати її функціональність

Однак, MySQL має свої обмеження

Вона не дуже підходить для великих проектів з багатьма одночасними з'єднаннями, оскільки може стати непотужною в таких ситуаціях

Крім того, MySQL може бути вразливою до атак безпеки, якщо не належно настроєна


MongoDB:

MongoDB - це документоорієнтована система управління базами даних, яка використовується для зберігання та обробки невеликих, надто складних даних

MongoDB не використовує традиційні таблиці, а замість цього зберігає дані у вигляді документів

MongoDB має дуже гнучку схему, що дозволяє додавати нові поля до документів без необхідності змінювати всю базу даних

Вона також має дуже швидкі читання та записи даних, що робить її ідеальним вибором для веб-додатків з великими обсягами даних

На мою думку її найбільш використовують з Node.js (розширенням для звичайного JavaScript)

Однак, MongoDB не має підтримки для транзакцій, що може бути серйозним обмеженням для проектів, які потребують суворої цілісності даних

Крім того, MongoDB може вимагати більш великого обсягу пам'яті компʼютера, для ефективної роботи, що може збільшувати вартість його використання для компанії


Висновок:

Отже, вибір системи управління базами даних залежить від багатьох факторів, таких як:
- Розмір проекту
- Обсяг даних
- Кількість одночасних з'єднань та потреба в суворій цілісності даних

Кожна з цих систем має свої переваги та обмеження, тому важливо ретельно вивчити їх перед вибором системи управління базами даних для свого проекту))

Ось так ось 😌️️️️


Якщо ти насолоджуєшся моїми постами, донат допоможе мені віддавати більше часу на створення якісного контенту 🤗
5375411501575463

#sql

Вітаю! 😃️️️️️️

Зробив тут для однієї групи проект)

Хотів би з тобою поділитися 😉️️️️️️

Проект портфоліо, написаний з використанням препроцесорів, webpack та Node.js (а точніше: Express.js)

Для запуску проекту - завантаж папку та напиши в терміналі npm install (але перед цим - завантаж Node.js на свій компʼютер за цим посиланням: https://nodejs.org/en)

А потім у терміналі перейди в папку dest (напиши команду cd dest) та запусти сервер: node server.js

ВІТАЮ!!! 🥳️️️️️️
Тепер ти перейшовши за посиланням: localhost:8000 можеш дивитися на цей проект))

Більше того скажу!
Можеш перейти за посиланням localhost:8000/login та написати в логін: root і там де пароль: root

І ти війдеш у адмін панель, де зможеш контролювати всі проекти на портфоліо))

А далі - цей сайт можеш оптимізовувати та покращувати! 😃️️️️️️

Завантажити всі шрифти на сайт, зробити авто-префікси, покращити SEO та багато іншого

Але це вже я залишаю на твій вибір)
Користуйся сайтом на здоровʼя 😌️️️️

Бажаю вдачі!!!
І якщо щось не запрацювало - можеш мені написати сюди: @alex_demko_work 😉️️️️️️


Якщо ти насолоджуєшся моїми постами, донат допоможе мені віддавати більше часу на створення якісного контенту 🤗
5375411501575463

#web

І ще!!!

Дякую вам!!!

Нас більше 100 за такий короткий період часу) як же я радий, що вам подобається цей контент та ви активно ним користуєтесь 😌️️️️️️

Чесно, сподіваюсь, що ви з насолодою читаєте кожен день ці пости)

Хочу для вас робити кращий та ще якісніший контент

Так що ми не зупиняємось!

Далі буде більше та ще цікавіше 😉️️️️️️🤗️️️️️️

Вітаю! 😃

Фреймворки Angular, Vue та React – це три найбільш популярних інструментів для розробки веб-додатків на сьогоднішній день)

А точніше для створення SPA (Single Page Application) - це сайти, які зроблені з одного HTML-файлу і все… більше HTML-файлів нема

У цій статті ми розглянемо їх особливості та переваги 😌


Angular – це повноцінний фреймворк для розробки веб-додатків

Він був розроблений компанією Google та випущений у 2010 році

Angular забезпечує розробникам потужні інструменти для створення складних веб-додатків, а саме: SPA (Single Page Application) та PWA (Progressive Web Application)

Про PWA напишу окрему статтю

Angular використовує TypeScript (мову програмування, яка дозволяє створювати типізований, безпечний та структурований код; він у кінці переробляється в JavaScript)

Angular також забезпечує широкі можливості для тестування, що дозволяє розробникам перевіряти якість свого коду перед випуском

Однак, Angular має високий поріг входу, тому що він має велику кількість концепцій, які потрібно зрозуміти перед початком розробки

Іншими словами: Angular краще використовувати, коли у тебе буде дуже великий та довгостроковий веб-додаток

У маленьких, або середніх проектах він буде занадто великим… будеш більше мучитися з Angular, ніж використовувати його фішки 😉


Vue – це простий та легкий у використанні фреймворк для розробки веб-додатків

Він був створений в 2014 році одним розробником з Китаю, Еваном Ю

Vue має просту структуру та дозволяє розробникам швидко створювати веб-додатки)

Vue має вбудовану систему компонентів, що дозволяє розробникам легко організовувати свій код

Крім того, Vue дозволяє використовувати JSX – синтаксис, який дозволяє створювати компоненти з використанням HTML-подібного синтаксису

Vue також має широку базу спільноти та плагінів, що дозволяє розширювати його можливості (наприклад, NuxtJS, Vuetify та інші)

Однак, Vue не має такої потужності, як Angular, тому його використовують переважно для створення легких проектів 😌


React – це ще один популярний фреймворк для розробки веб-додатків

Він був розроблений компанією Facebook (зараз Meta) та випущений у 2013 році

React використовується для створення SPA, а також для розробки мобільних додатків з використанням React Native

React має просту структуру та дозволяє розробникам швидко створювати веб-додатки

Він використовує JSX та Virtual DOM – технології, що дозволяють розробникам легко організовувати свій код та зберігати стан додатку

Саме завдяки Virtual DOM наш React став популярним

Ця технологія забезпечує відслідкування змін у КОНКРЕТНОМУ елементі (цю ж технологію використовує Vue)

А Angular, на жаль, так робити не може…

React також має велику базу спільноти та плагінів, що дозволяє розширювати його можливості (наприклад, Redux, MaterialUI, Styled Components)

Однак, React не має такої потужності, як Angular, тому він може бути менш корисним для розробки дуже складних проектів

Але у нього більше потужності та налаштувань, ніж Vue

Ось чому його використовують переважно у середніх проектах)


Отже, які фреймворки варто використовувати?

Все залежить від конкретних потреб проекту та ваших власних знань та навичок)

Angular може бути корисним для створення дуже складних проектів, які потребують високої потужності та безпеки

Vue може бути корисним для створення маленьких та середніх проектів, які потребують швидкості та легкості використання

React може бути корисним для створення середніх (навіть, у принципі й у маленьких та великих) по масштабам проектів та мобільних додатків, а також для проектів, які потребують швидкості та легкості використання

Крім того, варто враховувати, що кожен фреймворк має свої власні способи роботи та концепції, тому важливо вивчити їх перед використанням 😉

Тепер, як тільки ми подивилися теоретичну частину, можемо подивитися невеличку практику по кожному фреймворку:



Ось приклад компонента на Angular, який відображає список елементів зі списку, переданого як вхідний параметр:

import { Component, Input } from '@angular/core';

@Component({
selector: 'app-list',

template: `
<h2>{{ title }}</h2>
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
`,
})
export class ListComponent {
@Input() title: string;
@Input() items: string[];
}


Цей код описує компонент ListComponent, який містить два вхідних параметри: title та items

Компонент відображає заголовок та список елементів items, використовуючи директиву *ngFor (саме завдяки ній ти можеш зробити цикл по кожному елементу в масиві та вивести їх)

Компонент може бути використаний також і в інших компонентах, шляхом написання тегу <app-list> (ми його написали, там де була стрічка: selector: ‘app-list’) 😉

Angular має багато інших можливостей для створення складних веб-додатків, таких як маршрутизація, обробка подій, робота з формами та багато іншого


Ось приклад компонента на Vue, який також відображає список елементів зі списку, переданого як вхідний параметр:

<template>
<div>
<h2>{{ title }}</h2>
<ul>
<li v-for="item in items" :key="item">{{ item }}</li>
</ul>
</div>
</template>

<script>
export default {
name: 'ListComponent',
props: {
title: String,
items: Array
}
}
</script>

Цей код описує компонент ListComponent, який також містить два вхідних параметри: title та items

Компонент відображає заголовок та список елементів items, використовуючи директиву v-for (саме завдяки ній ти можеш зробити цикл по кожному елементу в масиві та вивести їх)

Компонент може бути використаний в інших компонентах шляхом включення тегу <list-component> (ми його написали, там де була стрічка: name: ‘AppComponent’)

Vue також має багато інших можливостей для створення складних веб-додатків, таких як маршрутизація, обробка подій, робота з формами та багато іншого)

Як ти бачиш, усе дуже схоже, тільки можливості та написання - трішки різне 😌


А ось приклад компонента на React, який також відображає список елементів зі списку, переданого як вхідний параметр:

import React from 'react';

function ListComponent(props) {
return (
<div>
<h2>{props.title}</h2>
<ul>
{props.items.map(item => <li key={item}>{item}</li>)}
</ul>
</div>
);
}

export default ListComponent;

Цей код описує функціональний компонент (компонент написаний завдяки слову function) ListComponent, який має два вхідних параметри: title та items

Компонент відображає заголовок та список елементів items, використовуючи метод map для проходженні по масиву та відображає кожен елемент на сайті

Компонент може бути використаний в інших компонентах шляхом включення тегу <ListComponent> (тому що, ми таким словом назвали назву функції: function ListComponent(props) {)

Як ти міг здогадатися, React також має багато інших можливостей для створення складних веб-додатків)


Ось так ось!
Як бачиш, усе дуже схоже одне на одне 😌

Так що, вибирай, те що тобі легше та цікавіше - і дізнавайся про цю технологію більше) 😉


Якщо ти насолоджуєшся моїми постами, донат допоможе мені віддавати більше часу на створення якісного контенту 🤗
5375411501575463

#web