Pull to refresh
  • by relevance
  • by date
  • by rating

KnockoutJS: Фильтрация списков на лету

JavaScript *
В минувшую субботу я имел честь читать доклад о MVVM и KnockoutJS на .NET Saturday в Днепорпетровске.
Доклад был достаточно тепло встречен публикой и у многих появились интересные вопросы,
которые не были раскрыты во время самого доклада.
Собственно говоря, я решил написать публичные ответы на некоторые из них на Хабре.

Сегодня я отвечу на вопрос о template-binding. «Как быть, если мне надо отобразить не все записи, а только подходящие определённым условиям».

Ответ находится под хабракатом.
Читать дальше →
Total votes 35: ↑32 and ↓3 +29
Views 11K
Comments 7

Реактивный манифест

System Analysis and Design *Concurrent computing *
Translation
В последние годы требования к приложениям значительно изменились. Десятки серверов, время отклика в несколько секунд, оффлайновое обслуживание, которое могло длиться часами, гигабайты данных — такими были большие приложения буквально несколько лет назад. Сегодня же приложения работают абсолютно на всём, начиная с простых мобильников и заканчивая кластерами из тысячи процессоров. Пользователи ожидают миллисекундного времени отклика и стопроцентного аптайма, в то время как данные выросли до петабайтов.

Первоначально эту нишу занимали крупные инновационные интернет-компании типа Google или Twitter, однако такие требования к приложениям начали всплывать во многих областях индустрии. Финансовые и телекоммуникационные компании первыми начали внедрять новые практики, чтобы удовлетворить новым требованиям, а теперь подтягиваются и остальные.

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

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

Читать дальше →
Total votes 24: ↑21 and ↓3 +18
Views 48K
Comments 15

It’s the future

JavaScript *
Translation

Этот пост просто шутка и не пытается выставить инструменты, упомянутые здесь, в дурном свете. Я использую их постоянно, они великолепны, и я рекомендую их использовать. По мотивам It's the future @ CircleCI Blog


— Эй, я бы хотел научиться писать крутые веб-приложения. Слышал, у тебя есть опыт.


— Да, я как раз занимаюсь фронтендом, юзаю пару тулз.


— Круто. Я щас делаю простое приложение — обычный TODO-лист, используя HTML, CSS и JavaScript, и планирую заюзать JQuery. Это норм?


— Не-не-не. Это олдскул. Джиквери мёртв — никто не использует его теперь! Тебе нужен React. Это будущее.


— Окей, лады. А что это?


Читать дальше →
Total votes 178: ↑167 and ↓11 +156
Views 84K
Comments 287

Типичное использование Observable объектов в Angular 4

Website development *JavaScript *Programming *Angular *TypeScript *

Представляю вашему вниманию типичные варианты использования Observable объектов в компонентах и сервисах Angular 4.



Подписка на параметр роутера и мапинг на другой Observable


Задача: При открытии страницы example.com/#/users/42, по userId получить данные пользователя.


Решение: При инициализации компоненты UserDetailsComponent мы подписываемся на параметры роутера. То есть если userId будет меняться — будер срабатывать наша подписка. Используя полученный userId, мы из сервиса userService получаем Observable с данными пользователя.


// UserDetailsComponent

ngOnInit() {
  this.route.params
    .pluck('userId') // получаем userId из параметров
    .switchMap(userId => this.userService.getData(userId))
    .subscribe(user => this.user = user);
}

Читать дальше →
Total votes 21: ↑21 and ↓0 +21
Views 72K
Comments 12

27 марта, Москва — JavaScript MeetUP

Альфа-Банк corporate blog JavaScript *TypeScript *
Очередной JavaScript MeetUP мы собираем уже в следующую среду, 27 марта, в 19.00 на площадке Corporate Innovations Hub (ул. Большая Полянка, д.2/10, стр. 1).

В программе будет 3 доклада от наших сотрудников. Вход бесплатный (но зарегистрироваться надо заранее), будет и онлайн-трансляция.



Список докладов и полезные ссылки — под катом.
Total votes 19: ↑19 and ↓0 +19
Views 1.7K
Comments 0

Асинхронное программирование (полный курс)

Website development *JavaScript *Programming *Node.JS *Studying in IT
Tutorial

Методы асинхронного программирования


Асинхронное программирование за последнее время стало не менее развитым направлением, чем классическое параллельное программирование, а в мире JavaScript, как в браузерах, так и в Node.js, понимание его приемов заняло одно из центральных мест в формировании мировоззрения разработчиков. Предлагаю вашему вниманию целостный и наиболее полный курс с объяснением всех широко распространенных методов асинхронного программирования, адаптеров между ними и вспомогательных проемов. Сейчас он состоит из 23 лекций, 3 докладов и 28 репозиториев с множеством примеров кода на github. Всего около 17 часов видео: ссылка на плейлист.

Читать дальше →
Total votes 48: ↑48 and ↓0 +48
Views 76K
Comments 17

ReactiveX Redux

