Как стать автором
Поиск
Написать публикацию
Обновить
52.8

TypeScript *

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

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

Типизация REST API для фронтенд разработчика

Время на прочтение4 мин
Количество просмотров25K
Сегодня широкое распространение имеют следующие подходы для описания взаимодействия браузера и сервера, такие как OpenApi & GraphQL.

В этой статье я расскажу о нашей попытке сделать статически типизированное REST API и избавить фронтенд команду от написания кода по написания запросов данных, упростить тестирование и уменьшить количество возможных ошибок.


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

Лошадь сдохла – слезь: переход с tslint на eslint

Время на прочтение7 мин
Количество просмотров42K
До недавнего времени во всех проектах фронта разработчики Dodo Pizza Engineering использовали tslint – полезный инструмент, который подсказывает, когда ты накосячил в коде допустил неточность, помогает поддерживать код в одном стиле и сам исправляет многие замечания. Но тут tslint взял и умер. Под катом я расскажу, почему так вышло, как перестать лить слёзы по умершему и перейти на инструмент eslint, а также покажу кое-что очень интимное.


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

Компоненты-агностики в Angular

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

Когда работаешь над библиотекой переиспользуемых компонентов, вопрос API встает особенно остро. С одной стороны, нужно сделать надежное, аккуратное решение, с другой — удовлетворить массу частных случаев. Это относится и к работе с данными, и к внешним особенностям различных кейсов использования. Кроме того, все должно легко обновляться и раскатываться по проектам.


Таким компонентам нужна беспрецедентная гибкость. При этом настройку нельзя делать слишком сложной, ведь их будут использовать как сеньоры, так и джуны. Уменьшение дублирования кода — одна из задач библиотеки компонентов. Поэтому конфигурацию нельзя превращать в копирование кода.


bruce lee

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

Ом-ням-ням и валидация данных

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

Всем привет! Поговорим немного про валидацию данных. Что в этом сложного и зачем вообще это может понадобиться, скажем, в проекте написанном на typescript? Typescript довольно неплохо всё контролирует, остаётся максимум проверять ввод пользователя. То есть закинуть в проект десяток регулярок и всё, казалось бы тему можно закрывать, но… Далеко не всегда, а в случае с вебом примерно никогда, весь проект находится в единой кодовой базе и использует одни и теже типы. На стыке таких кодовых баз как раз и возникают ситуации, когда ожидание не соответствует реальности и тут typescript уже не помощник. Несколько примеров:

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

Full-stack TypeScript Apps

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

Привет, Хабр! Представляю вашему вниманию перевод статьи "Full-Stack TypeScript Apps — Part 1: Developing Backend APIs with Nest.js" автора Ana Ribeiro.


Часть 1: Разработка серверного API с помощью Nest.JS


TL;DR: это серия статей о том, как создать веб-приложение TypeScript с использованием Angular и Nest.JS. В первой части мы напишем простой серверный API с помощью Nest.JS. Вторая часть этой серии посвящена интерфейсному приложению с использованием Angular. Вы можете найти окончательный код, разработанный в этой статье в этом репозитории GitHub


Что такое Nest.Js и почему именно Angular?


Nest.js это фреймворк для создания серверных веб-приложений Node.js.


Отличительной особенностью является то, что он решает проблему, которую не решает ни один другой фреймоворк: структура проекта node.js.

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

TypeScript. Мощь never

Время на прочтение6 мин
Количество просмотров94K
Когда я впервые увидел слово never, то подумал, насколько бесполезный тип появился в TypeScript. Со временем, все глубже погружаясь в ts, стал понимать, какой мощью обладает это слово. А эта мощь рождается из реальных примеров использования, которыми я намерен поделиться с читателем. Кому интересно, добро пожаловать под кат.
Читать дальше →

Диалоговые окна на Promise

Время на прочтение5 мин
Количество просмотров8.7K
Что такое диалоговое окно?

Википедия говорит следующее:
Диалоговое окно (англ. dialog box) в графическом пользовательском интерфейсе — специальный элемент интерфейса, окно, предназначенное для вывода информации и (или) получения ответа от пользователя. Получил своё название потому, что осуществляет двустороннее взаимодействие компьютер-пользователь («диалог»): сообщая пользователю что-то и ожидая от него ответа.

Нас интересует
ожидая от него ответа
Другими словами мы открываем модальное окно, чтобы получить обратную связь и что-то после этого выполнить. Ничего не напоминает? И я так подумал.
Читать дальше →

Что можно и нельзя выжать из веб-компонентов

Время на прочтение4 мин
Количество просмотров4.4K
Это не туториал и не вполне обзор — скорее заметки по горячим следам после собирания библиотеки компонентов. Начиналось всё с обычной обыденной истории: есть легаси-код, к легаси нужно прикрутить пипмочек и финтифлюшек, переписывать ничего нельзя, некогда, и вообще не трогайте тут ничего руками; большие и страшные пакеты тоже на всякий случай не трогайте, да и вообще, почему бы вам просто не взять самый прекрасный фреймворк Vanilla JS и не начать на нём писать, как завещали деды?
Но конечно же всё оказалось не так просто...

