Как стать автором
Поиск
Написать публикацию
Обновить
6.9

Angular *

JavaScript-фреймворк

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

Доводы в пользу function tree

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

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


Написание хорошего кода


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


function add(numA, numB) {
  return numA + numB
}

Полезным свойством чистых функций является то, что их легко тестировать.


test.equals(add(2, 2), 4)

Компонуемость тоже является их сильной стороной.


test.equals(multiply(add(4, 4), 2), 16)

К тому же их очень легко использовать декларативно.


const totalPoints = users
  .map(takePoints)
  .reduce(sum, 0)

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

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

Состоялся финальный релиз Angular 2

Время на прочтение2 мин
Количество просмотров35K
image
15 сентября состоялся финальный релиз второй версии популярного фреймворка для разработки одностраничных веб-приложений Angular 2.

Четкий пацан Zone.js

Время на прочтение4 мин
Количество просмотров20K
Публикуется от имени jbubsk. Мы в Тинькофф Банке сто лет боролись с проблемой контекста текущего запроса на сервер. Это момент — когда приходит тикет о том, «что это за ошибка и почему она здесь?» — очень тонкий, и бьет разработчиков по самому больному. В этой статье расскажем, как нам удалось решить эту проблему.
Читать дальше →

Что стоит почитать об Angular 2

Время на прочтение2 мин
Количество просмотров92K
Делюсь списком полезных источников по Angular 2. Подойдут как для начинающих, так и для тех, кто имеет опыт работы с фреймворком.
image
Читать дальше →

Как использовать UrlManager для настройки роутинга и создания «дружелюбных» URL

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

Здравствуйте, дорогие читатели! Я продолжаю цикл статей о том, как мы разрабатывали нетипичный, крупный проект с использованием Yii2 framework и AngularJS.

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

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

Самое интересное под катом.
Читать дальше →

Как я изобретал велосипед, или мой первый MEAN-проект

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

Сегодня, в период стремительного развития веб-технологий, опытному фронтэнд-разработчику нужно всегда оставаться в тренде, каждый день углубляя свои познания. А что делать, если Вы только начинаете свой путь в мире веб? Вы уже переболели вёрсткой и на этом не хотите останавливаться. Вас тянет в загадочный мир JavaScript! Если это про Вас, надеюсь данная статья придётся к стати.

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

Angular2: RC4 to RC5 Unit Tests Migration Guide

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

Сразу скажу, что я не любитель Angular1, angular-way и иже с ними, потому как ребята из Angular таких делов наворотили, что иногда диву даешься. Тем не менее, их новое детище выглядит многообещающе. Да, Америку не открыли, но создали нечто, способное конкурировать с популярными современными фреймворками (React + Redux, Aurelia, и т.д.).

Есть и плюсы, и минусы, о которых уже написаны статьи и даже книги, но суть поста в другом.

RC5 вышел всего неделю назад и «порадовал» разработчиков многими изменениями, которые, возможно, и помогают в работе и упрощают жизнь, но заставят серьёзно попотеть над переписыванием уже написанного кода.
Читать дальше →

20+ Моих любимых AngularJS помощников

Время на прочтение5 мин
Количество просмотров27K
В этой статье я решил собрать более чем 20 AngularJS инструментов, которые ежедневно облегчают мой процесс разработки на AngularJS вот уже на протяжении нескольких лет. Когда я перешел с чистого JavaScript на AngularJS, я хотел быть в курсе всех новинок AngularJS и для этого я сделал исследование. Для меня было очень важно быть на правильном пути. По моему опыту когда ты знаешь и пользуешься всеми новинками то освоение этого JS фреймворка идёт быстрее. После всего этого исследования на протяжении двух лет я успел попробовать следующие инструменты. Здесь вы найдете инструменты для тестирования, front-end разработки, IDE, текстовые редакторы, библиотеки, модули, расширения, генераторы кода, Grid-инструменты и другое.

Перейдем к списку.