Альфа-Банк corporate blog JavaScript *Programming *ReactJS *
Все, кто работает с Redux, рано или поздно сталкиваются с проблемой асинхронных действий. Но современное приложение разработать без них невозможно. Это и http-запросы к бэкенду, и всевозможные таймеры/задержки. Сами создатели Redux говорят однозначно — по умолчанию поддерживается только синхронный data-flow, все асинхронные действия необходимо размещать в middleware.

Конечно, это слишком многословно и неудобно, поэтому тяжело найти разработчика, который пользуется одними только “нативными” middleware. На помощь всегда приходят библиотеки и фреймворки, такие как Thunk, Saga и им подобные.

Для большинства задач их вполне хватает. Но что если нужна чуть более сложная логика, чем отправить один запрос или сделать один таймер? Вот небольшой пример:

async dispatch => {
   setTimeout(() => {
      try {
         await Promise
            .all([fetchOne, fetchTwo])
            .then(([respOne, respTwo]) => {
                dispatch({ type: 'SUCCESS', respOne, respTwo });
             });
      } catch (error) {
          dispatch({ type: 'FAILED', error });
      }   
   }, 2000);
}

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

Меня зовут Дмитрий Самохвалов, и в этом посте я расскажу, что такое концепция Observable и как применять её на практике в связке с Redux, а еще сравню всё это с возможностями Redux-Saga.
Читать дальше →
Total votes 22: ↑21 and ↓1 +20
Views 8K
Comments 31

Асинхронное программирование в JavaScript (Callback, Promise, RxJs )

JavaScript *IT Infrastructure *Node.JS *Angular *Studying in IT

Всем привет. На связи Омельницкий Сергей. Не так давно я вел стрим по реактивному программированию, где рассказывал про асинхронность в JavaScript. Сегодня я бы хотел законспектировать этот материал.



Но перед тем как начать основной материал нам нужно сделать вводную. Итак, давайте начнем с определений: что такое стек и очередь?


Стек — это коллекция, элементы которой получают по принципу «последний вошел, первый вышел» LIFO


