Все потоки
Поиск
Написать публикацию
Обновить
27.42

TypeScript *

Cтрого типизированная надстройка для JavaScript

Сначала показывать
Порог рейтинга
Уровень сложности

Дайджест материалов сообщества Deno (01.12 — 31.12)

Время на прочтение1 мин
Количество просмотров2.7K

В последнее время на Хабре не так много материалов про Deno, хотя платформа активно развивается и продолжает еженедельно релизиться. В связи с этим предлагаю вам ознакомиться с материалами сообщества за последний месяц.

Читать далее

Разбираем классы по косточкам или интроспектируем типы в Typescript

Время на прочтение3 мин
Количество просмотров7.6K


«Крутую ты штуку придумал, Стёпа», — сообщил мне коллега, осознав рассказанную ему идею. Надеюсь это действительно так, хоть и не скажу, что в том, о чём далее пойдёт речь, есть что-то безумно новаторское, однако, на мой взгляд, интерес данный материал всё же представляет.
Сегодня поговорим о применении интроспекции в разработке веб-интерфейсов, немного пошаманим с обобщённым программированием и изобретём велосипед в Typescript, имеющий похожий аналог в .NET.

Читать дальше →

TypeScript для конфигурации WebPack (FE and BE)

Время на прочтение6 мин
Количество просмотров16K

Когда проект зародился, то нравился каждому. Белый лист бумаги и каждый смотрел на него с ожиданием и воображал какие перспективы откроются, какие проблемы решатся.

Вот на бумагу архитектор нанес первый блок. Сзади раздалась ругань. Это разработчики, спорили...

Читать далее

Какой будет новая версия Vuex?

Время на прочтение7 мин
Количество просмотров6K
Vuex — стейт менеджер для Vue приложений. Его следующая версия — Vuex 4, которая практически готова к официальному релизу. Она добавит поддержку Vue 3, но не принесет никакой новой функциональности.

Несмотря на то, что Vuex считается отличным решением и многие разработчики выбирают его как основную библиотеку для управления состоянием, они надеются получить больше возможностей в будущих релизах. Поэтому, пока Vuex 4 только готовится к выходу, один из его разработчиков, Kia King Ishii (входит в состав core-команды) уже делится планами для следующей, 5 версии. Стоит заметить, что это только планы и некоторые вещи могут измениться, тем не менее основное направление уже выбрано. О нем и пойдет речь.
Читать дальше →

Что выбрать в качестве библиотеки компонентов для React-проекта

Время на прочтение19 мин
Количество просмотров20K

Меня зовут Ксюша Луговая. В СберКорусе я занимаюсь поддержкой библиотеки React-компонентов Korus-UI. 

С проблемой выбора библиотеки рано или поздно сталкивается почти каждый разработчик, и порой решение может быть нетривиальным. Возникают вопросы: чем руководствоваться при выборе библиотеки, какие популярные решения предлагает рынок, какие у них плюсы и минусы? Обзоры и отзывы не всегда помогают найти решение.

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

Читать далее

DagazServer: Чему научили пользователи

Время на прочтение10 мин
Количество просмотров1.6K
Детали, мелочи, нюансы. Сочетание пустяков.
От перестановки слагаемых всё меняется.
Раз, и будущее – открытая книга.

Нюанс за нюансом, подробность за подробностью…
Это была не игра, это была откровенная дерзость.

Генри Лайон Олди «Нюансеры»

Предусмотреть всё невозможно. Именно поэтому умные люди и придумали бета-тестирование. Поскольку, в моём случае, проект открытый и бесплатный, оно мало чем отличается от обычного функционирования сайта. Люди играют в игры, а я наблюдаю, исправляю найденные ошибки, извиняюсь и наблюдаю снова. А ещё, я прислушиваюсь к советам, порой неожиданным и, часто, очень полезным.
Читать дальше →

Полный стек на примере списка задач (React, Vue, TypeScript, Express, Mongoose)

Время на прочтение18 мин
Количество просмотров11K


Доброго времени суток, друзья!

В данном туториале я покажу вам, как создать фуллстек-тудушку.

Наше приложение будет иметь стандартный функционал:

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

Выглядеть наше приложение будет так:


Для более широкого охвата аудитории клиентская часть приложения будет реализована на чистом JavaScript, серверная — на Node.js. В качестве абстракции для ноды будет использован Express.js, в качестве базы данных — сначала локальное хранилище (Local Storage), затем индексированная база данных (IndexedDB) и, наконец, облачная MongoDB.

