Все потоки
Поиск
Написать публикацию
Обновить
17.45

Angular *

JavaScript-фреймворк

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

Будущее с Proxy

Время на прочтение6 мин
Количество просмотров8.8K
image

Мы, программисты — мечтатели. Идем на поводу у хайпа, мечтая о новой серебряной пуле, которая решит все наши проблемы. А также, мы любим писать новые велосипеды, тем самым не решая проблемы, а создавая новые. Давайте в этой статье немного помечтаем об архитектуре, разрабатывая «Псевдо-новый» велосипед.
Читать дальше →

Firebase + Angular Universal = невозможное возможно

Время на прочтение6 мин
Количество просмотров8.7K

image
Firebase отличный инструмент для быстрой разработки приложений. Однако при использовании Firebase и Angular Universal могут возникнуть следущие вопросы:


  • Какой пакет firebase использовать в браузере пользователя и какой использовать на сервере?
  • Какой механизм использовать для асинхронных операций?
  • Как передать данные с сервера браузеру, избегая дублирования запросов?
Читать дальше →

Angular c Clarity Design System от VmWare

Время на прочтение7 мин
Количество просмотров8.9K


Поработав с Angular Material 2, в какой то момент пришел к выводу, что продукт сыроват для полета фантазии и некоторые вещи (badge, vertical tabs, data-grid) либо реализованы с минимальным функционалом, либо In progress, planned.

Вечером, придя домой, начал искать что нибудь, что мог бы предложить тимлиду как альтернативу для следующего проекта. Тут то я и заметил, что angular.io разжился табом Resources. Это было пару месяцев назад.
Там среди прочих довольно таки полезных вещей, команда разработчиков Angular, добавила продукт от не менее известной компании, чьи разработки я уважаю и с щенячьим восторгом всегда рад лишний раз поковырять — VmWare. Ребята сделали весьма и весьма достойный продукт — Clarity.
Читать дальше →

Книга «Angular для профессионалов»

Время на прочтение8 мин
Количество просмотров23K
image Выжмите из Angular — ведущего фреймворка для динамических приложений JavaScript — всё. Адам Фримен начинает с описания MVC и его преимуществ, затем показывает, как эффективно использовать Angular, охватывая все этапы, начиная с основ и до самых передовых возможностей, которые кроются в глубинах этого фреймворка.

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

Поиск решения для быстрого создания интерфейсов СУБД

Время на прочтение7 мин
Количество просмотров47K

Практически каждый человек сталкивается с ведением какого-либо учета, сбором и анализом данных: от использования таблиц в экселе до работы с данными в клиент-банковском приложении. Повсеместно для такого учета используются различные системы управления базами данных (СУБД).


В статье я хотел бы рассказать о своем пути поиска такой системы.

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

Панель управления услугами. Часть 1: Введение

Время на прочтение6 мин
Количество просмотров3.7K

Вступление


Меня зовут Максим и я разработчик фронтенда панели управления услугами компании «Миран». В данном цикле статей я расскажу вам, как эволюционирует система и что нового стоит ждать в ближайшем будущем. Добро пожаловать под кат.

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

Быстрая разработка приложения на Angular + Ag-Grid

Время на прочтение5 мин
Количество просмотров13K
В один из дней как обычно попивая кофе, мне приходит сообщение в Skype о том что нужно в кратчайшие сроки сделать приложение с нехитрым функционалом. Нужно было иметь таблицу с сортировкой и пагинацией, возможность фильтровать по слову, дате и.т.п. Так же иметь страницу с информацией о выбранном элементе из таблицы.

Имея на руках такое тз, было решено использовать последний Angular в связке с Ag-Grid, что бы не тратить драгоценное время.
Читать дальше →

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

Время на прочтение5 мин
Количество просмотров79K

Представляю вашему вниманию типичные варианты использования 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);
}

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

Как я перестал любить Angular

Время на прочтение21 мин
Количество просмотров115K

Вступление


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


