Обновить
49.23

TypeScript *

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

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

Практический TypeScript. React + Redux

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

Не понимаю, как вы вообще живёте без строгой типизации. Чем занимаетесь. Дебажите целыми днями?

В настоящее время разработка любого современного фронтэнд-приложения сложнее уровня hello world, над которым работает команда (состав которой периодически меняется), выдвигает высокие требования к качеству кодовой базы. Чтобы поддерживать уровень качества кода на должном уровне, мы во фронтэнд-команде #gostgroup идём в ногу со временем и не боимся применять современные технологии, которые показывают свою практическую пользу в проектах компаний самого разного масштаба.

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

Приверженцы статической и динамической типизаций никогда не поймут друг друга. И TypeScript им не поможет

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


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

Я начал учить плюсы и C#, он — JavaScript. Закончили школу, отучились в универах, отслужили в армии, устроились на работы. Нас потаскало промышленной разработкой там и тут, и когда мы оба от нее подустали, вспомнили с чего начинали.

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

Сделаем веб снова великим

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

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

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

TypeScript: Десериализация JSON в классы с валидацией типов у свойств

Время на прочтение3 мин
Охват и читатели26K
Привет, Хабр! Хочу поделиться с вами своей библиотекой для десериализации объектов JSON в классы, которая еще и автоматически валидирует по типам входные данные.

Не так давно в JavaScript появилась такая замечательная вещь как классы, которая значительно упростила процесс написания кода. Но к сожалению не появился функционал для десериализации JSON в эти самые классы, т.е. сериализовать класс в строку можно, а вот обратно уже своими силами. И вот для исправления этого недостатка и была написана библиотека ts-serializable которой я хочу поделиться с вами.
Читать дальше →

«Class-fields-proposal» или «Что пошло не так в коммитете tc39»

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

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


Казалось бы, вот оно счастье: class-fields-proposal, который спустя долгие годы мучений коммитета tc39 таки добрался до stage 3 и даже получил реализацию в хроме.


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

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

Работа с данными при построении API на основе GraphQL

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

Преамбула


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


GraphQL замечательный инструмент. Думаю, о его преимуществах уже знают и понимают многие. Тем не менее, есть некоторые нюансы, которые следует знать, когда вы строите свои API на основе GraphQL.


Например, GraphQL позволяет возвращать потребителю (пользователю или программе) запросившем данные только ту их часть, в которой этот потребитель заинтересован. Тем не менее, при построении сервера довольно легко совершить оплошность, которая приводит к тому, что внутри сервера (который может быть, в том числе, — распределенным) данные будут курсировать полными "пачками". В первую очередь это связано с тем, что "из коробки" сам GraphQL не предоставляет удобных инструментов для разбора входящего запроса, а те интерфейсы, которые в нем заложены недостаточно документированы.

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

+10 правил чистого кода от Angular разработчика

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

Сегодня хотел затронуть тему правильного кода в работе с Angular. Данные рекомендации сделают ваш код эффективнее в применении на практике, а так же позволят мне быть не таким требовательным к коду у junior'ов.
Читать дальше →

Реактивное приложение без Redux/NgRx

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


Сегодня мы детально разберем реактивное angular-приложение (репозиторий на github), написанное целиком по стратегии OnPush. Еще приложение использует reactive forms, что вполне типично для enterprise-приложения.

Мы не будем использовать Flux, Redux, NgRx и вместо этого воспользуемся возможностями уже имеющимися в Typescript, Angular и RxJS. Дело в том, что данные инструменты не являются серебряной пулей и могут внести излишнюю сложность даже в простые приложения. Нас об этом честно предупреждают и один из авторов Flux, и автор Redux и автор NgRx.

Но эти инструменты дают нашим приложениям очень приятные характеристики:

  • Predictable data flow;
  • Поддержка OnPush by design;
  • Неизменяемость данных, отсутствие накопленных side effect-ов и прочие приятные мелочи.

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

Как вы сами убедитесь к концу статьи, это довольно простая задача — если убрать из статьи детали работы Angular и OnPush, то остается лишь несколько простых идей.
Читать дальше →

Школа магии TypeScript: дженерики и расширение типов

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

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



В итоге он пришёл к выводу о том, что лучше так не делать. Он подружился с компилятором, начал обращать внимание на его подсказки. Компилятор находит проблемы в коде и сообщает о них задолго до того, как они могут нанести реальный вред. Автор статьи, глядя на себя как на разработчика, понял, что компилятор — это его лучший друг, так как защищает его от него самого. Как тут не вспомнить слова Альбуса Дамблдора: «Требуется большая храбрость, чтобы выступить против своих врагов, но не меньше ее требуется и чтобы выступить против своих друзей».

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

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

TypeScript 3.0

Время на прочтение20 мин
Охват и читатели46K
TypeScript 3.0! Да, он вышел, и в нем по-настоящему много нововведений. Под катом вы найдете подробное описание всех новинок последней версии, среди которых режим build, новый тип unknown, значительные изменения в API, улучшения производительности и многое другое. Присоединяйтесь!

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

Война с TypeScript или покорение Enum

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

Предыстория


Пол года назад в нашей компании было принято решение о переходе на более новые и модные технологии. Для этого сформировали группу специалистов, которая должна была: определиться с технологическим стеком, на базе этого стека сделать мост к легаси коду и, наконец, перевести часть старых модулей на новые рельсы. Мне посчастливилось попасть в эту группу. Клиентская кодовая база примерно в один миллион строк кода. В качестве языка мы выбрали TypeScript. GUI подложку решили делать на vue в купе с vue-class-component и IoC.

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

Собеседование по TypeScript: 20 вопросов и ответов

