Вітаю! 😃

Фреймворки 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

Вітаю! 😃

Кому цікаво, як відправити свій сайт в Інтернет!

І ще, щоб на нього міг знайти будь-хто!

І! Абсолютно БЕЗКОШТОВНО - є два сервіси)

Vercel (https://vercel.com) і Netlify (https://www.netlify.com)

Кому цікаво, щоб я зробив пост, як можна відправити сайт на одному з цих сервісів - ставте: 👨‍💻




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

#web

Вітаю! 😃

Ось і довгоочікувальний пост про сайт-портфоліо та Vercel)

Коротенька інструкція, як можна відправити свій сайт в Інтернет, та щоб усі його побачили 😌️️️️️️

Кому цікаво, як налаштувати GitHub, поставте 👨‍💻




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

#web

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


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

У цій статті ми розглянемо основні відмінності між цими технологіями та їхні використання у Python 😌️️

Але для кращого розуміння рекомендую зрозуміти так слова, як "потік" (декілька "операції", які ідуть одна за одною) та "операція" (дія), "процес" (виконання потока; або декількох потоків)


Асинхронність у Python

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

За допомогою асинхронної обробки можна зменшити час очікування на відповідь від зовнішнього ресурсу (сайт, база даних, API, ...)

У Python, для асинхронного програмування використовуються асинхронна бібліотека asyncio

За допомогою неї можна створювати асинхронні функції)


Багатопоточність у Python

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

Потоки можуть ділити спільний доступ до ресурсів, таких як пам'ять та файлові системи тощо

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


Багатопроцесорність у Python

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

У Python, для багатопроцесорної обробки можна використовувати модулі multiprocessing та concurrent.futures

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


Різниця між асинхронністю, багатопоточністю та багатопроцесорністю

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

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

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

Багатопроцесорність дозволяє виконувати кілька процесів одночасно на РІЗНИХ ЯДРАХ ПРОЦЕСОРУ, але через це в елементів нема спільного доступу до ресурсів, але швидкість виконання коду зростає)

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

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

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

Для роботи з асинхронністю використовують бібліотеки asyncio та aiohttp

Для роботи з багатопоточністю можна використовувати бібліотеки threading та concurrent.futures

Для роботи з багатопроцесорністю можна використовувати бібліотеки multiprocessing та concurrent.futures

Наприклад, для використання асинхронного програмування на Python, можна використовувати бібліотеку asyncio

За допомогою цієї бібліотеки можна створювати корутини (функції, які працюють асинхронно), які можуть виконуватися асинхронно

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

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

Для використання багатопоточності на Python можна використовувати бібліотеку threading

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

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

Проте, при використанні багатопоточності, необхідно пам'ятати про синхронізацію потоків, щоб уникнути конфліктів при доступі до спільних ресурсів!

Для використання багатопроцесорності на Python можна використовувати бібліотеку multiprocessing

За допомогою цієї бібліотеки можна створювати декілька процесів, які можуть працювати паралельно

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

Проте!!!
При використанні багатопроцесорності також необхідно пам'ятати про синхронізацію процесів та як відбувається обмін даних між ними)

Також, бібліотека concurrent.futures може бути використана як для роботи з багатопоточністю, так і з багатопроцесорністю

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

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

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

python
import asyncio
import aiohttp

async def fetch_data(session, url):
async with session.get(url) as response:
data = await response.json()
return data

async def main():
urls = [
'https://jsonplaceholder.typicode.com/todos/1',
'https://jsonplaceholder.typicode.com/todos/2',
'https://jsonplaceholder.typicode.com/todos/3'
]

async with aiohttp.ClientSession() as session:
tasks = [fetch_data(session, url) for url in urls]
results = await asyncio.gather(*tasks)

print(results)

if name == '__main__':
asyncio.run(main())


У цьому коді ми створюємо функцію fetch_data, яка здійснює запит до вказаного URL (посилання) і повертає отримані дані у форматі JSON (схожого на тип даних словник)

Далі ми створюємо головну функцію main, в якій визначаємо список URL-адрес для запиту та створюємо об'єкт ClientSession з бібліотеки aiohttp

Далі ми створюємо список задач tasks, які бажаємо виконати асинхронно

Кожна задача є запитом до веб-сервісу, використовуючи функцію fetch_data та об'єкт ClientSession

Ми передаємо цей список задач у функцію asyncio.gather, яка виконує всі задачі паралельно та чекає, поки всі задачі завершаться

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

Ти можеш змінити список URL-адрес на будь-який інший список, який відповідає твоїм потребам 😉

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

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

python
import threading

def print_numbers():
for i in range(10):
print(i)

def print_letters():
for letter in ['a', 'b', 'c', 'd', 'e']:
print(letter)

if name == '__main__':
t1 = threading.Thread(target=print_numbers)
t2 = threading.Thread(target=print_letters)

t1.start()
t2.start()

t1.join()
t2.join()

print("Done!")


У цьому коді ми створюємо дві функції: print_numbers та print_letters

Кожна функція просто виводить послідовність чисел або літер в консолі

Ми створюємо два потока з бібліотеки threading, які вказують, що функція print_numbers та print_letters будуть виконуватись у різних потоках

Після створення потоків ми запускаємо їх за допомогою методу start()

