В докладе будет рассказано и показано, как расширить возможности стандартного ASP.NET MVC3 web-приложения, используя браузерный native-плагин, написанный на языке C++. Будет показано применение фреймворка FireBreath, позволяющего легко создавать гибкие, кроссплатформенные и кроссбраузерные плагины. Будут затронуты вопросы взаимодействия managed-кода на C# с native-кодом на C++, а также показаны возможности по вызову кода на C++/C# из клиентского JavaScript-кода web-страницы. Применение вышеназванных технологий будет показано на примерах, одним из которых является разработанный для нужд системы электронного документооборота плагин, позволяющий осуществлять взаимодействие со сканером документов, подключенным к компьютеру клиента, из кода на JavaScript. Также будет даваться краткое описание других технологий, связанных с выполнением браузером не специфичных для него функций: NaCl, Pepper, и приведено сравнение этих технологий.

1. 4-я конференция .NET разработчиков
28 апреля 2012
Выходим за границы дозволенного.
NPAPI, NaCl и другие страшные
слова
Тимур Рахматиллаев
twitter.com/eskat0n

2. Типичное веб-приложение

3. Типичное комплексное
веб-приложение

4. Взаимодействие клиентского кода
и компьютера
JavaScript
Ресурсы:
• CPU
• RAM
• показания датчиков
• ФС

5. НЕтипичное комплексное
веб-приложение

6. Что может сделать «чистый»
JavaScript
Ничего полезного

7. HTML5 меняет ситуацию!

8. HTML5 меняет ситуацию!?
• File API
• Geolocation API
• Battery API
• SQL for Web

9. HTML5 не меняет ситуацию!

10. Все браузеры разные

11. Средства расширения
функциональности браузеров
• UserJS
• Расширения
• Плагины

12. UserJs

13. UserJs
Функциональность не отличается от обычного
JavaScript’а, подключенного к HTML-странице

14. Расширения
API и предоставляемые возможности
различаются в зависимости от браузера. Не
подходят для взаимодействия с периферией.

15. Плагины
Платформозависимый код, выполняемый в
потоке браузера.
Технологии реализации:
• Netscape Plugin Application Programming
Interface (NPAPI)
• NativeClient (NaCl)
• Pepper Plugin API (PPAPI)
• ActiveX

16. Плагины
Платформозависимый код, выполняемый в
потоке браузера.
Технологии реализации:
• Netscape Plugin Application Programming
Interface (NPAPI)
• NativeClient (NaCl)
• Pepper Plugin API (PPAPI)
• ActiveX

17. Все браузеры разные, будь они
прокляты

18. Поддержка NPAPI
• Google Chrome
• Safari
• Firefox
• Opera
• Internet Explorer…

19. Поддержка NPAPI
• Google Chrome
• Safari
• Firefox
• Opera
• Internet Explorer… до версии 5.5

20. NPAPI-плагин
Физически представляет из себя
подключаемую динамически библиотеку с
нативным кодом (dll, so).

21. Internet Explorer жует клей ActiveX
NPAPI library
Исходный код
ActiveX library

22. Общий механизм работы с
NPAPI-плагинами
• Встраивание плагина на страницу с
помощью HTML
• Определение местоположения файла
плагина и его загрузка
• При необходимости вызов кода плагина
для рендеринга контента на HTML-
странице
• Взаимодействие с плагином через
JavaScript

23. Встраивание плагина на страницу
<object id=“myplugin"
type="application/x-myplugin"
width="300" height="300">
<param name="onload" value=“onPlugLoad" />
</object>

24. Идентификация плагина
application/x-plugin1
application/x-plugin11
Plugin 1
application/x-plugin2
Plugin 2

25. Загрузка NPAPI-плагина
Ключ
реестра, указыва
ющий
на расположение
dll-файла

26. Рендеринг контента с помощью
плагина
<object> … </object>
Функция
рендеринга

27. Взаимодействие с плагином через
JavaScript
• Плагин представлен JavaScript-
объектом, находящимся в DOM-дереве
документа
• При обращении к свойствам JavaScript-
объекта плагина или при вызове его
методов происходит упаковка
передаваемых/возвращаемых значений
• Каждому свойству или методу
соответствует нативный код

28. FireBreath framework
• Предоставляет единое высокоуровневое
API для создания NPAPI-плагинов для всех
браузеров
• Для Internet Explorer происходит
регистрация плагина как ActiveX-
компонента
• Предоставляет возможность
автоматизированной установки
плагина

29. FireBreath framework
Плюсы:
• Возможность написания единого кода плагина
для работы во всех браузерах
• Инструментарий по упрощению сборки
• Прозрачный и простой API
• Легко читаемый исходный код
Минусы:
• Дополнительные инфраструктурные зависимости
• Недостаточно подробная документация

30. Начало работы с FireBreath
• Python
• VC++
• Cmake
• Visual Studio (не-Express версии)

31. Демонстрация работы FireBreath

32. А где же .NET?

33. У нас тут своя атмосфера!
• Возможна реализация с помощью
FireBreath небольшой тонкой
обвертки, которая осуществляет
трансляцию вызовов из JavaScript-кода к
коду на платформе .NET
• Используется связка из NPAPI-плагина и
Managed COM-компонента

34. IndyCode scanner plugin
Задача – обеспечить возможность
автоматического сканирования документов с
помощью сканера, подключенного к
клиентскому компьютеру, с последующей их
отсылкой на сервер.

35. IndyCode scanner plugin

36. Спасибо за внимание
Тимур Рахматиллаев
mail@eskat0n.ru
twitter.com/eskat0n