Новый пакет валидаций для React на Mobx @quantumart/mobx-form-validation-kit

Время на прочтение19 мин
Количество просмотров4.6K
Добрый день.
Сегодня я хочу рассказать о новом пакете для асинхронных валидаций в проектах использующих в своей основе React, Mobx и написанных на Typescript.
Современная Frontend разработка предполагает большое количество логики при заполнении страниц с документами, анкет и документов на кредит, платежных поручений, страниц регистраций на сайте. Основная логическая нагрузка приходиться на валидационные проверки. Разработчики Angular продумали этот момент и предлагают разработчикам для этих целей использовать встроенных механизм FormControl-ов, что, хоть имеет ряд своих недостатков, но всё же лучшем чем полное отсутствие подобного решения на React. Ситуация усложняется еще тем, что современный тренд React разработки предполагает использовать mobx для организации бизнес-логики.
Столкнувшись с этими проблемами мы решили всех их с помощью написания пакета: @quantumart/mobx-form-validation-kit

Плюсы пакета:
  • Полностью на TypeScript
  • Совместимость с Mobx (версии 4, который поддерживает, всеми любимый, IE10)
  • Рассчитан на работу в React (можно использовать в проектах и без react)
  • Рассчитан на асинхронные валидации
  • Легко встроить в существующий проект.

Инструкция по работы с пакетом под катом.
Читать дальше →

Обрабатываем заказы из интернет магазина с помощью RabbitMQ и TypeScript

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


Всем привет! Популярность интернет коммерции постоянно растет, как и доля информатизации всех смежных с торговлей видов деятельности. Вместе с этим растет и сложность обработки информации. Каждый заказ, сделанный клиентом интернет магазина, порождает за собой большое количество интеграций с различными сервисами. Такими сервисами могут быть сервисы обработки платежей, доставки, системы учета и лояльности. Каждый заказ должен быть оплачен, учтен, собран и доставлен, а также доступен для последующего анализа. Эту, и так не простую ситуацию, усложняет и тот факт, что пользователь интернет магазина не хочет долго и мучительно чего-то ждать при оформлении заказа. Отклик от интернет магазина должен быть быстрым, ведь каждая миллисекунда задержки увеличивает шанс потери клиента, а в последствии и прибыли. В этой статье я хочу рассказать про брокер сообщений RabbitMQ и как с его помощью можно организовать процесс обработки заказов используя Node.js и TypeScript. Добро пожаловать под кат.

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

Заметка о void в JavaScript и TypeScript

Время на прочтение3 мин
Количество просмотров51K
Если вы, до того, как заинтересовались JavaScript, писали на традиционных языках с сильной типизацией, то вы, возможно, знакомы с концепцией void. Это — тип, использование которого сообщает программисту о том, что соответствующие функции и методы при их вызове ничего не возвращают.



Сущность void имеется также в JavaScript и TypeScript. В JS это — оператор. В TS это примитивный тип данных. И там и там void ведёт себя не так, как могли бы ожидать многие из тех, кто сталкивался с void в других языках.
Читать дальше →

«WARNING: sanitizing HTML stripped some content» и как с ним правильно бороться

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

