Представлена новая модель робота, управляемая посредством javascript

«Совершенный Ajax» – новый подход к построению настоящих клиент-серверных web-приложений

«Совершенный Ajax» — новый подход к построению web-приложений, при котором web-сервер не генерирует ни строчки HTML-кода и взаимодействует с внешним миром только посредством web-служб; а клиентский интерфейс реализуется только на основе клиентских HTML, CSS, JavaScript. Статья состоит из двух частей.

В первой части — более живой и провокационной я постараюсь заинтересовать проблемой, рассказать о технологии «Совершенный Ajax» и показать ее применение на примере нашего проекта «Система Интерактивного Тестирования Знаний “Синтез”» (который имеет ряд интересных особенностей, таких, как использование серверного JavaScript на платформе Mozilla Rhino, прототипно-ориентированная ORM и поддержка SPARQL — языка запросов к Semantic Web). Вторая часть – более занудная будет содержать много технических деталей и выйдет в следующий раз.

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

Попробуйте угадать: к какой архитектуре относятся web-приложения? К клиент-серверной говорите? Я ожидал, что Вы так ответите 🙂 Что ж, давайте разберемся.

В клиент-серверной архитектуре выделяют:

• Сервер — отвечает за хранение данных и реализацию бизнес-логики приложения.
• Клиент — отвечает за взаимодействие с пользователем [1].

Реализация бизнес-логики на сервере и взаимодействие с пользователем на клиенте четко разделены.

Преимущества клиент-серверной архитектуры очевидны; мы их все знаем:

Но, относятся ли web-приложения к клиент-серверной архитектуре?

Действительно, в web-приложениях есть сервер, отвечающий за бизнес логику приложения. Но! За реализацию интерфейса отвечает не клиент, а тоже сервер. На сервере происходит обработка клиентской формы.

Сервер генерирует HTML-код пользовательского интерфейса.

Клиент, т.е. браузер лишь визуализирует уже готовый HTML-код интерфейса.

Это, фактически, то же самое, что прицепить к серверу монитор и объявить этот монитор клиентом…

Вряд ли такой подход можно назвать полноценной клиент-серверной архитектурой. Он имеет много недостатков:

Впрочем, мы знаем в истории пример подобной архитектуры. В 70-годы были распространены мейнфреймы.

Мейнфрейм — такой огромный железный сундук (сервер), к которому подключались рабочие станции (клиенты). Причем, рабочая станция представляла собой просто монитор с клавиатурой.

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

Конечно, в современных web-приложениях часть интерфейсной логики реализуется на клиенте с помощью JavaScript.Часть данных загружается с помощью Ajax и визуализируется именно на клиенте.

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

Так вот, я предлагаю подход «Совершенный Ajax», который призывает развить идею Ajax до логического конца и полностью отказаться от использования сервера для реализации пользовательского интерфейса web-приложений.

Подход «Совершенный Ajax» построен на следующих принципах:

• Web-сервер:
  • Реализует только бизнес-логику приложения и не генерирует ни строчки HTML-кода;
  • Взаимодействует с клиентом посредством web-служб: принимает текстовые запросы и возвращает только данные;
• Пользовательский web-интерфейс:
  • Реализуется только на основе клиентских HTML, CSS, JavaScript.
  • Взаимодействует с web-сервером посредством объектно-ориентированной библиотеки-обертки над web службами;
  • Используется исключительно семантическая верстка. Элементы управления (вкладки, меню, деревья) описываются высокоуровневыми HTML-конструкциями.
  • Библиотека контролов придает HTML-конструкциям внешний вид и функциональность соответствующего элемента управления, просто навешивая нужные стили и обработчики событий, не меняя при этом HTML-код элемента.
• Любой сторонний разработчик может реализовать свою версию пользовательского интерфейса, причем не только на HTML, но и на Flash, Windows, Mac и т.д.

«Совершенный Ajax» в нашем проекте

Опишу эту архитектуру на примере нашего проекта «Система Интерактивного Тестирования Знаний “Синтез”».

Сервер

В концепции «Севершенный Ajax» сервер должен удовлетворять одному-единственному условию: не генерировать ни строчки HTML-кода и осуществлять связь с внешним миром посредством web-служб. Во всем остальном его реализация ничем не ограничена.

Здесь я опишу структуру сервера в нашем проекте, т.к. она имеет ряд интересных особенностей: использование серверного JavaScript на платформе Mozilla Rhino, прототипно-ориентированная ORM и возможность использования SPARQL — языка запросов к Semantic Web.

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

Архитектура сервера

• СУБД — хранит данные.
• Прототипное объектно-ориентированное ядро бизнес-логики — реализует объект- ную модель и функциональность приложения.
• ORM — связывает базу данных с прототипным ядром бизнес логики.
• Web-сервер — открывает функции программы для внешнего мира посредством web-служб.

СУБД

• Все данные хранятся в обычной реляционной базе данных.
• Причем, используется только «чистый» SQL, без надстроек конкретных СУБД: хранимых процедур и т.д. Это делает базу данных независимой от той или иной СУБД.
• Связь базы данных с объектным ядром бизнес-логики приложения осуществляется через прототипно-ориентированную ORM.

Объектное ядро бизнес-логики