Время на прочтение12 мин
Охват и читатели159K
Язык TypeScript основан на том же синтаксисе и семантике, которые хорошо знакомы миллионам JavaScript-разработчиков. TypeScript даёт возможность работать с самыми свежими и ещё только появляющимися возможностями JS, включая те, которые имеются в ECMAScript 2015, и те, которые пока существуют лишь в виде предложений. Среди таких возможностей, например, асинхронные функции и декораторы. Всё это направлено на то, чтобы помочь разработчику в создании надёжных и современных приложений.

TypeScript-программа компилируется в обычный JavaScript-код, который может выполняться в любом браузере или в среде Node.js. Этот код будет понятен любому JS-движку, который поддерживает стандарт ECMAScript 3 или более новый.



Материал, перевод которого мы сегодня публикуем, содержит разбор двадцати вопросов, которые вполне могут задать тому, кто собирается пройти собеседование, претендуя на позицию TypeScript-программиста.
Читать дальше →

WebSockets в Angular. Часть 2. Продуктовые решения

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

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

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

Angular: Создаем multiple checkbox компонент, который подойдет для повторного использования

Время на прочтение5 мин
Охват и читатели28K
Давайте создадим Angular компонент для создания множества checkbox из определенной логической группы. Компонент будет написан с идей повторного использования. Что это значит? Приведем пример ниже:

Представьте что перед вами задача сделать редактирование пользователей. При редактвровании обычно открывается форма со всеми полями. Пользователь может иметь одну или множество ролей из списка «Adimin», «Director», «Professor», «Student».

Для реализации множественного выбора ролей было решено нарисовать на форме по одному checkbox для каждой роли. Ставя галочки или снимая роли пользователя будут меняться.
Читать дальше →

Angular cli 6: зачем нужен и как использовать

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


Всем привет!

Версия Angular 2.0.0 вышла в сентябре 2016 г. И сразу же появилось большое количество подходов к построению и сборке приложений на этом фреймворке. На просторах интернета можно найти Angular seed на любой вкус.

Мы тоже создали свой Angular seed: создали общий project-template, обязали все команды, разрабатывающие фронт-энд, использовать одну структуру приложений.

А уже через полгода, в марте 2017 года, увидела свет версия Angular cli (cli – command-line interface) 1.0.0. Идея, взятая за основу, просто отличная: систематизировать подход к разработке приложений на Angular 2+. Стандартизовать структуру приложения, создание сущностей внутри приложения, а также автоматизировать сборку приложения. Эти задачи и позволяет решить Angular cli, значительно экономя ваше время.

В статье я покажу, как перейти на Angular cli 6
Читать дальше →

Maraquia — ORM для MongoDB

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

После прочтения заголовка у многих наверняка возникает вопрос — зачем ещё один велосипед при наличии уже обкатанных Mongoose, Mongorito, TypeORM и т. д.? Для ответа нужно разобраться в чём отличие ORM от ODM. Смотрим википедию:


ORM (англ. Object-Relational Mapping, рус. объектно-реляционное отображение, или преобразование) — технология программирования, которая связывает базы данных с концепциями объектно-ориентированных языков программирования, создавая «виртуальную объектную базу данных».

То есть ORM — это именно про реляционное представление данных. Напомню, в реляционных БД нет возможности просто взять и встроить документ в поле другого документа (в этой статье записи таблиц тоже называются документами, хоть это и некорректно), можно конечно хранить в поле JSON в виде строки, но индекс по данным в нём сделать не выйдет. Вместо этого используются "ссылки" — в поле, где должен быть вложенный документ, вместо него записывается его идентификатор, а сам документ с этим идентификатором сохраняется в соседней таблице. ORM умеет работать с такими ссылками — записи по ним автоматически сразу или лениво забираются из БД, а при сохранении не нужно сперва сохранять дочерний документ, брать назначенный ему идентификатор, записывать его в поле родительского документа и только после этого сохранять родительский документ. Нужно просто попросить ORM сохранить родительский документ и всё что с ним связано, а он (object-relational mapper) уже сам разберётся как это правильно сделать. ODM же наоборот, не умеет работать с такими ссылками, зато знает про встроенные документы.

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

Полное руководство по стратегии обнаружения изменений Angular onPush

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

image


Default cтратегия обнаружения изменений


По умолчанию Angular использует ChangeDetectionStrategy.Default стратегию обнаружения изменений.


ChangeDetectionStrategy.Default работает таким образом, что каждый раз, когда что-то меняется в нашем приложении, в результате различных пользовательских событий, таймеров, XHR, промисов и т.д., обнаружение изменений будет запускаться по всем компонентам.

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

Как я начал любить Vue

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

Вступление



Данный пост — это логическое продолжение моего поста/статьи — Как я перестал любить Angular / How I stopped loving Angular.
Рекомендуется к ознакомлению перед прочтением.


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

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

Обновляем Angular до 6-ой версии в проекте без использования CLI

Время на прочтение13 мин
Охват и читатели12K
В этой статье я расскажу о тернистом пути обновления Angular с кастомным Webpack конфигом, который нашей команде пришлось пройти неделю назад. Возможно, наш опыт будет полезен тем, кто использует Angular со своим Webpack конфигом, а остальным — интересен как иллюстрация того, куда может завести современный frontend и как с этим жить.



Наша команда работает над интерфейсом BILLmanager 6. Дабы вы имели общее представление о проекте до обновления, сообщу, что количество файлов в нем уже перевалило за 67 тысяч. Архитектурно можно выделить два подпроекта: модуль регистрации и основной пользовательский интерфейс. По технологиям основу составляют компоненты, директивы и модули Angular, написанные на TypeScript. Есть несколько компонентов на Web components. Для стилизации мы используем SASS/SCSS и применяем CSS variables, чтобы темизировать приложение без перекомпиляции.
Читать дальше →