При разработке клиентской части будут использованы лучшие практики, предлагаемые такими фреймворками, как React и Vue: разделение кода на автономные переиспользуемые компоненты, повторный рендеринг только тех частей приложения, которые подверглись изменениям и т.д. При этом, необходимый функционал будет реализован настолько просто, насколько это возможно. Мы также воздержимся от смешивания HTML, CSS и JavaScript.

Кастомные Subject'ы в Angular: выносим логику из компонентов для переиспользования

Время на прочтение4 мин
Количество просмотров2.8K

В крупных проектах на Angular часто можно встречать повторяющееся поведение в компонентах. Такое поведение желательно выносить из компонента в отдельные классы, которые можно переиспользовать. Рассмотрю два достаточно популярных кейса: переключатель и множественный выбор сущностей.

Кейс 1: Переключалка (Toggle)

Часто в исходниках приходится видеть примерно такой код:

Читать далее

Кастомизация компонентов Ant Design и оптимизация бандла

Время на прочтение12 мин
Количество просмотров30K
The Archivist by juliedillon

Я Иван Копенков, ведущий фронтенд-разработчик в Mail.ru Cloud Solutions, в статье расскажу, какие есть подходы к кастомизации компонентов UI-библиотеки Ant Design, как это сделали мы, а так же покажу, как удалось полностью избавиться от неиспользуемых модулей и уменьшить размер бандла.

Если вы уже используете или собираетесь использовать библиотеку компонентов Ant Design, то из данной статьи сможете узнать, как можно делать это удобнее и эффективнее. Если вы используете другую библиотеку компонентов, то сможете использовать описанный подход в работе с вашей UI-библиотекой.
Читать дальше →

Оптимизация трафика при синхронизации состояний через Jsonpatch

Время на прочтение4 мин
Количество просмотров6.1K

Задача синхронизации состояния между клиентом и сервером может быть решена разными способами, я хотел бы расказать про вариант с использованием спецификации JSON Patch, а также про спецификацию MessagePack и способ оптимизации размера пакета через библиотеку PatchPack.


Принцип синхронизации заключается в следующем: все состояние передается только один раз, последующие изменения состояний передаются списком операций. Каждая операция определяет конкретный тип изменения. Примерами таких изменений являются добавление элемента массива или замена значения свойства.


Читать дальше →

Делаем TypeScript строже. Доклад Яндекса

Время на прочтение10 мин
Количество просмотров12K
Как сделать из TypeScript строгого, но справедливого товарища, который защитит тебя от неприятных ошибок и придаст больше уверенности в коде? Алексей Веселовский veselovskiyai рассмотрел несколько особенностей конфигурации TS, которые закрывают глаза на непростительные вольности. В докладе рассказывается о тех вещах, которых лучше избегать, и о тех, с которыми нужно быть предельно осторожным. Вы узнаете о замечательной библиотеке io-ts — она позволяет без труда обнаружить и даже пресечь попадание в код данных, которые могут вызвать ошибки в идеально написанных местах.

— Всем привет, меня зовут Лёша, я разработчик фронтенда. Начнем. Я немножко расскажу о себе и о проекте, в котором работаю. Флоу — это изучение английского от Яндекс.Практикума. Релиз состоялся в апреле этого года. Фронт был написан сразу на TypeScript, до этого никакого кода не было.
Читать дальше →

Использование Effector в стеке React + TypeScript

Время на прочтение12 мин
Количество просмотров50K

В этой статье я поделюсь своим кратким обзором внедрения стейт-менеджера Effector в продуктовый проект на стеке React + TypeScript, а также покажу на примере, как легко это можно сделать.

Читать далее

Разработка сервера для многопользовательской игры с помощью nodejs и magx

Время на прочтение6 мин
Количество просмотров8.6K

Многие разработчики начинают разработку многопользовательского онлайн сервера на основе библиотеки socket.io. Эта библиотека позволяет очень просто реализовать обмен данными между клиентом и сервером в реальном времени, но продумать и реализовать всю логику и интерфейс взаимодействия сервера с клиентами, а также архитектуру масштабирования и оптимизацию трафика все равно придется.


Я хочу рассказать про библиотеку magx, используя которую можно не задумываться о сетевой составляющей (коммуникации сервера и клиентов), a сразу сконцентрироваться на разработке логики игры и клиентского UI.