На дворе 2017ый год и для каждого нового продукта/проекта встает вопрос выбора фреймворка для разработки. Долгое время я был уверен, что новый Angular 2/4 (далее просто Angular) станет главным трендом enterprise разработки еще на несколько лет вперед и даже не сомневался что буду работать только с ним.


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


Дисклеймер: данная статья строго субъективна, но таков мой личный взгляд на происходящее и касается разработки enterprise-level приложений.

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

Настройка среды разработки Webpack 3 + Angular 4: от сложного к простому

Время на прочтение13 мин
Количество просмотров24K
Всем привет!

Современное front-end-приложение на Angular должно включать в себя следующие характеристики:

  • Возможность использования типизированного JS — Typescript
  • Обеспечение удобства и производительности разработки с помощью HMR (hot module replacement);
  • Модульность приложений и возможность отложенной загрузки модулей (Lazy Loading);
  • AoT — режим (ahead-of-time), повышающий производительность приложения.

Существует много вариантов сборки, решающих эти задачи (angular cli, A2 seed и т. д.). Обычно они имеют сложную структуру, плохо настраиваются/расширяются и представляют собой монолит, который невозможно изменить.

В статье я расскажу, как совместить Angular 2+ с webpack и разобраться со всеми этапами сборки/разработки.

Вы удивитесь, как это просто.
Читать дальше →

AngularJS Drag and Drop модуль. Без jQueryUI

Время на прочтение2 мин
Количество просмотров6.9K
Всем привет. Мой первый пост на хабре — не судите строго.

Drag and drop в AngularJS никогда не поддерживался на нативном уровне, все что сейчас есть это обертки для jQueryUI.
HTML5 DragAndDrop не в счет — я говорю об интерфейсных решениях. Draggable, droppable, rotatable, resizable элементы — это его состовляющие.

В течение некоторого времени я обдумывал эту проблему и решил внести свой небольшой вклад в копилку супер героического AngularJS сообщества.
Без лишних слов и не долго обдумывая название, представляю свое детище: AngularDND.
Читать дальше →

Основы Angular: HttpClient

Время на прочтение6 мин
Количество просмотров77K

Самый распространенный способ получить данные из web служб — это через Http. И в этой статье мы посмотрим как это можно сделать Http-запрос в Angular 4.3 через новый HttpClient.


Начиная с версии Angular 4.3 появился новый HttpClient. В этой статье описывается только новый клиент.

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

Angular — Имплементация безопасных запросов к GraphQL API посредством JWT-токенов

Время на прочтение5 мин
Количество просмотров9.8K
Привет Хабр! При реализации Angular проекта, остро встал вопрос о безопасности graphql запросов в Angular 4. Выбор пал на JSON Web Tokens. Это открытый стандарт по RFC 7519.

Работает JWT по следующей схеме:
image
Читать дальше →

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

Edge ненавидит ваши атрибуты

Время на прочтение5 мин
Количество просмотров24K

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


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

Angular 4 Material. Часть 1 — Создание и настройка проекта

Время на прочтение4 мин
Количество просмотров41K

Предисловие


Столкнулся с необходимостью использования Angular 4 Material. Качал с .io сайтов HelloWorld-овские проекты, следовал гайдам. Но уроков по Angular 4 Material мало и складывается ощущение, что они написаны для уже знающих людей. Поэтому, решил написать несколько статей, в которых расскажу, как сделать из обычного проекта Angular проект Angular Material, а также о неожиданных проблемах использования некоторых компонентов и о их решениях. Пару раз пришлось даже написать собственные компоненты на основе существующих, что тоже будет освещено. Но обо все по порядку.
Читать дальше →

Как «Актив» организовал «электронную переговорку»

Время на прочтение7 мин
Количество просмотров12K

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


Но это только половина проблемы. Как всем известно, ресурсами еще нужно уметь грамотно управлять, чтобы не случалось коллизий. Ситуации, когда во время встречи с партнерами, в переговорную врывается руководитель соседнего подразделения со словами “И эта занята!?”, недопустимы.



