Когда я интегрировал свое Angular-караоке с YouTube, мне попался официальный YouTube-компонент из Angular Material. В README прилагалась инструкция для подключения. Почти каждая строка в ней примере сомнительна. Давайте разберемся, как сделать лучше и применить имеющиеся инструменты для ленивой подгрузки библиотеки.
Пришла осень и созрела очередная версия фреймворка Chorda 3.0. Можно наконец устроиться поудобнее за чашечкой кофе и подвести некоторые итоги
Про сам фреймворк можно почитать здесь, посмотреть там и пощупать тут
В прошлый раз я рассказывал о дизайн-функции, чертежах и построении API компонентов, а в этот раз попробую заинтересовать вас некоторыми очевидными решениями и не очень очевидными следствиями, которые появились во время работы с Chorda.
Привет, друзья!
В этой статье я хочу поделиться с вами опытом разработки хука для загрузки дополнительных данных (авось кому-нибудь пригодится).
На самом деле, хуков будет целых 2 штуки:
useLoadMore — для загрузки дополнительных данных при нажатии кнопки "Загрузить еще"useLoadPage — для постраничной загрузки данных (аля пагинация на основе курсора)Первый хук попроще, второй посложнее.
Полагаю, лишним будет говорить, что необходимость в использовании подобных хуков возникает в каждом втором проекте (по крайней мере, в моей сфере деятельности).
Любой более менее опытный фронтендер, работающий с Angular, умеет пользоваться роутером. Тут путь. Здесь компонент. Не забудь положить router-outlet в темплейт в нужном месте и вуаля.
И это покрывает 95% всех кейсов любого приложения. Остальное можно подпереть костылями. Одни из них хрупки, как китайский фарфор. Другие вполне себе претендуют на решение, достойное самого ядра приложения.
Давайте представим не такой уж редкий случай: онлайн магазин, выбрали покупки, посмотрели корзину, приступаем к оформлению.
И тут дизайнер поменял наркотики: все формы оформления заказа отрисованы в диалоговом окне. На вопрос “Зачем?” получаем отсутствующий взгляд и глупое хихиканье. Заказчик не добавляет позитива и соглашается во всем с дизайнером.
До HolyJS осталось меньше месяца — пора поведать Хабру, какие именно доклады там будут. Под катом их описания, а тут отметим пару вещей:
— В этот раз шире обычного раскрыта тема производительности. Когда React.memo не ускорит, а замедлит? Почему Solid.JS такой быстрый? Что нужно знать JS-разработчику в современном многоядерном мире?
— Помимо докладов, в программе есть несколько воркшопов, так что будет не только теория со слайдами, но и практическая деятельность.
Описания мы разделили по тематическим блокам, но это деление не строгое, некоторые доклады можно причислить к разным блокам сразу.
Около десяти лет назад сообщество веб-разработчиков впервые начало обсуждать концепцию "Single-Page Application" и искать способы ее реализации. К тому моменту разработка графических интерфейсов уже не являлась чем-то новым и поэтому многие вещи заимствовались у существующих решений и немного адаптировались под специфику браузеров.
Наиболее успешным результатом подобной работы оказался Backbone.js — объектно-ориентированный MVC-фреймворк, который в свое время использовался в BitBucket, Basecamp, Stripe, Airbnb и Trello. Со временем он был полностью вытеснен следующим поколением фреймворков, но...
Что если бы этого не случилось? Как бы тогда выглядела современная разработка веб-интерфейсов?
Недавно Бхарат Рави опубликовал статью о директиве самосохраняющегося select-элемента на InDepth. Это интересная концепция изолирования логики в директиве, что в целом идея хорошая.
Однако в этом случае у меня есть сомнения, которые я хочу подсветить. Я предлагаю свою версию компонента, исправляющую эти моменты. Начнем с того, что назовем проблемы текущего решения.
Чтобы использовать Angular CLI на полную, разработчики должны знать, что такое схематики. Например, команды ng add, ng update и ng generate используют схематики для добавления, обновления и настройки библиотек и кодогенерации в приложениях. Во время выполнения схематика вы получаете доступ к файловой системе и можете мутировать исходный код приложения так, как вам нужно. «Но, чтобы мутировать код, нужно работать с AST, а это сложно», — возможно, скажете вы, и будете правы!
В этой статье расскажу, как мы пытаемся упростить работу с AST и сделать написание схематиков обыденным. А еще покажу, что так же просто можно работать с AST не только в Angular-проектах, а практически в любом проекте на JavaScript/TypeScript.
Вы когда-нибудь работали над несколькими проектами и хотели иметь набор настраиваемых компонентов, которые можно было бы использовать во всех из них? Будь то работа или просто побочные проекты, набор компонентов, к которым вы можете обратиться, - отличный способ ускорить работу в новом или существующем проекте. Но что, если не все ваши проекты используют одну и ту же структуру пользовательского интерфейса? Или, что, если у вас есть тот, который вообще не использует какой-либо фреймворк JavaScript и полностью отрисован на сервере?
Как разработчик Vue, в идеале мы хотели бы просто использовать наш фреймворк для создания сложных пользовательских интерфейсов. Но иногда мы оказываемся в описанной выше ситуации, работая с другим фреймворком JavaScript, таким как React или Angular, или используя внутреннюю систему рендеринга, такую как Rails или Laravel. Как мы можем создать многоразовый пользовательский интерфейс для различных вариантов внешнего интерфейса?
В Vue 3.2 у нас теперь есть решение этой проблемы: веб-компоненты на базе Vue!
JavaScript - один из самых любимых и в то же время ненавистных языков в мире. Его любят, потому что он мощный. Вы можете создать полнофункциональное приложение, просто изучив JavaScript и ничего более. А также его ненавидят, потому что иногда он ведет себя совершенно неожиданным образом. И это может расстроить или даже заставить вас возненавидеть его.
В этой статье я подробно объясню, как JavaScript выполняет код в браузере, и мы изучим это с помощью гифок. Прочитав эту статью, вы станете на шаг ближе к статусу рок-звезды разработки.
В Angular есть два режима change detection: Default и OnPush. В этой статье мы разберем, как можно спокойно использовать OnPush всегда без лишнего труда и почему стоит начать это делать.
TypeScript Native (AOT) Compiler
Имплементация нативного Ahead-of-Time компилятора для языка TypeScript
Разработчик — натура творческая. У него нет времени на рутинные задачи, о которых может позаботиться машина. Поэтому все, что можно автоматизировать, должно быть автоматизировано.
Привет! Меня зовут Никита. Я разработчик Taiga UI, библиотеки Angular-компонентов, которая активно используется в нашей компании «Тинькофф». Я расскажу про решение одной из таких рутинных задач на нашем проекте с помощью написания с нуля своего Github App на Node.js.
Несколько месяцев назад я написал статью «Как мы делаем базовые компоненты в Taiga UI более гибкими: концепция контроллеров компонента в Angular». Я рассказал о том, как мы добавляем гибкости и избавляемся от дублирования кода с помощью DI. Пришло время продолжить статью.
Сегодня посмотрим на более хитрые трюки с такими директивами-контроллерами и попробуем сделать метаконтроллер, который, в свою очередь, состоит из других контроллеров. Все это будет происходить в рамках безграничных возможностей Dependency Injection в Angular.
Первое, что нужно понять об операторах, - это почему они существуют. Они существуют, потому что observables как тип позволяют нам обрабатывать события (или значения во времени) как множества или набор вещей.
Говоря более просто, любое четко определенное множество будет иметь операции, которые могут быть выполнены с ним, которые могут преобразовать его в новое множество того же типа. Например, предположим, что у нас есть грузовик с яблоками. Мы могли бы превратить его в грузовик с нарезанными яблоками с помощью машины для нарезки яблок. Та же самая машина для нарезки яблок затем может быть использована на любом грузовике с яблоками, чтобы превратить их в грузовик, загруженный нарезанными яблоками. В этом случае машина для нарезки яблок будет считаться «оператором», который сопоставляет яблоки с ломтиками яблок. Точно так же мы могли бы иметь грузовик с сахаром, мукой, яйцами и т. д. И объединить их с грузовиком с ломтиками яблока, чтобы сделать грузовик с яблочными пирогами, используя какую-то машину для производства пирогов. Итак, в этом примере грузовик - это тип множества, машина для нарезки яблок или машина для изготовления пирогов будут «операторами», а сахар, яблоки, ломтики яблок, яйца и т. д. Будут просто значениями, переносимыми нашим типом множества.
Давайте на секундочку представим, что будет если объединить React-компоненты и дженерики...
Относительно недавно мы начали строить качественно новую версию платформы "Юнидата", в которой изменилось очень многое, включая архитектуру, технологии, подход. Даже основная идея продукта приросла новыми деталями.
Нам кажется, что здорово делиться опытом подобных изменений, поэтому мы хотим сделать несколько статей о том, как устроена изнутри "Юнидата". В этой, первой, статье речь пойдет о UI. О том, как было раньше, что побудило нас кардинально пересмотреть стек и организацию работы с кодом, и что получилось в итоге.
Об авторе статьи. Меня зовут Илья, я занимаюсь разработкой новой версии. Мне не довелось работать с предыдущими версиями "Юнидата", и в проект я пришел на этапе прототипа. Я могу быть не до конца объективен на тему того, почему было выбрано то или иное решение, если это происходило еще до моего присоединения к продукту. В причинах перехода я написал свое видение, после общения с командой.
Итак, всем, кто любит истории переезда с ноткой технических особенностей, добро пожаловать под кат.
Краткий тех.обзор
Сейчас мы имеем модульный монолит и на бэке и на фронте. Они расположены в отельных репозиториях + есть еще один, который содержит настройки для запуска всего приложения в контейнерах.
Кроме того, продукт разделён на Community Edition (хранится в публичном гитлабе) и Enterprise Edition.
Фронтенд состоит из 20 модулей (число не конечное). Мы используем свежую версию typescript и почти свежую react (сейчас 16, но перевод на 17 - дело ближайшего времени). Применяем MVC подход в каждом модуле: реакт только view-слой, своя observable модель (обязательно про нее напишем отдельную статью), mobx сторы в качестве контроллеров.
Frontend-разработка и разработка вообще — это не только код и экран, но и предметы генеративного искусства, которые можно сделать принтом или перенести на настоящие холсты, повесить на стену вашей комнаты и, переводя взгляд с монитора, наслаждаться приятной глазу абстракцией.
Мы уже писали о полях течений, а сегодня, к старту курса о визуальной части веб-разработки, делимся переводом статьи, где вы найдёте генератор абстрактных картин как на КДПВ и, конечно же, его код.