• Вся объектная модель приложения и его бизнес-логика заключена в прототипно-ориентированном ядре.
• Ядро написано на серверном JavaScript, на базе платформы Mozilla Rhino.
• Несмотря на недооцененность многими разработчиками, JavaScript — удивительно мощный, гибкий и красивый язык, превосходящий в ряде случаев по гибкости и функциональным возможностям таких монстров, как Java или C#. И мы используем по максимуму его возможности, такие как прототипно-ориентированное ООП, объекты-как-хеши, функциональное программирование, замыкания и т.д.
• Также, прототипно-ориентированная парадигма JavaScript позволяет гораздо более гибко работать с базой данных через ORM.
• Mozilla Rhino компилирует JavaScript в байт-код JVM. Благодаря этому, наш серверный JavaScript не становится «вещью в себе», а может использовать все обилие наработок мира Java.
• Вообще, серверный JavaScript на основе Mozilla Rhino — это отдельная большая тема, и я постараюсь написать ряд статей по этому вопросу.

Прототипно-ориентированная ORM

• ORM служит для связи реляционной БД с прототипным объектно-ориентированным ядром бизнес-логики.
• Она позволяет не просто связывать две модели, но и строить объектные запросы любой сложности. Например: найди классы, ученики которых по тестам 10 самых молодых преподавателей имеют за осень средний балл больший, чем по весенним тестам 10 самых старших.
• Использование ORM для прототипно-ориентированных языков — это мега круто!Реляционная модель БД гораздо ближе к прототипной модели ООП, нежели к классовй. Поэтому, применение прототипного похода решает ряд проблем, присущих современным класс-ориентированным ORM (см., например, статью Теда Ньюарда «Вьетнам компьютерной науки»).
• Прототипная парадигма ORM позволяет удивительно гибко работать с данными. Ведь, в отличие от классового подхода, где структура объекта жестко задана; при прототипном подходе объект может иметь произвольный набор полей, а также объединять внутри себя и наследовать любые другие объекты.В частности, это дает возможность обращаться к БД на SPARQL — языке запросов Semantic Web.
• К сожалению, за такую гибкость приходится платить производительностью. Наша прототипная ORM пока существенно уступает по скорости работы обычным классовым ORM. Но мы работаем над этим.
• Прототипно-ориентированная ORM — также отдельная большая тема, и я постараюсь посвятить ей ряд статей.

Web-сервер

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

Клиент

Наше приложение может иметь сколько угодно интерфейсных реализаций, разработанных любыми производителями. Однако, оно всегда имеет в комплекте «родной» web-интерфейс. Здесь я опишу его структуру.

Архитектура клиента

• Интерфейсное ядро — объектно-ориентированная библиотека, реализующая всю клиентскую логику и управляющая интерфейсом клиента.
• Библиотека-обертка — объектно-ориентированная обертка над web-службами, осуществляющая связь клиентского интерфейса с сервером.
• Семантическая верстка — используется для описания элементов интерфейса (контролов) посредством обычных HTML-конструкций;
• Библиотека контролов — придает HTML-конструкциям внешний вид и функциональность соответствующего контрола.

Интерфейсное ядро

Интерфейсное ядро — объектно-ориентированная JavaScript-библиотека, управляющая всем клиентским web-интерфейсом:

• Реализует интерфейсную логику приложения.
• Взаимодействует с объектной моделью приложения на web-сервере через библиотеку-обертку.
• Взаимодействует с элементами управления (контролами) посредством библиотеки контролов.
• Осуществляет встраивание клиентского интерфейса нашего программы в web-интерфейсы других приложений.Это дает неограниченные возможности для создания мэшапов. В отличие от обычных мэшап-приложений, таких как GMaps, YouTube и т.д., которые позволяют встраивать только небольшую часть интефейса; в нашем приложении интерфейс может встраиваться полностью.Например, благодаря этому, на стороннем сайте можно не только разместить модуль прохождения тестирования, но и модуль редактирования тестов, а также управления правами пользователей.
• Управляет стилями интерфейса. Стили не только позволяют задавать оформление программы, но и полностью контролируют расположение и свойства интерфейсных элементов. Особенно это полезно, когда программа работает не самостоятельно, а, встроенна в другое приложение в виде мешапа.
• Управляет локализацией интерфейса.

Библиотека обертка

• Клиентская реализация (как родной web-интрфейс, так и интерфейсы сторонних производителей) взаимодействует с объектной моделью и бизнес-логикой на сервере посредством web-служб.
• Однако, работать с web-службами напрямую неудобно: это лишает нас объектного подхода и понижает упровень абстракции. Поэтому, гораздо удобнее работать через объектно-ориентированную библиотеку-обертку над web-службами. Библиотека обертка позволяет прозрачно работать с серверной объектной моделью приложения.
• Для того, чтобы свою версию интерфейса мог реализовать любой сторонний производитель на любой платформе, мы выпускаем библиотеки-обертки не только для web-интерфейса на JavaScript, но и для других распространенных технологий: .Net, Java, Delphi, Flash и др. Если для какой-то платформы мы еще не выпустили библиотеку-обертку, сторонний разработчик может ее реализовать и самостоятельно по заданной спецификации.
• Кстати, если серверный язык программирования поддерживает интроспексию, библиотека обертка может генерироваться автоматически. Для этого, программа на сервере должна исследовать собственную объектную модель, и на ее основе сгенерировать код библиотеки-обертки для основных языков программирования.Пока мы пишем библиотеки-обертки вручную, но, думаю, скоро доберемся и до автоматической генерации.

Семантическая верстка

• Весь пользовательский интерфейс реализуется на основе чистых xHTML, CSS и JS. Несмотря на сильную недооцененность разработчиками, xHTML/CSS/JS является очень мощной и гибкой технологией построения интерфейсов.
• Использование семантической верстки является высокоуровневым программированием; а несемантическая мешанина тегов – низкоуровневым. И если при старом подходе, когда HTML-код генерировался сервером, мы, несмотря на все уродство, могли себе позволить низкоуровневый несемантический подход; то при подходе «Совершенный Ajax» мы просто обязаны использовать высокоуровневую семантическую верстку!
• Элементы управления (деревья, меню, вкладки и т.д.) описываются обычными высокоуровневыми HTML-конструкциями.Например, меню или дерево описывается как обычный список, а вкладки, как набор div’ов.
• А уже библиотека контролов делает из этих HTML конструкций элементы управления.

