CC BY
10
https://orcid.org/0000-0003-4326-3030
УДК 004.4 Д.В. РАТОВ*
МОДЕЛЬ МОДУЛЯ 1НТЕРФЕЙСУ КОРИСТУВАЧА 1НФОРМАЩЙНО1 WEB-СИСТЕМИ
Схiдноукраíнський нацiональний унiверситет ÍMeHÍ Володимира Даля, м. Северодонецьк, Украша_
Анотаця. У cmammi розглядаються архтектурний шаблон i методи побудови модуля для оргаш-зацИ роботи втонног тформацтног web-системи формування медичних сертифiкатiв. Для eupi-шення даного завдання застосован сучасн засоби веб-програмування i розробки програмного за-безпечення: створений модуль iз pеалiзацieю об'eктiв JavaScript - диспетчер вжон i клас вжонного ттерактивного ттерфейсу, як дозволяють функщонувати web-додатку при оргашзацИ' хмарних технологт. Розглянуто програмну pеалiзацiю i наведен результати практичного використання розробленого модуля з об'ектами i класами. Запропонований у pоботi шаблон архтектури модуля для pеалiзацiг диспетчера та функцюнала користувацького втонного ттерфейсу дозволив ство-рити модуль iнфоpмацiйног системи для оргамзацИ бiзнес-логiкu при pоботi з медичними серти-фтатами. Модульний пiдхiд позитивно позначився на швuдкостi призначеного для користувача ттерфейсу i можлuвостi масштабування функцюнала самог системи при pеалiзацiг хмарних технологт. Завдяки модульному тдходу, час рендеринга web-форм iз вuхiднuмu даними у бiльшостi випадюв е дуже незначним у поpiвняннi з часом, необхiднuм браузеру для розбору i вiдобpаження всього масиву даних бази, що позитивно позначаеться на швuдкостi призначеного для користувача ттерфейсу. Величезне практичне значення мае генеращя web-форм, тому що налагодження помилоку цт програмтй стpуктуpi е болючим мiсцем багатьох фреймворюв. Результати використання показали, що мехатзм модульного створення диспетчера i втонного ттерактивного iн-терфейсу web-форм не ттьки оргатчно вписуеться в уже iснуючi технологи побудови web-додатюв, але i сам мае достаттй потенщал, щоб у майбутньому стати ядром хмарних технологт розробки багатокористувацьких тформацтних систем i web-сеpвiсiв.
Ключов1 слова: модель, модуль, клас ттерфейсу користувача, диспетчер втон, хмарш обчислення, фреймворк.
Аннотация. В статье рассматриваются архитектурный шаблон и методы построения модуля для организации работы оконной информационной web-системы формирования медицинских сертификатов. Для решения данной задачи применены современные средства веб-программирования и разработки программного обеспечения: создан модуль с реализацией объектов JavaScript - диспетчер окон и класс оконного интерактивного интерфейса, которые позволяют работать web-приложения при организации облачных технологий. Рассмотрена программная реализация и приведены результаты практического использования разработанного модуля с объектами и классами. Предложенный в работе шаблон архитектуры модуля для реализации диспетчера и функционала пользовательского оконного интерфейса позволил создать модуль информационной системы для организации бизнес-логики при работе с медицинскими сертификатами. Модульный подход положительно сказался на скорости пользовательского интерфейса и возможности масштабирования функционала самой системы при реализации облачных технологий. Благодаря модульному подходу, время рендеринга web-форм с исходными данными в большинстве случаев очень незначительно по сравнению со временем, необходимым браузеру для разбора и отображения всего массива данных базы, что положительно сказывается на скорости пользовательского интерфейса. Огромное практическое значение имеет генерация web-форм, так как налаживание ошибок в этой программной структуре является больным местом многих фреймворков. Результаты использования показали, что механизм модульного создания диспетчера и оконного интерактивного интерфейса web-форм не только органично вписывается в уже существующие технологии построения web-приложений, но и сам имеет достаточный потенциал, чтобы в будущем стать ядром облачных технологий разработки многопользовательских информационных систем и web- сервисов.
Ключевые слова: модель, модуль, класс интерфейса пользователя, диспетчер окон, облачные вычисления, фреймворк.
© Ратов Д.В., 2020
ISSN 1028-9763. Математичш машини i системи, 2020, № 4
Abstract. The paper considers the architectural template and methods of building a module for organizing the work of the window information web-system for the formation of medical certificates. To solve this problem, modern tools of web programming and software development are used: a module with the implementation of JavaScript objects - window manager and a class of window interactive interface, which allow the web application to function in the organization of cloud technologies. The software implementation is considered and the results of practical use of the developed module with objects and classes are given. The proposed architecture template of the module for the implementation of the manager and the functionality of the user window interface allowed to create a module of the information system for the organization of business logic when working with medical certificates. The modular approach has had a positive effect on the sensitivity of the user interface and the ability to scale the functionality of the system itself in the implementation of cloud technologies. Due to the modular approach, the rendering time of web-forms with the original data in most cases is very small compared to the time required by the browser to parse and display the entire database array, which has a positive effect on the sensitivity of the user interface. The generation of web-forms is of great practical importance, because debugging in this software structure is a weak point for many frameworks. The results of use showed that the mechanism of modular creation of the manager and the window interactive interface of web-forms not only organically fits into already existing technologies of construction of web-applications, but also has sufficient potential to become the core of cloud technologies of development of multiuser information systems and web- services.
Keywords: pattern, module, user interface class, window manager, cloud computing, framework.
DOI: 10.34121/1028-9763-2020-4-74-81
1. Вступ
Безперервний розвиток шформацшних технологш i техшчних характеристик мереж 1нте-рнет сприяв пщвищенню штересу до розробки шформацшних систем i3 використанням хмарних технологш [1]. Хмарш обчислення (вщ англ. Cloud computing) спрямоваш на на-дання користувачу комп'ютерних ресурав i потужностей у виглядi iнтернет-сервiсiв i ш-формацшних web-систем.
На сьогодшшнш день юнують web-технологи, i на ix базi розробленi бiблiотеки i фреймворки для створення web-додаткiв та штерфейав користувача, призначених для ро-боти iнформацiйниx систем у браузерах. Процеси стандартизацп мов HTML [2], CSS [3] i javascript [4] дозволили досягти не тшьки високого ступеня кросплатформних технологш, призначених для користувача штерфейав, але i досить високого ступеня кросбраузерносп, тому використання вiдповiдниx стандартiв при побудовi web-додаткiв стало домiнуючим пiдxодом.
При розробщ модульних iнформацiйниx систем одних тшьки стандар^в виявляеть-ся недостатньо. Потрiбнi шаблони проектування, бiблiотеки стандартних елемешив управ-лiння, засоби пiдтримки лопки роботи систем (наприклад, Presenter у моделi MVP [5]) та ш. Вiдповiднi iнструментальнi засоби все ще знаходяться у стадп становлення. Як прикла-ди з розряду вшьно розповсюджуваних продуктiв можна привести MediaWiki [6], Drupal [7], WordPress [8]. Неминучою розплатою для таких систем е прив'язка до серверних технологш, що обмежуе можливосп застосування в ситуащях, коли серверне оточення для розробника фшсоване. При розглядi клiентськиx бiблiотек, що не залежать вщ серверних технологш, спостерiгаеться ix спецiалiзацiя: на маншуляцп з DOM-моделлю (jQuery [9], Zepto.js [10]), стильовому оформленш сторiнок i елементах управлшня (Bootstrap [11], jQuery UI [12], w2ui [13]), побудовi каркасiв додатюв (AngularJS [14], Backbone.js [15], Knockout [16]). При цьому використання бiблiотек i модулiв JavaScript дае величезш переваги при розробцi веб-додатюв. Серед очевидних плюсiв - зменшення обсягу коду, тдви-щення зручносп читання, пiдтримка кросбраузерностi. Крiм того, розробник отримуе мо-жливiсть правильно структурувати програмний код, тому що необхщшсть фiзично змшу-вати HTML i JavaScript практично зникае. Незважаючи на багатий набiр серед юнуючих iнструментальниx засобiв, залишаються завдання, виршення яких актуальне при розробцi
шформацшних систем: наявшсть диспетчера призначеного для користувача штерфейсу, контроль цшсносп даних при можливосп доступу до системи багатьох користувачiв.
Метою cmammi е створення архiтектурного шаблона i методу побудови модулiв для оргашзацп роботи вшонно'! шформацшно'' web-системи на прикладi розробленого JavaS-cript-модуля, призначеного для оргашзацп бiзнес-логiки при роботi з медичними сертифь катами.
Постановка проблеми: незважаючи на багатий набiр iснуючих шструментальних засобiв, залишаються завдання, вирiшення яких актуальне при розробщ шформацшних web-орiентованих систем: створення диспетчера штерактивного штерфейсу, призначеного для користувача, контроль цшсносп даних при можливосп доступу до даних системи багатьох користувачiв.
Результати використання модульно'! архiтектури показали, що розглянутий меха-нiзм створення диспетчера i вшонного iнтерактивного штерфейсу web-форм не тшьки ор-гашчно вписуеться в уже iснуючi технологи побудови web-додатюв, але i сам мае достат-нiй потенцiал, щоб у майбутньому стати ядром хмарних технологiй розробки багатокорис-тувацьких шформацшних систем i web-сервiсiв.
2. Розробка архггектури модуля
Модуль, який розроблюеться, складаеться iз двох вiдносно незалежних компонентiв, що взаемодiють один з одним. Компоненти реалiзованi у виглядi об'ектiв JavaScript: об'ект диспетчер вшон i клас вiконного iнтерактивного штерфейсу. Скористаемося наявним у JavaScript мехашзмом доступу до об'екпв за допомогою оператора new, який використову-еться для створення об'екпв за допомогою функцп власного конструктора, тим самим створюючи аналог класу. Такий конструктор збер^ае екземпляр об'екта в замиканш. Це дозволяе запобiгати змiнам об'екта за межами функцп-конструктора. При цьому викорис-товуеться шаблон створення об'екпв - модуль i шаблон iзольованого простору iмен [17].
Щоб без модифшацп головних об'екпв модуля мшяти не тiльки зовнiшнiй вигляд компонент форми, що вщображаються, але i !'х поведiнку, при розробцi застосовувався принцип проектування, який вщомий як шаблонний метод [18]. Код бiблiотеки мiстить метод установки функцiй зворотного виклику там, де розробнику необхщно доповнити стандартну обробку даних i подш сво'ми дiями.
Механiзм штерактивного штерфейсу, призначеного для користувача, ^м функцш роботи з компонентами штерфейсу, повинен вщповщати таким вимогам:
• об'ект web-форми повинен мати метод для вщправки ajax-запиту на сервер i вм^и обробляти вiдповiдi сервера;
• об'ект web-форми може бути як простим набором полiв, так i мютити тдроздши, вкладки або таблищ;
• зовнiшнiй вигляд web-форм повинен мати можливють перенастроювання;
• на сторшщ може бути кшька web-форм, якi можуть взаемодiяти мiж собою.
Розроблений диспетчер вiкон (ListWin) представляе собою JavaScript-об'ект, який:
• збер^ае колекцiю згенерованих web-форм з !'х компонентами та налаштуваннями;
• надае високорiвневе API для маншулювання web-формами i даними iз ^ентських елементiв управлiння;
• забезпечуе взаемод^ web-форми з DOM-моделлю web-документа;
• виконуе попередню вiзуалiзацiю запущених процеав на формах;
• забезпечуе для елемешив управлiння механiзм drag and drop.
Реалiзацiя диспетчера ListWin складаеться iз власного конструктора iз privat-полями i public-методами. На рис. 1 розглянута об'ектна арх^ектура диспетчера.
var ListWin = function Jet Forms = [], numNewForm = 3 curObj = zlndex = 9B; ihis.getDocumentHeigit т hi s.get Do с ume ntWidti
о ■:
// нассив форм
// очередной уникальный идентификатор формы
// номер текущего элемент (формы) (номер в массиве Forms)
\ ' начальный уровень форм
function ( К ... // высота всей страницы function( ){ ,.}; // ширина всей страницы
ihii.createNeKForin = -unction(аггРгор){ , ., // создание новой формы с параметрами This.getForm = function (nu«){ ... }; // возвращаем ссылку на форму лс её номеру This, set Zlndex = f.inction (curNum){ ... }; // перемещение на верхний уровень ihii.delFo™ = function ( ){ ... }; // удаление .пекущей формы ~hi;.setTimeoutlv'ai-Screen = function itimeOutK ,., }; // закрытие текущей формы ihii.loadlJait = function (modeL, modeS){ ... }; // прелоид выполнения операции This, empty Form = f.inction (cap, len){ ,,, }; // проверка существования форт This, mo used own DAD = function (object, funcMouseUp, hideClone) -[...} // drag arid йгор
Рисунок 1 - Об'ектна apxiTeKTypa диспетчера
JavaScript-об'ект вшонного ттерактивного ттерфейсу вщповщае за функщонуван-ня додатку, обробку подш компонент-форм i включае в себе:
• методи рендеринга i маншулювання web-формою: init(), changeCaption(), changeVisible(), setWidth(), setHeight(), WaitLoad();
• конструктор тригерiв подiй web-форми: initializationEvent();
• конструктор обробниюв подiй елементiв yправлiння web-форми:addEvent().
Розглянемо програмну реалiзацiю форми-об'екта вшонного iнтерфейсy (рис. 2). Форма розглядаеться як самостшний фрагмент призначеного для користувача ттерфейсу i3 власною логiкою поведiнки. Поняття форми за призначенням схоже з визначенням у спе-цифшацп HTML, але набагато функщональшше у способах реалiзацiï i не обмежуеться DOM-елементом типу FORM. Функцп об'екта реалiзованi у виглядi його public-методiв.
1 2
3
4
5
6 7 3 9
10 11 12
13
14
15
var i,'inObjecT= -jnction () {
Let id = 6, // идентификатор формы (главного контейнера div)
idСontaineг; \'/ идентификатор контейнера формы this.collObj = {}j this, klâ it Load = -iinc"zicr(flflg){ }
This.iniT = function Cp_nunij p_captior, p_visible){ .„ > // инициализация объекта
This .changeCaption = -jnction (p_iarie){ ,., // смена заголовка формы
This,initializationEveni = f.inction(){„. // инициализация событий движения формы
This .thangeVisible = -jrction {p_viiible)-[ // изменение видимости формы
ihis,setWidtti = -iinciicr(w){ ■■■ // изменение ширины формы
ihis. 5etHei.ght = fjnction(h){ }; // изменение высоты формы
This.addObj = function (iwmejibj, an-Prcp){ „. // добавление объекта с событиями
This.addEvent = -iincTicnCinask, event, strFunc){ ,„, }; //назначение собьввий объектам
This.wXHR = lew XHRClassf);
Рисунок 2 - Об'ект вшонного штерфейсу
За допомогою об'екта XHRClass реалiзyеться транспортний рiвень взаемоди клiента з сервером, а саме завантаження даних для web-форм iз сервера, збереження даних на сервер, асинхронш AJAX-запити до методiв php-об'ектiв сервера. Вся передача даних здшс-нюеться у фоновому режимi без перезавантаження сторшки [19]. Для передачi структуро-ваних даних мiж клiентом i сервером використовуеться формат JSON.
Схема взаемоди компонент модуля представлена на рис. 3.
Рисунок 3 - Схема взаемодн компонент модуля
При конструюванш окремо взятого прикладного модуля на 6аз1 описаних об'екпв диспетчера i вшонного штерактивного штерфейсу основним принципом створення об'екпв можуть виступати структурно-iерархiчнi зв'язки. Такий пщхщ дозволяе оформити у виглядi прикладних модулiв окремi iнтерактивнi штерфейси.
На рiвнi взаемоди web-форм мiж собою структурнi пiдходи вже не е достатньо ефе-ктивними, тому що лише мале число форм знаходиться в фшсованих вiдносинах виду «го-ловний-тдлеглий». Тому на даному рiвнi проведений перехiд до мережево'1 моделi органь заци (рис. 3): форми win_1, win_2 е незалежними д^чими об'ектами, що реагують на поди сво'1'х компонент за допомогою функцiй зворотного виклику, якi призначеш при генеру-ваннi штерактивно'1' форми диспетчером ListWin.
3. Побудова web-системи медичноТ сертифжацн
Для оргашзаци хмарних обчислень i побудови web-системи на сервернш сторонi було ви-користане програмне забезпечення:
• операцшна система сервера - FreeBSD version 11.2;
• web-сервер Apache;
• препроцесор гипертексту PHP version 7.4;
• система управлшня баз даних - MySQL server version 5.7.31.
Для роботи на сторош кшента модулiв програмного забезпечення web-системи сер-тифкацп, розроблено'1' на основi мови JavaScript i стандартiв Standard ECMA-262, необхщ-на будь-яка операцшна система, що тдтримуе www-навiгатор з штерпретатором мови JavaScript.
Застосуемо запропоновану модель i арх^ектурний шаблон до реалiзацii модуля фо-рмування та обробки медичних сертифшатсв Modul_Sertifikat (рис. 4). За допомогою методу loadFormBaza() об'ект забезпечуе маншуляци з DOM-моделлю web-документа. При цьому використовуються конструктор createNewForm() диспетчера ListWin i його метод addObj() для додавання елеменпв управлiння з обробниками подш.
var Modul_Sertifikat = {name : 'Modul_5ertifikat', formBaza : null., arOrderBaza : {order : 'FIO', dir i 'ASC'}., arSymbolDir : {'DESC' : '£#9650;', 'ASС' : '£#9660;'} >; Modul_Sei~tifikat. load Form Baza = function(){ let optOglad = this.optionOfArray(this.arOglad);
this.formBaza = ListWin.createNewForm({caption : 'Сертиф1кати про гроходженнл проф1лактичного огляду',
height: 235, width : 880, visible : 1, WaitScreen : 9}); if (this.formBaza) with (this.formBazaH
addObj('div'^ {data : 1П1П: pos : [439, 55], style:'font-size:14pt; colori#132F76;'>); addObj('input', {id : 'FIO', type:'text', pos : [480, 35], wh : [288, 22], class : 'default1пр', style : 'font-size:10pt; border:2px solid 392C8ED;', events ¡{oninput : this.name+'.inputData(this, true);' } }); adddbj('table', {id : 'kolontitul_tabl', data : kolontitul_tabl, class i 'tab_class', wh : [B35, 39],
style : 1 margin-left:-2px; margin-top:BSpx; border: solid 2px #759cdd; '} ); addObjC'div'j {id : 'containerTabl', wh : [B35, 469], pos : [13, 165],
style : 'overflow: hidden auto; border: solid 2px #759cddj. visibility: hidden;'} }'„ addObj('table', {id : 'tabl1, parent i 1 containerTabl', data : '<tbodyx/tbody>'3 class : ЧаЬ_с1а55',
style : 'position: relative; width:108%;' } ); addObjC'img'j {id : 'WaitLoad', src;: "img/loader.gif", wh : [79, 70], style : 'left:45Sfi; top:25£;'}); addObj('button 1, {data : '<span style="font-weight:bold; ">◈ Додати нового юиента</5рап>', class : 'buttonform', style : 'right:199px; height:59px; width:145px;1, id : 'buttoning events : {onmouseup :: this.name+' .cartaPacient{);'} }); addObj("button', {data : 'Закритн', class : 'buttonform', style : 'right:20px; font-size: 12pt;'J events i {onmouseup : 'onClick_CloseForm()1} });
}
Mod u l_Se rtifikat.refreshBazaO;
};
Рисунок 4 - Модуль обробки медичних сертифшата
Шсля генерацп форми викликасться метод refreshBaza() (рис. 5). У методi ajax-запит направляеться на сервер скрипта getSertifikatphp у метод ^ШЮ класу, який готуе необ-хiднi данi i органiзовуе логiку для ^ентсько^' сторони. Пiдготовлена iнформацiя в JSON-об,ектi доставляеться у ^ентський браузер, де за допомогою аношмно^' функцп зворотно-го виклику перетворюеться в параметри елемеетпв управлiння. Доступ до елемеетпв форми виконуеться через колекщю об,ектiв форми collObj.
Modul_Sertifikat.refreshBaza = function(){ let kodMed = this .formBaza. collObj[ 'select Med'] .value; this.formBaza.WaitLoad(true);
this.formBaza,wXHR.query({param:'listFIO', idustanova : kodMed, FIO : formBaza.collQbj['FIO'].value,
order : this.arOrderBaza.order, dir : this.arOrderBaza.dir}, 'php/getSertifikat.php'); this.formBaza.wXHR.request.onreadystatechange = function(){ if (this.readyState == 4 && this.status == 2Q0){ Modul_Sertifikat.formBaza.setHeight(798); Mod ul_Se rtifikat.fo rmBa za.WaitLoad(false);
Modul_Sertifikat.formBaza,collObj['containerTabl'].style.visibility = 'visible'; answer = this.responseText.split('|');
Modul_Sertifikat.formBaza,collObj['tabl'].querySelector('tbody').innerHTML = answer[9]; System.changeWidthTabl(formBaza.collObj['containerTabl'], formBaza.collObj['tabl'], 859, 831);
>
}
Рисунок 5 - Метод об'екта для запиту даних на cepBepi
На рис. 6 показаний код класу, який отримуе параметр param i3 запиту request i вико-нуе всю бiзнec-логiку на сторон сервера.
<?php
header*"Content-type: text/html; charset=UTF-8"); include_once "Lists.php"; include_on.ce "IOAction.php";
iobjSertifilcat = new clSertitikat (); SfuncName = $_POST [' param' ]; ^^
echo SobjSertifilcat->$funcName (); ^^^^
BClass clSercifikac{
public SmodulJS = 'ModulSertifikat'; private $зузсезп = MedSystem' ;
protected »title - 'Модуль для робота з сертификатами',
// КОНСТРУКТОР КЛАССА С НАЧАЛЬНОЙ ИНИЦИАЛИЗАЦИЕЙ
public function_construct ($р1)[ГП//_
function destruct()|. ■ .1// // конвертирование строки
public function convert{$text, $move = 'cpl251'
// фарыироваяие таблица базы клиентов с сертификатами public function list FIO <) I.. .1//
Г
I
Створения екземпляра класу. Звернення до методу, зазначеному патссп V.IVX запиту
I
|__j 1'салпатця php класу роботи з
сертификатами з задании | функцюналом
// получение данная карты public function dataKarta()|. ■ ■!// // удаление нарты клиента public function delCarta()[777]//_
Рисунок 6 - Клас сервера для обробки запипв ^ента ISSN 1028-9763. Математичш машини i системы, 2020, № 4
Ha pTO. 7 пpeдcтaвлeний peзyльтaт re^pa^'i фopми бaзи cepтифiкaтiв iз зaпoвнeни-ми дaними. Oтpимaний iз 6o^ cepвepa JSON-oб'eкт 6ув пepeтвopeний y пapaмeтpи фopми: y двopiвнeвy тaблицю iз клieнтcькoю бaзoю тa оттешм cepтифiкaтiв, щo нaлeжaть o^e-мим ocoбaм; y пpизнaчeнi функци звopoтнoгo виклику для пoдiй кoнтeкcтнoгo мeню вибo-py клieнтiв i po6oto з cepтифiкaтaми; в зaгaльнy iнфopмaцiю npo кiлькicть cepтифiкaтiв no зaдaнoмy фiльтpy. Пpи вибopi пункту peдaгyвaння кapти клieнтa гeнepyeтьcя нoвa фopмa з ajax-зaвaнтaжeнням дaниx клieнтa з cepвepa.
Pncynox 7 - Tenepa^ фopми бaзи cepтифiкaтiв
Oкpeмi пункти пpи фopмyвaннi cepтифiкaтa, тaкi як «Peзyльтaти oглядy», acинxpoн-нo зaвaнтaжyютьcя з бaзи дaниx cepвepa ^и cтвopeннi фopми. Для ïx змши i peдaгyвaння в cиcтeмi cтвopюютьcя oкpeмi iнтepфeйcнi вiкнa (pиc. 8). ^и нeoбxiднocтi cфopмoвaний cepтифiкaт фиа 8) мoжe бути збepeжeний y фopмaтi pdf aбo poздpyкoвaний та пpинтepi.
Pncynox 8 - Cфopмoвaний cepтифiкaт
4. Висновки
Зaпpoпoнoвaний y po6otc шaблoн apxiтeктypи мoдyля для peaлiзaцiï диcпeтчepa тa функць oнaлa вiкoннoгo iнтepфeйcy кopиcтyвaчa дoзвoлив creoprnTC мoдyль iнфopмaцiйнoï cиcтeми для opгaнiзaцiï бiзнec-лoгiки пpи poбoтi з мeдичними cepтифiкaтaми. Moдyльний пiдxiд пoзитивнo пoзнaчивcя нa швидкocтi пpизнaчeнoгo для кopиcтyвaчa iнтepфeйcy i мoжливo-cтi мacштaбyвaння фyнкцioнaлa caмoï cиcтeми пpи peaлiзaцiï xмapниx тexнoлoгiй. Зaвдяки мoдyльнoмy пiдxoдy, чac peндepингa web-фopм iз вжщними дaними в бiльшocтi випaдкiв e дyжe нeзнaчним y пopiвняннi з чacoм, нeoбxiдним бpayзepy для poзбopy i вiдoбpaжeння вcьoгo мacивy дaниx бaзи, щo пoзитивнo пoзнaчaeтьcя та швидкocтi пpизнaчeнoгo для
ристувача штерфейсу. Величезне практичне значення мае генеращя web-форм, тому що налагодження помилок у цiй програмнiй структурi е болючим мiсцем багатьох фреймвор-
KiB.
Результати використання системи показали, що мехашзм модульного створення диспетчера i вiконного iнтерактивного штерфейсу web-форм не тшьки органiчно вписуеться в уже iснуючi технологи побудови web-додатюв, але i сам мае достатнш потенцiал, щоб у майбутньому стати ядром хмарних технологий розробки багатокористувацьких шформа-цiйних систем i web-сервiсiв.
СПИСОК ДЖЕРЕЛ
1. Медведев А. Хмарш технологи: тенденци розвитку, приклади виконання. Сучасш технологи автоматизации 2013. № 2. С. 6-9.
2. HTML 4.01 Specification. URL: https://www.w3.org/TR/html401/ (дата звернення: 15.10.2020).
3. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. URL: https://www.w3.org/TR/CSS22/ (дата звернення: 15.10.2020).
4. ECMAScript Language Specification - ECMA-262 Edition 5.1. URL: http://www.ecma-international.org/ecma-262/5.1/ (дата звернення: 15.10.2020).
5. Архтектура MVP. URL: http://www.gwtproject.org/articles/mvp-architecture.html (дата звернення: 15.10.2020).
6. MediaWiki. URL: http://www.mediawiki.org/wiki/MediaWiki (дата звернення: 15.10.2020).
7. Drupal - Open Source CMS, drupal.org. URL: https://drupal.org/ (дата звернення: 15.10.2020).
8. WordPress. Русский. URL: http://ru.wordpress.org/ (дата звернення: 15.10.2020).
9. jQuery. URL: http://jquery.com/ (дата звернення: 15.10.2020).
10. Zepto.js: the aerogel-weight jQuery-compatible JavaScript library. URL: http://zeptojs.com/ (дата звернення: 15.10.2020).
11. Bootstrap. URL: http://getbootstrap.com/ (дата звернення: 15.10.2020).
12. jQuery UI. URL: http://jqueryui.com/ (дата звернення: 15.10.2020).
13. w2ui: Home. JavaScript UI. URL: http://w2ui.com/web/ (дата звернення: 15.10.2020).
14. AngularJS - Superheroic JavaScript MVW Framework. URL: http://angularjs.org/ (дата звернення: 15.10.2020).
15. Backbone.js. URL: http://backbonejs.org/ (дата звернення: 15.10.2020).
16. Knockout: Home. URL: http: //knockoutj s.com/ (дата звернення: 15.10.2020).
17. Стефанов С. Javascript. Шаблони. Санкт-Петербург, 2011. 263 с.
18. Гамма Е., Хелм Р., Джонсон Р., Влюсщес Дж. Прийоми об'ектно-орiентованого проектування. Патерни проектування. Санкт-Петербург, 2001. 368 с.
19. Крейн Д., Паскарелло Э., Джеймс Д. AJAX в действии. М.: Вильямс, 2006. 640 с.
Стаття над1йшла до редакцп 19.10.2020
