Привіт і ласкаво просимо до моєї першої статті тут! Сьогодні я розповім вам свою особисту історію навчання будівництву архітектури та подоланню всіх труднощів, які з цим пов’язані 🙂

Все почалося три роки тому, коли я вирішив створити надійний та підтримуваний додаток на Express.js. Спочатку моя кодова база була хаотичною: контролери, сервіси і навіть бізнес-логіка були розкидані по всьому проекту.

Як це було раніше:

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

У папці app кожна підпапка відповідає за унікальну частину системи:

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

Фото: Karsten Winegeart на Unsplash

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

Саме тому вони використовуються в майже всіх основних фреймворках, таких як Solid, Qwix, Angular та Vue.

Вони стали настільки популярними, що наразі існує пропозиція додати їх безпосередньо в мову JavaScript:

[

GitHub - tc39/proposal-signals: Пропозиція додати сигнали до JavaScript.

Пропозиція додати сигнали до JavaScript. Внесіть свій вклад у розробку tc39/proposal-signals, створивши обліковий запис на…

github.com

](https://github.com/tc39/proposal-signals?source=post_page-----19cbcb6b802b--------------------------------)

Сигнали — це чудово, але як саме вони працюють за лаштунками?

В цій статті я використаю синтаксис SolidJs, але концепції … Читати далі

Фото Seth Doyle на Unsplash

В Alan ми використовували Webpack протягом кількох років. Хоча він прекрасно виконував свої функції, з часом став вузьким місцем для розробки. Нещодавно ми завершили міграцію на Rspack, альтернативу на Rust, яка обіцяє кращу продуктивність. Це коротка історія нашого шляху та здобутих уроків.

Вибір бандлера

Бандлери для JavaScript — це інструменти, які пакують наш код і його залежності в один або кілька JavaScript файлів, оптимізованих для продуктивності та завантаження у браузері.

Коли Alan починав свою діяльність (у 2016 році), Webpack був де-факто бандлером для JavaScript додатків. Він пройшов перевірку часом, мав велику екосистему та широкі … Читати далі

Втомилися створювати компоненти інтерфейсу з нуля? Дозвольте представити вам кілька чудових бібліотек для створення UI, які заощадять вам масу часу та зроблять ваші вебсайти чудовими!

Ці бібліотеки пропонують готові компоненти, які є не тільки красивими, але й функціональними.

Давайте досліджувати, і не забувайте Слідувати за мною на Github 🙏,

1. Lukacho UI

https://ui.lukacho.com/components

Мінімалістична та сучасна бібліотека компонентів UI, яка зосереджена на чистих принципах дизайну.

Основні характеристики:
- 🎨 Чистий та сучасний естетичний дизайн
- ⚡ Легка та орієнтована на продуктивність
- 📱 Повністю адаптивні компоненти
- 🎯 Легке інтегрування з популярними фреймворками

[2.

HTMLRev

Безкоштовні шаблони для вебсайтів … Читати далі

Будь-яке введення або посібник з алгоритмів сортування зазвичай включає стандартні алгоритми — quicksort, merge sort, insertion sort, heap sort тощо — які вважаються підходящими для повсякденного використання. Іншими словами, це категорично не езотеричні алгоритми сортування, які я досліджую, як-от sleep sort або permutation sort.

Кожен алгоритм має свої переваги та недоліки з точки зору простору, часу та стабільності. Однак навіть при наявності широкого вибору алгоритмів, не кожен з них підходить для кожної ситуації, тому часто використовуються гібридні алгоритми. Адаптація та комбінування — це поширена риса програмування, але деякі гібриди достатньо спеціалізовані та цікаві, щоб їх виокремили та дали назву.… Читати далі

Express — це мінімалістичний та гнучкий фреймворк для серверної частини на Node.js, який надає потужні можливості для створення API. У цій короткій серії ми розглянемо основні можливості Express.js.

Чому варто використовувати Express:

• Мінімалізм
  Express.js має всі необхідні інструменти для створення API з нуля. Код простий, зрозумілий та легко почати працювати.
• Популярність
  Express.js використовується в багатьох додатках на Node.js і іноді з іншими середовищами виконання, такими як Deno і Bun.
• Велика екосистема
  Express.js існує вже довгий час.
  Завдяки широкому впровадженню в спільноті Node.js, за ці роки було створено багато сторонніх пакетів для розширення функцій фреймворку.
• Підтримка маршрутизації, проміжного програмного забезпечення (middleware),

Типовий приклад — ви приймаєте кілька способів оплати: кредитну картку, PayPal та криптовалюту. І в залежності від вибору користувача, ви будете обробляти платіж по-різному.
Наприклад, якщо користувач вибрав PayPal, вам потрібно працювати з API PayPal для обробки платежу.

Якщо ви прийшли з мови програмування, що підтримує об'єктно-орієнтоване програмування (OOP), найкращий спосіб реалізувати це — використовуючи Стратегію.

Спосіб з OOP

Ось як виглядатиме версія з використанням OOP:

interface IPayment {  
 processPayment(amount: number): void  
}  

class PaymentProcessor implements IPayment {  
 private paymentStrategy: IPayment  
 constructor(strategy: IPayment) {  
 this.paymentStrategy = strategy  
 }  
 processPayment(amount: number): void {  
 this.paymentStrategy.processPayment(amount)  
 }  
 setPaymentStrategy(strategy: IPayment) {  
 this.paymentStrategy = 

Я працював над додатками на Next.js, які масштабується до понад 100 тисяч активних користувачів щомісяця, а також над посадковими сторінками з мільйонами відвідувачів щомісяця. У цій статті я поділюся всіма уроками, які я засвоїв через численні ітерації.

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

Дозвольте провести … Читати далі

Ілюстрація, що порівнює JavaScript та AssemblyScript з Rust і WebAssembly

JavaScript зазвичай працює на одному потоці, який часто називають
"головним потоком". Це означає, що JavaScript виконує одне завдання за раз, синхронно. Головний потік також обробляє завдання рендерингу, такі як малювання та макет, а також взаємодії з користувачем, що означає, що довготривалі завдання JavaScript можуть призвести до того, що браузер стане не чутливим.
Ось чому веб-сторінки можуть "заморожуватися", коли виконується важка функція JavaScript, блокуючи взаємодії з користувачем.

Ми продемонструємо, як заблокувати головний потік, симулюючи важкі обчислення за допомогою алгоритму Фібоначчі, і ми вирішимо проблему заблокованого головного потоку кількома підходами, такими як:… Читати далі

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

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

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

• Велика кількість вузлів DOM може уповільнити продуктивність
• Велика кількість вузлів DOM може призвести до помітних витрат на переробку (reflow)

Ви і ваш розкішний Macbook M3, можливо, не відчуєте болю, але для користувача з пристроєм з низькими характеристиками це може стати справжнім … Читати далі