Библиотека контролов

• Библиотека контролов придает HTML-конструкциям внешний вид и функциональность соответствующего элемента управления.
• При этом HTML-код элемента не меняется, а на него просто навешивая нужные стили и обработчики событий.
• Для превращения HTML-конструкции в элемент управления, надо просто вызвать соответствующий JS-объект библиотеки контролов. Работа с контролом происходит через вызов методов объекта. Поскольку контролы не меняют код своей HTML-конструкции, элемент управления может быть «на лету» превращен в другой элемент простой заменой JS и CSS-классов.
• В скором времени я собираюсь опубликовать статью на эту тему: «HTML — самый недооцененный язык построения интерфейсов в мире (СНЯПИМ)».

Подробности технической реализации подхода «Совершенный Ajax» — во второй части.

Примечания

См. также

Модель-Представление-Контроллер (MVC) с помощью JavaScript

Цель этой статьи — продемонстрировать, как реализовать схему MVC при разработке простого компонента JavaScript.

Компонент, который мы будем разрабатывать, это своего рода элемент управления ListBox для HTML (тег ) с редактируемым списком элементов: пользователь сможет выбирать или удалять элементы, а также добавлять в список новые элементы.

Компонент будет состоять из трех классов, что соответствует схеме проектирования Модель-Представление-Контроллер.

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

Схема MVC JavaScript нуждается в некотором пояснении. Шаблоны проектирования называются в соответствии с их составляющими: Модель, которая хранит модель данных приложения; Представление, которое отображает Модель в соответствующем виде; и Контроллер, который обновляет Модель.

Википедия дает следующее определение стандартных компонентов архитектуры Модель-Представление-Контроллер:

• Модель — представление информации, на которой работает приложение, для конкретного домена. Модель — это другое название для слоя домена. Он реализует логику для манипуляции с данными (например, расчет общей стоимости налогов и транспортных расходов для товара в корзине);
• Представление — визуализирует модель в форме, подходящей для взаимодействия, обычно в виде элемента пользовательского интерфейса. MVC часто используется в веб-приложениях, где представление — это HTML-страница и код, который собирает динамические данные для страницы;
• Контроллер — обрабатывает и реагирует на события (действия пользователя), и вносит изменения в модель и в представление.

Данные компонента — это список, в котором один конкретный элемент может быть выбран и удален. Таким образом, модель компонента очень проста — она состоит из массива и индекса выбранного элемента.

Вот ее код:

/ ** * Модель. Модель сохраняет элементы и уведомляет * наблюдателей об изменениях. * / function ListModel(items) { this._items = items; this._selectedIndex = -1; this.itemAdded = new Event(this); this.itemRemoved = new Event(this); this.selectedIndexChanged = new Event(this); } ListModel.prototype = { getItems : function () { return [].concat(this._items); }, addItem : function (item) { this._items.push(item); this.itemAdded.notify({ item : item }); }, removeItemAt : function (index) { var item; item = this._items[index]; this._items.splice(index, 1); this.itemRemoved.notify({ item : item }); if (index === this._selectedIndex) { this.setSelectedIndex(-1); } }, getSelectedIndex : function () { return this._selectedIndex; }, setSelectedIndex : function (index) { var previousIndex; previousIndex = this._selectedIndex; this._selectedIndex = index; this.selectedIndexChanged.notify({ previous : previousIndex }); } };

Событие — это простой класс для реализации MVC паттерна Observer (Наблюдатель):

function Event(sender) { this._sender = sender; this._listeners = []; } Event.prototype = { attach : function (listener) { this._listeners.push(listener); }, notify : function (args) { var index; for (index = 0; index < this._listeners.length; index += 1) { this._listeners[index](this._sender, args); } } };

Класс Представления требует определения элемента управления для взаимодействия с ним. Для этой задачи существуют многочисленные варианты интерфейса, но я предпочитаю наиболее простые из них. Я хочу, чтобы у меня был ListBox и две кнопки под ним: кнопка «плюс» для добавления элементов и кнопка «минус» для удаления выбранного элемента.

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

Ниже приводятся классы Представления и Контроллера для модели MVC:

