Материал: Браузерное расширение для визуализации грамматики

Стоимость услуг, оказываемых сервисом, определяется по времени их использования: $0.05/час за вычислительные ресурсы, $0.18/GB за хранение данных, $0.12/GB за доступ к ним.

Облачный сервис Heroku [14] предоставляет возможность создания абстрактных вычислительных контейнеров, называющиеся Dyno, которые представляют собой виртуальный Unix-подобный контейнер, выполняющий процессы в изолированной среде. Такие контейнеры делятся на два типа: отвечающие на HTTP запросы (web dynos) и отвечающие на запросы на выполнение различного рода задач, находящихся в очереди (worker dynos).

Платформа поддерживает выполнение программного кода, написанного на языках Ruby, Python, Java, Scala, Closure и Node.js. Так же как сервисы платформы Heroku доступны различные сторонние приложения.

Стоимость услуг зависит от количества и размеров запущенных контейнеров ($0.05/час-$0.10/час), размера используемой базы данных и подключенных сторонних приложений.

Платформа Windows Azure Services [15] является своего рода “гибридом” Platform-as-a-Service и Infrastructure-as-a-Service, предоставляя как PaaS сервисы, такие как среда выполения программ, базы данных, очереди сообщений и прочие, как и IaaS услуги (виртуальные машины, объектные хранилища). Это позволяет использовать по мере необходимости как те, так и другие сервисы в рамках реализации одного приложения.

Сервис поддерживает разработку приложений с помощью .NET, Node.js, PHP, Python, Java и Ruby. Для разработки и развертывания приложений доступны возможности Visual Studio. В качестве хранилища данных сервис предлагает как SQL, так и NoSQL базы данных.

Стоимость оказываемых услуг так же зависит от времени использования вычислительных ресурсов: цены начинаются от $0.02/час (768MB RAM и 1 виртуальное ядро) и могут достигать $0.64/час за среду с 14GB RAM и 8 виртуальными ядрами.

Платформа Amazon Web Services (AWS) [16] так же предоставляет как сервисы IaaS, так и сервисы PaaS. AWS представляет собой безопасную платформу облачных сервисов, которая предоставляет вычислительные мощности, доступ к хранилищам, базам данных, услугам доставки контента и другим функциональным возможностям.

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

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

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

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

Выбор языков программирования

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

Клиентская часть, представляющая собой браузерное расширение, реализуется с помощью стека технологий HTML/CSS/JavaScript, т.е языком программирования, на котором будет реализовано расширение, является язык JavaScript. Соответственно, интерфейс расширения реализован на HTML/CSS.

Для реализации серверной части будет использован сервис Amazon Web Services - Lambda [17]. AWS Lambda позволяет запускать программный код без выделения серверов и управления ими, оплачивая только фактическое время вычисления. Данный сервис поддерживает языки программирования Node.js, Java и Python.

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

Тем не менее, часть разрабатываемого функционала серверной части (лемматизация) будет реализована на языке Python так же с ипользованием AWS Lambda, так как Python обладает обширной базой библиотек, предназначенных для работы с натуральными языками.

Выбор системы управления базами данных

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

Платформа Amazon Web Services предлагает широкий выбор баз данных в рамках модели Platform-as-a-Service. Реляционные базы данных представлены сервисом Amazon RDS, предлагающим на выбор ядра БД MySQL, Oracle, SQL Server, PostgreSQL и Amazon Aurora. AWS RDS обеспечивает возможность масштабирования вычислительных ресурсов и хранилища, использования нескольких зон доступности и реплик чтения, и ряд других возможностей.база данных реализуется сервисом Amazon DynamoDB. Данный сервис обладает высоким быстродействием, эффективной масштабируемостью и низкой стоимостью.

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

В качестве клиентского хранилища данных используется HTML Local Storage [34] (локальное хранилище), позволяющее сохранять данные локально в браузере пользователя, представляющее собой базу данных вида «ключ-значение». Данное хранилище поддерживается всеми популярными браузерами, включая браузер GoogleChrome.

Выбор single page application фреймворка

Разрабатываемое браузерное расширение, как было сказано выше, является, по сути, одностраничным веб-приложением (single page web application, SPA), то есть, все изменения данных в интерфейсе требуется осуществлять без перезагрузки страницы. Несмотря на то, что объем логики, требующей реализации для работы расширения не слишком велик, и возможна реализация такой логики без использования вспомогательных библиотек на чистом JavaScript, использование легкого SPA фреймворка значительно облегчит и ускорит разработку и последующую поддержку приложения. Далее будут кратко рассмотрены несколько наиболее популярных библиотек для организации одностраничных веб-приложений..js [21] является минималистичным MVC фреймворком, на котором основано множество популярных высоконагруженных веб-приложений, таких как Twitter, Pinterest и Hulu.

Одним из основных преимуществ данного фреймворка являются его легкость (минифицированная и сжатая библиотека имеет размер 6.3KB и зависит всего от одной библиотеки - Underscore.js). Так же важным преимуществом является гибкость - в отличие от многих других фреймворков, Backbone.js оставляет выбор многих компонентов, таких как шаблонизатор, на усмотрение разработчика, что позволяет выбирать компоненты, наиболее подходящие для решения конкретной задачи.

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