Очередь — это коллекция, элементы которой получают по принципу («первый вошел, первый вышел» FIFO


Окей, продолжим.



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

Читать дальше →
Total votes 29: ↑24 and ↓5 +19
Views 37K
Comments 50

Прекратите выдавать за утечку памяти что-то другое

JavaScript *Angular *

На сегодняшний день написано очень много статей о том, что от подписок Observable RxJS надо отписываться, иначе произойдет утечка памяти. У большинства читателей таких статей в голове отложилось твёрдое правило "подписался? — отпишись!". Но, к сожалению, зачастую в подобных статьях информация искажается или что-то недоговаривается, а ещё хуже когда подменяются понятия. Об этом и поговорим.


Total votes 20: ↑12 and ↓8 +4
Views 5K
Comments 55

6 способов отписаться от Observables в Angular

JavaScript *Angular *
Translation


Обратная сторона подписки на Observable


У Observables есть метод subscribe, который вызывается с помощью callback-функции, чтобы получить значения, отправляемые (emit) в Observable. В Angular он используется в компонентах/директивах, а особенно в router-модуле, NgRx и HTTP.


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


@Component({...})
export class AppComponent implements OnInit {
    subscription: Subscription
    ngOnInit () {
        const observable = Rx.Observable.interval(1000);
        this.subscription = observable.subscribe(x => console.log(x));
    }
} 
Читать дальше →
Total votes 3: ↑2 and ↓1 +1
Views 11K
Comments 7

Заменяем Redux c помощью Observables и React Hooks

Website development *JavaScript *ReactJS *TypeScript *
Translation
Tutorial

Управление состоянием — одна из важнейших задач, решаемых в разработке на React. Было создано множество инструментов в помощь разработчикам для решения этой задачи. Наиболее популярным инструментом является Redux — небольшая библиотека, созданная Дэном Абрамовым, и предназначенная помочь разработчикам использовать паттерн проектирования Flux в их приложениях. В этой статье мы разберем, действительно ли нам нужен Redux, и посмотрим, как мы можем заменить его более простым подходом, в основе которого лежат Observable и React Hooks.

Читать дальше →
Total votes 9: ↑9 and ↓0 +9
Views 11K
Comments 27

Знание и состояние

Website development *JavaScript *Programming *Perfect code *

Сердце любого современного сайта или браузерного приложения (что SPA, что PWA, что любые другие три буквы) — это его State, или состояние.


Мы можем сколько угодно спорить о том, что лучше — React, Vue, Svelte, Angular, можем продолжать пользоваться jQuery, но в действительности это не так важно. Это та часть нашего приложения, которое мы видим — его “мышцы“ и “кожа”. Но то, как вы думаете — какими терминами оперируете, какие механики используете для даже визуализации в голове того, как в вашем приложении “текут” данные — все это идет из его скелета. Из state manager-а.


Помните, пару лет назад у нас была усталость от JavaScript-а? Сейчас я вижу у огромного количества людей усталость от state manger-ов. Redux? Да, да and да. RxJS? Тоже. MobX? Если он такой простой — блин, почему у него есть в документации страница западни.html?


Ответ “почему многим так тяжело” есть, но сначала надо точно сформулировать проблему.


Выбирая state manger — мы выбираем образ мышления. Вариантов сейчас много, но самые популярные подходы бьются на 3 группы:

Читать дальше →
Total votes 21: ↑20 and ↓1 +19
Views 7.8K
Comments 9

Как подружить RxJava с VIPER в Android, подходы применения и о структуре планировщиков

Auriga corporate blog Java *Development of mobile applications *Development for Android *
image

Привет, Хабровчане. Сегодня мы с вами поговорим о RxJava. Я знаю, что о ней написано материала вагон и маленькая тележка, но, как мне кажется, у меня есть пара интересных моментов, которыми стоит поделиться. Сначала расскажу, как мы используем RxJava вместе с архитектурой VIPER для Android приложений, заодно посмотрим на «классический» способ применения. После этого пробежимся по главным особенностям RxJava и остановимся подробнее на том, как устроены планировщики. Если вы уже запаслись вкусняшками, то добро пожаловать под кат.
Читать дальше →
Total votes 4: ↑3 and ↓1 +2
Views 1.4K
Comments 6

5 советов для прокачки своих навыков в Angular

TINKOFF corporate blog JavaScript *Angular *TypeScript *

Этим летом мы с Ромой запустили серию твитов с полезными советами и приемами по Angular. Сообщество тепло встретило эту инициативу, и я решил написать обобщающую статью.

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

Читать далее
Total votes 28: ↑27 and ↓1 +26
Views 13K
Comments 9

Учим HostBinding работать с Observable

TINKOFF corporate blog Website development *Open source *Angular *TypeScript *

Как и многие другие Angular-разработчики, я мирился с одним ограничением. Если мы хотим использовать Observable в шаблоне, мы можем взять знакомый всем async-пайп. Но его нельзя применить к @HostBinding. Давным-давно это было возможно по ошибке, но это быстро исправили. Все потому, что хост байндинг относится к родительскому view и в нем этот пайп может быть не подключен. Это довольно желанная фича. Давайте посмотрим, как мы можем ее реализовать, пока нет официального решения.

Читать далее
Total votes 23: ↑23 and ↓0 +23
Views 4.7K
Comments 8

Angular: Показываем скелетон страницы за три шага

TINKOFF corporate blog Website development *Open source *Angular *
Tutorial

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

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

Читать далее
Total votes 28: ↑26 and ↓2 +24
Views 8.7K
Comments 5

RxJS Challenge: Неделя 1

TINKOFF corporate blog Website development *JavaScript *Angular *TypeScript *

Работая с Angular волей-неволей будешь использовать RxJS, ведь он лежит в основе фреймворка. Это очень мощный инструмент для обработки событий и не только. Однако далеко не каждый проект использует его по полной. Часто это просто запросы на бэк, нехитрые преобразования данных и подписка. Мы с Ромой очень любим RxJS и решили собрать несколько интересных кейсов из нашей практики. Мы сделали из этого что-то вроде челленджа на 20 задачек, которые мы предлагаем решить с помощью RxJS и попрактиковать свои навыки.

Каждая задачка будет иметь некий бойлерплейт, чтобы вам было просто начать. Под спойлером я положу ссылку на свое решение и небольшое пояснение к нему. В целом задачи будут идти от простого к сложному, а полное собрание с ответами и пояснениями на английском доступно на GitHub.

Решить челлендж!
Total votes 14: ↑14 and ↓0 +14
Views 5.1K
Comments 9

Изучай observable, создавая observable

JavaScript *Angular *TypeScript *
Sandbox
Translation

Эта статья — перевод оригинальной статьи Ben Lesh “Learning Observable By Building Observable”.

Ben Lesh рассказывает как создать свой observable и сравнивает его работу с observable из RxJs.

Читать далее
Total votes 8: ↑8 and ↓0 +8
Views 6.2K
Comments 1

Как реализовать drag & drop используя RxJS

JavaScript *Angular *
Translation

Drag & drop - одна из функций, которая может быть очень полезна для пользователей нашего приложения. Кроме того, это отличный пример, показывающий, как RxJS можно использовать для простой реализации функционала перетаскивания. Давайте посмотрим, как мы можем это сделать.

Читать далее
Total votes 2: ↑2 and ↓0 +2
Views 3.5K
Comments 1

Publish-Subscribe на TypeScript — уменьшаем связанность

JavaScript *Node.JS *ООP *ReactJS *TypeScript *

Известно, что одним из признаков хорошего архитектурного дизайна является слабая связанность между отдельными модулями приложения. Достичь этого можно разными способами: Dependency Injection, с помощью паттернов проектирования Mediator, Publish-Subscribe и некоторыми другими, многие из которых так или иначе реализуют принцип инверсии зависимостей, ответственных за уменьшение связанности. Об одном из таких паттернов, а именно о Publish-Subscribe (далее PubSub) мы сегодня и поговорим. А заодно, предлагаю рассмотреть мою собственную реализацию на TypeScript, построенную на декораторах - люблю я декларативный подход, ничего тут не сделаешь.

Читать далее
Total votes 7: ↑7 and ↓0 +7
Views 3.1K
Comments 3