/** * Представление. Представление отображает модель и предоставляет * элементы пользовательского интерфейса. Контроллер используется для обработки взаимодействий пользователя. */ function ListView(model, elements) { this._model = model; this._elements = elements; this.listModified = new Event(this); this.addButtonClicked = new Event(this); this.delButtonClicked = new Event(this); var _this = this; // присоединяем слушатели модели this._model.itemAdded.attach(function () { _this.rebuildList(); }); this._model.itemRemoved.attach(function () { _this.rebuildList(); }); // присоединяем слушатели к HTML-элементам управления this._elements.list.change(function (e) { _this.listModified.notify({ index : e.target.selectedIndex }); }); this._elements.addButton.click(function () { _this.addButtonClicked.notify(); }); this._elements.delButton.click(function () { _this.delButtonClicked.notify(); }); } ListView.prototype = { show : function () { this.rebuildList(); }, rebuildList : function () { var list, items, key; list = this._elements.list; list.html(''); items = this._model.getItems(); for (key in items) { if (items.hasOwnProperty(key)) { list.append($('' + items[key] + '')); } } this._model.setSelectedIndex(-1); } }; /** * Контроллер. Контроллер реагирует на действия пользователя и * вызывает изменения в модели. */ function ListController(model, view) { this._model = model; this._view = view; var _this = this; this._view.listModified.attach(function (sender, args) { _this.updateSelected(args.index); }); this._view.addButtonClicked.attach(function () { _this.addItem(); }); this._view.delButtonClicked.attach(function () { _this.delItem(); }); } ListController.prototype = { addItem : function () { var item = window.prompt('Add item:', ''); if (item) { this._model.addItem(item); } }, delItem : function () { var index; index = this._model.getSelectedIndex(); if (index !== -1) { this._model.removeItemAt(this._model.getSelectedIndex()); } }, updateSelected : function (index) { this._model.setSelectedIndex(index); } };

Экземпляры классов Модели, Представления и Контроллера, реализующие MVC архитектуру, должны быть созданы. Пример ниже использует следующий код, чтобы создать экземпляр объекта и настроить классы:

$(function () { var model = new ListModel(['PHP', 'JavaScript']), view = new ListView(model, { 'list' : $('#list'), 'addButton' : $('#plusBtn'), 'delButton' : $('#minusBtn') }), controller = new ListController(model, view); view.show(); }); + –

Пример реализации можете посмотреть здесь.

И UML-схема для тех, кто знаком с ними:

Перевод статьи «Model-View-Controller (MVC) with JavaScript» был подготовлен дружной командой проекта Сайтостроение от А до Я.

Сам себе инженер: домашняя автоматика и роботы на JavaScript

С чего начать + 15 идей для Espruino, Arduino, Iskra JS.

Собирайте умные вещи и радиоуправляемые игрушки с подключением к домашней сети Wi-Fi, исследуйте мир летающими и подводными зондами, дайте развернуться вашей инженерной мысли!

На базе Arduino, Espruino и их аналогов можно создавать технику без инженерного образования и навыков низкоуровневого программирования. Для работы с Espruino и Tessel даже С/С++ знать не обязательно — весь код вы пишете на JavaScript. Сегодня мы расскажем об Arduino-подобных платах с поддержкой JS и о том, что можно делать с их помощью.

Что такое Arduino, Espruino и аналоги?

Это платформы для создания умных вещей и роботов в домашних условиях. У платформ есть:  

Аппаратная часть  — плата с микропроцессором, к которой можно подключать внешние модули: датчики, дисплеи, электродвигатели, адаптеры Bluetooth, WiFi и Ethernet и др.

Программная часть:

• прошивка — движок платформы, который позволяет запускать код на микропроцессоре;
• среда разработки (IDE), где мы пишем код и откуда загружаем его на плату;
• стандартная библиотека, которая обеспечивает базовый функционал: работу с интерфейсами, светодиодами, таймерами, форматами данных (типа JSON) и т.д.

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

А ещё у производителей наготове наборы-конструкторы: плата + функциональные модули и заготовки кода под конкретные задачи.

Принципиальная особенность uino-платформ в том, что вы не только делаете что-то по рецепту, но и создаёте новые устройства для своих задач.

15 идей для проектов на базе Arduino, Espruino и Iskra JS

Если вы раньше не инженерили, первая мысль: «Что с этим делать?». На мгновение теряешься. Но стоит посмотреть на чужие проекты, обзоры плат и модулей  — тут же возникает громадьё идей и планов.

Вот подборка проектов, которые могут разжечь ваше воображение  (со ссылками на примеры или описание реализации):

Arduino и JS — это совместимо?

Если у вас есть плата Arduino, но вы хотите писать код на JS, выход есть. Фреймворки типа Johnny-Five позволяют исполнять JavaScript на Arduino и прочих платформах:  Raspberry Pi, Tessel 2, pcDuino, Linio One, BeagleBone, BlendMicro, Particle Photon, Intel Galileo и др.

«Костыль!» — скажет кто-то. Отчасти да. Но для маленьких проектов и прототипирования это может быть удобно.

Почему JavaScript

Опытные программисты микроконтроллеров скажут, что C/С++ быстрее и ближе к «железу». Да, это мощные, но сложные и не самые лаконичные языки. Если вы их уже знаете — отлично.

Но не всем они нужны, особенно в начале. Пусть выполнение JS-кода займёт на 10-15 миллисекунд дольше — для любительского проекта это не критично.

Новичку важнее получать быстрые результаты и читать интуитивно понятный код.

Основные преимущества JS:

Если вы недавно увлеклись робототехникой и ещё толком не умеете программировать, JavaScript — добрый помощник.

Бонусы JS-платформ

Большинство плат Arduino по умолчанию работают с урезанной версией C++, которую мало где применишь. Платформы Espruino и Iskra JS работают со стандартным JS, так что вы можете использовать один и тот же язык в разных направлениях разработки.

Ещё один плюс Espruino и JS — автоматическое подключение библиотек. Сторонние С-библиотеки нужно компилировать и подключать вручную, что отнимает время. На платформе Espruino и Iskra JS библиотеки подхватываются по команде require в коде. Указываете имя библиотеки, и при запуске программы начинается её поиск: сначала на локальном устройстве, затем в интернет-репозиториях, в т.ч. на GitHub.

Консоль в Espruino IDE позволяет отлаживать код в интерактивном режиме: вы видите результат выполнения программы и можете тут же вводить команды и экспериментировать.

Hello, LED! Простейший код для Espruino

Вместо “Hello, World” для Arduino-совместимых устройств первой пишут программу мигания светодиодом. Примерно такую:

// Светодиод мигает с интервалом полсекунды (500 мс)

const LED = 2; //номер ввода (пина) для обращения к компоненту платы

var on = false;

setInterval(function() { // Задаём интервал мигания

   on = !on;

   digitalWrite(LED, on);

}, 500);

Выбор платформы и платы

Платы различаются по форм-фактору, числу пинов (интерфейсов для встроенных и периферийных устройств), входному напряжению и, в итоге,  — по функционалу.

Espruino

Это полностью открытая (open source) платформа: на её базе можно создавать новые платы, прошивки, средства разработки. По назначению она схожа с Arduino, но не совместима с последней технически. Нельзя комбинировать модули двух платформ или писать код для Espruino в Arduino IDE. Программы на JS вы пишете в среде Espruino IDE, которая доступна как:

Espruino поддерживает фреймворки Node.js и Electron. Первый позволяет использовать JavaScript на стороне сервера, второй — создавать нативные приложения на JS.
Варианты плат:

• Оригинальная Espruino — универсальна по функционалу плата размером меньше кредитки (54 мм x 41 мм). Изначально работает как проводное устройство, но вы можете добавить модули Wi-Fi и Bluetooth. По умолчанию на плате есть разъём MicroUSB, слот для SD-карт и 44 пина.

• Espruino Pico — мини-плата (33 мм x 15 мм), похожая на USB-флешку. Её можно воткнуть в компьютер напрямую, удобно носить с собой, встраивать в корпуса разной формы. На её основе удобно делать измерительные приборы. Примеры проектов  — здесь.

• Espruino WiFi — плата с быстрым доступом в интернет и беспроводную сеть. Позволяет быстро запустить свой веб-сервис, собрать и обработать данные из интернета и/или наоборот  — отправлять данные исследований на сервер.

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

• Iskra JS от российской компании «Амперка»  — логическое развитие оригинальной Espruino c дополнительными плюшками, о которых стоит рассказать подробнее.

Iskra JS

Плата на ядре Espruino и в форм-факторе Arduino.

Вы можете использовать комплектующие Arduino и управлять полученной системой с помощью JavaScript!  Средой разработки служит уже знакомая Espruino WEB IDE.

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

Когда платы нет под рукой, вы можете тестировать код в онлайн-эмуляторе Iskra JS.

Подключить больше модулей поможет плата расширения, такая как Troyka Shield. Она позволяет перестановкой джампера выбирать напряжение на одной из линий питания, причем напряжение управляющей платы не важно. Например, можно комбинировать пятивольтовые модули с трёхвольтовыми платами Arduino (Due, M0).

Tessel 2  

30 сайтов-примеров отличного использования JavaScript — Оффтоп на vc.ru

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

1. Портфолио Майка Куса

Портфолио веб-дизайнера Майка Куса выполнено в «чистой и сдержанной манере», пишут редакторы Creative Bloq. В нём большие изображения сочетаются с простыми элементами пользовательского интерфейса.

«Я думаю о своих работах, как о бренде. Нет никакой необходимости добавлять в мой сайт лишние элементы дизайна», — говорит Кус.

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

2. Hello Monday

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

Старый сайт агентства Hello Monday

Теперь на сайте представлены примеры уже выполненных агентством заказов — у каждого проекта есть своя страница, на которой описана его история, что даёт пользователю более глубокое понимание, чем занимается Hello Monday.

Обновлённый сайт Hello Monday

«Мы пытались отойти от шаблонного представления о том, как должен выглядеть сайт креативного агентства», — рассказывает Кэти Хертел, руководитель проекта по редизайну веб-страницы Hello Monday.

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

3. Multeor

Multeor — это многопользовательская онлайн-игра, написанная на JavaScript с использованием элемента canvas HTML5. Она разработана Арьеном де Врайзом и Филидором Вайзе, а спроектирована Артуром ван Хугом. Основная задача пользователя в игре — контролировать падение метеоритов, получая очки за оставленные им разрушения.

Игра использует Node.js-сервер для управления связью между настольными и мобильными устройствами с помощью WebSockets.

Вайзе акцентирует внимание на том, что при разработке Multeor не использовались уже существующие игровые библиотеки:

4. Crime Timeline

Crime Timelime — агрегатор, собирающий данные о преступности в Великобритании с помощью публичных API. Он позволяет пользователям узнать, как обстоят дела в их регионе.

«Мы организовали сайт таким образом, чтобы он показывал карту региона и места совершения преступлений — за месяц, выбранный пользователем на панели снизу», — говорит разработчик проекта Алекс Миллер.

Model-View-Controller (MVC) на JavaScript

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

В этой статье я покажу, как правильно применять шаблон проектирования Модель-Представление-Контроллер (Model-View-Controller, или, сокращенно, MVC) на примере небольшого компонента, напоминающего ListBox (HTML тэг “select”), с возможностью добавления и удаления элементов.

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

Для начала давайте посмотрим, что такое шаблон проектирования Model-View-Controller. Его имя включает в себя три главных его части: Model – хранит данные приложения; View – представляет модель клиенту; Controller – модифицирует модель, реагируюя на события от клиента. На Википедии его части определены следующим образом:

• Модель (Model) предоставляет данные и реагирует на команды контроллера, изменяя своё состояние.
• Представление (View) отвечает за отображение данных модели пользователю, реагируя на изменения модели.
• Контроллер (Controller) интерпретирует действия пользователя, оповещая модель о необходимости изменений.

Давайте просто сделаем так, как написано: сконструируем компонент так, что бы его три класса соответствовали описанию.

Данные компонента – это список строк, одна из которых может быть выбрана и удалена. Сконструируем модель из массива и индекса выбранного элемента:

/** * The Model. Model stores items and notifies * observers about changes. */
function ListModel(items) { this._items = items; this._selectedIndex = -1; this.itemAdded = new Event(this); this.itemRemoved = new Event(this); this.selectedIndexChanged = new Event(this);
} ListModel.prototype = { getItems : function () { return [].concat(this._items); }, addItem : function (item) { this._items.push(item); this.itemAdded.notify({ item : item }); }, removeItemAt : function (index) { var item; item = this._items[index]; this._items.splice(index, 1); this.itemRemoved.notify({ item : item }); if (index === this._selectedIndex) { this.setSelectedIndex(-1); } }, getSelectedIndex : function () { return this._selectedIndex; }, setSelectedIndex : function (index) { var previousIndex; previousIndex = this._selectedIndex; this._selectedIndex = index; this.selectedIndexChanged.notify({ previous : previousIndex }); }
};

Event – это простой класс, реализующий шаблон Наблюдатель (Observer pattern):

function Event(sender) { this._sender = sender; this._listeners = [];
} Event.prototype = { attach : function (listener) { this._listeners.push(listener); }, notify : function (args) { var index; for (index = 0; index < this._listeners.length; index += 1) { this._listeners[index](this._sender, args); } } };

Перед тем как создать класс Представления надо определиться с тем, из каких элементов он будет состоять.

Конечно, есть огромное количество реализации интерфейса компонента, но для целей статьи подойдет самый простой: сделать список на основе тэга SELECT и добавить две кнопки для добавления (кнопка “плюс”) и удаления элементов (кнопка “минус”).

Для компонента нужна реализацию списка с выбранным элементом и у контрола SELECT это как раз есть. Класс Представление связан с классом Контроллера, т.к. последний “… интерпретирует действия пользователя, …”.

Собственно, реализация классов View и Controller:

/** * The View. View presents the model and provides * the UI events. The controller is attached to these * events to handle the user interaction. */
function ListView(model, elements) { this._model = model; this._elements = elements; this.listModified = new Event(this); this.addButtonClicked = new Event(this); this.delButtonClicked = new Event(this); var _this = this; // attach model listeners this._model.itemAdded.attach(function () { _this.rebuildList(); }); this._model.itemRemoved.attach(function () { _this.rebuildList(); }); // attach listeners to HTML controls this._elements.list.change(function (e) { _this.listModified.notify({ index : e.target.selectedIndex }); }); this._elements.addButton.click(function () { _this.addButtonClicked.notify(); }); this._elements.delButton.click(function () { _this.delButtonClicked.notify(); });
} ListView.prototype = { show : function () { this.rebuildList(); }, rebuildList : function () { var list, items, key; list = this._elements.list; list.html(''); items = this._model.getItems(); for (key in items) { if (items.hasOwnProperty(key)) { list.append($('' + items[key] + '')); } } this._model.setSelectedIndex(-1); }
}; /** * The Controller. Controller responds to user actions and * invokes changes on the model. */
function ListController(model, view) { this._model = model; this._view = view; var _this = this; this._view.listModified.attach(function (sender, args) { _this.updateSelected(args.index); }); this._view.addButtonClicked.attach(function () { _this.addItem(); }); this._view.delButtonClicked.attach(function () { _this.delItem(); });
} ListController.prototype = { addItem : function () { var item = window.prompt('Add item:', ''); if (item) { this._model.addItem(item); } }, delItem : function () { var index; index = this._model.getSelectedIndex(); if (index !== -1) { this._model.removeItemAt(this._model.getSelectedIndex()); } }, updateSelected : function (index) { this._model.setSelectedIndex(index); }
};

Ну и как они вместе создаются на странице:

$(function () { var model = new ListModel(['PHP', 'JavaScript']), view = new ListView(model, { 'list' : $('#list'), 'addButton' : $('#plusBtn'), 'delButton' : $('#minusBtn') }), controller = new ListController(model, view); view.show();
});

+
–

Можете протестировать его работу и попробовать добавить различную функциональность (например, сделать поддержку нескольких выбранных элементов).

Если знаете UML, то диаграмма классов компонента может вас заинтересовать:

Интерфейсы. Прочь от MVC

Большинство сложных программных систем создаются с использованием паттерна MVC.

Многие программисты, приходя на javascript с других языков, по инерции используют этот подход.

Однако, при программировании javascript-интерфейса он зачастую бесполезен, приводит к тормозам, переусложнению приложений…

В javascript-интерфейсах, в отличие от Java/C++ и других – обычно не нужен паттерн MVC.

Применение паттерна MVC заключается в разделении собственно данных, их отображения и обработки действий пользователя по трем компонентам.

Модель (Model)Собственно данные, методы для работы с данными, изменения и обновления данных.

Представление/Вид (View)Отображение данных, оформление и другие аспекты презентации моделиКонтроллер (Controller)Реагирует на действия пользователя, интерпретирует данные, введенные пользователем, и информирует модель и производит необходимые манипуляции с моделью и видом.

Между компонентами есть взаимодействия, изображенные стрелочками на рисунке (один из устоявшихся вариантов MVC).

Главный тезис статьи можно сформулировать так:

Дальнейшая часть статьи – обоснование с примерами, почему именно так, а не иначе, и почему устоявшаяся практика MVC для javascript-интерфейсов работает плохо.

Никто не говорит о том, что MVC вообще – это плохо. Наоборот, MVC – это хорошо. Но вся штука в том, что при программировании для Web есть как минимум 3 важных особенности.

Паттерн MVC увеличивает количество кода за счет появления дополнительных межкомпонентных коммуникаций. То есть, не “сделай это”, а “попроси компонент XXX сделать это и обеспечь его данными”.

Будем исходить из предположения, что разрабатываем сложный интерфейс.
В самом деле, если интерфейс заведомо простой (и таким останется) – то лишние паттерны тем более не нужны.

Javascript/DOM в браузере – не самая быстрая платформа, а приложения фактически являются real-time, т.е интерфейс должен реагировать и отображаться по возможности мгновенно, плавно, и не сильно жрать память.

Межкомпонентные коммуникации Model-View добавляют тормозов. Это повод их убрать.

Далее, и модель и вид в javascript, как правило, оперируют данными в одинаковом формате.

То есть, значение в форме input.value – не рисованный объект типа GraphicsTTFString, как это может быть в обычном десктоп-програмировании, не кодированная строка пикселей, а обычный текст.

Поэтому отделение Model от View приводит к излишнему дублированию данных.

Что такое View в javascript-интерфейсах?

Это в первую очередь DOM и CSS. Модель DOM заранее включает в себя следующее:

• Хранение любых свойств:
  var div = document.createElement('div')
  div.myProperty = 123 //.. и даже … div.myMethod = function() { alert(this.innerHTML)
  }
