Angular *

После прочтения статьи "Порог вхождения в Angular 2 — теория и практика" у меня появилось желание показать, как можно пробросить все роуты Angular 2 через роутер Laravel 5.

Идея следующая

• в директории resources/views/backend будет лежать представление, являющееся точкой входа для всех роутов Angular 2. Для каждого роута Angular 2, роутер Laravel 5 будет нас перенаправлять на это представление;
• под каждый Angular 2 роут в директиве @RouteConfig нам придется создать копию в роутере Laravel;
• все роуты Angular 2, по которым подтягиваются шаблоны, будут иметь вид вида /templates/SomeComponent.main, и будут запрашиваться роутером Laravel 5 по пути вида resources/views/frontend/SomeComponent/main.blade.php

С удовольствием анонсирую проведение интенсива по теме ASP.NET Core в рамках конференции Microsoft DevCon 2016, которая пройдет 25-26 мая в Подмосковье.

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

Мы очень рады анонсировать докладчиков и организаторов интенсива по ASP.NET: Джон Гэллоуэй — старший технологический евангелист, Microsoft США, Сергей Пугачев — консультант по техническим решениям, Google, Игорь Сычев — инженер премьер поддержки разработки, Microsoft Россия, Владимир Юнев — старший технологический евангелист, Microsoft Россия.

Подробнее о содержании интенсива ниже.

Добрый день, дорогие хабра: жители, читатели, писатели, негативно-комментаторы.

В качестве вводной части и чтобы снять некоторые вопросы немного расскажу о себе. Меня зовут Тамара. Оужас, я девушка! Кого это пугает — закрывайте статью и не читайте.

Для остальных: у меня за плечам незаконченный лет 10 назад МИРЭА, факультет кибернетики. Но все эти 10 лет практики сложились таким образом, что по большей части я занималась рекламой и в перерывах случалось работать в различных стартапах, связанных с интернетом и не только.



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

Генерация PDF… Эта тема не нова, однако порой можно столкнуться с некоторыми тонкостями, в итоге став на тернистый путь велосипедостроения. Сегодня я расскажу, как разрабатывал один такой велосипед.

Мне понадобилось сделать генерацию отчетов в PDF. По ряду причин я решил сделать это на стороне клиента. Беглый поиск предоставил мне выбор между jsPDF и pdfmake. Остановился на первом. А теперь подробнее…

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

Речь сегодня пойдёт о JS-фреймворках. Нет, я не буду рассказывать про очередное готовое решение, не в том цель поста. Я лишь хочу посеять в ваших головах несколько простых идей, которые вы не встретите в документации ни к одному популярному фреймворку. А в конце мы постараемся сформировать видение идеальной архитектуры построения пользовательского интерфейса.

Уважаемые хабравчане.

Поскольку дискуссия вокруг статьи идет весьма активно, Жан-Жак Дюбре (он читает комментарии) решил организовать чаты в gitter.

Вы можете пообщаться с ним лично в следующих чатах:
https://gitter.im/jdubray/sam
https://gitter.im/jdubray/sam-examples
https://gitter.im/jdubray/sam-architecture

Также автор статьи разместил примеры кода здесь: https://bitbucket.org/snippets/jdubray/

По поводу кода он оставил следующий комментарий:

I don't code for a living, so I am not the best developer, but people can get a sense of how the pattern works and that you can do the exact same thing as React + Redux + Relay with plain JavaScript functions, no need for all these bloated library (and of course you don't need GraphQL).

Не так давно увидел свет релиз Angular 1.5, который привносит множество интересных нововведений. Важной особенностью

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

В данной статье я постараюсь осветить основные нововведения:

• Компоненты!
• Односторонние биндинги!
• Мульти-слот трансклюды!

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

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

В сегодняшней статье мы бы хотели поделиться опытом успешной модернизации с помощью Аdobe Experience Manager и рассказать, как применить данное решение для мультиканального сайта.


Читать далее

Здравствуйте!

Недавно мне довелось адаптировать ui-select под x-editable в Ангуляре и поскольку для этого пришлось потратить определенное количество времени, собирая по крупицам наиболее приемлемый вариант, сегодня я решил поделиться своими наработками с вами, в надежде на то, что кому-нибудь это сэкономит время.

Если вкратце, то полученная в итоге директива замещает стандартный editable-select, плюс дополнительная возможность добавлять объекты на лету.

Не так давно в мире web-разработки произошло важное событие — вышла бета Angular 2. И уже можно строить предположения о том, как он будет выглядеть после релиза.

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

Так и родилась мысль сравнить Angular 2 с новым, но весьма амбициозным проектом Aurelia, который так же недавно вышел в бету. А заодно пополнить копилку Хабра информацией об этом фреймворке, поскольку пока ее гораздо меньше, чем информации об Angular 2.

В последнее время на хабре стало популярно делать собственные поисковики по RuTracker. Мне это показалось прекрасным поводом для того, чтобы отойти от скучной enterprise разработки и попробовать что-нибудь новое.



Итак, задача: реализовать на локалхосте поисковик по базе The Pirate Bay и попутно попробовать, что же такое frontend разработка и с чем её едят. Задача осложняется тем, что TPB не публикует своих дампов, в отличие от RuTracker, и для получения дампов требуется распарсить их сайт. В результате гугления и осмысления задачи я решил в качестве поисковика использовать Elasticsearch, для которого написать client-side only фронтенд на AngularJS. Для получения данных я решил написать собственный парсер сайта TPB и отдельный загружатель дампа в индекс, оба на Go. Пикантность выбору придавал тот факт, что ни к Elasticsearch, ни к AngularJS я до этого ни разу не прикасался и именно их опробывание было моей настоящей целью.

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

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

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

