CRAWL динамических страниц для Google и Яндекс поисковиков (snapshots, _escaped_fragment_, ajax, fragment)
6 мин
Всем мир!
Содержание статьи:
1. Что такое CRAWL
2. Динамический CRAWL
3. Задачи, инструменты, решение
4. Почитать
5. Выводы
Всем мир!
Содержание статьи:
1. Что такое CRAWL
2. Динамический CRAWL
3. Задачи, инструменты, решение
4. Почитать
5. Выводы
Пишем ХабраКвест на ASP.NET Core и Angular2
8 мин
Каждый раз с выходом нового фреймворка, хочется попробовать его в деле и написать на нем какое-то приложение. В прошлый раз отлично зашел формат квеста. По этому предлагаю посмотреть что поменялось за почти полтора года и написать еще один квест— и фреймворки посмотрим, и поиграть можно.
Результат:
— сорсы на гитхабе для тех, кому интересно посмотреть на исходники
— линк на квест для тех, кому интересно что получилось или потратить свое время на еще один логический квест.
Под катом описан полный процесс от создания проекта до его развертывания.
Результат:
— сорсы на гитхабе для тех, кому интересно посмотреть на исходники
— линк на квест для тех, кому интересно что получилось или потратить свое время на еще один логический квест.
Под катом описан полный процесс от создания проекта до его развертывания.
Путь длиною в React
3 мин
Перевод
В VoxImplant мы используем React.js и TypeScript для всех новых фронтенд-проектов. Но стараемся не зацикливаться на выбранных инструментах и внимательно смотрим по сторонам – не летит ли орел, не ползет ли змея, не случилось ли что интересное у других фреймворков. Недавно нам попалась статья, автор которой подробно и вдумчиво сравнивает React с Ember. И, да, у него большой опыт работы и с первым, и со вторым (а не как это обычно бывает). Предлагаем вашему вниманию адаптированный, и, надеемся, легко читаемый, перевод.
Модальные окна на Angular, Angular 2 и ReactJS
17 мин
В этой статье мы рассмотрим, как создавать всплывающие и перекрывающие элементы на React, Angular 1.5 и Angular 2. Реализуем создание и показ модального окна на каждом из фреймворков. Весь код написан на typescript. Исходный код примеров доступен на github.
Как начать разработку крупного, нетипичного проекта. Практическое пособие
6 мин
Выбор платформы для бекенда
Чтобы создать качественное и производительное Web-приложение, необходимо уделить должное внимание выбору платформы для разработки. Этим нужно заняться сразу же после того, как вы ознакомились, какие задачи должно выполнять это приложение.
В данном случае, немаловажным фактором в техническом задании была предположительно высокая нагрузка на сервис. На рынке есть много хороших инструментов, с помощью которых можно решить поставленную задачу. Некоторые мы используем в разработке, но в этот раз выбор все-таки пал на Yii2.
Почему за GraphQL будущее
3 мин
Перевод
И что это значит лично для вас
Вы наверняка уже слышали про 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:
How we productionized GraphQL.js while protecting customer data & site uptime https://t.co/TaTuKVlWAO @GraphQL pic.twitter.com/Goj42tT2ct
— Fabric (@fabric) 7 июня 2016 г.
С тех пор, как мы работаем над Apollo, стеком данных для GraphQL, почти каждый день к нам обращаются компании, жаждущие использовать GraphQL для создания новых продуктов, или даже переписать под него всю свою инфраструктуру.
А ваш AngularJS умеет работать на 3.5Mb ОЗУ?
15 мин
В начале весны 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 мин
Angular 2 сегодня считают этаким «new kid on the block». Он многим интересен, без его упоминания не обходится практически ни одна крупная front-end конференция, и уже сейчас он готов бросить вызов React. Но до лучей абсолютной славы еще далеко — официального релиза еще не было, хотя в бою фреймворк может попробовать любой желающий. Мы в Wrike, например, уже вовсю используем Angular 2 в продакшне.
Ребята из Google активно привлекают внимание к новому фрейворку и даже недавно провели 48-часовой онлайн хакатон ANGULAR ATTACK, который собрал несколько сотен участников. По его результатам было опубликовано более 270 работ. В этой статье я хочу поделиться опытом своего участия в хакатоне, впечатлениями и наблюдениями, которые могут вам помочь в подобных состязаниях. Добро пожаловать под кат.
Почему мы рады тому, что не попали на themeforest
4 мин
Наша команда начала работать над 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 мин
Из всех заявок на доклады по 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 мин
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, я и расскажу в своём докладе.
Кажется, об этом знает фронтенд-тимлид компании 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 мин
Хотелось бы поделиться с вами историей разработки моей игры.
Итак, всё началось около 4 лет назад, когда я решил попробовать свои силы в программировании игр. Собравшись в кучку из трёх человек, мы решили галопом освоить Unreal Engine 3. По своей неопытности, мы бросились делать MMO с крутым графоном. Чтобы там и звуки, и пушки, и лазеры, и открытый мир и т.д. Естественно, всё это не принесло результатов: запал угас, проект почил в бездне игродева.
Однако, страсть к программированию у меня осталась, идеи копились, а полученный опыт подтолкнул к правильному (на тот момент) решению.
Хочешь сделать игру — делай всё сам.
Планировщик путешествий своими руками за пару часов
8 мин
Автор: Сергей Матвеенко
Однажды ко мне пришел инвестор одного проекта и сказал: «Давай сделаем планировщик путешествий по картам Google!» Я согласился. Тогда инвестор стал рассказывать, как техдиректор представлял себе архитектуру этого планировщика: он говорил что-то про связь с сервером, про ключ API, про запросы в Google, про деньги за запросы, которых будет много и т. д. Все выглядело сложно и красиво. Однако затем мы стали внимательно читать документацию Google API и вдруг поняли, что на самом деле нам сервер не нужен. Вообще! Весь планировщик можно сделать на клиенте. А самое интересное — мы можем обойтись даже без API-ключа (при условии, что мы будем использовать JS API). В итоге я за два дня смог написать такой планировщик, с логикой на стороне клиента, на основе Google API, без использования сервера. Все оказалось очень просто.
Я расскажу, как можно сделать простейший планировщик такого рода буквально за пару часов. Конечно, за это время можно собрать только прототип, но главное — он будет работать! Его главной функцией будет прокладка оптимального маршрута между достопримечательностями в интересующем нас городе; может присутствовать разбивка плана поездки по дням. Все будет сделано на AngularJS с использованием Google Maps/Places API. Я расскажу об особенностях работы с этим API и о некоторых его возможностях, которые не указаны в документации. Также мы поговорим о выделении логики в клиентские приложения.
Ближайшие события
Опыт перехода сайта на Single Page Application с упором на SEO
5 мин
Привет всем.
Мы классический 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 мин
Не так давно я рассказывал о геме Oxymoron, позволяющем очень просто и быстро строить современные Single Page Application на AngularJS и Ruby on Rails. Статья была встречена весьма позитивно, поэтому пришло время написать более-менее сложное приложение, чтобы показать все возможности гема.
Angular 2 Beta, обучающий курс «Тур героев» часть 4
13 мин
Перевод
Часть 1 Часть 2 Часть 3 Часть 4
Сервисы
Тур героев развивается, и мы ожидаем добавление новых компонентов в ближайшем будущем.
Нескольким компонентам нужен доступ к данным героев, и мы не хотим копировать и вставлять один и тот же код снова и снова. Вместо этого мы создадим один сервис передачи данных, который можно будет в дальнейшем повторно использовать, и научимся использовать его в компонентах, которые в нем нуждаются.
Архитектура построения Single Page Application на основе AngularJS и Ruby on Rails
8 мин
Заинтересовавшись методологией построения SPA-приложений на Ruby on Rails, я пришел к некоторым идеям, которые реализуются теперь в каждом моем приложении и впоследствии даже были выделены в отдельный гем Oxymoron. На данный момент на Oxymoron написано более 20 достаточно крупных коммерческих рельсовых приложений. Хочу вынести гем на общественный суд. Поэтому дальнейшее свое повествование буду вести уже на его основе.
Пример готового приложения.
Пример готового приложения.
Развертывание стека MEAN (MongoDB, Express, AngularJS, Node.js) в Microsoft Azure
5 мин
Вы уже знаете, что мы запустили новый проект, посвященный проектам с открытым исходным кодом — linuxloves.ms. Подробности про проект вы можете найти в нашей публикации на Хабре, которая уже вызвала ожесточенный флейм :-).
Разработчики, которые создают решения в стеке MEAN могут легко размещать свои решения в облачной платформе Microsoft Azure. Проще всего это сделать с помощью виртуальных машин.
Для упрощения работы с виртуальными машинами в облаке Azure предлагается площадка Azure Marketplace, в которой находятся сотни заранее настроенных виртуальных машин с разным окружением и установленными инструментами, включая операционные системы, базы данных, среды, фреймворки, CMS и так далее.
Рассмотрим, как любой пользователь Azure может развернуть стек MEAN за несколько минут.
Разработчики, которые создают решения в стеке MEAN могут легко размещать свои решения в облачной платформе Microsoft Azure. Проще всего это сделать с помощью виртуальных машин.
Для упрощения работы с виртуальными машинами в облаке Azure предлагается площадка Azure Marketplace, в которой находятся сотни заранее настроенных виртуальных машин с разным окружением и установленными инструментами, включая операционные системы, базы данных, среды, фреймворки, CMS и так далее.
Рассмотрим, как любой пользователь Azure может развернуть стек MEAN за несколько минут.
Frontend Dev Conf 2016: герои, события и сюрпризы конференции
3 мин
Чуть переведя дыхание после прошедшего события, а именно 2 недели, мы готовы в красках рассказать, как же прошла традиционная конференция Frontend Dev Conf.
16 апреля в Минске состоялась международная конференция Frontend Dev Conf! Уже в четвертый раз нам удалось объединить под ее началом более 300 участников и сделать FDConf громким событием во frontend-тусовке.