• Древовидную иерархию – дерево элементов DOM
• Средства поиска, выборки элементов. Наиболее известнен метод document.getElementById. Сложные CSS-селекторы и XPath постепенно приходят в браузеры, и успешно эмулируются JS-библиотеками.

При этом основные аспекты оформления задаются вообще отдельно от DOM, при помощи CSS.

Вы видите, DOM – это совсем не тот “классический” View, который обычно имеется в виду. Он гораздо мощнее.

Так зачем нам поддерживать иерархию, средства выборки и контейнеры для свойств в специальных javascript-объектах Модели, если с этим замечательно справляется DOM/View ?

Минусы, как и плюсы, связаны с производительностью.

При работе исключительно с javascript, работа идет в едином пространстве интерпретатора javascript. Это куда быстрее, чем обращаться к DOM-объектам, который в Microsoft относятся к COM, в Firefox – к XPCOM, в общем – живут отдельно от javascript-движка.

Эта проблема раньше была очень актуальна для Internet Explorer.

На момент написания статьи она фактически решена как библиотечными средствами (clobbering, учет и зачистка назначаемых DOM-элементам свойств), так и патчами.

В частности, как в IE7, так и в IE6 с обновлениями середины 2007 связка DOM-javascript почти не течет.

При разработке приложений надо смотреть, насколько тесно изменение ее модели (данных) завязано на изменение представления (DOM).

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