В начале я бы хотел ознакомить вас с тремя, на мой взгляд, лучшими AngularJS инструментами для тестирования:

1. Karma

image

Karma один из моих любимых AngularJS инструментов для тестирования. Он обеспечивает идеальную среду для тестирования, что позволяет протестировать приложение в реальных браузерах и реальных устройствах, таких как телефоны и планшеты.
Читать дальше →

Начало перевода «legacy» Angular JS проекта на Angular 1.5 Components / ES6 и TypeScript

Время на прочтение12 мин
Количество просмотров14K
В статье я хотел поделиться уже работающим в продакшене вариантом начала постепенной миграции «legacy» Angular JS проекта на все хорошее, что дал нам Angular 1.5 и связку ES6/TypeScript.

Итак дано: стандартный проект, разработка которого началась еще на бородатом Angular 1.2 (человеком, далеким от мира фронтенда), представленный в более или менее стандартном виде — отдельно по директориям сгруппированы модули с роутами, сервисы, директивы и невероятно жирные контроллеры, функционал из которых потихоньку выделяестся в отдельные директивы. Адский поток фич к реализации, полное отсутствие моделей, доступ к объектам и их модификации — как бог на душу положит.

Также в проекте уже присутствует более или менее налаженный и прописанный процесс сборки/минификации и деплоя всего этого добра при помощи gulp, CI и прочее.

Задача — не уйти в себя на поддержке проекта в таком виде, в каком он есть, начать писать хороший, поддерживаемый код, научиться чему-то новому.
Читать дальше →

CRAWL динамических страниц для Google и Яндекс поисковиков (snapshots, _escaped_fragment_, ajax, fragment)

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

Всем мир!

Содержание статьи:

1. Что такое CRAWL
2. Динамический CRAWL
3. Задачи, инструменты, решение
4. Почитать
5. Выводы

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

Пишем ХабраКвест на ASP.NET Core и Angular2

Время на прочтение8 мин
Количество просмотров34K
Каждый раз с выходом нового фреймворка, хочется попробовать его в деле и написать на нем какое-то приложение. В прошлый раз отлично зашел формат квеста. По этому предлагаю посмотреть что поменялось за почти полтора года и написать еще один квест— и фреймворки посмотрим, и поиграть можно.
Результат:
сорсы на гитхабе для тех, кому интересно посмотреть на исходники
линк на квест для тех, кому интересно что получилось или потратить свое время на еще один логический квест.

Под катом описан полный процесс от создания проекта до его развертывания.
Читать дальше →

Путь длиною в React

Время на прочтение3 мин
Количество просмотров12K
В VoxImplant мы используем React.js и TypeScript для всех новых фронтенд-проектов. Но стараемся не зацикливаться на выбранных инструментах и внимательно смотрим по сторонам – не летит ли орел, не ползет ли змея, не случилось ли что интересное у других фреймворков. Недавно нам попалась статья, автор которой подробно и вдумчиво сравнивает React с Ember. И, да, у него большой опыт работы и с первым, и со вторым (а не как это обычно бывает). Предлагаем вашему вниманию адаптированный, и, надеемся, легко читаемый, перевод.
Читать дальше →

Модальные окна на Angular, Angular 2 и ReactJS

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

В этой статье мы рассмотрим, как создавать всплывающие и перекрывающие элементы на React, Angular 1.5 и Angular 2. Реализуем создание и показ модального окна на каждом из фреймворков. Весь код написан на typescript. Исходный код примеров доступен на github.

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

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

Как начать разработку крупного, нетипичного проекта. Практическое пособие

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

image


Выбор платформы для бекенда

Чтобы создать качественное и производительное Web-приложение, необходимо уделить должное внимание выбору платформы для разработки. Этим нужно заняться сразу же после того, как вы ознакомились, какие задачи должно выполнять это приложение.


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

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

Почему за GraphQL будущее

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

И что это значит лично для вас


