Привет👋 В последние годы среди фронтенд разработчиков Typescript используется практически везде по умолчанию, начиная небольшими пет-проектами и заканчивая огромнейшими веб-приложениями. Однако, до сих пор на некоторых проектах можно встретить кучу any
и Function
. Давайте разберемся используете ли вы этот невероятно мощный инструмент правильно?
Web-developer
Yet another введение в fp-ts. Часть 2. Моноиды и полугруппы
Всем привет! В предыдущей части цикла статей мы поговорили о том, зачем вообще нужно функциональное программирование, а также обсудили понятие классов типов и разобрали базовые из них: Eq (эквивалентность) и Ord (сравнимость).
Сейчас я хочу пролить свет на два наводящих жуть на неподготовленного читателя слова: моноиды и полугруппы. Это математические понятия родом из общей алгебры. На самом деле всё не так уж и страшно. Если совсем упрощать, то оба термина относятся к объединению элементов множества. Я помогу разобраться с их формальными определениями, а также на практических примерах покажу, как и зачем их использовать.
TypeScript здорового человека, или почему с Enum лучше
Наверное, большинство фронтенд-разработчиков в какой-то момент сталкивались с задачей внедрения TypeScript на проект. Обычно это задача выполняется не сразу, а постепенно. Сначала просто переименовываются все файлы из .js в .ts с проставлением везде типа "any", просто чтобы проект запустился, и только потом постепенно разработчики начинают заниматься планомерным переводом.
Если разработчики к тому времени не имеют серьезного опыта работы с TypeScript и изучают его по ходу дела, то очень часто перевод заканчивается на этапе создания модели данных, то есть внедрения типов и интерфейсов для всех основных сущностей, типизации API.
Зачастую, при создании типов и интерфейсов, описывая какое-то свойство, которое может принимать определенное, конечное количество строковых значений, разработчики указывают тип поля string или в крайнем случае перечисляют эти значения через "или".
Так, при создании интерфейса какого-либо сотрудника, у которого есть имя, возраст и должность в компании наиболее простой и быстрый вариант представлен ниже:
interface Person {
name: string;
age: number;
position: string;
}
Ошибок нет. Вроде бы все работает, однако какие проблемы это может создать? Если имя - это строка, которая может принимать любое значение, то должность в компании - это тоже строка, но принимать она может только вполне определенное и конечное количество строковых значений. Например, в нашей компании есть только директор и продавец. В случае, если мы попытаемся создать объект с должностью "бухгалтер", такой тип ошибки не выдаст:
Yet another введение в fp-ts. Часть 1. Эквивалентность и сравнимость
Что такое монада? Душнила ответит: “Это моноид в категории эндофункторов”, и будет абсолютно прав. Вопросов появляется ещё больше: “Что такое моноид?”, “Что такое категория?”, “Что такое эндофунктор?”. В эту же секунду человека сковывает первородный ужас, сошедший со страниц рассказов Г. Ф. Лавкрафта, инстинкт самосохранения кричит: “Беги!” Интересный собеседник, обладающий эмпатией, приобнимет и скажет: “Бро, это же просто контейнер для какого-то значения, способный соединяться в цепочки таких же контейнеров. Ты же пишешь фронтенд? Или бэк на ноде? В холодильнике пиво, угощайся, а я тебе расскажу про библиотеку fp-ts и разные клёвые штуки из функционального программирования.
Для js-а существуют тонны библиотек, поддерживающих функциональный стиль программирования. Lodash, Ramda, Sanctuary — это то что сразу приходит в голову. В эпоху Typescript писать без типобезопасности уже моветон. Ни Lodash, ни Ramda типобезопасность не обещают, Sanctuary проверяет типы в рантайме, что требует дополнительных накладных расходов. Fp-ts изначально написан на typescript и помимо фич функционального программирования предлагает изящную проверку типов. Эта интересная библиотека реализует множество концепций из статически типизированных функциональных языков семейства ML, таких так Haskell, Ocaml и Scala. В fp-ts всё прекрасно, кроме документации и практических примеров использования. Моя задача как раз подсветить эти тёмные углы, а также показать несколько практических примеров.
В статье я не буду обсуждать базовые концепции ФП, такие как чистые функции, лямбды, композиция и прочее. Про это написано много статей и ютуб завален тоннами видеороликов от индиан гаев. Здесь я постараюсь простыми словами на практических примерах объяснить классы типов, какие они бывают и как их использовать в fp-ts.
Еще один способ использовать SVG в React. На этот раз удобный
SVG
-изображения можно вставлять непосредственно в html
, можно использовать символьные спрайты, теги <img>
, <object>
и даже <iframe>
. Можно подключать SVG
через data-url
, css-backgrounds
, css-filters
и еще множеством способов. Но чтобы полноценно использовать всю суперсилу SVG
, необходимо вставлять SVG
-изображения непосредственно в html
-разметку. Хотя на самом деле есть еще один способ. И он удобный.
JavaScript: интересные возможности AbortController
Привет, друзья!
Представляю вашем вниманию адаптированный и дополненный перевод этой замечательной статьи.
AbortController и AbortSignal предоставляют возможность применения некоторых интересных паттернов, рассмотрению которых и посвящена данная статья.
Однако давайте начнем с типичного примера использования AbortController
.
React hooks, как не выстрелить себе в ноги. Часть 1: работа с состоянием
Статья поможет новичкам понять как работать с хуками, а также будет полезна и опытным разработчикам. Этой статьей открываю серию статей про хуки.
Использование хуков с одной стороны позволяет использовать методы жизненного цикла в функциональных компонентах и призваны улучшать производительность, что делает функциональные компоненты полноценным конкурентом классовых компонентов. С другой стороны, неправильное использование хуков приводит к лишним операциям и может свести на нет все преимущества функциональных компонентов.
В этой серии статей разберем основные хуки реакта и как их правильно использовать.
Функциональные практики и frontend: монады и функторы
В этой серии статей я хочу поделиться своим опытом применения функциональных практик во frontend-разработке расскажу про плюсы и минусы, которые вы получите как разработчик, используя эти практики. Если тема вам понравится, то мы погрузимся в более «сухие» и сложные уголки функционального мира. Сразу отмечу, что пойдем мы от большего к меньшему, то есть посмотрим на классическое приложение c высоты птичьего полета, а по мере прохождения статей будем спускаться туда, где конкретная практика принесет нам заметную пользу.
Итак, начнем с обработки состояний. Заодно расскажу, причем тут вообще монады и функторы.
ТайпСкрип: Ох уж эта весёлая система типов
Здравствуйте, меня зовут Дмитрий Карловский и недавно я, вместе с Артуром Мукминовым, проводил воркшоп, где показывал как разрабатывать сложные типофункции через тестирование. Это 2 часа сурового программирования на типах. Так что в качестве тизера, ловите разбор курьёзов тайпскриптовой системы типов.
Производительность TypeScript
Есть лёгкие способы конфигурирования TypeScript для ускорения компиляции и редактирования. И чем раньше их внедрить, тем лучше. Также есть ещё некоторые популярные подходы к изучению причин медленной компиляции и редактирования, некоторые исправления и распространенные способы помочь TypeScript-команде в расследовании проблем.
Schedulers в RxJS
Что вы знаете о Schedulers в RxJS? Они скрывают от разработчиков работу с контекстом выполнения Observable. Как те эльфы-домовики из Гарри Поттера, которые выполняют всю черную работу в Хогвартсе, а о них никто даже и не слышал. Давайте исправим это и узнаем о них чуть больше.
Typescript: Объединение типов в глубину
Пошаговое руководство о том, как в TypeScript написать такой generic-тип, который рекурсивно объединяет произвольные вложенные key-value структуры данных. Это может оказаться несколько более сложной задачей, чем вы думаете.
Вывод типов в TypeScript с использованием конструкции as const и ключевого слова infer
infer
и конструкция as const
.Продвинутый TypeScript
Фотография с сайта One Ocean One Breath.
Михаил Башуров (saitonakamura) — Senior Frontend Engineer в компании WiseBits, фанат TypeScript и фридайвер-любитель. Аналогии изучения TypeScript и ныряния на глубину не случайны. Михаил расскажет, что такое discriminated unions, как использовать вывод типов, зачем нужна номинальная совместимость и брендирование. Задержите дыхание и погружайтесь.
Асинхронное программирование (полный курс)
Асинхронное программирование за последнее время стало не менее развитым направлением, чем классическое параллельное программирование, а в мире JavaScript, как в браузерах, так и в Node.js, понимание его приемов заняло одно из центральных мест в формировании мировоззрения разработчиков. Предлагаю вашему вниманию целостный и наиболее полный курс с объяснением всех широко распространенных методов асинхронного программирования, адаптеров между ними и вспомогательных проемов. Сейчас он состоит из 23 лекций, 3 докладов и 28 репозиториев с множеством примеров кода на github. Всего около 17 часов видео: ссылка на плейлист.
Пишем чистый и масштабируемый JavaScript-код: 12 советов
Современные веб-приложения сильно зависят от JavaScript. Особенно это касается одностраничных приложений (Single-Page Application, SPA). С появлением библиотек и фреймворков, таких как React, Angular и Vue, JavaScript стал одним из основных строительных блоков веб-приложений.
Масштабирование подобных приложений, идёт ли речь об их клиентских или серверных частях, может оказаться весьма непростой задачей. Если в основе таких приложений лежит плохо продуманная архитектура, то их разработчики рано или поздно сталкиваются с определёнными ограничениями. Они тонут в море неприятных неожиданностей.
Автор статьи, перевод которой мы сегодня публикуем, хочет поделиться советами по написанию чистого JavaScript-кода. Он говорит, что статья рассчитана на JS-программистов с любым уровнем подготовки. Но особенно полезной она будет для тех, кто знаком с JavaScript хотя бы на среднем уровне.
Чем функциональные компоненты React отличаются от компонентов, основанных на классах?
Возможно, вы слышали о том, что один из этих видов компонентов отличается лучшей производительностью, чем другой. Но какой именно? Большинство бенчмарков, которыми это проверяют, имеют недостатки, поэтому я делал бы выводы, основываясь на их результатах, с большой осторожностью. Производительность, в основном, зависит от того, что происходит в коде, а не от того, выбраны ли для реализации неких возможностей функциональные компоненты или компоненты, основанные на классах. Наше исследование показало, что разница в производительности между разными видами компонентов незначительна. Однако надо отметить, что применяемые при работе с ними стратегии оптимизации немного различаются.
Я, в любом случае, не рекомендую переписывать существующие компоненты с применением новых технологий если на то нет веских причин, и если вы не против оказаться в числе тех, кто раньше всех начал этими технологиями пользоваться. Хуки — это всё ещё новая технология (такая же, какой была библиотека React в 2014 году), и в руководства по React ещё не попали некоторые «передовые методики» их применения.
REST страсти по 200
Давно я хотел написать эту статью. Все думал — с какой стороны зайти правильнее? Но, вдруг, недавно, на Хабре появилась подобная статья, которая вызвала бурю в стакане. Больше всего меня удивил тот факт, что статью начали вбивать в минуса, хотя она даже не декларировала что-то, а скорее поднимала вопрос об использовании кодов ответа web-сервера в REST. Дебаты разгорелись жаркие. А апофеозом стало то, что статья ушла в черновики… килобайты комментариев, мнений и т.д. просто исчезли. Многие стали кармо-жертвами, считай, ни за что :)
В общем, именно судьба той статьи побудила меня написать эту. И я очень надеюсь, что она будет полезна и прояснит многое.
Предупреждаю, все ниже написанное является реальным опытом, а не когнитивной эквилибристикой. И так, погнали.
Основы React (текстовый учебник, 2-е издание)
Прошло 2.5 года после публикации первой версии подробного туториала по основам React. За это время gitbook насчитал 250 000+ уникальных посетителей.
Под катом подробнее об учебнике и список изменений.
Практика применения прокси-объектов в JavaScript
Также откройте в новой вкладке наш предыдущий пост: JavaScript-прокси: и красиво, и полезно
Information
- Rating
- Does not participate
- Location
- Пенза, Пензенская обл., Россия
- Date of birth
- Registered
- Activity