Двустороннее взаимодействие между JavaScript и Java
А где работает «приложение на Java» — на сервере или на клиенте? Если на клиенте, то как оно туда попадает — речь о том, что пользователь заходит на сайт, должно запускаться приложение на Java или оно независимо устанавливается на машину пользователя и вопрос, как с уже установленным приложением взаимодействовать из JS браузера? Вы можете менять и JS и Java-код? Чем вас не устраивают сокеты?
6 авг 2015 в 12:57
Все работает на клиенте и все запущенно постоянно и работает всегда. Сокеты устроили бы, но начальство против них.
6 авг 2015 в 13:06
Да, вопрос более правильный такой — взаимодействие с запущеныпм Java-приложением из браузера. Причем — взаимодействие — двустороннее.
6 авг 2015 в 13:07
Про «начальство против» — как-то несерьезно, должны быть объективные причины быть против, вам же не запрещают букву «A» использовать в программах. Кроме того, для нормального ответа нужно еще больше контекста: какие браузеры/ОС вы поддерживаете, для каких сайтов эта фича должна работать — это просто web ui локальной программы или какой-то публичный сайт, — можете ли ставить расширения на браузеры, менять их настройки.
6 авг 2015 в 13:45
Браузер — старенький InternetExplorer 6. Ось — Винда. Будет не сайт, а простая HTML страница — так сказать — пользовательский интерфейс или WebUI локальной программы. Настройки браузера менять можно
6 авг 2015 в 13:52
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
По очевидным причинам, браузеры не позволяют произвольным web-сайтам взаимодействовать с произвольными локальными приложениями — это была бы масштабная дырка в безопасности.
Поэтому вам надо:
- либо 1) модифицировать браузер так, чтобы конкретно вашей веб-страничке можно было больше, чем остальным (расширения/настройки)
- либо 2) сделать вашу программу доступной через интерфейсы, к которым разрешено обращаться веб-страничкам.
Конкретно LiveConnect — это функция, которую сейчас реализует Oracle Java Plugin. Да, она только для аплетов, и не меняя настройки безопасности аплеты не смогут коммуницировать с локальной программой. Помимо всего прочего, производители браузеров отрицательно настроены по отношению к плагинам, поэтому по моему скромному мнению эта технология не имеет будущего и вам не стоит ее изучать и строить на ней продукты без крайней необходимости.
Вариант (1) «модифицировать браузер» требует повторения для разных браузеров (если вам нужно их поддерживать) и тоже куча копания.
Java & JavaScript: принципы и приемы взаимодействия
Рассматриваемые в этой статье возможности подразумевают использование в качестве броузера Netscape Navigator 3.0 или выше. Предполагается, что читатели владеют основами JavaScript и Java.
Известно, что языки JavaScript и Java расширяют возможности представления и обмена информацией на Ваших web-страницах. Но есть ограничения, которые накладываются при использовании этих языков. Вот несколько из них:
Для JavaScript
- Поле деятельности жестко ограничивается рамками броузера: все, что существует за его пределами, для JavaScript не существует вовсе. Обмен информацией с внешним миром возможен только при использовании различных HTML-расширений серверов (единого стандарта для которых нет вовсе), CGI и переменной location.search (Решение)
- Почти никаких функций для работы с изображениями (за исключением смены картинки в документе при помощи поля src объекта Image) (Решение)
- Интерфейс (за исключением форм) статичен и негибок (Решение)
- Отсутствует возможность динамической генерации документов (Решение)
- Отсутствует поддержка E-Mail (если не установлены специальные библиотеки, распространяемые отдельно от JDK) (Решение)
- До сих пор не решена проблема отображения символов русского алфавита (если не используется СУБД) (Решение)
Но. Можно заметить, что эти ограничения, накладываемые на один из языков, так или иначе обходятся в другом. Таким образом, обеспечив взаимодействие JavaScript-кода с Java-апплетами, можно еще более повысить гибкость Ваших страниц. В этой статье кратко описывается, как это делается, и даются примеры.
Для того, чтобы разрешить взаимодействие JavaScript и Java, Вам необходимо включить опции Enable Java и Enable JavaScript в меню Options|Network Preferences. |Languages.
Взаимодействие JavaScript и Java-апплетов может осуществляться тремя способами:
- Доступ из JavaScript к переменным, методам, классам и пакетам Java
- Управление Java-апплетами и внедренными объектами (plug-ins)
- Доступ из Java-апплетов к методам и свойствам JavaScript
Классы пакета netscape:
Доступ из JavaScript к переменным, методам, классам и пакетам Java
Для доступа к классам и пакетам Java в JavaScript есть объект Packages . Используя свойства этого объекта, можно получить доступ к любому классу любого пакета, поддерживаемого навигатором. Напр., для доступа к пакетам java , sun и netscape используются следующие операторы: Packages.java , Packages.sun , Packages.netscape . Строго говоря, при обращении к этим трем пакетам использование Packages необязательно, чего нельзя сказать об остальных пакетах. Так, Packages.java.lang.System.out.println(myString) эквивалентно java.lang.System.out.println(myString) .
var myDate = new java.util.Date(); var wnd = open(); var doc = wnd.document; doc.open(); doc.write(""); doc.write("var myDate = new java.util.Date();"); doc.write("function showStat(param) <"); doc.write("alert(param)>"); doc.write(""); doc.write(myDate + "
"); for (var i in myDate) doc.write("" + i + "
"); doc.write("Закрыть"); doc.close();
Нажав на кнопку, можно увидеть все переменные и методы вновь созданного объекта (внимание! нажатие на гиперссылку в создаваемом документе успешно выполнит только те методы, которые не принимают параметров (почему, видно из кода выше)):
Внимание! Не используйте любые методы Java, которые могут бросать исключения, т.к. в JavaScript нет обработки исключений, и код, вызывающий такие методы, не пройдет: будет выведено соответствующее сообщение
Управление Java-апплетами и внедренными объектами
Для обращения к Java-апплетам в документе можно использовать один из трех путей:
- Обращение по имени апплета (указанному в параметре NAME тэга APPLET):
document.appletName - Обращение по индексу в массиве applets:
document.applets[index] - Обращение по имени апплета в качестве индекса в массиве applets:
document.applets[«appletName»]
Напр., если в документе присутствует единственный апплет:
- var aplt = document.myapplet
- var aplt = document.applets[0]
- var aplt = document.applets[«myapplet»]
После получения ссылки на апплет можно получить доступ к любым общедоступным (public) переменным и методам этого апплета.
-
Исходный текст апплета:
import java.awt.*; import java.applet.Applet; public class myapplet extends Applet < public String myString; TextField myField; public void init() < setLayout(new BorderLayout()); myField = new TextField(); myField.setEditable(false); add("Center", myField); setString("Initial string"); >public void setString(String s) < myField.setText(s); >>
Нажатие на кнопку вызовет установку текста в апплете равным вычисленному выражению в поле ввода формы.
Внедренные объекты
Внедренные объекты (аудио- и видеофайлы WAV, AU, AVI. ) вставляются в документ при помощи тэга EMBED (должен быть установлен соответствующий plug-in). Синтаксис:
Здесь URL — URL внедряемого объекта. Параметры widthValue и heightValue — размер панели для размещения объекта. Используйте размеры 140 и 60 соответственно для полного показа панели и 2 и 2 для скрытия панели. (Установка размеров в 1×1 или 0x0 в действительности не принесет желаемого результата). Использование параметра NAME не рекомендуется, т.к. при этом часто блокируется работа внедренного объекта (скорее всего, это ошибка в раелизации Netscape Navigator 3.0) autostart=booleanValue — при загрузке объекта он сразу воспроизводится (действительно только для объектов, которые можно воспроизводить)
loop=booleanValue — при true воспроизведение пойдет по циклу (до покидания документа или вызове метода stop
Доступ к внедренным объектам осуществляется при помощи массива document.embeds[index] , где в качестве index следует указать индекс объекта (0 соответствует первому внедренному объекту, 1 — второму, . , document.embeds,length — 1 — последнему).
Чаще всего внедренный объект порождается от класса netscape.plugin.Plugin . В этом случае Вы можете использовать общедоступные переменные и методы данного класса для управления объектом. Кроме этого, каждый тип внедренного объекта может иметь свои собственные переменные и методы. Следующий код позволяет узнать, какие из них доступны в конкретном случае:
var myEmbed = document.embeds[myIndex]; var s = myEmbed + "\n"; for (var i in myEmbed) s += i + " = " + myEmbed[i] + "\n"; alert(s);
Общими для всех внедренных объектов являются следующие методы:
- getWindow() — возвращает окно, содержащее документ, в который внедрен данный объект
- isActive() — определяет, является ли данный объект активным в данный момент
- Plugin() — конструктор
Остальные, не указанные здесь, методы используются в основном разработчиками новых внедряемых объектов (plug-ins). Вы не должны их вызывать.
Кроме этого, наиболее часто в объектах присутствуют три метода, которые обеспечивают основные функции управления:
play() — воспроизводит клип (если он таковым является) (при задании в качестве параметра функции true воспроизведение происходит в режиме LOOP)
stop() — останавливает воспроизведение, «перематывая» клип в начало
pause() — приостанавливает воспроизведение. После этого при вызове play() воспроизведение продолжится с того места, где было приостановлено
Доступ из Java-апплетов к методам и свойствам JavaScript
Для того, чтобы разрешить Java-апплетам доступ к методам и свойствам JavaScript, необходимо в тэге APPLET указать атрибут MAYSCRIPT, иначе будет бросаться исключение. Для доступа к JavaScript необходимо импортировать пакет Netscape javascript:
import netscape.javascript.*;
При этом в переменную окружения CLASSPATH необходимо добавить путь к файлу с пакетами, поставляемыми с Netscape Navigator. Напр., если Netscape Navigator установлен в каталог c:\Program Files\Navigator , в CLASSPATH необходимо добавить (для Netscape Navigator Gold) c:\Program Files\Navigator\Program\Java\CLASSES\java_301
Пакет javascript определяет класс JSObject для описания объектов JavaScript и исключение JSException, бросаемое при ошибке во время обращения к объектам JavaScript.
Перед тем, как Вы сможете получить доступ к JavaScript, Вам необходимо получить ссылку на окно (объект window), содержащее апплет:
JSObject win = JSObject.getWindow(this)
Лучше всего включить этот оператор в функцию init() апплета.
Получить доступ к объектам и свойствам JavaScript можно одним из следующих способов:
-
Применив функцию eval объекта window:
JSObject win = JSObject.getWindow(this); JSObject myForm = (JSObject)win.eval("document.myForm");
JSObject win = JSObject.getWindow(this); JSObject doc = (JSObject)win.getMember("document"); JSObject myForm = (JSObject)doc.getMember("myForm");
Вызвать методы объектов JavaScript можно одним из следующих способов:
-
Применив функцию eval :
JSObject win = JSObject.getWindow(this); win.eval("alert('My message !')");
JSObject win = JSObject.getWindow(this); String argums[] = new String[1]; argums[0] = "My message"; win.call("alert", argums);
Данный способ позволяет вызвать не только методы объекта JavaScript, но и определенные пользователем функции (для чего используйте функцию call объекта winddow). Если функция/метод не принимает параметры, в качестве второго параметра функции call указывается пустой массив:
JSObject win = JSObject.getWindow(this); JSObject nav = (JSObject)win.getMember("navigator"); String argums[] = (""); nav.call("javaEnabled", argums);
Преобразование типов от Java к JavaScript:
- Java-типы byte, char, short, int, long, float и double преобразуются в числа JavaScript
- Java-тип boolean преобразуется в boolean JavaScript
- Java-тип JSObject преобразуется в соответствующий объект JavaScript
- Прочие Java-объекты преобразуются в объекты-надстройки JavaScript для доступа к полям и методам этих объектов. Java-объекты могут быть преобразованы в строку (вызывается метод Java-объекта toString ). Если происходит преобразование в число, вызывается метод Java-объекта floatValue (который бросит исключение, если такое преобразование невозможно). Аналогично происходит преобразование в boolean (метод booleanValue )
- Java-массивы преобразуются в псевдо-массивы JavaScript (которые в действительности ведут себя точно так же, как и JavaScript-массивы, где в качестве индекса используются целые числа, но устроены по другому)
Преобразование типов от JavaScript к Java:
- Объекты-надстройки для Java-объектов преобразуются в Java-объекты
- Остальные объекты преобразуются в JSObject
- Строки, числа и boolean преобразуются соответственно в Java-объекты String, Float и Boolean
JSObject — объект JavaScript
Любой объект JavaScript в Java-апплетах представляется потомком класса JSObject (подробнее см. Доступ из Java-апплетов к методам и свойствам JavaScript)
Методы класса JSObject :
public Object call(String methodName, Object args[])
вызывает метод methodName объекта JavaScript с аргументами args[] . Эквивалентен JavaScript-коду:
this.methodName(args[0], args[1], . )
public Object eval(String s)
вычисляет выражение s , являющееся любым допустимым выражением JavaScript. Вычисление производится в контексте объекта. Напр., код
JSObject win = JSObject.getWindow(this); JSObject doc = (JSObject)win.eval("document");
public Object getMember(String name)
возвращает поле-член JavaScript-объекта. Аналогичен JavaScript-коду this.name . Напр., код
JSObject win = JSObject.getWindow(this); JSObject doc = (JSObject)win.getMember("document");
public Object getSlot(int index)
Возвращает индексированный элемент массива (если объект им является). Аналогичен JavaScript-коду this[index] . Напр., код
JSObject win = JSObject.getWindow(this); JSObject frames = (JSObject)win.getMember("frames"); JSObject frame1 = (JSObject)frames.getSlot(0);
public static JSObject getWindow(Applet applet)
public void removeMember(String name)
public void setMember(String name, Object value)
public void setSlot(int index, Object value)
public String toString()
JavaScript: обмен информацией с внешним миром
Как известно, Java-апплеты могут обмениваться информацией с тем сервером, откуда он загружен, а если создать соответствующее серверное приложение, то через него и с любым сервером. (Очень хороший пример такого приложения — IDS Server компании IDS Software, взаимодействующий с апплетами с помощью пакетов ids.sql и с серверами или локальными базами данных через систему псевдонимов). Для того, чтобы код JavaScript мог воспользоваться такими возможностями, достаточно в апплете опреденить public-функцию, осуществляющую необходимый способ обмена информацией. После этого JavaScript вызывает данную функцию апплета, когда нужно.
JavaScript: работа с графикой
С помощью Java можно рисовать как на поверхности визуальных компонентов, так и на поверхности изображений (класс Image). Рисование происходит посредством объекта Graphics, являющегося одним из свойств класса Image. Из JavaScript можно напрямую вызывать функции объекта Graphics, предварительно создав в апплете public-переменную:
Graphics myGraph = myImage.getGraphics();
Таким же образом осуществляется рисование на поверхности компонентов апплета.
JavaScript: гибкий интерфейс
Обычно для поддержки взаимодействия с пользователями бывает достаточно использовать формы. Однако часто бывают ситуации, когда возможностей, предоставляемых формами, недостаточно. К тому же в случаях, когда во взаимодействии участвуют несколько HTML-документов (при большом числе вводимых параметров и необходимости динамически изменять последовательность действий), пользователям приходится много времени ждать загрузки тех или иных документов или блоков информации. Все это решается достаточно тривиально с использованием апплетов: хотя апплеты загружаются дольше обычных компонентов документа, это происходит один раз за сессию работы с броузером, а потом работают достаточно быстро. При этом можно создать один документ и все взаимодействие сосредоточить в нем.
Например, если количество вводимых параметров велико, можно установить для апплета (или какой-либо его панели) менеджер компоновки CardLayout и размещать интерфейсные элементы на его страницах (что является аналогом диалоговых окон в виде блокнота с закладками в Windows).
Если же необходимо динамически изменять последовательность действий и/или интерфейсные элементы, то делается это еще проще. В апплетах для изменения набора выводимых элементов предназначены такие функции класса Container, как void remove(Component comp) (для удаления из контейнера элемента comp), void removeAll() (для удаления из контейнера всех элементов) и Component add(Component comp [, int index]) (для добавления нового элемента). И связанная с этим последовательность действий легко изменяется.
Java: динамическая генерация документов
Часто бавает необходимо из Java-апплетов влиять на внешний вид документа в зависимости от некоторых условий (такие условия могут возникнуть в то время, когда документ уже загружен). Например, нужно создать какую-либо таблицу в ответ на введенные пользователем данные. Если контакт апплет загружен с СУБД-сервера, последний может (но не всегда) предоставить некоторые функции для динамической генерации документов. К сожалению, набор таких функций очень ограничен и неудовлетворителен. В других случаях дела обстоят еще сложнее. Таким образом, мы можем в апплете воспользоваться возможностями JavaScript в области создания документов. Для этого есть функция document.write(. ). Грамотно используя данную функцию можно построить документ (почти) любой сложности на лету.
Java: поддержка E-Mail
Из JavaScript есть возможности послать сообщение по E-Mail. Есть для этого три способа:
JSObject win = JSObject.getWindow(this); JSObject doc = (JSObject)win.getMember("document"); JSObject myMail = (JSObject)doc.getMember("myMail"); myMail.call("click", null)
JSObject win = JSObject.getWindow(this); JSObject doc = (JSObject)win.getMember("document"); JSObject myForm = (JSObject)doc.getMember("formName"); myForm.call("submit", null);
JSObject win = JSObject.getWindow(this); JSObject location = (JSObject)win.getMember("location"); location.setMember("href", "mailto:rbravant@yahoo.com");
Java: проблема символов русского алфавита
На самом деле существуют особые механизмы, которые позволяют работать с кириллицей несмотря на то, что в Java такая поддержка отсутствует. Они достаточно нетривиальны, и их рассмотрение выходит за рамки обсуждаемой темы. Есть легкий путь с применением JavaScipt вывода кириллицы в апплете. (Текст, введенный в апплет, может также успешно быть отправлен на сервер, хотя никакой гарантии в этом нет.) Решение таково: в документе в секции SCRIPT определяется ряд переменных с текстом на русском языке (не забудьте защитить символы я и ч обратным слэшем). Получить к ним доступ из апплета не составит труда.
Как соединить Java, Js и графы с искусством, или история о том, как создавался интерактивный театр
В этом году в Эстонии проходит целая серия театральных представлений, объединенных в серию «История Столетия». В течение года 22 театра страны представили публике в своих спектаклях столетнюю историю Эстонии. Русскому театру Эстонии в ходе жеребьевки досталась тема будущего Эстонии.
Под катом — о том, как совместить технологию и искусство.
У каждого из нас есть представление о том, каким могло бы быть будущее: чего мы боимся, о чем мы мечтаем, каким оно может оказаться на самом деле. Чтобы не получился спектакль, рассказывающий лишь о том, что думает о будущем узкий круг театральных людей, мы обратились с этим вопросом к тем, кому предстоит жить в будущем — к детям, к молодежи Эстонии в возрасте 3-19 лет. Ответивших были сотни, и мы очень им благодарны.
Каждый полученный ответ уникален, но, сортируя материалы, мы увидели заметные тенденции и закономерности. Из детских ответов вырисовывалось невероятное количество возможных миров будущего — и привлекательных, и ужасных. Но у этих миров нашлись и общие черты, на основе которых и был построен сюжет.
Спектакль переносит нас в 2118 год. Эстония находится под защитным куполом. Мы научились многому, в том числе и продлевать жизнь. Главные герои — пожилая пара Линда и Тимо. Сто лет назад, будучи детьми, они фантазировали о будущем, в котором теперь и живут. Это одни из тех самых детей, благодаря которым и получился этот спектакль. Герои попадают в разные миры, в разные Эстонии. В ходе спектакля именно зрители своим решением влияют на то, каким будет их 2118 год.
Театр начинается не с вешалки, а гораздо раньше. После обработки всего материала было определены основные пути развития будущего по версии детей, от инфотехнологического пути до экологического государства. Поскольку будущее не предопределено, а зависит от выбора каждого из нас, то возможные пути развития были разбиты на новеллы, объединенные историей главных персонажей и их семьи.
Артем Гареев (режиссер спектакля) показывает на макете основные идеи
Идея декораций — это конструктор, который в руках детей может принимать любые формы и функции. Он же имеет и форму графа. Граф — это особый абстрактный математический объект, который позволяет описывать и моделировать множество явлений реального мира: дорожную сеть, организационную структуру, сеть Интернет, различные выборы, которые могут делать люди. Выборы, которые ведут по различным линиям сюжета.
Помимо драматургической задачи, были немалые вызовы и с технической стороны: сценическое освещение, сложная система контроллеров, которая управляла сотнями LED на декорациях, множество костюмов для каждого варианта будущего, искусно выполненных одним из лучших театральных художников Эстонии Розитой Рауд. Актерам было необходимо быстро переодеваться после каждого голосования, что было особенно сложно, когда интрига сохранялась до самого конца голосования и следующая сцена была неизвестна.
Все музыкальное сопровождение играется вживую проектом MODULSHTEIN.
Чтобы стало немного понятней, давайте немного войдем в контекст спектакля
Мы оказались в мульти-культурном обществе, где языки и гендеры перемешались. Все разрешено.
Выпуск новостей погружает нас в предлагаемые обстоятельства.
Иронии добавляет то, что Елена Соломина — ведущая на национальном телевидении и хорошо знакома многим зрителям.
Мультикультурное общество – сплошное веселье, младшая Семенова приводит знакомится с родителями огромного бойфренда, одетого в арафатку и балетную пачку.
После все отправляются на вечеринку.
В конце сцены открывается голосование, где предлагается выбор, пойдет ли Эстония по предложенному пути мультикультурного развития.
И если ответ оказывается положительным, то…
Утопия сваливается в дистопию и отпущенные свободы затягивают узлом. Появляются новые запреты, и вот уже спецназовцы врываются на вечеринку и сортируют людей. Одних пропускают направо, навстречу будущему, других раздевают и отправляют налево, где их судьба решается машиной уничтожения. (на базе статей Николая Караева и Бориса Туха)
Какое же техническое решение было нам необходимо?
По сути, это был еще один актер ЕМА (по эст. Мама), искусственный интеллект, который стал реальностью в будущем. ЕМА ведет зрителей по сюжету, проявляет себя в различных вариантах будущего, а также объявляет и запускает голосование, подсчитывает и представляет результаты, переходит по сюжетным веткам. Зал вмещал в себя 600 человек. И каждый зритель должен был иметь возможность проголосовать, а система корректно посчитать его голос.
Возможные варианты развития сюжета, представленные и смоделированные в виде графа, образовали сложную и разветвленную структуру.
Утопия имеет свойство перетекать в антиутопию, а благими намерениями выложена дорога в ад. Сюжеты связаны между собой логикой драматургии. Учитывая количество вариантов будущего, которые предложили дети, получилось большое количество веток. Важно избегать повторов — то, что было сыграно, не должно быть снова вынесено на голосование как возможный вариант. Например, если после просмотренной Информационно-Технологического утопии зрители подтверждают свой выбор такого будущего, то мы попадаем в технологическую антиутопию. Если же зрители отвергают предложенный вариант, то должны вновь сделать выбор между предлагаемыми вариантами — например, Экологическим и Космическо-Колониальным будущим. Очень часто были ситуации, когда зал боролся, голоса делились практически 50% на 50% и все решала разница в несколько голосов.
Вся эта сложность требовала соответствующей структуры, которой и является Граф.
Какие еще функциональные требования были к техническому решению для спектакля? Нам требовались:
- Система голосования, которая собирает голоса в период голосования, показывает ход голосования и их результаты.
- Автоматический выбор действий — в зависимости от результатов голосования, открытие нового голосования или же объявление начала следующей сюжетной линии, в соответствии с логикой графа.
- Система должна общаться со зрителями, предлагать выбор и объявлять результаты на естественном языке.
- Система должна управляться помощником режиссера и отображать полную статистику о ходе голосования.
Еще одно Web приложение требуется для администрирования системы, запуска, активации состояний и прочих технических моментов.
И наконец, самое главное — это то, как ЕМА должна взаимодействовать с залом.
И тут необходимо ввести концепцию «супера», которая была новой и для меня. Супер — это экран, который опускается и закрывает сцену.
Подъемно-опускной занавес
Также известен как «занавес-гильотина» или «немецкий» занавес. Чаще используется в музыкальных театрах. Занавес представляет собой целое полотно, прямое или плиссированное, закрепленное по верхней кромке к несущей балке. Подъем занавеса происходит одновременно с подъемом несущей балки. Такой занавес требует большой высоты пространства над сценой.
(Википедия)
Занавес светоотражающий и позволяет выводить различные проекции, такие как новостные выпуски, о которых будет ниже, или экран ЕМА, на котором отображается информация, связанная с голосованием, его результатами и сделанным выбором.
Итак, у нас имеется сложный граф, система голосования и три FrontEnd системы, которые должны взаимодействовать со зрителями и админом (невероятным помощником режиссера Светланой Шушиной).
Решение
Итак, начнем с графа. Структуру данных, в данном случае варианты истории Эстонии, необходимо где-то хранить. Стандартные реляционные базы данных не подходят для представления графа по ряду причин. Для нас самым существенным была гибкость хранимых данных, переходов, ссылок на аудио файлы в зависимости от выбора, и так далее.
Однозначным выбором была Neo4j, лидирующая система графовых баз данных в мире. 7 из топ 10 технологических компаний в мире используют её. Это очень зрелая технология. Скорость, удобство и отличное коммьюнити не оставляют другого выбора в подобного рода решениях.
Мы смоделировали сюжет, выстроенный драматургами, в виде графа на Neo4j. И вот кусочек сюжетных перипетий, как он выглядит изнутри Neo4j.
Одно из преимущества, которые давал Neo4j, это гибкость и отсутствие схемы, что позволило безболезненно менять сюжетные линии, добавлять новые варианты аудио, связывать различные новеллы между собой. Это нативное представление графа в нативной среде.
В плане серверной части были некоторые сомнения — Python vs Java. Выбор склонился в пользу Java. Причины — скорость, меньший риск что-то сломать при понятных требованиях и прямых руках, и наконец Spring Boot, который из коробки поддерживает Neo4j.
Серверная часть имплементирована на Spring Boot. Фактически сервер собирает голоса, переключается по команде с «супера» в следующие состояния, когда голосование закончено, принимает команды от админа, отдает статистику и прочее прочее. Плюс отдает все варианты FrontEnd-ам, а также регистрирует зрителей.
Теперь начинается самая нетривиальная часть задачи. Дело в том, что по задумке компонент, который отображается на «супер» должен разговаривать со зрителями: подготавливать к голосованию, предлагать варианты, запускать и заканчивать голосование, объявлять результаты и в зависимости от выбора предлагать другие варианты, либо переходить к выбору и рассказывать введение к следующей сцене. Таким образом, аудио должно быть динамическим и подготавливаться на лету. Учитывая, что количество вариантов огромно, а продолжительность каждого отрезка аудио различная, важна синхронизация (например, голосование должно открываться только после объявления «Голосование открыто») и это была не совсем тривиальная задача.
В системе получается два центра управления.
Первый — это сервер. Он хранит текущее состояние сюжета, собирает голоса, отдает данные по статистике, контролирует возможность отдать только один голос от одного человека.
Второй — это «супер», который включает, выключает голосование, показывает ход голосования и так далее.
«Супер» имплементирован на Vue. Изначально мы хотели вызывать аудио с Google Speech API, но мы не могли гарантировать отсутствие задержек по сети. Поэтому был выбран иной вариант — мы записали ответ Google Speech API по кусочкам.
Всего у нас получилось 55 кусочков аудио. Информацию о том, какие аудио файлы необходимо включать в зависимости от текущего состоянии, мы хранили на графе. Поскольку мы имеем дело с JavaScript, то мы нанизывали аудио файлы и вызовы команд друг на друга, как бусины. Таким образом, мы не зависели от того факта, что аудио файлы различной длительности, и получили достаточно универсальное решение.
Поначалу мобильный клиент (web page) была написана на Vue, но мы получили частичную несовместимость на некоторых моделях телефонов. Мы пробовали транспилеры babel, но из-за кучи настроек обьем страницы разрастался, и хотя на части телефонов голосование начинало работать, но на других ломалось. В итоге мобильный клиент был переписан на Vanilla JS.
По сути это получилась распределенная система.
Финальный обьем системы (jar file) был 146 мегабайт. Телекоммуникационная компания Telia предоставила нам виртуальный сервер по символической цене 1 евро в месяц, за что ей огромная благодарность.
Темп работы перед премьерой все ускорялся. На премьеру ожидалась президент. Последний баг был обнаружен за полчаса, и времени на тестирование не было, поэтому первые спектакли шли с параллельным тестированием локально на машине за сценой, чтобы на случай ошибки можно было составить план действий.
Из интересных моментов можно выделить и тот, что мы показывали имена последних проголосовавших на экране и использовали для этого анимацию шаблонов Vue. На первом же представлении нам ввели киллер символ, который ломал анимацию и отображение шаблонов Vue. Впоследствии от этого решения мы отказались и перешли на старый добрый jQuery.
А вот кусочек голосования снятый во время спектакля.
На фестивале Драма в Тарту овации длились почти 5 минут.
Это было невероятное приключение благодаря сумасшедшей энергетике и увлеченности людей, задействованных в проекте. Огромный поклон всем людям участвовавшим в создании этого представления.
Режиссер и сценограф – Артём Гареев
Композитор, продюсер проекта– Александр Жеделёв
Визуал – Алена Мовко
Художник по костюмам – Росита Рауд
Художник по свету – Антон Андреюк
Хореограф – Ольга Привис
Драматурги: Карин Ламсон, Мари-Лийз Лилль, Елена Чичерина и Лаура Калле
Видео – Николай Алхазов
Программирование и создание приложения – Александр Тавген, Анна Агафонова
Техническое решение лед посветки – Aleksander Sprohgis
Анимация – Martin Yakush
Музыкальный коллектив – Modulshtein
Мартен Альтров – кларнет, бас кларнет
Алексей Семенихин– работа с семплами, эффекты
Александр Жеделёв – гитара, синтезаторы, ableton
Педагог по вокалу – Анна Дыдына
Помощник режиссёра Светлана Шушина
В спектакле заняты:
Наталья Дымченко, Александр Жиленко, Даниил Зандберг, Дмитрий Кордас, Екатерина Кордас, Александр Кучмезов, Виктор Марвин, Наталья Мурина, Елена Тарасенко, Эдуард Тее
Сергей Фурманюк, Леонид Шевцов, Елена Яковлева
Студия Русского театра: Денис Волков, Полина Гринёва, Нина Загвоздкина, Анастасия Коледа, Наташа Кристенсен, Анастасия Масалова, Сандра Миносян, София Михалёва, Катрин Мяги, Михаил Пащук, Катрин Селюгина, Кристина Сорокина, София Стрёмберг, Илья Сутть.
- Программирование
- Java
- Анализ и проектирование систем
- VueJS
- Киберпанк
Js != Java или как совместить разное
Начал учить JS. Увлекло, получается, нравится и т.д. Сказали учить ооп и php, НО. Хоть Java никак не относится к JS, хочется учить и ее. Вопрос к профессионалам. Можно ли эти 2 языка учить паралельно? Не будет ли потом каши и путанницы в голове? Какая последовательность должна быть, чтобы знать в итоге и то, и другое? Не кидайте тапками за возможный тупизм и орфографию 🙂
�� Подобається Сподобалось 0
До обраного В обраному 0
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
239 коментарів
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
свежая шутка на эту тему от HR-a одной из украинских компаний. после отсылки резюме javascript developer получаю ответ «мы не сможем пригласить Вас на собеседование, так как не работаем с технологиями Java»
Подсумируем тему: мои вбросы удались, защитники js высказались. В результате все довольны. Кроме автора темы, он так и не получил внятных ответов 🙁
Твої вкидання вдалися б, якби цього ніхто не помічав. Але це бачили навіть сліпі. Ну, в когось — так, був час посратися, але то таке.
Подиви список топ коментарів — то практично все відповіді на мої вкидання. Хіба це не перемога?
Іди візьми з полиці пиріжок, воїн-побєдун.
нє, ну всяке бачив. Але гордитись тим що ти троль, притому жирний троль, це трішки перебор =))))
Зачем было именно мою тему засирать? А потом вы жалуетесь, что из новеньких никто не соображает, как вы. Сами же убиваете неубиенное.
Я больше не буду засирать темы, стану хорошим 🙂
Big Brother’s watching you
Java и JS как свинка и морская свинка.
не мучьте организм.
зарплаты у тех и этих похожие, перспективы тоже.
Даааа! Спросил «Можно или лучше не надо. », а получил «Что?. Даже без опыта я понимаю, что все ЯП нужны, если они еще существуют. Завтра может появиться человек, который скажет, что избрел визульный ЯП в виртуальной реальности и что, теперь? Не учить вообще ничего? Каждый из вас прав по-своему. Кажлый учить начинал язык не за его оплату или сложность, а потому, что он нравился на тот момент. О чем тогда спор? Тем более, что тема топика совсем другая.
Не обращай внимания на срачи, мы просто развлекаемся.
Можно или лучше не надо, это все субъективно. Известно одно, чем больше у вас багаж знаний — тем лучше. Если у вас получается учить 2 языка, то почему нет?
Но и распыляться не надо. По сути, как я вроде уже и писал тут, надо смотреть на конкретную область, на вакансии в ней и что в них требуются, и учить это.
Второй язык можно взять как хобби )
Лучше чтобы работа была хобби))
В нашей сфере обычно наоборот, хобби превращается работу и приходится искать новое хобби.
Anna Petrova Senior Software Developer 27.07.2015 13:41
Давайте не забывать, что программы пишет не язык программирования, каким бы крутым он не был, а человек. Язык — это всего лишь инструмент. Есть крутые проекты на PHP, есть провальные убожества на . Ключевым был, есть и остается человек и то, что у него в голове, а не язык.
С# и его фреймворк .Net новее и похож на жабу, сейчас я бы начинал с него, жаба старый суровый энтерпрайз (кроме андроида) где редко что-то меняют. Не исключено, что большинство кода с которым будете работать написано индусами в стиле тех времен версии 1.5 и ниже.
жаба старый суровый энтерпрайз (кроме андроида) где редко что-то меняют.
Ой, деточка, а ну-ка расскажи-ко свои фантазии о состоянии джава инфраструктуры на сегодняшний день?
Времена J2EE уже давно прошли. В том же суровом энтерпрайзе уже очень много чего поменялось, а там где не поменялось, там и дотНет версии 2.0.
Blitz ASP.net Developer 27.07.2015 12:37
А что сейчас в тренде?
Anna Petrova Senior Software Developer 27.07.2015 13:07
Набирают обороты технологии, на которых можно быстро, но не в ущерб качеству, делать стартапы
Blitz ASP.net Developer 27.07.2015 13:12
Я хотел бы услышать конкретные названия.
Я хотел бы услышать конкретные названия.
Если вы про всякое «легковесное», то dou.ua/. a/digests/java-digest-15
А что сейчас в тренде?
В том то и фишка что одного «тренда» нет. Времена гегемонии «кровавого энтерпрайза» уже прошли:
— JEE и Spring стали куда более дружественными, в том числе и фрейворки «все в одном» на их основе;
— появилась куча перенесенных идей с других платформ (хотя бы РоР-подобные и Синатро-подобные фремворки);
— всякие Вертексы и тд;
— наработки НетФликса по микросервисам;
— так называемая «функциональная парадигма» идет в массы.
Blitz ASP.net Developer 27.07.2015 15:43
Понятно. Похоже рано или поздно разница между нашими стеками таки исчезнут.
Учить fullstack js, у него большие перспективы. Дальше смотреть куда планируете развиваться. Хотите работать в большой энтерпрайз компании и жрать бесплатное печенье, то Java. Хотите в будущем поднять свой стартап на коленке, или фрилансить живя на берегу моря то php (в паре с js тут перспектива конечно лучше, так как нужны многостаночники). Плюс есть куча замечательных технологий под разные задачи. Тот же golang (серверные приложения под любые задачи), scala (здравствуй java), ror, swift, и тд.
Но, в программирование самое главное практика. Вам надо выбирать тот стек в котором у вас есть возможность практиковаться.
Хотите в будущем поднять свой стартап на коленке, или фрилансить живя на берегу моря то php
Странно, по данным доу пхп получает меньше долларов, чем java. Это я к теме о море
Так на php и программистов меньше, так все джумла кодеры. Хороший программист на любой технологии получает столько сколько ему нужно. Есть вакансии на js с ЗП которые джавистами не снились.
+ меньше конкурс на синьера при выборе из колектива 😉
Господа, перестаньте перепалку относительно языков! Каждый выбирает, что ему по душе. Давайте останемся при своих мнениях и просто дадим КОНСТРУКТИВНУЮ пищу для размышлений. Подрастающее поколение не так уж и глупо и в состоянии разобраться со своими мыслями.
ты начинаешь тему «что лучше, жава, жс или похепе» и ждешь конструктива? да ты оптимист!
Мне наоборот это всене нужно. Вопрос был уточняющим. См. в топике. Амбиции у людей разыгрались )
Олег Шестаков Forever Jun 28.07.2015 00:13
Лучше не надо вместе учить Java и PHP, будет каша в голове. Что-то одно. JS позже, т. к. это (в основном) язык front-end разработки. А там уже можно смотреть на Node.js.
А еще можно учить php, python, node.js, android, ios, c, c++, c#. Все сразу. Потом можно в портфолио круто написать эти языки в графу «знаю».
Угу.и их будет знать только это поле резюме, а сам буду знать только их названия
Это был сарказм. Не понимаю зачем вам надо распыляться изучая сразу и java и js. Вы же учитесь чтобы получить работу, а не чтобы учиться? Смотрите на область. Я не знаю что там с веб java, но если цель веб php/python и что там еще, то тогда да, надо и js выучить и html, css и потом еще что то.JS основы учятся за неделю-две, потом еще неделю на jquery и можно в бой. А то что говорят что в JS надо понять какую то дзен — не верьте. JS — максимально упрощенный язык чтобы любая обезьяна могла «спец эффекты» писать, точнее ляпать. Веб — это быдлокодинг, и джуниор 100% в него попадет. И да, быдлокодинг настолько, что даже там где можно на чистом js написать — там пишут на jquery. Не быдлокодинг начинается наверно только с уровня мидл и выше, и то хз, не везде. Ну или попадите в хорошую компанию. Вообщем все неаселяторы JAVA и подобного сложного идут в веб, который я выше описал. А JAVA — это для настоящих программистов, там жуниора быдлокодера не возьмут, в то время как в пехопе даже ООП много кто не знает из джунов.
Gennady Dogaev full-stack web developer (freelance) 26.07.2015 18:21
Веб — это быдлокодинг
Обычно быдлокодеры так и говорят. При этом часто они быдлокодят на других языках, например Java.
В JAVA такой порог входа, что не всякий быдлокодер пройдет. Ну и андроид разработка дело посложнее этих ваших сайтиков типичных. Потому если я и быдлокодер, то поэлитнее пхп быдлокодеров.
Євген Козлов Front-end developer в SoftServe 26.07.2015 19:49
о, элитарность Джавы всплыла.
да что такое Java против Lisp’a?!
да что там за такой «порох входа» супротив R?
Ну, тут уже не знаю. Может у кого есть таблица элитарности языков?
да что такое Java против Lisp’a?!
На джаве крутится весь мир, а что на лиспе вообще написали грандиозного, что кто-то заикнулся сравнивать его с джавой?
Євген Козлов Front-end developer в SoftServe 26.07.2015 21:47
илитарность же! при чем тут «популярность» или «распространенность»?
вы не попали на одну волну с нами, попробуйте еще раз
Я про элитарность не писал, я просто писал что странно сравнивать индустриальный инструмент с наречием на котором разговаривают несуществующие единороги.
Та нет, чистая правда.
Олег Шестаков Forever Jun 28.07.2015 00:15
Ну на Lisp-е написано ядро Grammarly. Вас это не впечатляет?
Я не берусь судить об эпичности ядра грамарли, т.к. слабо знаком с ним. Думаю еще два-3 таких же примера в мире наберется, обьясняющиеся тем что какой то программист в начале разработки не выбрал более удачный инструмент в силу религиозных заблуждений.
Самый популярный LISP работает на JVM 🙂
На JVM может работать усе.
нужно только скомпилировать в байткод.
да что такое Java против Lisp’a?!
а что такое джава и лисп против хаскеля и монад?))))
Почему-то две цитаты всплыли:
«скрипачи поспорили, чьи бандиты круче»,
«в сортах говна не разбираюсь»
Розкажи Хаслел девелоперам, про твій високий поріг входу на Java.
Yegor Roganov Python Developer в EVO 26.07.2015 20:47
На jquery уже мало кто пишет, вы остали от веб-технологий на несколько лет. Почитайте хотя бы про React, Ember и Angular.
Про илитарность Java, в которую джуниором до недавнего времени брали после месячных курсов, очень смешно.
На jquery уже мало кто пишет
Лол. Откройте вакансии и биржи фриланса. Новомодное != популярное.
По поводу JAVA, даже не начинайте. Сами понимаете сколько нужно недель с JS, чтобы уже взяли клепать формочки.
Євген Козлов Front-end developer в SoftServe 26.07.2015 20:58
Сами понимаете сколько нужно недель с JS, чтобы уже взяли клепать формочки.
то-то я смотрю, у нас вакансии висят.
ну на клепать формочки это вакансии больше под лейблой «нужен пехопе программист». А то что таких вакансий куча — так это потому что нынче каждой лавочке нужен свой сайт на вордпрес. Хотя не уверен что жуниоры так уж и нужны еще, все прутся.
Если бы с JS было бы все так просто, то Ваш мобайл засунули туда же, где сейчас находятся basic и dos
Жабоскрипт крив для серьезной прикладной разработки, потому ничего он не засунет.
Євген Козлов Front-end developer в SoftServe 26.07.2015 21:06
для серьезной прикладной разработки
что же вы называете «серьезной прикладной разработкой», можно узнать?
То что в мобайле
Євген Козлов Front-end developer в SoftServe 26.07.2015 21:19
например, секундомер, ага.
или очередной клиент для Джаббера.
или программа для заказа еды под определенную службу доставки.
google maps, конечно, может быть реализован исключительно под Андроид, а в браузере — на джаваскрипте! — его сделать не под силу.
про всякие asm.js и прочие dosbox-like даже писать не охота.
«Особенность Firefox OS в том, что на ней будут запускаться только те приложения, которые основаны на web-технологиях (HTML5, CSS и JavaScript). Ограничившись только языками веб-программирования, разработчики платформы хотят ускорить работу системы при выполнении некоторых задач. Основными недостатками вышеописанного является затруднённая разработка сложных приложений, в этом случае разработчики прибегают к использованию JavaScript, который тоже имеет ограничения.»
т.е. Моззила фаундейшн джаваскрипт для мобил типа одобряет)
Мало ли что она одобряет, она к андроиду или иос(а это практически весь рынок) отношения не имеет, так что шавка гавкает а паровоз идет.
так что шавка гавкает
ничего себе шавка))
она к андроиду или иос(а это практически весь рынок) отношения не имеет
ну так и «мелкомягкие» к андроиду и к иос тоже отношения не имеют походу — так что тоже шавка со своими виндоусфонами)) а еще есть канноникал с тизеном.
Ну так подсчитайте процент использования мобильных ОС. Напомните, на каком там месте это чудо файерфокс ОС? А то я даже не слышал. Кстати, их браузер еще живой?
П.С. мне очень жаль людей, которые лоханулись и купили смартфон с файерфокс ос.
меня не интересует процент использования мобильных осей) если я буду покупать смартфон мне будет как-то без разницы какую она ось использует) и если у меня будет хватать деньгов на мобилу с Firefox OS и будет выбор, и мобила с файерфоксом мне понравиться (по функционалу, удобству и прочему) — куплю ее, несмотря, что она не в тренде)
Кстати, их браузер еще живой?
живее всех живых)
П.С. мне очень жаль людей, которые лоханулись и купили смартфон с файерфокс ос.
а чем они лоханулись, если допустим их устраивает файерфок ос?)
это как владелец мерса скажет, что ему жаль человека, который купил мазду или опель (несмотря на то, что раз человек купил опель, то это значит, что опель его по каким-то сугубо личным причинам вполне устроил).
P.S. если чел купил Firefox OS, а потом внезапно понял, что не то, что он хотел — это его проблемы, пусть мучается)) потом десять раз подумает перед тем как покупать ту или иную современную мобилу)
А чем их может устраивать смарт на Динозавр ОС? Под такое чудо никто даже апликухи не пишет. К примеру хочет человек скачать приложение к понравившемуся сайту, смотрит, а там только под иос и андроид. То что ты бы купил это чудо — ничего не доказывает. Не все такие умные как ты.
А чем их может устраивать смарт на Динозавр ОС? Под такое чудо никто даже апликухи не пишет.
1. аппаликухи сами мозиловцы и пишут вроде)
2. а если челу не нужны навороченные проги, которые есть тока под андроид/иос? у каждого свои требования к мобиле/смартфону.
Вот я свою Нокию 6630 использую преимущественно как читалку, а также чтобы в пару игр поиграть типа шашки/шахматы/тетрис. Стоит даже интерпретатор Питона для симбиан (версия 2.4 вроде). И мне пока навороты андроида и яблофона не нужны)
Хотя да, хотелось бы иметь смартфон, чтобы тестить приложения и сайты на смартфоне, например. Ну и чтобы там был текстовый редактор с подсветкой основных языков программирования.
То что ты бы купил это чудо — ничего не доказывает.
а я и не собираюсь никому ничего доказывать, я просто о том, что Firefox OS и подход «джаваскрипт для мобил» вполне имеет право на существование.
И я не настолько умный, как хотелось бы (иначе бы давно уже был бы миллионером и тусовал с Цукербергом).
аппаликухи сами мозиловцы
а если челу не нужны навороченные проги
Боюсь, что с выходом windows10, android окажется в глубоком тылу.
Уже сейчас много моих знакомых переходит на смартфоны с windows-phone.
Или, что более реалистично, MS в очередной раз зафейлит, на старые виндофоны нельзя будет поставить (так же как на старые виндофоны нельзя поставить под них перестанут выпускать апдейты и, в итоге, софт, нород спросит у MS какого хрена и горстка лояльных виндофилов окончательно разбредется по другим платформам.
Это руки у кого-то кривые. Возьмите любой популярный сайт и отрубите в браузере JSю Посмотрим, какие впечатление у вас он оставит. Я не просил ничего оценивать и не сравниваю ваш мобайл ни с чем более. Тем более, что не просил совета, что мне учить, а что нет. Сидите и тыцайте по манюне-экранчику в поиске багов. Нет ответа по существу- проходим на следующую остановку. Давайте уже закончим на том!
Я вас удивлю, но в веб 3.0 javascript потеснят c++,c# и еще пару языков, на которых будут писать КОМПИЛИРУЕМЫЕ фронт енд апликухи. Называется эта вещь webassembly. Усе, конец этому языку формочек, теперь только серьезный фронт енд как в мобайле и десктопе.
кто там следующий на очереди потеснить javascript в веб фронтенде?
WebAssembly, и писать будут под это на си шарпе и еще пару языках. Эту вещь разрабатывают Google, Microsoft, Mozilla и другие. Еще вопросы?
Google, Microsoft, Mozilla и другие. Еще вопросы?
Я давненько ушел с платформы MS и не слежу за новостями, поэтому вопрос пока один, эти товарищи уже пристрелили Silverlight из гуманитарных соображений, или он все еще трепыхается и агонирует?
А я не слежу что такое
Silverlight
Я кинул название того, что будет в веб 3.0. И это внедрят корпорации очень большие, и некоторые из них создатели браузеров.
А я не слежу что такое
Плохо что не следите. Если бы следили, знали бы, каких успехов достигают мегакорпорации пытаясь в очередной раз убить Javascript.
Я кинул название того, что будет в веб 3.0.
Костыль, разработанный мегакорпорациями за 5 минут на коленке, работающий в двух с половиной браузерах будет всем рулить в web 3.0. Спасибо, почти поверил.
И это внедрят корпорации очень большие, и некоторые из них создатели браузеров.
Эти большие мегакорпорации 2 года никак не могут запилить совместимые реализации HTML5 MSE в своих же браузерах по стандарту, который они же сами разработали.
да что там говорить, они до сих пор не сделали чтоб в их браузерах одинаково выполнялся Javascript, к слову, уже 20 лет языку стукнуло.
В итоге что-то сделают, оно будет работать в двух с половиной браузерах, причем в каждом браузере по-своему.
Ясно, что никто на это не перейдет, потому что никому не нужно веб-приложение, которое не работает в фаерфоксе/IE12/you name it.
Корпорации посмотрят на это и начнут потихоньку выпиливать эту хрень из браузеров, потому что никто ее не юзает, а поддерживать, фиксить дыры, и приводить в соответствие со «стандартом» стоит денег.
Обманутые вкладчики разработчики, поверившие корпорациям, офигеют от того, что в их любимом браузере их приложение вдруг перестало работать после апдейта, и в срочном порядке начнут переписывать свои приложения на Javascript, как сейчас переписывают с Silverlight на Javascript.