Так как шаблоны в AngularJS являются неотъемлемой его частью, важно разобраться с ними в самом начале знакомства с новой версии этого фреймворка. Заодно обсудим, какие преимущества дает нам данный синтаксис по сравнению с angular 1.x. Причем лучше всего будет рассматривать это на небольших примерах.

Данная статья во многом основана на материалах этих двух статей:

• Angular2: синтаксис шаблонов
• Angular2: Синтаксис биндинга данных

Для того, что бы упростить подачу материала, давайте разберемся. Под AngularJS я буду подразумевать всю ветку Angular 1.x, в то время как под Angular2 — ветку 2.x.

Так же спасибо господину Bronx за ценное дополнение, которое я включил в текст статьи.

Примечание: вечер выходного дня, потому о опечатках и т.д. сообщайте в личку. Премного благодарен и приятного чтения.

Примечание от переводчика: перевести эту статью меня побудила запись в соц сети от автора, запись была следующего содержания: "#Angular2 для #dartlang 11.7 KB меньше чем JS версия. Я выжал что мог из обоих.". Меня это ошеломило, как так, транслируемый язык, который тянет хаки для собственной работы, кроссбраузерность и еще кучу библиотек помимо Angular, и после уродования и минификации обоих вариантов побеждает не JS. Это же так естественно, что за удобство языка приходится платить размером и скоростью работы результата. В синтетических тестах результат трансляции опережает по производительности чистый JS, в реальной работе разница в производительности незаметна. Итого получается, размер собранного Dart-проекта будет примерно равен JS-проекту, скорость работы примерно одинакова. Последнее обновление Dart позволяет в несколько строк подключить любую JS-библиотеку. А писать на Dart это одно удовольствие. Последнее утверждение частично раскрывается переведённой статьёй, приятного чтения.

На днях появилась статья про быстрый старт с Angular 2. Заголовок говорил что понадобится 5 минут, но, судя по комментариям, не я один даже прочитать статью за 5 минут не смог. Хочу предложить вам альтернативный вариант, он действительно займёт примерно 5 минут не считая времени скачивания нужных инструментов.

Вашему вниманию предлагается перевод туториала «5 min quickstart» от команды Angular. Туториал описывает процесс создания «Hello World»-приложения на новом фреймворке Angular 2, который недавно получил статус «бета».

Давайте начнём с нуля и построим суперпростое приложение Angular2 на TypeScript.

Демо

Запуск работающего примера — это самый лучший способ увидеть, как оживает приложение на Angular 2.
Нажатие этой ссылки открывает новую вкладку, загружает пример в plunker и отображает простое сообщение:

My First Angular 2 App

Предлагаю вашему вниманию перевод статьи из официального блога AngularJS.

Мы счастливы поделиться с вами новостью, что проект Angular 2 достиг бета-версии. О том множестве нововведений, что принесла вторая версия по сравнению с первой, вы можете узнать из предыдущего поста. Изучение Angular 2 можно начать на сайте angular.io.

Что означает «бета»?

«Бета» означает, что теперь мы уверены в том, что большая часть разработчиков имеет возможность успешно создавать крупные приложения с помощью Angular 2.

Продолжаем знакомство с AllcountJS — фреймворком для быстрой разработки приложений на платформе NodeJS. В этой статье мы рассмотрим пример реализации кастомного интерфейса с использованием AngualrJS и jade, а также некоторые возможности конфигурирования, о которых мы ещё не упоминали.

POS (Point Of Sale) — в прямом смысле точка (место) продажи, но обычно этот термин обозначает рабочее место кассира вместе с торговым оборудованием. Такие терминалы находятся почти в каждом месте где нам что-нибудь продают. И сейчас мы создадим простое приложение, которое позволит вести список товаров с остатками и создавать записи о продажах.



Как обычно, на результат можно посмотреть в демо-галерее.

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

Что самое неудобное в сборщиках проекта? Правильно! То, что нужно сборку писать самому. Изучать grunt/gulp/webpack, шаманить с плагинами, думать, как разбить конфиг на модули, когда он вырастает до нескольких сотен строчек, потом несколько месяцев радоваться, что всё работает, а когда в проекте появляется критическое изменение, опять лезть в это болото.

Мне тоже всё это порядком надоело, поэтому написал сборщик, лишенный этих недостатков. Его gulpfile.js выглядит так:

var gulp = require('gulp');
var arjs = require('arjs-builder')();

gulp.task('build', arjs.build);
gulp.task('test', arjs.test);
gulp.task('default', arjs.run);

Скопировали себе проект, и больше никогда туда не лезете, и навсегда забываете что такое сборка.
Единственное, что придется выучить, — это три команды:

gulp #компилит, поднимает локальные серверы
gulp build #билдит проект
gulp test #запускает тесты

Открываете localhost:7000 и наслаждаетесь локальной версией сайта, а в папке build
уже лежит сбилженная версия.

— А как же темплейты, их же надо в js внедрять?
— Конечно! Все внедрено как положено.
— А я стили пишу на less, sass, stylus, их же надо компилить?
— Пишите как писали, всё чудесным образом будет работать.
— А картинки в CSS инклудить?
— Так давно всё в CSS. All included как в пятизвездочном отеле.
— А разбить сбилженный файл на модули?
— Проверьте папку build. Всё по модулям? С уникальными именами, основанными на содержимом файла? Вот, а вы волновались!
— А вот еще там что-то…
— И это тоже работает.

Но как такое возможно? Это мы и рассмотрим в статье. А в конце еще расскажу, почему всё-таки RequireJS