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

Angular *

JavaScript-фреймворк

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

Управление состоянием приложения с RxJS/Immer как простая альтернатива Redux/MobX

Время на прочтение6 мин
Количество просмотров6K
"Вы поймете, когда вам нужен Flux. Если вы не уверены, что вам это нужно, вам это не нужно." Пит Хант


Для управления состоянием приложения я как правило применяю Redux. Но не всегда есть необходимость в использовании модели Action\Reducer, хотя бы из-за трудозатратности ее применения для написания простейшего функционала. Возьмем в качестве примера обычный счетчик. На выходе хотелось получить простое и практичное решение, которое позволит описать модель состояния и пару методов его меняющие, наподобие такого:


state = {value: 0} 
increase() { 
  state.value += 1 
} 
decrease() {
  state.value -= 1
}

Сходу кажется, что такое решение может обеспечить MobX, так почему бы им и не воспользоваться? Поработав с MobX некоторое время, для себя пришел к выводу, что лично мне проще оперировать последовательностью иммутабельных состояний (наподобие Redux), чем логикой мутабельного состояния (наподобие MobX), да и его внутреннюю кухню я бы не назвал простой.


В общем, захотелось найти простое решение для управления состоянием, в основе которого лежала бы иммутабельность, с возможностью применять его в Angular\React и реализованное на TypeScript. Беглый обзор на просторах github подходящего решения не выдал, поэтому возьмем RxJS/Immer и попробуем сделать свое.

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

Повысьте производительность SPA, разбив ваши библиотеки Angular на несколько частей

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

Привет, Хабр! Представляю Вашему вниманию перевод статьи «Improve SPA performance by splitting your Angular libraries in multiple chunks» автора Kevin Kreuzer.


Angular — отличный фреймворк. Мы все его любим <3.


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


Сегодня благодаря Angular CLI библиотеки легко создать. Они прекрасно подходят для того, чтобы делиться кодом между несколькими приложениями.


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


В Frontend есть разные типы производительности. runtime — производительность и initial load. В этой статье мы сосредоточимся на initial load.


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

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

Фронтенд-2019: итоги года

Время на прочтение19 мин
Количество просмотров26K
В 2019 году мир фронтенд-разработки, как уже бывало, развивался с головокружительной скоростью. Материал, перевод которого мы сегодня публикуем, посвящён обзору важных событий, новостей и трендов 2019 года.



А вот, кстати, аналогичный материал, опубликованный нами в 2018 году. Там, в конце, есть раздел прогнозов на 2019 год. На наш взгляд, многие из них оправдались. Не обойдётся без прогнозов и эта статья, но не будем забегать вперёд.
Читать дальше →

Строгие правила для нового приложения на Angular

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

Как создать и настроить Angular проект с нуля


Статья была обновлена 29 Февраля 2020 чтобы следовать лучшим практикам.


Короткое вступление


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

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

Свои Custom Controls в Angular

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

Пролог


Поговорим о реактивных формах в angular, узнаем за кастомные контролы, как их создавать, использовать и валидировать. Статья предполагает что вы уже знакомы с фреймворком angular, но хотите больше погрузиться в её специфику. Хорошее желание, начнем.
Читать дальше →

Angular 9, что нового?

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


Пока Stephen Fluin традиционно не выпустил новый релиз и статью про фичи нового Angular, я попытался собрать в кучу все и ответить на вопрос что нового?


Одна из самых крутых фич, которую мы ждали почти 2 года — Angular Ivy, и наконец то Angular 9 будет компилироваться с Ivy по умолчанию. Если вы хотите погрузится во внутренности Angular Ivy есть 2 видео с AngularConnect: про Compiler и Runtime.


Как и всегда с Angular CLI вы сможете проапгреиться довольно легко, подробный гайд.

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

5 вещей, которые я бы хотел знать, когда начинал использовать Angular

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

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


С этой же проблемой столкнулся и я, когда примерно два года назад пришел в Тинькофф на позицию Junior Frontend Developer и погрузился в мир Angular. Поэтому предлагаю вам короткий рассказ о пяти вещах, понимание которых очень облегчило бы мою работу на первых порах.


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

Делаем кроссплатформенное нативное десктоп приложение на Angular

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

angular-nodegui


Как вы уже наверно знаете, Angular уже есть во многих платформах:



Ну и, конечно, здесь не хватало десктопа (не будем пока про Electron).

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

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

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

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


Создаем готовый для опенсорса проект на Angular в пару кликов

Время на прочтение3 мин
Количество просмотров5.8K
Недавно я публиковал статью о том, как быстро настраивать npm-пакеты перед публикацией в opensource. В ней я разобрал настройку версионирования, CI, построение воркфлоу и удобный деплой на страничку с демо. Все советы той статьи распространяются и на библиотеки Angular. Но все же специфика Ангуляра не позволит вам развернуться сходу.