Второй момент – когда под рукой нет инструмента (к примеру, Outlook или его web-интерфейса), чтобы забронировать переговорную комнату, но очень нужно «успеть» захватить ценный ресурс. Для осуществления задуманного, необходимо идти на свое рабочее место и с него осуществлять бронирование. Теперь представим, что у вас нет на это времени, выходя из переговорной комнаты с очередной встречи.


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

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

Выбранный UI-фреймворк – вред. Архитектурные требования – профит

Время на прочтение5 мин
Количество просмотров12K


Мы не замечаем, но услуги и продукты, которыми мы пользуемся, постоянно усложняются.

  • Войти в метро теперь – не просто кинуть пятачок, а приложить карту Тройка, записанную на телефон и учитывающую пересадку.
  • Позвонить по телефону и посмотреть телевизор – давно уже не провести два провода в квартиру и вносить фиксированную абонентскую плату, а triple play с кучей опций и возможностей.
  • Посмотреть дневник сына – на святое же покусились! – теперь можно с планшета, заодно ответив на комментарий классного руководителя о его неудовлетворительном поведении.

Ну и я уже молчу про всякие Tinkoff, Apple Pay, Google Now, умные дома и многое другое.

Как следствие, в любой компании растут IT-отделы. То, чем раньше занимались несколько десятков сотрудников, сейчас делают команды из тысяч и десятков тысяч человек (кстати, поделитесь в комментариях, как выросли ваши IT-отделы).

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

Создание Angular 2+ компонентов с возможностью переключения темы

Время на прочтение3 мин
Количество просмотров9.1K
Всем привет.

Итак, допустим мы пишем сайт, на котором нужно реализовать возможность динамического переключения настроек внешнего вида, или, проще говоря, темы. Темой (theme) будем называть набор свойств, определяющих внешний вид компонентов (да и вообще всего сайта).
Допустим, у нас есть одностраничное приложение на Angular, и пусть в нем будет ооочень много компонентов, и один из них — ButtonComponent (к компоненту подключим стили из button.component.css), на примере которого и рассмотрим весь механизм. И нужно реализовать возможность переключения между двумя темами: «dark» и «light», которые у нас будут отличаться только цветами (а в общем случае можно выносить в тему что угодно, размеры там, шрифты, картинки бэкграунда и т.п. — все, чем можно управлять из css).
Читать дальше →

WebStorm 2017.2 – что нового в поддержке JavaScript, TypeScript, Angular и Sass и работе с ESLint, Karma и Mocha

Время на прочтение4 мин
Количество просмотров16K
На этой неделе вышло большое обновление WebStorm. В этом посте мы расскажем подробнее о том, какие улучшения ждут JavaScript-разработчиков в WebStorm 2017.2 и других IDE JetBrains версии 2017.2.

Вы можете прочитать подробнее о WebStorm 2017.2 и скачать его на нашем сайте.

Улучшения в поддержке JavaScript и TypeScript


Move symbol


Новый рефакторинг Move symbol переносит классы, глобальные функции и переменные из одного JavaScript или TypeScript файла в другой. IDE автоматически добавит экспорт и обновит ES6-импорты в файлах, где используется этот символ.

Чтобы вызвать этот рефакторинг, поставьте курсор на символ в ES6-модуле и нажмите F6.


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

Как сделать сложное простым. История создания «Проекта1917»

Время на прочтение10 мин
Количество просмотров8.6K
В конце июня 2016 года ребята из «Проекта 1917», посвященного столетию октябрьской революции в России, попросили помочь им реализовать вебчасть их проекта. Предполагалось, что это будет социальная сеть, где Николай II постит свои фотографии, Ленин ставит ему лайки, Троцкий комментирует. Мы были не первые, к кому они обратились: кто-то говорил, что в очень короткие сроки это сделать невозможно, либо стоить это будет очень дорого.
Читать дальше →