Обновить
49.69

TypeScript *

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

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

Разработка компилятора для TypeScript на TypeScript на базе LLVM

Время на прочтение21 мин
Охват и читатели9.7K


Порой разработчики во время работы придумывают безумные идеи проектов, и они даже пытаются их реализовывать. Подобное ощутил и фулстек-разработчик Дмитрий Пацура, когда решил написать компилятор для TypeScript на… TypeScript, используя LLVM.

А что из этого вышло, Дмитрий изложил на прошедшей HolyJS 2019 Moscow. Под катом вы найдете видео и конспект его доклада.

Постепенно вводим TypeScript в ваш проект на React

Время на прочтение7 мин
Охват и читатели14K
Привет, Хабр!

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


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

Эффект реалистичного перелистывания страниц на JS

Время на прочтение4 мин
Охват и читатели31K
Представляю вашему вниманию — один из возможных вариантов реализации довольно забавного приема, для создания эффекта реалистичного перелистывания страниц.



Демо и документация
Github
Плагин для React

Подобный эффект я реализовывал данным давно, еще в университете и на Delphi. Получилось вполне достойно, правда времени я потратил тогда очень много. Сейчас, во время самоизоляции, стало интересно реализовать что-то подобное на JS, для PC и мобильных устройств.

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

Написано все на Typescript. Не использовались ни какие сторонние библиотеки. Зависимостей нет.

Ключевые особенности библиотеки


  • Работает как с простыми изображениями, с отрисовкой на canvas, так и с html блоками — используя css трансформации
  • Довольно гибкая система конфигурации и простое API
  • Поддерживает мобильные устройства
  • Автоматическая смена ориентации между портретным и ландшафтным режимом
Читать дальше →

Vuex нарушает инкапсуляцию

Время на прочтение4 мин
Охват и читатели5.4K

Когда мой проект на Vue начал разрастаться и достиг нескольких сотен компонентов, я задумался о подходе Vue и Vuex к архитектуре проекта.


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

Переносим Angular проект на ESLint, с Prettier, Husky и lint-staged

Время на прочтение8 мин
Охват и читатели37K
Привет, Хабр! Меня зовут Богдан, я работаю в ПИК Digital Front-End тимлидом. Большую часть проектов мы разрабатываем на Angular и недавно я решил пересмотреть наши стайл гайды, а также добавить новые инструменты для более удобной работы.

В качестве линтера я решил использовать ESLint, так как в скором времени на него планируют перевести Angular. И в этой статье я хочу поделиться инструкцией по переходу с TSLint на ESLint, а заодно рассказать, как запускать Prettier из ESLint, как добавить правила стайл гайда AirBnB, и как сделать линтинг удобным и незаметным с помощью настройки VS Code и Git хуков.
Читать дальше →

Как тестировать код, содержащий setTimeout/setInterval под капотом

Время на прочтение5 мин
Охват и читатели4.7K

Мы, разработчики, очень любим юнит-тесты, полезность которых очевидна. И чтобы эти тесты действительно были полезными, а не приносили боль, необходимо обеспечивать их стабильность.


Наша компания разрабатывает интерфейсный фреймворк "Wasaby" и продает построенные на его базе продукты, представляющие собой облачные и десктопные приложения. Релизный цикл у нас жестко привязан к календарю, а для контроля качества продукта настроены процессы непрерывной инеграции. Мы используем Jenkins для сборок и Mocha в связке с Chai assert для юнит тестирования JavaScript кода. И недавно мы столкнулись с ситуацией, когда мониторинг сборок стал показывать, что примерно половина всех случаев их падения приходится на нестабильные юнит-тесты JavaScript. Симптоматика при этом одинаковая: отдельный тест из набора либо не успевает выполниться, либо возвращает не тот результат, что ожидается. И анализ кейсов практически всегда выявляет факт, что падает тест, содержащий вызовы функций setTimeout или setInterval в собственном, либо в тестируемом коде. О том, как правильно поступить в этой ситуации, мы и будем говорить дальше.

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

Deno v1.0: Безопасная среда выполнения для JavaScript и TypeScript. Обзор возможностей