С шестой версии Ангуляра мы используем Angular Workspaces. Это отличный инструмент для организации проекта, но он может добавить сложностей при его первичной настройке для опенсорса. Мы решили предусмотреть их и автоматизировать процесс.


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

Angular компоненты со встраиваемым контентом

Время на прочтение4 мин
Количество просмотров10K
Когда создаешь новые компоненты при разработке на Angular, стремишься их создать таким образом, чтобы их можно было переиспользовать много раз. Точно так же, как и при разработке ПО, программист стремится сделать свой код максимально переиспользуемым. При этом хочется иметь компоненты гибкие, но не слишком сложные.


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

Разработчик открыл бар для разработчиков и хостит там встречи по Angular, верстке, PHP

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


Истории о том, как совмещать управление заведением с основной работой в ИТ, караоке для настоящих программистов (пример под катом), рассказ про бармена, пишущего на Cobol, и другое необычное о жизни питерских айтишников после заката.
Читать дальше →

Конфигурация приложений на Angular. Лучшие практики

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

Как управлять файлами конфигурации среды и целями


Когда вы создали angular приложение с помощью Angular CLI или Nrwl Nx tools у вас всегда есть папка с фалами конфигурации окружения:


<APP_FOLDER>/src/environments/
                       └──environment.ts
                       └──environment.prod.ts
Читать дальше →

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

Angular без zone.js: максимум производительности

Время на прочтение12 мин
Количество просмотров20K
Angular-разработчики в большом долгу перед библиотекой zone.js. Она, например, помогает достичь в работе с Angular почти волшебной лёгкости. На самом деле, практически всегда, когда нужно просто поменять какое-нибудь свойство, и мы меняем его, ни о чём не задумываясь, Angular производит повторный рендеринг соответствующих компонентов. В результате то, что видит пользователь, всегда содержит самую свежую информацию. Это просто замечательно.

Здесь мне хотелось бы исследовать некоторые аспекты того, как применение нового компилятора Ivy (он появился в Angular 9) способно значительно облегчить отказ от использования zone.js.



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

Обратите внимание на то, что подход к оптимизации Angular-приложений, представленный в этом материале, возможен лишь благодаря тому, что Angular Ivy и AOT включены по умолчанию. Эта статья написана в учебных целях, она не направлена на пропаганду представленного в ней подхода к разработке Angular-проектов.
Читать дальше →

Прикручиваем ngx-translate в Angular приложение. Практическое пошаговое руководство

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

Практическая пошаговая инструкция как прикрутить динамическую локализацию (возможность выбора языков) в веб приложении на Angular 4+ используя @ngx-translate/core.


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


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

Ещё 9 проектов для оттачивания Front-End мастерства

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

Введение


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

Возьмем, к примеру, React — код которого, Facebook открыл всего четыре года назад, он уже стал выбором номер один для разработчиков JavaScript по всему миру.

Vue и Angular, конечно же, также имеют свою законную базу поклонников. И еще есть Svelte и другие универсальные фреймворки, такие как Next.js или Nuxt.js. И Gatsby, и Gridsome, и Quasar… и многое другое.

Если вы хотите проявить себя как опытный разработчик JavaScript, у вас должен быть хотя бы некоторый опыт работы с различными фреймворками и библиотеками — помимо выполнения работы с хорошим старым JS.

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

11 видео с первого дня DevFest 2019 в Калининграде

Время на прочтение4 мин
Количество просмотров2.4K
28-29 сентября в Калининграде прошёл пятый DevFest — конференция для разработчиков от GDG Kaliningrad. Сегодня ребята бесплатно выложили в свой канал на YouTube записи с выступлениями спикеров.

image

Навигация в кроссплатформенных приложениях: почему NavController победил angular/router в Ionic 4

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


Всем привет! Меня зовут Никита Жигамовский, программист в KitApp и я хочу рассказать о своем опыте построения навигации в Ionic 4: проблеме, с которой столкнулся, и ее решении.

Я занимаюсь разработкой кросс-платформенных решений для мобильных приложений с 2018 года. Раньше работал на Ionic 3-й версии, но, так как время идет, функционал развивается, решил перейти на версию поновее, да и надоедливые моменты и баги предыдущей модели в Ionic 4 вроде бы уже устранили.
Читать дальше →

Компоненты-агностики в Angular

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

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


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


bruce lee

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

Темы секции Frontend на DUMP Казань: ML для фронтенд-разработчика, пиксельная магия, SvelteJS, смех, пот и слезы

Время на прочтение3 мин
Количество просмотров1.7K
«Все об этом говорят, некоторые понимают, (как они думают), а занимаются, по-настоящему, лишь единицы» — цитата программного директора DUMP Казань. Если вы думаете, что вы тертый калач фронтенд, и ничего нового на конференциях не услышите, то загляните на frontend-секцию 8 ноября. Мы вспотели, пока слушали мат.часть некоторых докладов и истории взлетов-падений.


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