Вы наверняка уже слышали про GraphQL, среду выполнения и язык запросов данных с открытым кодом. Про него много говорят в последнее время – в частности, на конференции React Europe, недавно проходившей в Париже, было сделано три выступления про GraphQL. И прочитав этот пост, вы узнаете, почему.

1. Вы уже его используете


Даже если вы впервые слышите о GraphQL, вам интересно будет узнать, что вы пользуетесь им ежедневно последние несколько лет. У Facebook есть миллиард ежедневных активных пользователей, и GraphQL лежит в основе работы соцсети. Если вы используете Facebook, вы используете и GraphQL.

Facebook используют GraphQL с 2012 года – задолго до того, как его код был открыт в прошлом июле. С тех пор наблюдается шквал активности по его поводу, а экосистема вокруг его открытого кода быстро растёт.

2. GraphQL решает реальные задачи, и это заметно


Существование GraphQL радует не только разработчиков на React. Работающие с Angular, iOS и Android также интересуются тем, что GraphQL может им предложить. Причина роста популярности GraphQL в том, что он решает некоторые вполне реальные задачи, с которыми разработчики борются каждый день. Именно поэтому его уже адаптируют такие компании, как Twitter, Intuit и Drupal.

Платформа мобильной разработки Fabric от Twitter уже сделала анонс перехода на GraphQL:


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

А ваш AngularJS умеет работать на 3.5Mb ОЗУ?

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

В начале весны ABBYY LS совместно с Xerox запустили сервис для перевода документов Xerox Easy Translator Service. Изюминкой этого сервиса является приложение, запускаемое на МФУ Xerox и позволяющее отсканировать необходимое количество документов, дождаться перевода на один из выбранных 38 языков, произвести печать перевода — и все это не отходя от МФУ.

Приложение запускается на определенной серии МФУ Xerox на основе технологии Xerox ConnectKey с сенсорным экраном 800x480 точек. Аппаратная начинка МФУ зависит от конкретной модели, например, наша тестовая малютка Xerox WorkCentre 3655 имеет на борту 1Ghz Dual Core процессор и 2Gb оперативной памяти. Как ни удивительно, но МФУ имеет встроенный webkit-браузер, а наше приложение — это обычное html-приложение, разработанное на AngularJS 1.3.15.

О самом проекте мы писали в блоге раньше, а эта статья посвящена одному из увлекательных этапов проекта, а именно оптимизации AngularJS под работу на МФУ Xerox. Как оказалось на деле, платформа МФУ практически не накладывает никаких серьезных ограничений на разработку приложений, и они работают практически так же, как и на десктопных webkit-браузерах, за исключением одного НО —
Читать дальше →

Angular Attack: мой опыт участия в хакатоне

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


Angular 2 сегодня считают этаким «new kid on the block». Он многим интересен, без его упоминания не обходится практически ни одна крупная front-end конференция, и уже сейчас он готов бросить вызов React. Но до лучей абсолютной славы еще далеко — официального релиза еще не было, хотя в бою фреймворк может попробовать любой желающий. Мы в Wrike, например, уже вовсю используем Angular 2 в продакшне.

Ребята из Google активно привлекают внимание к новому фрейворку и даже недавно провели 48-часовой онлайн хакатон ANGULAR ATTACK, который собрал несколько сотен участников. По его результатам было опубликовано более 270 работ. В этой статье я хочу поделиться опытом своего участия в хакатоне, впечатлениями и наблюдениями, которые могут вам помочь в подобных состязаниях. Добро пожаловать под кат.
Читать дальше →

Почему мы рады тому, что не попали на themeforest

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

Наша команда начала работать над Admin Dashboard Template (мы называем её просто админка) для themeforest 9 месяцев назад. Забегая вперед, на этот маркетплейс мы так и не попали, но сильно не расстроились и сегодня рады поделиться с сообществом результатами нашей кропотливой работы и, надеемся, интересной и полезной историей.

Ссылки для нетерпеливых:

angular 1 версия: https://github.com/akveo/blur-admin (демо: blur, mint)
angular 2 версия: https://github.com/akveo/ng2-admin (демо)