Однако обычно обновление данных тесно завязано с обновлением их вида, и это еще один довод к тому, чтобы их не разделять.

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

Современные js-фреймворки (YUI, dojo, jQuery) ликвидируют бОльшую часть утечек памяти.

Полностью впихивать Model во View, конечно, не обязательно. Да оно обычно и не нужно.

Можно выделить три устоявшихся практики.

Создается единый объект, который существует над компонентами интерфейса и хранит данные всех моделей, задействованных в данном интерфейсе.

Например, во вложенном меню это будет единый объект Menu, который умеет show/hide любые подменю. При этом подменю как таковое не является javascript-объектом.

Аналогично, в javascript-дереве это может быть единый объект Tree, который манипулирует узлами, а сами узлы – просто элементы DOM и хранят данные непосредственно в DOM.

Существует единый объект, который при небольшой “доинициализации” может выполнить роль любой из однотипных компонент интерфейса.

Например, рассмотрим контекстное меню для javascript-дерева, которое вызывается правым кликом мыши на элементе.

Вместо пачки меню – для каждого элемента дерева своё, создается единый объект ContextMenu.

При клике на узел:

Приспособление ContextMenuк конкретному элементу выполняется очень просто. В данном случае – не нужно создавать DOM-структуру меню, она и так есть. Не надо и создавать новый объект со своими методами – достаточно тех что есть.