Читать дальше →

Ближайшие события

ТайпСкрип: Ох уж эта весёлая система типов

Время на прочтение3 мин
Количество просмотров16K

Здравствуйте, меня зовут Дмитрий Карловский и недавно я, вместе с Артуром Мукминовым, проводил воркшоп, где показывал как разрабатывать сложные типофункции через тестирование. Это 2 часа сурового программирования на типах. Так что в качестве тизера, ловите разбор курьёзов тайпскриптовой системы типов.


Читать дальше →

Производительность TypeScript

Время на прочтение15 мин
Количество просмотров18K

Есть лёгкие способы конфигурирования TypeScript для ускорения компиляции и редактирования. И чем раньше их внедрить, тем лучше. Также есть ещё некоторые популярные подходы к изучению причин медленной компиляции и редактирования, некоторые исправления и распространенные способы помочь TypeScript-команде в расследовании проблем.
Читать дальше →

Schedulers в RxJS

Время на прочтение4 мин
Количество просмотров16K

Что вы знаете о Schedulers в RxJS? Они скрывают от разработчиков работу с контекстом выполнения Observable. Как те эльфы-домовики из Гарри Поттера, которые выполняют всю черную работу в Хогвартсе, а о них никто даже и не слышал. Давайте исправим это и узнаем о них чуть больше.

Читать далее

Внедрение зависимостей (dependency injection) через свойства-функции в JavaScript

Время на прочтение10 мин
Количество просмотров21K


Известный, но не очень популярный способ внедрения зависимостей. Попытка реализовать этот способ в популярных DI npm пакетах. Еще один свой DI.

Читать дальше →

Декларативный подход в Angular

Время на прочтение10 мин
Количество просмотров12K

Когда я впервые услышал про compliant-механизмы, был весьма впечатлен. Хоть они и окружают нас в повседневности — в виде застежек рюкзака, кнопок мыши или колпачков от шампуней, — мы редко задумываемся о концепции таких устройств.

Если говорить кратко, в compliant-механизме для обеспечения его технических характеристик используют деформацию. В то время как в традиционной технике (rigid body) гибкость зачастую является негативным качеством материала, сompliant-механизмы используют ее для передачи силы и движения в нужном направлении, вместо соединений из нескольких подвижных деталей.

Узнать, к чему это я

Typescript: Объединение типов в глубину

Время на прочтение6 мин
Количество просмотров30K

Пошаговое руководство о том, как в TypeScript написать такой generic-тип, который рекурсивно объединяет произвольные вложенные key-value структуры данных. Это может оказаться несколько более сложной задачей, чем вы думаете.

Подробнее

vuex + typescript = vuexok. Велосипед, который поехал и обогнал всех

Время на прочтение7 мин
Количество просмотров11K
Доброго времени суток.

Как и многие разработчики, я в свободное от работы время пишу свой относительно небольшой проект. Раньше писал на react, а на работе используется vue. Ну и что бы прокачаться во vue начал пилить свой проект на нем. Сначала всё было хорошо, прямо-таки радужно, пока я не решил, что надо бы еще прокачаться и в typescript. Так в моем проекте появился typescript. И если с компонентами всё было неплохо, то с vuex всё оказалось печально. Так мне пришлось пройти все 5 стадий принятия проблемы, ну почти все.

Отрицание


Основные требования для стора:

  1. В модулях должны работать типы typescript
  2. Модули должно быть легко использовать в компонентах, должны работать типы для стейта, экшенов, мутаций и геттеров
  3. Не придумывать новое api для vuex, надо сделать так, чтобы как-то типы typescript заработали с модулями vuex, чтобы не приходилось разом переписывать всё приложение
  4. Вызов мутаций и экшенов должен быть максимально простым и понятным
  5. Пакет должен быть как можно меньше
  6. Не хочу хранить константы с именами мутаций и экшенов
  7. Оно должно работать (А как же без этого)

Не может быть что у такого уже зрелого проекта как vuex не было нормальной поддержки typescript. Ну-с, открываем Google Yandex и погнали. Я был уверен на 100500% что с typescript всё должно быть отлично (как же я ошибался). Есть куча разных попыток подружить vuex и typescript. Приведу несколько примеров, которые запомнились, без кода чтобы не раздувать статью. Всё есть в документации по ссылкам ниже.
Читать дальше →