Минималистичность данной библиотеки так же иногда относят к ее недостаткам, так как возможность использования различных компонентов и плагинов может усложнять разработку для новичков, не знакомых со всеми особенностями фреймворка. Недостатками так же считаются необходимость написания чрезмерного количества шаблонного кода для работы данной библиотеки, и отсутствие поддержки рендеринга страницы на стороне сервера, что может помешать поисковым ботам индексировать содержимое страницы.[19] - библиотека для организации веб-приложений, поддерживаемая компанией Google и являющаяся одной из наиболее часто используемых JavaScript MV* библиотек.

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

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

Фреймворк Ember.js [20], созданный в 2011 году, является библиотекой, разрабатываемой открытым сообществом программистов. Несмотря на относительно большой размер исходного кода (~95KB), большой объем функционала уже включен в библиотеку, не требуя подключения сторонних компонентов.

К преимуществам фреймворка относят минимальную необходимость конфигурации при разработке приложений - пропагандируется принцип “соглашение над конфигурацией” (“convention over configuration”), что сокращает время разработки и количество написанного программного года. Так же библиотека содержит широкий набор стандартных компонентов, что избавляет разработчиков от необходимости заново решать известные задачи, позволяя сфокусироваться на реализации нового функционала.

Подход “соглашение над конфигурацией” в некоторых ситуациях является недостатком фреймворка, так как при соблюдении такого принципа разработчики оказываются ограничены в конфигурации приложения рамками, обозначенными библиотекой. Так же при таком подходе генерируется значительное количество кода, что при разработке объемных приложений может привести к излишним сложностям. Так же библиотека на текущий момент поддерживает возможность двустороннего связывания данных, от которой разработчики обещают в скором времени отказаться..js [18] - библиотека, выпущенная Facebook в 2013 году, которая развивается крайне быстро на текущий момент, в том числе из-за использования подходов, не типичных для других фреймворков для организации веб-приложений. В то время как библиотеки, рассмотренные выше, представляют собой фактически MVC-фреймворки, React.js представляет собой скорее часть, отвечающую за вид, в то время как реализация остальной части архитектуры остается на выбор разработчика, для которой Facebook предлагает решение под названием Flux. [37]

Данный фреймворк считается одним из наиболее быстрых решений для разработки веб-приложений. Так же к преимуществам относят легкость освоения библиотеки, компонентный подход к организации интерфейса и наличие рендеринга страниц на стороне сервера. С помощью данного фреймворка так же возможно создание мобильных приложений (React Native [22]).

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

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

Структура разрабатываемого програмного обеспечения

Разрабатываемая система реализует архитектуру “клиент-сервер”, где клиентом является браузерное расширение, а сервером - программный код, запущенный на сервисах, предоставляемыми облачной платформой Amazon Web Services реализующий API, используемое клиентом.

Клиент представляет из себя одностраничное веб-приложение, запускаемое как расширение браузера Google Chrome и разрабатываемое с использованием фреймворков AngularJS и jQuery для доступа к DOM-модели просматриваемого документа. Интерфейс приложения реализован с помощью HTML/CSS, язык программирования - JavaScript.

Серверная часть представляет собой набор микросервисов, написанных на языке Node.JS. Для запуска программного кода микросервисов и хранения данных используются облачные сервисы Amazon Web Services.

Общение и обмен данными между сервером и клиентом происходит с помощью API, предоставляемого сервером. Таким образом, общая структура разрабатываемого приложения показана на рис. 11:

Рис. 11. Общая структура разрабатываемого приложения.

Далее будет подробнее описана структура каждого из компонентов разрабатываемой программы.

Структура браузерного расширения (клиента)

Архитектура браузерных расширений, предлагаемая для реализации браузером Google Chrome, состоит из компонентов [23], показанных на рис. 12:

Файла-манифеста (manifest.json) описывающего возможности, настройки, права доступа расширения;

Фоновой страницы расширения (background page), работающей постоянно, пока расширение активно;

Скрипта содержимого страниц (content script), исполняемого в контексте текущей страницы, просматриваемой пользователем;

Интерфейса расширения, показывающегося по кнопке в верхнем баре браузера (browser action).

Рис. 12. Общая структура расширений браузера Google Chrome. [38]

Скрипт содержимого страниц (content script) будет использован для того, чтобы определять слово, выделенное пользователем на текущей странице, показывать всплывающее окно с переводом слова и дополнительной информацией о нем, и предлагать добавлять слово на изучение в мобильное приложение. Так же content script используется для выделения важных слов на странице, полученных с сервера с помощью алгоритма, использующего меру TF-IDF.

Интерфейс расширения (browser action) представляет собой всплывающее окно, в котором доступна информация о просмотренных пользователем словах и о словах, добавленным им на изучение, а так же возможность пройти авторизацию через Facebook.

Так как скрипт содержимого страниц выполняется в контексте, отличном от скриптов интерфейса расширения, необходимо звено, связывающее между собой эти два компонента. Таким компонентом является фоновая страница, осуществляющая обмен данными между скриптом содержимого страниц и скриптом интерфейса расширения, а так же осуществляющее все общение с серверным API по запросам этих двух компонентов. Для осуществления такого рода коммуникации между компонентами используется API обмена сообщениями браузера Google Chrome (Message Passing) [24]. Общение с сервером происходит с помощью API, распространяемой сервисом AWS Lambda, представляющей собой удобную в разработке надстройку над HTTP запросами, осуществляющими вызов серверных функций.