Время на прочтение14 мин
Охват и читатели10K


  1. Вступление
  2. Установка
  3. Как это выглядит внутри
  4. Функциональность
  5. WASM, RUST, Плагины
  6. Debugging, IDE
  7. Тестирование
  8. Compiler API
  9. CI
  10. Разное

Вступление


Если вы уже оказались за чтением этой статьи, то наверняка уже слышали про выступление Ryan Dahl, создателя NodeJS, на JSConf, где он выступил с докладом и рассказал о ключевых ошибках, которые были сделаны при проектировании NodeJS. В этом же докладе он обьявил о новом проекте: Deno, в котором будут учтены ошибки предыдущего проектирования.


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

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

Observable сервисы в Angular

Время на прочтение7 мин
Охват и читатели18K

Всем привет, меня зовут Владимир. Я занимаюсь фронтенд разработкой в Tinkoff.ru.


В Ангуляре для передачи данных внутри приложения или для инкапсуляции бизнес-логики мы привыкли использовать сервисы. Для управления асинхронными потоками отлично подходит RxJS.


Ангуляр в сочетании с RxJS позволяет писать в декларативном стиле, коротко и ясно. Но иногда мы сталкиваемся со сторонними библиотеками или API, которые используют коллбэки, промисы, тем самым подталкивают нас отступить от привычного стиля и писать императивно.


Цель статьи — показать на примере подобных API, как с помощью RxJS их можно без проблем обернуть в Observable-сервисы. Это поможет достичь удобства использования в Ангуляре. Начнем с Geolocation API.


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

Динамическая типизация — это не инструмент для разработки. Это чепуха (паршивая)

Время на прочтение5 мин
Охват и читатели91K


В программировании очень много вещей, в которых я разбираюсь очень плохо. Настолько много, что меня иногда спрашивают — а в чем ты вообще разбираешься?

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

Большую часть жизни я просто махал на них рукой и проходил мимо. Эти глупцы не понимают очевидных вещей, и я не нанимался разъяснять каждому js-нику, почему его код — это не разработка, а игрушечное прототипирование. Но время идёт, а количество идиотов вокруг и не думает уменьшаться, вместо того, чтобы всей своей фронтенд индустрией переехать наконец на статический тайпскрипт, эти ослы начинают использовать всякие кложуры, писать тонны тестов, и идти на все мыслимые ухищрения — лишь бы не разбираться в типах.
Читать дальше →

Runtime Type Safety in Typescript (Возможна ли удобная проверка типов в рантайме)

Время на прочтение12 мин
Охват и читатели17K

Относительная простота и доступность Javascript, относительная легкость входа в него предопределила на многие годы вперед его популярность. Некоторые языки программирования существенно повлияли на развитие всей отрасли в целом. Так, например SmallTalk стал неким прадедушкой ООП и объектного подхода, хоть сам по себе мало где используется. А Javascript… на мой взгляд это язык, о потенциале которого создатели не имели должного представления. Но мне всегда хотелось работать с чем-то на стыке между гибкостью  Javascript и строгостью типизированных языков. Возможно ли это?


В добрых традициях хабра я хочу сразу оговориться, что не претендую на применимость в 100% случаев, и не считаю мое мнение единственно верным. Приведенное ниже — мой взгляд и отношение к программированию вообще и к написанию кода на TS/JS в частности. Кроме статьи, я этот взгляд постарался донести на митапе, запись которого доступна тут.

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

Чистая Архитектура для веб-приложений

Время на прочтение36 мин
Охват и читатели128K
Хочу поделиться с вами подходом который я уже много лет использую в разработке приложений, в том числе и веб-приложений. Многим разработчикам настольных, серверных и мобильных приложений этот подход хорошо знаком, т.к. является фундаментальным при построении таких приложений, однако в вебе он представлен очень скудно, хотя желающие использовать такой подход однозначно есть. Кроме того на таком подходе написан редактор VS Code.

Чистая Архитектура