Потім ми використовуємо метод join() для чекання завершення потоків перед тим, як вивести повідомлення "Done!" у кінці програми

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

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

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

python
import multiprocessing

def print_numbers():
for i in range(10):
print(i)

def print_letters():
for letter in ['a', 'b', 'c', 'd', 'e']:
print(letter)

if name == '__main__':
p1 = multiprocessing.Process(target=print_numbers)
p2 = multiprocessing.Process(target=print_letters)

p1.start()
p2.start()

p1.join()
p2.join()

print("Done!")


У цьому коді ми створюємо дві функції: print_numbers та print_letters

Кожна функція просто виводить послідовність чисел або літер в консолі

Ми створюємо два об'єкти процесів з бібліотеки multiprocessing, які вказують, що функція print_numbers та print_letters будуть виконуватись у різних процесах

Після створення процесів ми запускаємо їх за допомогою методу start()

Потім ми використовуємо метод join() для чекання завершення процесів перед тим, як вивести повідомлення "Done!" у кінці програми

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

Висновок 😌

У цій статті ми розглянули різницю між асинхронністю, багатопоточністю та багатопроцесорністю на Python

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

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

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

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

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

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

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


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

Але я тобі спробував пояснити як можна простіше це 😌

Якщо будуть якісь питання додаткові - можеш написати мені особисто 😉 (@alex_demko_work)



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

#python

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

Памʼятаєш, я розповідав, про Олександра (@thebirdisfreed), який збирав групу Frontend, або Backend розробників??

Йому потрібна твоя допомога 😌️️️️️️

Якщо ти відчуваєш себе саме на Seniuor Junior - Middle Frontend розробника

То можеш йому написати)

Саме зараз його команді потрібен ти!

Впевнений, що ти зможеш їм допомогти та себе продвинути в програмуванні 😉️️️️

Тому!
Якщо ти впевнений - не зволікай, пиши йому 😉️️️️



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

#web

Вітаю! 😃

Хочу запросити тебе на свій вебінар по Git та GitHub! 🥳

Це безкоштовний вебінар, так як він перший на цьому каналі, і буде відбуватися прямо тут! У «Нотатках програміста»😌

У вівторок о 19:00 за Києвом (13.06.2023) 😊️️️️️️

Буду радий бачити тебе!

Ми будемо розбирати базу роботи з цими системами

Також, якщо у тебе є запитання - пиши мені в особисті @alex_demko_work
І я спробую їх розглянути на цьому вебінарі 😉️️️️️️

Для твоєї зручності я запишу цей вебінар та через Телеграм його відправлю!
Тож, ти нічого не пропустиш 😌️️️️️️

Ну що?? Зацікавлений?)

Якщо так, то вебінар буде зовсім скоро - підготуй питання, тістечка та чайок на цей час)

А тим часом, можеш подивитися мої минулі вебінари, наприклад: для школи-програмування CURSOR 😉
1.) Розробка професійного JS портфоліо | https://t.me/junior_javascript/1179
2.) Верстка макету з нуля | https://t.me/junior_javascript/1188


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

#webinar

Вітаю! 😃

Сьогодні хотів би поділитися з тобою деякими цікавими деталями про Babel та його використання)

Babel - це інструмент для компіляції (перероблення) сучасного JavaScript коду в код попередньої версії JavaScript, які підтримуються в більшості браузерів

Це дозволяє нам писати код, використовуючи нові функції та синтаксис JavaScript, і не хвилюватися про сумісність зі старішими браузерами 😌

Ось приклад використання Babel у проекті:

Припустимо, ти створив файл “script.js” та “index.html”

У “script.js” ти використовуєш стрілкові функції та spread operator:

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map((number) => number * 2);
console.log(...doubledNumbers);

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

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

Спочатку встанови Babel за допомогою пакетного менеджера npm:

npm install @babel/core @babel/cli @babel/preset-env

Потім створи файл конфігурації Babel “.babelrc” у кореневій папці проекту:

{
"presets": ["@babel/preset-env"]
}

Тепер викличте Babel з командного рядка, щоб зкомпілювати твій код:

npx babel script.js --out-file compiled.js

Тепер ти можеш підключити “compiled.js” у своєму “index.html” і запустити твою програму на будь-якому браузері, який підтримує JavaScript

Це всього лише невеликий приклад використання Babel!

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

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

Спробуй його і дай мені знати, що ти думаєш! 😊


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

#web

Вітаю! 😃

Розумію, що у тебе може буде не багато часу читати мої статті...

Але! Бувають дні, коли замість того, щоб писати щось нове - я тобі можу підказати, що ти міг би перечитати, щоб собі ж повторити 😌️️️️️️

І сьогодні - саме цей день!

Пропоную, тобі перечитати наступні технології

Вони будуть пов'язані з веб-технологіями)

І, сподіваюсь, сподобається тобі 😉️️️️️️


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

#web

Про БЕМ ⚡️

Про ITCSS ⚡️

Про Webpack ⚡️

Про localStorage, sessionStorage та cookies ⚡️

Про фреймворки Angular, Vue та React ⚡️

Про Babel ⚡️

А також, хочу нагадати, що чекатиму тебе завтра о 19:00 за Києвом тут на моєму Телеграм каналі - буду проводити вебінар по Git та GitHub! 🥳️️️️️️