Наконец, иногда целесообразно частично отделить некоторые аспекты Model от View.

Обычно при этом выводится в модель то, что во View хранить нельзя или неудобно, так чтобы не возникало дублирование.

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

Их применение ведет к уменьшению и упрощению кода. Успехов.

Детальный список инструментов для JavaScript

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

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

Введение

В январе 2017 года сообщество Stack Overflow провело опрос, в котором приняли участие 64 000 разработчиков из разных стран мира. Результаты для первого места остаются без изменений в течение пяти последних лет. JavaScript остаётся несменяемым лидером в гонке популярности языков программирования.

На изображении представлены результаты опроса на Stack Overflow

JavaScript служит мощной и стабильной основой для многих продвинутых современных веб-приложений и веб-сайтов.

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

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

Можно выбирать инструменты, основываясь на рейтинге и популярности. Если инструмент популярен и имеет хорошие отзывы и большое сообщество, то повышается вероятность того, что вы столкнётесь с меньшим количеством проблем во время работы с ним.

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

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

Инструменты сборки и автоматизации

Инструменты сборки для кросс-платформенных языков вроде .Net или Java — обычное дело. Но что насчёт JavaScript? Когда разработчики начали использовать этот язык программирования для крупномасштабных проектов, то они столкнулись с проблемами масштабируемости, безопасности, производительности и обслуживания. Поэтому пришло время использовать инструменты сборки для работы с JavaScript.

