Обновить
21.98

Angular *

JavaScript-фреймворк

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

Разработчик открыл бар для разработчиков и хостит там встречи по 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 ноября. Мы вспотели, пока слушали мат.часть некоторых докладов и истории взлетов-падений.


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

Angular schematics, или как я писал свой шаблон для angular cli

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

Здравствуйте, меня зовут Максим. Уже несколько лет я занимаюсь front-end разработкой. Мне часто приходится иметь дело с версткой различных html шаблонов. В своей повседневной работе я обычно пользуюсь сборщиком webpack c настроенным шаблонизатором pug, а также использую методологию BEM. Для того чтобы облегчить себе жизнь использую замечательный пакет.


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


Кому интересно как я все это провернул добро пожаловать под кат.

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

Обзор AngularConnect 2019. Часть 2

Время на прочтение5 мин
Количество просмотров2.3K
В этой статье продолжаем делиться впечатлениями от поездки в Лондон на AngularConnect 2019. Сегодня расскажем, как все происходило, о докладах второго дня и о том, что полезного мы привезли домой (и нет, это не наклейки!). А вот — первая часть статьи.


«WARNING: sanitizing HTML stripped some content» и как с ним правильно бороться

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

Всем, кому приходилось вставлять HTML содержимое в DOM в Angular, доводилось видеть это сообщение. Конечно, все мы получаем проверенное содержимое с нашего же сервера и просто хотим застилизовать сообщение об ошибке. Или вставляем HTML из наших же констант, инлайним наши SVG иконки, ведь нам всего лишь нужно покрасить их в цвет текста. Ведь ничего плохого не случится, если мы просто скажем Angular`у — не дрейфь, там всё чисто.


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


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

Как организовать работу над библиотекой общих компонентов

Время на прочтение9 мин
Количество просмотров16K
Если ваша компания делает несколько продуктов в едином стиле, однажды вам в голову придет идея сделать библиотеку с общим кодом. Например, с UI-компонентами, сервисом авторизации или для работы со сторонними API. Возможно, вы зададитесь вопросами: кто должен поддерживать этот код? Как доносить изменения до пользователей? В конце концов, как вообще заставить их пользоваться вашей библиотекой?

С 2015 года я работаю в Тинькофф в отделе сервисов для бизнеса. За это время наша команда выросла с 3 до 60+ разработчиков, а экосистема Тинькофф Бизнес — с 3 до 50 веб-приложений. На разных этапах нашего развития мы подходили к работе с общим кодом по-разному, об этом я и хочу рассказать в этой статье.

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

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

Обзор AngularConnect 2019. Часть 1

Время на прочтение5 мин
Количество просмотров3.3K
19 и 20 сентября мы с коллегами посетили конференцию AngularConnect. Это одна из крупных Angular-конференций, в этом году она прошла в пятый раз. В программе было 30 докладов, из которых 8 — от команды Angular, 4 воркшопа и 5 эксперт-зон. Ради такого стоило поехать в Лондон (ну ладно, в Лондон всегда стоит съездить).

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

image

Angulareact

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

У меня есть проблема. Приложение написано на Angular, а библиотека компонентов на React. Делать клон библиотеки слишком дорого. Значит, нужно использовать React-компоненты в Angular-приложении с минимальными затратами. Разбираемся как это делать.

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

По следам Angular Meetup #15

Время на прочтение1 мин
Количество просмотров1.8K
11 сентября в офисе Тинькофф прошел 15-й Angular Meetup. На нем обсудили монорепозитории, юнит-тестирование с Jest и ts-mockito, а еще то, как Angular помогает построить frontend-команду. В посте — тезисы и видеозаписи докладов и ссылка на фотоотчет со встречи.

image

Подходы к управлению модулями в Angular (и не только)

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

Понимание организации сущностей, с которыми работаешь — не то, что сразу получается у разработчика, пишущего свои первые проекты на Angular.


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


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



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

Быстрое введение в Svelte с точки зрения разработчика на Angular

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

Svelte — сравнительно новый UI фреймворк, разработанный Ричем Харрисом, который также является автором сборщика Rollup. Скорее всего Svelte покажется совершенно не похожим на то, с чем вы имели дело до этого, но, пожалуй, это даже хорошо. Две самые впечатляющие особенности этого фреймворка — скорость и простота. В этой статье мы сосредоточимся на второй.



Поскольку мой основной опыт разработки связан с Angular, вполне естественно, что я пытаюсь изучить Svelte, копируя уже привычные мне подходы. И именно об этом будет рассказано в этой статье: как в Svelte делать те же самые вещи, что и в Angular.

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

Angular. Понимание @Input, @Output и EventEmitter

Время на прочтение3 мин
Количество просмотров69K
Привет, Хабр! Представляю вашему вниманию перевод статьи «Understanding @Input, @Output and EventEmitter in Angular» автора foolishneo.

Приветствую всех желающих накапливать информацию о тонкостях работы фреймворка Angular.

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

Надеюсь найдутся те, для кого перевод статьи с Medium будет полезен.

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

Как я наводил порядок в проекте, где лес прямых рук (настройки tslint, prettier, etc)

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

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



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


И тут мы разрослись. Появился новый проект с унаследованным кодом, а к нему в придачу новые разработчики в размере 4-х добрых молодцев. И чет тут пошло не по плану.

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