Всем, кому приходилось вставлять HTML содержимое в DOM в Angular, доводилось видеть это сообщение. Конечно, все мы получаем проверенное содержимое с нашего же сервера и просто хотим застилизовать сообщение об ошибке. Или вставляем HTML из наших же констант, инлайним наши SVG иконки, ведь нам всего лишь нужно покрасить их в цвет текста. Ведь ничего плохого не случится, если мы просто скажем Angular`у — не дрейфь, там всё чисто.


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


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

Реактивный конечный автомат

Время на прочтение2 мин
Количество просмотров6K
5 лет назад, после поиска годного решения в RxJs, Beacon, ...etc.js, и остановившись на flyd.js и написал 4-6 проектов используя только три фичи из либы stream, on, combine. Остальное оказалось не у дел, хотелось легкости бандла. Так появился alak, первые версии до 0.3 были всего 20-30 строк и полностью заменили flyd.

Год спустя появилась версия 0.4 уже на 72 строки с паттерн матчингом и mix (аналог combine из flyd или computed из vue). Спустя три года и десятки проектов — появилось ощущение годности делится опытом и релизить 1.0.


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

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

Создаём библиотеку по последнему слову техники

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

Привет, Хабр. Это статья о том как написать Hello world по последнему слову техники.


В конце мы получим hello world библиотеку которая:


  • Использует typescript
  • Заботится о codestyle
  • Генерирует доку
  • Проводит тесты
Читать дальше →

Первое рабочее место или как начать разработку API на Node.js

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

Введение


В данной статье хотел бы поделиться своими эмоциями и приобретенными навыками в разработке первого REST API на Node.js с использованием TypeScript, как говорится, с нуля. История достаточно банальная: «Закончил университет, получил диплом. Куда же пойти работать?» Как можно было догадаться меня проблема не обошла стороной, пусть думать особо и не пришлось. Позвал к себе на стажировку разработчик (выпускник той же специальности). Полагаю, что это достаточно распространенная практика и существует множество подобных историй. Я, недолго думая, решил попробовать свои силы и пошел…

image

День первый. Знакомство с Node.js


Пришёл я на back-end разработку. В данной IT-компании используют платформу Node.js, с которой я абсолютно не был знаком. Я немного убежал вперед, забыв рассказать читателю, что никогда и ничего не разрабатывал на JavaScript (за исключением пары скриптов с копированным кодом). Алгоритм работы и архитектуру веб-приложений в целом я понимал, так как разрабатывал CRUD на Java, Python и Clojure, но этого было недостаточно. Поэтому первый день я полностью посвятил изучению Node.js, очень помог этот скринкаст.

Параллельно изучая веб-фреймворк Express, менеджер пакетов npm, а также такие файлы как package.json и tsconfig.json, голова просто шла кругом от количества информации. Очередной урок, что усвоение всего материала одновременно задача близкая к невозможной. К концу дня я все же справился с настройкой окружения и смог запустить express веб-сервер! Но радоваться было рано, потому что уходил домой с полным ощущением непонимания. Чувство, что я утопал в огромном мире JS не покидало меня ни на минуту, поэтому необходима была перезагрузка.

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

Современное окружение для React Native приложений

Время на прочтение4 мин
Количество просмотров7.5K
В этой статье мы рассмотрим настройку React Native окружения с использованием expo-cli, Typescript, и Jest.

Typescript поможет нам избежать ошибок при разработке и написать более эффективное мобильное приложение.

Современные разработки позволяют интегрировать Typescript в окружение разработки. Так же мы можем использовать VS Code, который отлично поддерживает Typescript.

Также интеграция с React Native даст нам возможность использовать сервис автодополнения, навигацию по коду и рефакторинг.

Expo — это набор инструментов, которые упрощают создание нативных React приложений. В этом уроке я собираюсь показать вам, как вы можете быстро создавать нативные React приложения, используя Expo.


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

fform: React & JSONSchema — максимальная гибкость

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

fform


Flexibile form (fform) — построитель форм с минимальной избыточностью кода, при этом максимально гибкий и расширяемый. Используемый стэк технологий: React (v16), Redux (опционально), JSONSchema, TypeScript. Основная идея — максиально возможное повторное использование схем, компонентов и функций.

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

Презентация приложения для проведения презентаций

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

Здравствуйте, меня зовут Дмитрий Карловский и я иногда выступаю на конференциях, митапах, а так же с недавних пор сам вхожу в команду организаторов одного из них — PiterJS. Недавно у нас был юбилей — 40 проведённых митапов. Но вместо того, чтобы расслабиться и получать поздравления, мы запарились и сами подготовили доклады от организаторов.


Тестируем голосовое управление


Но и этого нам мало, поэтому мы решили отметить юбилей по крупному, организовав конференцию на берегах Невы PiterJSConf, которая пройдёт уже в эту субботу 7 сентября 2019. Спешите записываться, пока ещё есть свободные места, ведь участие в ней для вас будет совершенно бесплатно.


Мы всё это делаем не за деньги, а за великую идею, что знания должны быть бесплатны. Поэтому всё, что мы делаем, доступно в Open Source. Мы с радостью делимся своими наработками, знаниями и опытом с другими. И призываем к сотрудничеству организаторов из других городов для создания открытой платформы организации технологических митапов на регулярной основе. Присоединяйтесь к нам в качестве организатора, партнёра, докладчика, волонтёра, патрона или просто слушателя.


А пока, предлагаю вам рассказ про веб приложение для проведения презентаций $hyoo_slides, которое я использую для всех своих выступлений. Видеозапись доступна на YouTube, но там не всё. Можете читать этот рассказ как статью, так и открыть в интерфейсе самого приложения. Далее я расскажу вам, сколько всего оно умеет, и как работает.

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

TypeScript. Магия выражений

Время на прочтение7 мин
Количество просмотров38K
TypeScript — поистине прекрасный язык. В его арсенале есть все, что необходимо для качественной разработки. И если вдруг, кому-то знакомы секс-драматические этюды с JavaScript, то меня поймет. TypeScript имеет ряд допущений, неожиданный синтаксис, восхитительные конструкции, которые подчеркивают его красоту, форму и наполняют новым смыслом. Сегодня речь о них, об этих допущениях, о магии выражений. Кому интересно, добро пожаловать.
Читать дальше →

Angular. Понимание @Input, @Output и EventEmitter

Время на прочтение3 мин
Количество просмотров69K
Привет, Хабр! Представляю вашему вниманию перевод статьи «Understanding @Input, @Output and EventEmitter in Angular» автора foolishneo.

Приветствую всех желающих накапливать информацию о тонкостях работы фреймворка Angular.

Сегодня посчитал нужным лучше изучить информацию, касающуюся организации взаимодействия между компонентами Angular и начать практиковать переводы интересующих меня статей с английского.

Надеюсь найдутся те, для кого перевод статьи с Medium будет полезен.

Давно имея желание начать переводить полезные статьи с английского, решил начать с простенькой, весьма не объемной, но возможно, дополняющей имеющиеся знания статейки. К Вашему вниманию, господа…
Читать дальше →