• Webpack — одна из последних новинок в мире фронтенда. Он представляет собой модульный упаковщик, который создаёт граф зависимостей со всеми модулями для приложения на JavaScript. Webpack упаковывает модули в один или несколько маленьких пакетов для загрузки браузером. Кроме того, Webpack может использоваться в качестве средства запуска задач, так как он анализирует зависимости между модулями и образовывает ресурсы (ассеты). Подробнее с использованием Webpack в своих проектах вы можете ознакомиться в нашей статье.
• Grunt — таск раннер, предназначенный для автоматизации повторяющихся и трудоёмких задач, которые отнимают много времени. В его программной экосистеме существует огромное количество плагинов (более 6000).
• Gulp — не очередной диспетчер запуска задач, а инструмент с интересным подходом: он определяет задачи в JavaScript как функции, также GUl автоматизирует «болезненные» задачи, предлагая обширную программную экосистему (более 2700 плагинов), также он обеспечивает лучшую прозрачность и контроль над процессом.
• Browserify позволяет разработчикам программного обеспечения использовать модули стиля NodeJS в браузерах. Вы определяете зависимости, а Broweserify упаковывает всё это в аккуратный JS-файл.
• Brunch.io — инструмент, основными идеями которого являются скорость и простота. Он поставляется с простой конфигурацией и подробной документацией для быстрого запуска. Brunch автоматически создаёт карту JS-файлов вместе с таблицами стилей CSS, что упрощает процесс отладки на стороне клиента.
• Yeoman — универсальный инструмент, который может использоваться с почти любым языком программирования (JavaScript, Python, C#, Java и прочие). Эта базовая система кодогенерации с богатой программной экосистемой (более 6200 плагинов) служит для разработки веб-приложений. Благодаря Yeoman вы можете быстро создавать новые проекты, не забывая об обслуживании и улучшении уже существующих.

IDE и редакторы кода

• WebStorm — мощная IDE для продвинутой разработки веб-приложений на JavaScript. Она предлагает поддержку различных фреймворков и языков стилевого оформления. WebStorm может быть легко интегрирован с дополнительными инструментами вроде тестеров, средств контроля качества кода, сборщиков и т. д.

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

• Atom — бесплатный продукт от GitHub и выбор №1 для многих разработчиков.

  Он представляет собой легко настраиваемый редактор кода, который поставляется с некоторыми интересными функциями «прямо из коробки». В Atom имеется встроенный менеджер пакетов, интеллектуальное автоматическое завершение кода и прочие полезные функции. Также Atom является кросс-платформенным редактором кода.

• Visual Studio Code — поддерживается компанией Microsoft и полностью поддерживает TypeScript «прямо из коробки».

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

  Более того, вы можете расширить функциональность редактора путём подключения широкого спектра расширений

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

Инструменты документирования кода

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

• Swagger — это набор правил и инструментов для описания API. Инструмент представляет собой языково-независимую утилиту. Это значит, что Swagger создаёт чёткую документацию, которая читается одинаково хорошо как человеком, так и машиной, позволяя автоматизировать процессы зависящие от API.
• JSDoc — набор инструментов, автоматически создающий многостраничную текстовую документацию (HTML, JSON, XML и т. д.)  из комментариев из исходного кода на JavaScript. Это приложение может пригодиться для управления крупномасштабными проектами.
• jGrouseDoc (jGD) — это гибкий инструмент с открытым исходным кодом, который позволяет разработчикам генерировать API из комментариев из исходного кода на JavaScript. jGD документирует не только переменные и функции, но и пространства имён, интерфейсы, пакеты и некоторые другие элементы.
• YUIDoc — приложение, написанное на NodeJS. Оно использует синтаксис, подобный тому, который применяется в Javadoc и Doxygen. Также инструмент может похвастаться поддержкой предварительного просмотра в реальном времени, расширенной поддержкой языка и продвинутой разметку.
• Docco — бесплатный инструмент для документации, написанный на «литературном» CoffeeScript. Он создаёт HTML-документ для отображения ваших комментариев, чередующихся с кодом. Следует отметить, что инструмент поддерживает не только JavaScript, но и другие языки. Например, Python, Ruby, Clojure и прочие.

Инструменты тестирования

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

• Jasmine — BDD-фреймворк (Behavior-driven Development — разработка на основе поведений) служит для тестирования JS-кода. У него нет внешних зависимостей, и он не требует запуска DOM. Jasmine имеет чистый и понятный синтаксис, что позволяет ускорять и упрощать тестирование. Также фреймворк может использоваться для тестирования кода NodeJS, Python, Ruby.
• Mocha — это функциональная тестовая среда, работающая на Node.js в браузере. Она проводит тесты последовательно для обеспечения гибкой и точной отчётности, делая асинхронные тесты весёлыми и лёгкими. Mocha часто используется вместе с Chai для проверки результатов теста.
• PhantomJS часто используется для интерфейсных тестов и юнит-тестов. Учитывая то, что это что-то вроде «безголового» WebKit, скрипты выполняются намного быстрее. Также он включает в себя встроенную поддержку различных веб-стандартов. Например, JSON, Canvas, обработку DOM, SVG и селекторы CSS.
• Protractor — это сквозной тестовый фреймворк, написанный на Node.js для тестирования приложений на AngularJS и Angular. Он был создан на основе WebDriverJS и проверяет приложения подобно конечному пользователю, используя специальные драйвера и встроенные события.

Инструменты отладки

Отладка кода — довольно трудоёмкий и поглощающий время процесс для JavaScript-разработчиков. Инструменты для отладки кода будут особенно полезны при работе с тысячами строк кода. Многие из инструментов отладки обеспечивают довольно точные результаты.

• JavaScript Debugger — инструмент от сообщества разработчиков Mozilla (MDN), который может быть использован как автономное веб-приложение для отладки кода в разных браузерах и коде на NodeJS. Firefox предлагает локальные и удалённые функциональные возможности, а также возможность отладки кода на Android-устройстве с помощью Firefox для Android.
• Chrome Dev Tools — набор инструментов, включающий в себя несколько утилит для отладки кода JavaScript, редактирования CSS и тестирования производительности приложений.
• ng-inspector — кросс-браузерное расширение, которое призвано помочь разработчикам с написанием, пониманием и отладкой приложений на AngularJS. Утилита поставляется с обновлениями в реальном времени, подсветкой DOM, прямым доступом к областям, моделям и прочим элементам приложения.

Похожие записи:

Представлена новая электрическая модель грузовика от volvo

Создана модель эволюционирующего робота dyret

Новая модель беспроводного пылесоса powerstick pro от samsung