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

Angular *

JavaScript-фреймворк

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

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

Время на прочтение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 мин
Количество просмотров13K


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, я и расскажу в своём докладе.
Читать дальше →

Опыт разработки игры на Node.js и Angular.js

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

Хотелось бы поделиться с вами историей разработки моей игры.

Итак, всё началось около 4 лет назад, когда я решил попробовать свои силы в программировании игр. Собравшись в кучку из трёх человек, мы решили галопом освоить Unreal Engine 3. По своей неопытности, мы бросились делать MMO с крутым графоном. Чтобы там и звуки, и пушки, и лазеры, и открытый мир и т.д. Естественно, всё это не принесло результатов: запал угас, проект почил в бездне игродева.

Однако, страсть к программированию у меня осталась, идеи копились, а полученный опыт подтолкнул к правильному (на тот момент) решению.
Хочешь сделать игру — делай всё сам.
Читать дальше →

Планировщик путешествий своими руками за пару часов

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

Автор: Сергей Матвеенко

Однажды ко мне пришел инвестор одного проекта и сказал: «Давай сделаем планировщик путешествий по картам Google!» Я согласился. Тогда инвестор стал рассказывать, как техдиректор представлял себе архитектуру этого планировщика: он говорил что-то про связь с сервером, про ключ API, про запросы в Google, про деньги за запросы, которых будет много и т. д. Все выглядело сложно и красиво. Однако затем мы стали внимательно читать документацию Google API и вдруг поняли, что на самом деле нам сервер не нужен. Вообще! Весь планировщик можно сделать на клиенте. А самое интересное — мы можем обойтись даже без API-ключа (при условии, что мы будем использовать JS API). В итоге я за два дня смог написать такой планировщик, с логикой на стороне клиента, на основе Google API, без использования сервера. Все оказалось очень просто.

Я расскажу, как можно сделать простейший планировщик такого рода буквально за пару часов. Конечно, за это время можно собрать только прототип, но главное — он будет работать! Его главной функцией будет прокладка оптимального маршрута между достопримечательностями в интересующем нас городе; может присутствовать разбивка плана поездки по дням. Все будет сделано на AngularJS с использованием Google Maps/Places API. Я расскажу об особенностях работы с этим API и о некоторых его возможностях, которые не указаны в документации. Также мы поговорим о выделении логики в клиентские приложения.
Читать дальше →

Опыт перехода сайта на Single Page Application с упором на SEO

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

Привет всем.


Мы классический web 2.0 сайт сделаный на Drupal. Можно сказать, что мы медиа сайт, т.к. у нас очень много всевозможных статей, и постоянно выходят новые. Мы уделяем много внимания SEO. У нас для этого даже есть специально обученные люди, которые работают полный рабочий день.


К нам заходит более 400k уникальных пользователей в месяц. Из них 90% приходит из поиска Google.


И вот уже почти полгода мы разрабатывали Single Page Application версию нашего сайта.


Как вы уже наверное знаете, JS это вечная боль сеошников. И нельзя просто так взять и сделать сайт на JS.


Перед тем как начать разработку мы начали исследовать этот вопрос.
И выяснили, что общепринятым способом является отдача google боту уже отрисованой версии страницы.
Making AJAX applications crawlable


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


We are generally able to render and understand your web pages like modern browsers.

Т.к. на момент принятия нашего решения Google только-только отказались от подобного метода, и еще никто не успел проверить как Google Crawler на самом деле индексирует сайты сделаные на JS. Мы решили рискнуть и сделать SPA сайт без дополнительной отрисовки страниц для ботов.

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

Пишем форум с нуля на Ruby on Rails и AngularJS

Время на прочтение27 мин
Количество просмотров40K
Не так давно я рассказывал о геме Oxymoron, позволяющем очень просто и быстро строить современные Single Page Application на AngularJS и Ruby on Rails. Статья была встречена весьма позитивно, поэтому пришло время написать более-менее сложное приложение, чтобы показать все возможности гема.
Читать дальше →

Angular 2 Beta, обучающий курс «Тур героев» часть 4

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

Часть 1 Часть 2 Часть 3 Часть 4


Сервисы


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


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

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

Архитектура построения Single Page Application на основе AngularJS и Ruby on Rails

