Pull to refresh
  • by relevance
  • by date
  • by rating

TodoMVC — «Hello, world» на стероидах

Website development *JavaScript *
Tutorial
Cуществует уже несколько десятков JavaScript-фреймворков для построения сложных приложений в браузере. Чтобы сравнить их между собой и выбрать наиболее подходящий, примитивного примера вроде классического «Hello, world» явно недостаточно. Более сложные и реалистичные примеры программ в книгах и документации каждого фреймворка могут сильно отличаться, и сравнивать их между собой затруднительно. Проект TodoMVC решает именно эту проблему. Это набор примеров реализации одного и того же простого, но вполне законченного веб-приложения с использованием разных фреймворков + эталонный пример на чистом JavaScript.

Приложение TodoMVC — это список дел. Дела можно добавлять, помечать как выполненные и удалять. Список должен сохраняться в локальном хранилище браузера. Приложение должно по возможности использовать стандартный шаблон HTML и CSS. Вот подробная спецификация приложения.
Читать дальше →
Total votes 51: ↑41 and ↓10 +31
Views 17K
Comments 17

7 причин, почему AngularJS крут

JavaScript *Angular *
Sandbox
Достаточно вольный перевод заметки 7 reasons why angularJS rocks.

AngularJS
Я backend-разработчик и мир Javascript фреймворков для меня достаточно нов, хотя в последние полгода мой интерес к ним сильно растет. Причина проста: я считаю, что стек технологий REST + JSON + Rich JS все больше подходит для широкого круга веб-приложений. Такой подход помогает победить дерьмовую сомнительную концепцию MVC в серверных приложениях. Почему MVC можно считать вредным — это отдельная история, сейчас лучше поговорим об AngularJS.

Что в AngularJS особенного?
Читать дальше →
Total votes 34: ↑23 and ↓11 +12
Views 34K
Comments 34

AngularJS — фреймворк для динамических веб-приложений от Google

JavaScript *Programming *Angular *
AngularJS создан для тех разработчиков, которые считают, что декларативный стиль лучше подходит для создания UI, а императивный — для написания бизнес-логики.

Дзен Angular


  • Хорошо отделять манипуляцию DOM-ом от логики работы приложения. Это существенно улучшает тестируемость кода.
  • Хорошо считать, что автоматизированное тестирование приложения настолько же важно, насколько и написание самого приложения. Тестируемость очень сильно зависит от того, как структурирован код.
  • Хорошо отделять разработку клиентской части от серверной. Это позволяет вести разработку параллельно и улучшает повторное использование на обеих сторонах.
  • Хорошо, когда фреймворк ведет разработчика по всему циклу разработки приложения: от проектирования UI через написание бизнес-логики к тестированию.
  • Хорошо, когда распространенные задачи становятся тривиальными, а сложные — упрощаются.


AngularJS представляет собой комплексный фреймворк. В стандартной поставке он предоставляет следующие возможности:
  • Все, что вам нужно для создания CRUD-приложений: data-binding, базовые директивы для шаблонов, валидация форм, роутинг, deep linking, повторное использование компонентов, dependency injection, инструменты для взаимодействия с серверными (RESTful) источниками данных.
  • Все, что вам нужно для тестирования: средства для модульного тестирование, end-to-end тестирования, mock-и.
  • Шаблон типового приложения, включающего в себя структуру каталогов и тестовые скрипты.


AngularJS разрабатывается сотрудниками Google и используется, как минимум, в одном сервисе Google — DoubleClick.

Читать дальше →
Total votes 60: ↑55 and ↓5 +50
Views 136K
Comments 36

Обзор JS-фреймворков. Путешествие через джунгли JavaScript MVC. Ч. 1

Ajax *Website development *JavaScript *
Translation
(от 27 июля 2012)
При написании нативного веб-приложения легко начать чувствовать себя богом, способным работать просто с библиотекой работы с DOM (такой как jQuery) и горсткой сервисных плагинов. Вскоре возникает проблема в виде груды вложенных возвратных функций jQuery и разбросанных DOM-элементов без всякой структуры вместо приложения.

Короче, мы застреваем в спагетти-коде. К счастью, есть современные JS-фреймворки (библиотеки, задающие, кроме функций, правила организации кода --прим. перев.), помогающие поддерживать структуру и организованность в проекте, облегчающие ремонтопригодность в будущем.

■ Что такое MVC или, лучше сказать, MV*?


Эти современные библиотеки дают разработчикам простой путь к организации кода, используя вариации паттерна проектирования, известного как MVC (Model-View-Controller). MVC разделяет задачи в приложении на 3 части:
Читать дальше →
Total votes 58: ↑56 and ↓2 +54
Views 111K
Comments 23