Будем рады любым комментариям, замечаниям и пожеланиям.
Надеемся, что BlurAdmin вам понравится, и, если сообщество сочтет этот проект полезным, мы с удовольствием продолжим его поддерживать и прикручивать новые фичи.

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

DevConf::JavaScript — поддержи свой любимый JS фреймворк

Время на прочтение3 мин
Количество просмотров2.8K
Из всех заявок на доклады по JavaScript надо выбрать лучшие.

Голосование продлится до 31 мая, сформируем программу вместе!

Представляем вашему вниманию 10 кандидатов на участие:

Архитектура фронтенда в 2016
Сергей Рубанов
В 2015 году произошло много знаковых событий. JavaScript обрел гармонию, мир осознал почему двусторонний биндинг — это плохо и изобрел one-way data flow. Хайп реактивности породил огромное количество разного рода flux-архитектур, а также усилил интерес к языкам Elm и ClojureScript. Сложно уследить за это всем… но это и не требуется! Ведь 2015 год уже прошел, и пора определиться какие варианты у нас есть сейчас в середине 2016 года.

React Native, Relay и GraphQL — опыт в production
Денис Измайлов
За прошедший год я много раз выступил с докладами про высоконагруженные изоморфные React.js-приложения, Redux и экосистему. Бизнес начал активно внедрять эти технологии и подходы. Сотрудники «Яндекс.Диск» поделились своими Success Stories в этом направлении на апрельском MoscowJS. Что дальше?
Познакомимся с каждой технологией в отдельности и обсудим, как это работает вместе. Расскажу, с какими проблемами мы столкнулись и какие есть плюс-минусы. Посмотрим, что сегодня нам может предложить экосистема.
Читать дальше →

Angular 2 несёт мир в галактику фронтенда

Время на прочтение8 мин
Количество просмотров44K
React, Redux, Angular, JavaScript, Dart — мир фронтенда находится на грани полномасштабной войны адептов разных технологий. Настало время героев — кто спасёт мир в веб-разработке и станет главным героем новой эпохи?

Кажется, об этом знает фронтенд-тимлид компании Wrike Евгений Гусев. Нам удалось отвлечь его от работы и задать несколько вопросов, которые так волнуют тех, кто уже успел попробовать Angular 2 или ещё только слышал о нём. Евгений рассказал нам о  преимуществах Angular 2, скорости развития проекта, трудностях и радостях перехода на него. Мы успели обсудить React, JavaScript и Dart, — в общем, сравнить и изменить все силы. Впрочем, хватит тизеров. Магистр, вам слово!



— Расскажите о себе, о том, с чем работаете и как попали в Wrike?

Меня зовут Евгений, и я пишу на Dart и Angular 2. Наверное, странное начало, но надо расставить все точки над «i». Работаю фронтенд-тимлидом в компании Wrike, а начинал с С++ под микроконтроллеры, писал немного на том и на этом, потом дошёл до C#. Когда перешёл в Dell, начал плотнее общаться с фронтендом, причём самым банальным образом: кому-то нужно было писать UI, а никого не было. Причём писать начал сразу на CoffeeScript (да-да!). Годы шли, и я перешёл в компанию, в которой я сейчас и работаю, а именно Wrike. Мы разрабатываем крупную SaaS-платформу для управления задачами и совместной работы. Сейчас у нас почти 30 фронтенд-девелоперов, плюс команда верстальщиков, и мы, как Алиса из небезызвестной сказки, всё растём и растём.

Wrike прошёл довольно большой путь: от совсем небольшого стартапа до двух миллионов строчек кода за 9+ лет разработки. Конечно, за это время у нас сменилась куча фреймворков и технологий. Всё начиналось с Dojo, потом Ext.js. Мы писали на Polymer 0.5, и, когда он стал deprecated (с выходом версии 1.0), перед нами встал вопрос — что же выбрать? Собственно о том, какие у нас были варианты, и почему мы в итоге выбрали Angular 2, я и расскажу в своём докладе.
Читать дальше →