В результате применения этого подхода вы отвяжетесь от конкретного фреймворка. Сможете легко переключать библиотеку представления внутри вашего приложения, например React, Preact, Vue, Mithril без переписывания бизнес логики, а в большинстве случаев даже вьюхи. Если у вас есть приложение на Angular 1, вы без проблем сможете перевести его на Angular 2+, React, Svelte, WebComponents или даже свою библиотеку представления. Если у вас есть приложение на Angular 2+, но нету специалистов для него, то вы без проблем сможете перевести приложение на более популярную библиотеку без переписывания бизнес логики. А в итоге вообще забыть про проблему миграции с фремворка на фреймворк. Что же это за магия такая?
Читать дальше →

Реализация SOLID и слоистой архитектуры в Node.js с TypeScript и InversifyJS

Время на прочтение15 мин
Охват и читатели21K

Привет, Хабр! Предлагаю вашему вниманию перевод статьи Implementing SOLID and the onion architecture in Node.js with TypeScript and InversifyJS автора Remo H. Jansen


В этой статье мы рассмотрим архитектуру, известную как слоистая (onion). Слоистая архитектура — подход к построению архитектуры приложения, придерживающийся принципов SOLID. Он создан под влиянием DDD и некоторых принципов функционального программирования, а также, активно применяет принцип инъекции зависимостей.


Предпосылки


Данный раздел описывает некоторые подходы и принципы разработки программного обеспечения, необходимые для понимания слоистой архитектуры.


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


Под ответственностью подразумеваются различные аспекты функционала программного обеспечения. Например "бизнес-логика" и интерфейс, через который она используется — это разные ответственности.

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

Сборник упражнений по TypeScript

Время на прочтение1 мин
Охват и читатели22K
В прошлом году я в свободное время написал сборник упражнений по TypeScript для своей команды, чтобы помочь ребятам подтянуть свой уровень. В этом году доработал напильником и решил выложить в общий доступ. Задания начинаются с простых и заканчиваются очень сложными, где нужны не только знания TypeScript, но и знания node.js.

Вот ссылка на репозиторий


Пользуйтесь на здоровье. Можете слать мне пулл-реквесты и задавать вопросы. Фидбек приветствуется.

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

Портирование API на TypeScript как способ решения проблем

Время на прочтение6 мин
Охват и читатели4.7K
React-фронтенд Execute Program перевели с JavaScript на TypeScript. А бэкенд, написанный на Ruby, трогать не стали. Однако проблемы, связанные с этим бэкендом, заставили разработчиков проекта задуматься о переходе с Ruby на TypeScript. Перевод материала, который мы сегодня публикуем, посвящён рассказу о портировании бэкенда Execute Program с Ruby на TypeScript, и о том, какие проблемы это помогло решить.



Пользуясь Ruby-бэкендом, мы иногда забывали о том, что некое свойство API хранит массив строк, а не простую строку. Иногда мы меняли фрагмент API, обращения к которому выполнялись в разных местах, но забывали обновить код в одном из этих мест. Это — обычные проблемы динамического языка, характерные для любой системы, код которой покрыт тестами не на 100%. (Такое, хотя и реже, происходит и в случае полного покрытия кода тестами.)

В то же время, эти проблемы исчезли из фронтенда с тех пор, как мы перевели его на TypeScript. У меня больше опыта в серверном программировании, чем в клиентском, но, несмотря на это, я допускал больше ошибок при работе с бэкендом, а не с фронтендом. Всё это указывало на то, что бэкенд тоже стоит перевести на TypeScript.
Читать дальше →

Продвинутый TypeScript

Время на прочтение12 мин
Охват и читатели27K
Фридайвинг — ныряние на глубину без акваланга. Ныряльщик ощущает на себе закон Архимеда: он вытесняет некоторый объём воды, который выталкивает его обратно. Поэтому первые несколько метров даются тяжелее всего, но потом сила давления толщи воды над тобой начинает помогать двигаться глубже. Этот процесс напоминает изучение и погружение в системы типов TypeScript — по мере погружения становится немного легче. Но надо не забыть вовремя вынырнуть.


Фотография с сайта One Ocean One Breath.