Практикум AngularJS — разработка административной панели

JavaScript *Programming *Angular *
Sandbox
При создании сайтов часто возникает задача создания админки для редактирования контента. Задача, в общем, тривиальная, но сделать удобную админку не так-то просто.

Под удобством в первую очередь подразумевается возможность сортировки таблицы со списком материалов и работа без перезагрузки страницы. Если материалов в таблице становится много, то возникает задача разбивать её на страницы.

Всем известный jQuery-плагин tablesorter с tablesorterPager-ом и менее известный, но гораздо более функциональный DataTables хороши, но обладают некоторыми недостатками. Главный из них — сложность динамического добавления новых строк в таблицу (после добавления строки в таблицу, новая строка потеряется при следующем вызове сортировки). tablesorter вообще не даёт средств для добавления строки в свой кэш, DataTables предоставляет широкое и функциональное API для управления внутренним представлением таблицы, но это API довольно многословно и не очень гибко.

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

Сразу приведу, что получится в итоге (кликабельно):


Читать дальше →
Total votes 25: ↑25 and ↓0 +25
Views 135K
Comments 28

Обзор JS-фреймворков. Путешествие через джунгли JavaScript MVC. Ч. 2

Ajax *Website development *JavaScript *
Translation
(Окончание перевода статьи Эдди Османи о сравнении и выборе библиотеки для проекта со значительной ролью JS на клиенте.)
Содержание первой части:

■ Что такое MVC или, лучше сказать, MV*?
■ Когда нам нужен MV*-фреймворк JS?
■ Где же мы будем нуждаться в MV*, а где нет?
■ Проблема выбора: слишком много вариантов?
■ TodoMVC: общее приложение для обучения и сравнения
■ Предложенные нами критерии выбора фреймворка
■ Dojo и усложнение фреймворков на JavaScript
■ Коллекция TodoMVC (фреймворки, на которых сделаны реализации тестового приложения Todo)
Читать дальше →
Total votes 87: ↑78 and ↓9 +69
Views 124K
Comments 18

Практикум AngularJS — разработка административной панели (часть 2)

JavaScript *Programming *Angular *
В первой части был реализован базовый функционал админки на javascript-фреймворке AngularJS — загрузка данных из бэкенда, добавление/изменение записей. Во второй части мы рассмотрим реализацию сортировки таблицы и разбитию по страницам, удаление записей.

Читать дальше →
Total votes 3: ↑3 and ↓0 +3
Views 43K
Comments 10

Вышел WebStorm 5 — станьте еще продуктивнее

JetBrains corporate blog JavaScript *
Картинка стоит тысячи слов — мы же предлагаем взлянуть на скринкаст:



Засветились:
  • LiveEdit — обновляет фрагменты страницы без перезагрузки, включая javascript
  • ZenCoding — мгновенная генерация сложных конструкций из соответствующих CSS-селекторов
  • AceJump — навигация по видимому участку кода

Разумеется мы умеем гораздо больше
Загрузить последнюю версию для вашей платформы
Total votes 87: ↑80 and ↓7 +73
Views 28K
Comments 79

Директивы в AngularJS

JavaScript *Programming *Angular *
Директивы — это ключевая особенность AngularJS. С помощью директив можно добавлять новое поведение существующим HTML элементам, можно создавать новые компоненты. Примерами директив, добавляющих новое поведения для существующих HTML элементов, могут служить input, select, textarea в связке с ngModel, required и т.п. Перечисленные директивы в основном связаны с валидацией форм в AngularJS. Но тема валидации заслуживает отдельной статьи.

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

Если вы разрабатываете приложение на AngularJS и не создаете директивы, то это уже само по себе немного настораживает. Либо ваше приложение достаточно простое и уложилось в стандартные возможности AngularJS, либо, скорее всего, что-то не так с архитектурой вашего приложения. А если у вас при этом есть работа с DOM-ом в контроллерах или сервисах, то вам однозначно надо разбираться с темой создания директив, т.к. манипуляций с DOM-ом не должно быть нигде, кроме директив.

В данной статье я постараюсь рассмотреть процесс создания собственных директив на нескольких примерах.

Читать дальше →
Total votes 22: ↑20 and ↓2 +18
Views 81K
Comments 18

Ключевое отличие AngularJS от Knockout

