Redux Toolkit як засіб ефективної розробки

В даний час розробка левової частки веб-застосунків, заснованих на фреймворку React, ведеться з використанням бібліотеки Redux. Ця бібліотека є найпопулярнішою реалізацією FLUX-архітектури і, незважаючи на низку очевидних переваг, має дуже суттєві недоліки, такі як: складність і “багатослівність” рекомендованих патернів для написання та організації коду, що тягне за собою велику кількість бойлерплейту; відсутність вбудованих засобів управління асинхронною…

React Storybook

За допомогою React Storybook ви можете розробляти та проектувати компоненти інтерфейсу користувача за межами вашої програми в ізольованому середовищі. Це змінить спосіб розробки компонентів інтерфейсу користувача. Ось так виглядає React Storybook. Перш ніж ми почнемо Сьогодні серверні системи стали дуже простими завдяки фреймворкам, таким як Meteor, і хмарним службам, таким як Firebase. Такі речі, як GraphQL і Falcor виведе серверні системи на новий рівень. Отже, ми…

Figma plugin API людською мовою

Зіткнувся з написанням плагіна для Figma і дивуюся, навіщо так складно? Ну, взагалі-то, нічого особливо складного немає. Але цей TypeScript, це навіщо все? Встанови модулі, налаштуйте публікацію. Скільки я не думав, єдине пояснення, навіщо все це потрібне, це захист від дурня. Типу, кому треба – розбереться, а іншим і нема чого лізти, говнокод плодити. Ну так ми розвіємо цей снобістський…

Семантика врятує інтернет

Років п’ятнадцять тому майже всі робили сайти і не переживали про те, що під капотом. Верстали таблицями, використовували все, що попадеться під руку і не особливо морочилися про доступність. А потім стався HTML5 і понеслося. Семантична верстка – підхід до розмітки, який спирається не на зовнішній вигляд сайту, а на смислове призначення кожного блоку і…

Керівництво по роботі з Redux

Сьогодні Redux – це одне з найцікавіших явищ світу JavaScript. Він виділяється із сотні бібліотек і фреймворків тим, що грамотно вирішує безліч різних питань шляхом введення простий і передбачуваною моделі станів, спрямщвані на функціональне програмування і незмінні дані, надання компактного API. Що ще потрібно для щастя? Redux – бібліотека дуже маленька, і вивчити її API не складно. Але у багатьох…

Unit-тести для Angular

Unit-тестування – це важлива частина процесу розробки на поточний момент і вона стає невід’ємною частиною. Це підвищує якість коду і впевненість розробників. У даній статті розповідається про те, як створювати unit-тести для Angular, що використовувати і чому. Для написання unit-тестів використовується фреймворк Jasmine, а виконуються тести в Karma. Karma – це JavaScript движок для запуску тестів, які виконуються…

Тести в Angular

У Angular для тестів використовуються два інструменти: Jasmine – фреймворк для написання тестів, і Karma – інструмент для запуску цих тестів в браузері. Документація з тестування в Angular Karma Jasmine Jasmine методи Jasmine describe(description, function) – метод застосовується для угруповання взаємозалежних тестів beforeEach(function) – метод застосовується для призначення завдання, яке повинно виконуватися перед кожним тестом afterEach(function) – метод застосовується для…

Повне керівництво по функції calc()

В CSS є особлива функція calc(), застосовувана для виконання простих розрахунків. Ось приклад її використання: .main-content { /* Відняти 80px из 100vh */ height: calc(100vh – 80px); } Функція calc() і значення CSS-властивостей Єдине місце, де можна використовувати функцію calc() – це значення CSS-властивостей. Погляньте на наступні приклади, в яких ми, використовуючи цю функцію, задаємо…

Reactjs, Material-UI з JSS.

Material-UI – ReactJS‘s фреймворк, що надає готові google рішення для швидкої і досить простий web розробки. Material-UI досить велика бібліотека, де ключовою частиною react компонентів і стилізації є @material-ui/core (метою її використання повинен бути немаленький проект). Цей туториал не включає в себе просунуте використання material-ui. Це міні мануал по стилізації компонентів. Використовувати material компоненти дійсно не складно, але є нюанси використання…

Створення власних синтаксичних конструкцій для JavaScript з використанням Babel

Oгляд З початку давайте поглянемо на те, чого ми доб’ємося, діставшись до кінця цього матеріалу: function @@ foo(a, b, c) {   return a + b + c; } console.log(foo(1, 2)(3)); // 6 Ми збираємося реалізувати синтаксичну конструкцію @@, яка дозволяє каррірувати функції. Цей синтаксис схожий на той, що використовується для створення функцій-генераторів , але в нашому випадку замість знака * між ключовим…