Время на прочтение8 мин
Количество просмотров23K
Заинтересовавшись методологией построения SPA-приложений на Ruby on Rails, я пришел к некоторым идеям, которые реализуются теперь в каждом моем приложении и впоследствии даже были выделены в отдельный гем Oxymoron. На данный момент на Oxymoron написано более 20 достаточно крупных коммерческих рельсовых приложений. Хочу вынести гем на общественный суд. Поэтому дальнейшее свое повествование буду вести уже на его основе.

Пример готового приложения.
Читать дальше →

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

Развертывание стека MEAN (MongoDB, Express, AngularJS, Node.js) в Microsoft Azure

Время на прочтение5 мин
Количество просмотров8.5K
Вы уже знаете, что мы запустили новый проект, посвященный проектам с открытым исходным кодом — linuxloves.ms. Подробности про проект вы можете найти в нашей публикации на Хабре, которая уже вызвала ожесточенный флейм :-).


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

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

Рассмотрим, как любой пользователь Azure может развернуть стек MEAN за несколько минут.
Читать дальше →

Angular 2 Beta, обучающий курс «Тур героев» часть 3

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

Часть 1 Часть 2 Часть 3 Часть 4


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

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

Frontend Dev Conf 2016: герои, события и сюрпризы конференции

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

Чуть переведя дыхание после прошедшего события, а именно 2 недели, мы готовы в красках рассказать, как же прошла традиционная конференция Frontend Dev Conf.


16 апреля в Минске состоялась международная конференция Frontend Dev Conf! Уже в четвертый раз нам удалось объединить под ее началом более 300 участников и сделать FDConf громким событием во frontend-тусовке.



Все про FDConf здесь

Angular.js — разработка webApi модуля

Время на прочтение9 мин
Количество просмотров7.1K
Желание разработать собственный Angular.js webApi модуль возникло при работе с большим количеством http-запросов в проекте.

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



Задачи, которые должен решать будущий webApi модуль:


  1. Предотвратить дублирование http-запросов в проекте.
  2. Группировать существующий список запросов по функциональным категориям, чтобы проще вносить правки в конкретные методы.
  3. Быть полностью независимой функциональной единицей приложения, которая подключается к любому другому Angular.js проекту простым Dependency Injection'ом.
  4. Инкапсулировать внутреннюю реализацию, чтобы избежать проблем при работе с внешними источниками.



Демо


Посмотреть исходный код модуля: github.


Дальше поговорим о каждом из этих пунктов подробнее.

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

Новая конференция для всех, кому интересен JavaScript

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


Всем привет.

5 июня мы вместе с SPb Frontend проведем в Питере большую конференцию по JavaScript во всех его проявлениях: клиентский и серверный, библиотечный и сам-по-себе, олдскульный и авангардный.

Конференция называется HolyJS (неплохо, правда?).

Сайт конференции: http://holyjs.ru

Докладов будет около 20, параллельных залов — 3.

Среди подтвержденных докладов:
  • Известный технический блогер, фанат Clojure и автор DataScript Никита tonsky Прокопов сделает доклад о том, как организовать работу с состоянием и данными приложения в условиях распределенности, плохой связи и сложной структуры;
  • Легенда ASP.NET Дино Эспозито объяснит о том, как аккуратно (умнее, чем через user agent) определять клиентские устройства, чтобы адаптировать под них UI/UX;
  • Руководитель фронтенд-разработки в Avito и автор basis.js Роман Дворнов сделает доклад о CSSO — инструменте для минификации CSS;
  • Виктор Грищенко расскажет про Swarm — инструмент для синхронизации данных между разными устройствами;
  • Денис Мишунов расскажет о психологических и технических приемах и примерах, позволяющих управлять восприятием пользователя и помогают сделать ваш сайт «быстрым» в юзерском понимании.

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

Angular 2 Beta, обучающий курс «Тур героев» часть 2

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

Часть 1 Часть 2 Часть 3 Часть 4


Нужно больше героев


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

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

AngularJS: Миграция с 1.2 на 1.4, ч.2

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

В первой части мы перебрали все основные проблемы перехода на новую версию, а в этой мы коснёмся того, ради чего мы это делали.


image


Как говорилось ранее, главной причиной перехода может служить существенное увеличение в скорости работы приложения: в 4.3 раза более быстрые манипуляции с DOM и в 3.5 раза более быстрые циклы $digest (по сравнению с 1.2), как заявили Джеф Кросс и Бриан Форд на конференции ngEurope.


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


Давайте же рассмотрим эти инструменты!

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