Website development *JavaScript *Angular *
imageЗа последнее время я несколько раз успел поучаствовать в дискуссиях о том, чем Angular лучше или хуже Knockout и других JS-фреймворков. И очень часто я сталкивался с тем, что есть некоторое непонимание сути различий в подходах, заложенных в эти продукты. Иногда дело доходило даже до того, что в качестве преимущества Knockout приводились валидные по умолчанию префиксы «data-», что ну просто совсем смешно (не говоря уж о том, что их можно использовать и в Angular).

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

  1. Модульная организация кода, тестируемость и жестокая война с любыми глобальными данными.
  2. Пропаганда декларативного подхода через создание собственных HTML-директив.
  3. Механизм проверки изменения данных в дата-биндинге без использования коллбэков.

И третий пункт мне здесь видится наиболее сложным для понимания. Поговорим именно о нем.
Читать дальше →
Total votes 68: ↑66 and ↓2 +64
Views 47K
Comments 64

Yeoman Express Stack

JavaScript *
Translation
image
Прим. перев.: вместо короткой новости https://plus.google.com/115133653231679625609/posts/YDNbxVxi4er решил перевести доку по этому форку.

Yeoman Express Stack — это форк Yeoman (прим. перев.: статья на хабре).
Форк создан в доказательство возможности вести разработку полного стека (клиент-сервер) при помощи Yeoman 0.9.6, Express и AngularJS. Примечание: это экспериментальная ветка и (пока) пригодна только для тестирования и обкатки концепции.
Включает:
  • Специализированную версию Yeoman server.js с поддержкой Express-миддлваре
  • Из коробки поддерживается LiveReload
  • Генератор для Express и CRUD—генератор для AngularJS

Читать дальше →
Total votes 16: ↑14 and ↓2 +12
Views 7K
Comments 4

Валидация форм в AngularJS

JavaScript *Programming *Angular *
Валидация — одна из автомагических возможностей AngularJS. Хотя магического здесь, конечно же, ничего нет. Просто такие стандартные теги html как form, input, select, textarea — это тоже директивы. И когда они объединяются с ngModel, required, ngPattern и т.п., начинает работать валидация.

Читать дальше →
Total votes 8: ↑8 and ↓0 +8
Views 90K
Comments 23

Egghead.io — видео курс по AngularJS

JavaScript *Angular *
Egghead.io — проект, созданный Джоном Линдвистом (John Lindquist), цель которого создание видео курсов. Как утверждает автор, он никогда не был доволен существующими реализациями сайтов с видео уроками. Поэтому главной его задачей стало применение лучших практик для организации и подачи обучающих видео материалов в сети.
Пока сам ресурс находится в стадии доработки и нуждается в качественном дизайне. Но уже сейчас доступен первый курс видео туториалов по AngularJS.
Проект получил множество хороших отзывов сообщества, также был упомянут в рассылке javascript weekly и на странице javascript в google+.
Читать дальше →
Total votes 48: ↑43 and ↓5 +38
Views 29K
Comments 5

Очень маленький фреймверк или как написать собственный Angularjs в 200 строк

Website development *JavaScript *Angular *
Sandbox
Не так давно в одном из уже практически написаных проектов возникла необходимость в использовании подобия вэб-компонентов. Хочу расказать что у нас получилось, постараюсь кратко:

Цель:

Начать использовать компонентный подход в HTML верстке(новую семантику), а именно вэбкомпоненты.

Под компонентом я подразумеваю — “независимый модуль программного кода, предназначенный для повторного использования и развертывания”. К примеру в другом проекте.



Тут хочу сделать небольшое отступление и внести ясность – речь пойдет о компонентах, а не о виджетах(функционально обособленных единицах приложения, объединяющих в себе представление, логику и/или данные, конкретного приложения — javascript+html+css).
Разница, по моему мнению, состоит в том что компонент не подвязывается к конкретной модели данных или логике конкретного приложения – и вы можете его без труда перенести в другое приложение. А виджет – это единица конкретного приложения тесно связанная логикой или данными, и перенести его куда либо без внутреннего изменения самого виджета у вас не получится.
В качестве примеров компонента могу привести селект, аккордеон или табки, а виджетов – панель состояния или окно отображения сообщений в чате.

Зачем:

Реюзабельный код и удобство верстки с помощью возможности расширения HTML синтаксиса.

Как сказано в доке к одному известному фреймверку:
“Directives is a unique and powerful feature available only in Angular. Directives let you invent new HTML syntax, specific to your application.”
— я хочу показать, что это возможно и без angularjs.
И потому, что я хочу использовать компонентный подход(аналог angularjs директив) с виджет-ориентированной архитектурой или с теми шаблонизаторами к которыми мне удобно работать.
Вобщем использовать ту архитектуру приложения или фреймверк которые мне удобны в конкретном случае.