Михаил Башуров (saitonakamura) — Senior Frontend Engineer в компании WiseBits, фанат TypeScript и фридайвер-любитель. Аналогии изучения TypeScript и ныряния на глубину не случайны. Михаил расскажет, что такое discriminated unions, как использовать вывод типов, зачем нужна номинальная совместимость и брендирование. Задержите дыхание и погружайтесь.

First DI: Первый DI на интерфейсах для Typescript приложений

Время на прочтение6 мин
Охват и читатели11K
Делюсь одной из своих библиотек которая называется First DI. Она уже много лет помогает мне решить проблему внедрения зависимостей в браузерных приложениях для таких библиотек как React, Preact, Mithril и другие. При написании First DI за основу была взята идеология DI библиотек языков C# и Java, такие как autofac, java spring autowired, ninject и другие. И точно так как библиотеки из этих языков First DI работает опираясь на рефлексию и интерфейсы Typescript.
Читать дальше →

OData babel плагин

Время на прочтение2 мин
Охват и читатели1.4K


Статья описывает трансляцию кода TypeScript в OData запросы во время компиляции программы.


Плагин babel-plugin-ts2odata выполняет разбор JavaScript AST с помощью библиотеки TsToOdata описание которой в моей предыдущей статье Типизированные запросы OData в TypeScript.

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

Сервисно-ориентированный state management c lamp-luwak

Время на прочтение8 мин
Охват и читатели1K

Благодаря тому, что React предоставляет удивительные возможности по работе с отображением, можно сосредоточиться только на организации логики приложения и семантике кода, описывающего работу с данными. Т.е. выбирая state management библиотеку, происходит выбор стилистики будущей кодовой базы.


В данной статье мы рассмотрим подход, основанный на сервисах-сторах, реализуемый благодаря библиотеке lamp-luwak.


lamp-luwak image

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

Angular для Vue разработчиков

Время на прочтение13 мин
Охват и читатели11K

Сейчас во фронтенде среди фреймворков есть три явных лидера: Angular, React и Vue. Думаю, мы можем судить о любви разработчиков к проекту по количеству звезд на GitHub. На момент написания данной статьи у Vue уже 161 тысяча звезд, на втором месте находится React с 146 тысячами, а на третьем месте — Angular со своими скромными 59.6 тысячами.


С первого взгляда может показаться, что Angular не настолько популярный, как другие фреймворки, но если обратиться к результатам исследования статистики с портала Tecla, то мы увидим, что Angular занимает довольно большую долю рынка. Например, по данным исследования Angular работает на более чем 400 тысячах сайтов, в то время как Vue — на 100 тысячах. Предлагаю в этом разобраться. Рассмотрим, за что разработчики любят Vue, почему много приложений написаны на Angular и какие выгоды может получить разработчик при использовании фреймворка от Google конкретно для себя.


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

Могучие Typescript Декораторы — как работают, во что компилируются и для каких прикладных задач применимы

Время на прочтение9 мин
Охват и читатели60K

Каждый Ангуляр разработчик видел декораторы в тайпскрипт коде. Их используют, чтобы описать Модули, сконфигурировать Dependency Injection или настроить компонент. Другими словами, декораторы используются, чтобы описать дополнительную информацию, или метаданные, для фреймворка или компилятора (в случае Ангуляра). При чем, Ангуляр лишь один из примеров. Существуют многие другие библиотеки, использующие декораторы для простоты и наглядности кода, как декларативный подход. Как .NET разработчик в прошлом, я вижу много сходства между TS декораторами и .NET аттрибутами. Наконец, набирающий популярность NestJS фреймворк для бекенд приложений (абстракция над Node), также построен на интенсивном использовании декораторов и декларативном подходе. Как это все работает и каким образом использовать декораторы в своем коде, чтобы он был более удобным и читабельным? Мы все понимаем, что после компиляции TS кода мы получаем Javascript код. В котором нет понятия декоратор, как и многих других Typescript особенностей. Поэтому для меня наиболее интересным является вопрос, во что превращается декоратор после компиляции. Занимаясь этим вопросом, я сделал выступление на митапе в Минске и хочу поделиться статьей.


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