И описанное далее это ни в коем случае не MV* фреймверк, и никогда не задумывался как онный.
Подробности
Total votes 19: ↑13 and ↓6 +7
Views 7.2K
Comments 13

AngularJS для привыкших к jQuery

Website development *JavaScript *Angular *
Translation
Tutorial
AngularJS — прекрасный фреймворк для построения веб-приложений. У него замечательная документация, снабженная примерами. В обучающих «пробных» приложениях (вроде TodoMVC Project) он очень достойно показывает себя среди остальных прочих фреймворков. По нему есть отличные презентации и скринкасты.

Однако если разработчик никогда ранее не сталкивался с фреймворками, подобными Angular, и пользовался в работе в основном библиотеками вроде jQuery, то ему может быть трудно изменить свой образ мышления. Как минимум, так было со мной, и я бы хотел поделиться некоторыми заметками на эту тему. Может быть, кому-то это будет полезно.
Читать дальше →
Total votes 77: ↑74 and ↓3 +71
Views 164K
Comments 146

Перевод Angular.js на русский язык

JavaScript *Angular *
Фреймворк Angular.js видится весьма перспективным, но, к сожалению, материалов на русском по нему почти нет. Чтобы поспособствовать формированию русскоязычного сообщества, начал перевод руководства разработчика. Подключайтесь angular.ru

Добавка
Читать дальше →
Total votes 31: ↑24 and ↓7 +17
Views 60K
Comments 38

AngularJs. Отложенная загрузка модулей

JavaScript *Angular *
AngularJs – великолепный фреймворк для разработки web-приложений. Разработка бизнес-логики приложения полностью отделена от сопутствующей суеты вокруг DOM. Angular модульный – это замечательно, но так же является источником проблемы. Количество модулей быстро растёт. И если директивы ещё можно упаковывать в отдельные пакеты типа angular-ui, то с контроллёрами бизнес-логики всё сложнее. Всё становится ещё хуже, когда требования безопасности в принципе запрещают загрузку на клиента контроллёров с бизнес-логикой, которые недоступны текущему пользователю. При развитой ролевой системе доступа к приложению масштаб проблемы становится очевиден.
Решение
Total votes 23: ↑21 and ↓2 +19
Views 33K
Comments 22

Формы в Angularjs. Как я обрел любовь

Website development *JavaScript *Angular *
Tutorial
Мне предстояло в очередной раз сделать это. Казалось бы ничего ужасного, я делал это сотни раз. Но чувство… чувство, что все это неправильно, так не должно быть и должен быть другой выход, не покидало меня. Тогда я еще не знал, что в скором времени мне предстоит встреча, которая навсегда изменит мой мир, откроет глаза и наполнит жизнь смыслом. Смыслом вставать каждое утро, смыслом делать то, что практически перестало доставлять мне удовольствие, смыслом делиться этим чувством с другими.
Читать дальше →
Total votes 101: ↑69 and ↓32 +37
Views 86K
Comments 28

Директивы в Angularjs для начинающих. Часть 1

Website development *JavaScript *Angular *
Tutorial
На мой взгляд, директивы являются основной изюминкой декларативного стиля Angularjs. Однако, если открыть комментарии пользователей в разделе официальной документации Angularjs, посвященной директивам, то вы увидите, что самый популярный из них: «Пожалуйста, перепишите документацию, сделайте ее более доступной и структурированной. Начинающему разработчику на Angularjs сложно в ней разобраться» («Please rewrite a clearer well structured documentation of directives., this is not friendly to first time angular developers»). С этим трудно не согласится, документация пока еще сыровата и в некоторых моментах приходится прилагать большие усилия, чтобы разобраться в логике и сути функционала. Поэтому я предлагаю вам свой вольный пересказ данной главы в надежде, что кому-то это позволит сэкономить время, а так же рассчитываю на вашу поддержку и участие в комментариях. Итак, поехали!
Читать дальше →
Total votes 47: ↑44 and ↓3 +41
Views 194K
Comments 45

Треугольно-оквадраченный релиз AngularJS 1.1.5. Что нового?

Website development *JavaScript *Angular *
Вчера разработчики выкатили новую (пока еще не стабильную) версию. Основные изменения:

$animator:
добавлена поддержка пользовательских событий анимации [щелк]
добавлена возможность глобально отключать и включать анимацию [щелк]

$http:
добавлена возможность прервать запрос при выполнении обещания (объекта promise) [щелк]
добавлен заголовок по умолчанию для PATCH запросов
добавлена поддержка таймаута для JSONP запросов

$parse: добавлена поддержка тернарного оператора (exp1? exp2: exp3)
Читать дальше →
Total votes 8: ↑7 and ↓1 +6
Views 6.5K
Comments 5