Ee vun de flotten Features vun 1C:Enterprise Technologie ass datt d'Applikatiounsléisung, entwéckelt mat verwalteten Formen Technologie, souwuel an engem dënnen (ausführbare) Client fir Windows, Linux, MacOS X an als Web Client fir 5 Browser lancéiert ka ginn - Chrome, Internet Explorer, Firefox, Safari, Edge, an all dëst ouni den Applikatiounsquellcode z'änneren. Ausserdeem funktionéiert extern d'Applikatioun am dënnen Client an am Browser a gesäit bal identesch aus.
Fannt 10 Differenzen (2 Biller ënner dem Schnëtt):
Dënn Client Fënster op Linux:
Déi selwecht Fënster am Web Client (am Chrome Browser):
Firwat hu mir e Web Client gemaach? Fir et e bësse pathetesch ze soen, d'Zäit huet eis esou eng Aufgab gesat. Iwwer den Internet schaffen ass laang eng Viraussetzung fir Geschäftsapplikatiounen. Als éischt hu mir d'Fäegkeet bäigefüügt fir iwwer den Internet fir eisen dënnen Client ze schaffen (e puer vun eise Konkurrenten hunn iwwregens do opgehalen; anerer, am Géigendeel, hunn den dënnem Client opginn a beschränkt sech op d'Ëmsetzung vun engem Webclient). Mir hu beschloss eise Benotzer d'Méiglechkeet ze ginn déi Clientoptioun ze wielen déi hinnen am Beschten passt.
Web-baséiert Fäegkeeten un den dënnen Client bäizefügen war e grousse Projet mat enger kompletter Ännerung vun der Client-Serverarchitektur. E Web Client erstellen ass e komplett neie Projet, vun Null un.
Problemerklärung
Also, de Projet Ufuerderunge: de Web Client muss d'selwecht maachen wéi den dënnen Client, nämlech:
- Benotzer Interface weisen
- Exekutéieren Client Code an 1C Sprooch geschriwwe
D'Benotzerinterface an 1C gëtt an engem visuellen Redakter beschriwwen, awer deklarativ, ouni Pixel-fir-Pixel Arrangement vun Elementer; Ongeféier dräi Dosen Zorte vun Interface Elementer ginn benotzt - Knäppercher, Input Felder (Text, numeresch, Datum / Zäit), Lëschten, Dëscher, Grafiken, etc.
Client Code an der 1C Sprooch kann Server Appellen enthalen, mat lokalen Ressourcen schaffen (Dateien, etc.), Dréckerei, a vill méi.
Souwuel den dënnen Client (wann Dir iwwer de Web schafft) wéi och de Web Client benotzen déiselwecht Set vu Webservicer fir mam 1C Applikatiounsserver ze kommunizéieren. Client Implementatiounen, natierlech, sinn anescht - den dënnen Client ass an C++ geschriwwe ginn, de Web Client ass a JavaScript geschriwwe ginn.
E bësse vun der Geschicht
De Webclientprojet huet 2006 ugefaangen, mat engem Team vun (am Duerchschnëtt) 5 Leit. A bestëmmte Stadien vum Projet goufen d'Entwéckler involvéiert fir spezifesch Funktionalitéit ëmzesetzen (Spreadsheet Dokument, Diagrammer, etc.); als Regel, dës waren déi selwecht Entwéckler déi dës Funktionalitéit am dënnen Client gemaach. Déi. Entwéckler hunn Komponenten a JavaScript nei geschriwwen, déi se virdru am C ++ erstallt hunn.
Vun Ufank un hu mir d'Iddi vun all automateschen (och deelweis) Konversioun vum C++ Dënn Client Code an JavaScript Web Client refuséiert wéinst de staarke konzeptuellen Differenzen tëscht den zwou Sproochen; de Web Client gouf a JavaScript vun Null geschriwwe.
An den éischten Iteratiounen vum Projet huet de Web Client Client Code an der agebauter 1C Sprooch direkt an JavaScript ëmgewandelt. Den dënnen Client handelt anescht - de Code an der agebauter 1C Sprooch gëtt an Bytecode kompiléiert, an dann gëtt dësen Bytecode um Client interpretéiert. Duerno huet de Web Client ugefaang datselwecht ze maachen - éischtens huet et e Leeschtungsgewënn ginn, an zweetens huet et et méiglech gemaach d'Architektur vun den dënnen a Web Clienten ze vereenegen.
Déi éischt Versioun vun der 1C: Enterprise Plattform mat Web Client Support gouf am Joer 2009 verëffentlecht. De Webclient deemools ënnerstëtzt 2 Browser - Internet Explorer a Firefox. Déi ursprénglech Pläng enthalen d'Ënnerstëtzung fir Opera, awer wéinst oniwwersiichtleche Probleemer zu där Zäit mat Applikatiounsofschlosshanteren an Opera (et war net méiglech mat 100% Sécherheet ze verfolgen datt d'Applikatioun zou ass, an zu deem Moment d'Trennungsprozedur aus der 1C Applikatiounsserver) vun dëse Pläng hu missen opginn.
Projet Struktur
Am Ganzen huet d'1C:Enterprise Plattform 4 Projete geschriwwe a JavaScript:
- WebTools - gedeelt Bibliothéike benotzt vun anere Projete (mir enthalen och ).
- Kontrollelement (a JavaScript implementéiert souwuel am dënnen Client wéi och am Web Client)
- Kontrollelement (a JavaScript implementéiert souwuel am dënnen Client wéi och am Web Client)
- Web Client
D'Struktur vun all Projet gläicht der Struktur vun Java Projeten (oder .NET Projeten - wat och ëmmer méi no ass); Mir hunn Nummraim, an all Nummraum ass an engem separaten Dossier. Am Dossier ginn et Dateien an Nummraumklassen. Et gi ongeféier 1000 Dateien am Web Client Projet.
Strukturell ass de Web Client gréisstendeels an déi folgend Subsystemer opgedeelt:
- Managed Client Applikatioun Interface
- Allgemeng Applikatioun Interface (Systemmenüen, Panelen)
- Interface vu verwalteten Formen, dorënner ënner anerem ongeféier 30 Kontrollen (Knäppercher, verschidden Aarte vun Input Felder - Text, numeresch, Datum / Zäit, etc., Dëscher, Lëschten, Grafiken, etc.)
- Objektmodell verfügbar fir Entwéckler um Client (iwwer 400 Typen am Ganzen: verwalteten Interface Objektmodell, Date Layout Astellungen, bedingte Styling, etc.)
- Dolmetscher vun der agebauter 1C Sprooch
- Browser Extensiounen (benotzt fir Funktionalitéit net am JavaScript ënnerstëtzt)
- Schafft mat Kryptografie
- Schafft mat Dateien
- Technologie vun externen Komponenten, wat et erlaabt datt se an dënnen a Web Clienten benotzt kënne ginn
Entwécklungsfeatures
All dat hei uewen am JavaScript ëmsetzen ass net einfach. Vläicht ass den 1C Web Client eng vun de gréisste Client-Säit Uwendungen, déi a JavaScript geschriwwe sinn - ongeféier 450.000 Linnen. Mir benotzen aktiv eng objektorientéiert Approche am Web Client Code, wat d'Aarbecht mat esou engem grousse Projet vereinfacht.
Fir d'Gréisst vum Client Code ze minimiséieren, hu mir als éischt eisen eegenen Obfuscator benotzt, a mat der Plattform Versioun 8.3.6 (Oktober 2014) ugefaang ze benotzen . Den Effekt vum Gebrauch an Zuelen - d'Gréisst vum Web Client Kader no Verdueblung:
- Eegent Obfuscator - 1556 kb
- Google Zoumaache Compiler - 1073 kb
D'Benotzung vu Google Closure Compiler huet eis gehollef d'Performance vum Web Client ëm 30% ze verbesseren am Verglach zu eisem eegenen Obfuscator. Zousätzlech ass d'Quantitéit un Erënnerung verbraucht vun der Applikatioun ëm 15-25% erofgaang (ofhängeg vum Browser).
Google Closure Compiler funktionnéiert ganz gutt mat objektorientéierter Code, sou datt seng Effizienz fir de Web Client sou héich wéi méiglech ass. Closure Compiler mécht e puer gutt Saache fir eis:
- Statesch Typprüfung op der Baustadium vum Projet (suergt dofir datt mir de Code mat JSDoc Annotatiounen ofdecken). D'Resultat ass statesch Tippen, ganz no am Niveau zum Tippen an C ++. Dëst hëlleft e zimlech grousse Prozentsaz vu Feeler an der Projektkompiléierungsstadium ze fangen.
- Reduktioun vun der Codegréisst duerch Verdueblung
- Eng Zuel vun Optimisatiounen vum ausgefouerten Code, zum Beispill, wéi:
- inline Funktioun Auswiesselungen. Eng Funktioun am JavaScript nennen ass eng zimlech deier Operatioun, an Inline Ersatzstécker vun dacks benotzte klenge Methoden beschleunegen de Code wesentlech.
- Konstanten zielen an der Zesummesetzungszäit. Wann en Ausdrock vun enger Konstant hänkt, gëtt den aktuellen Wäert vun der Konstant an et ersat
Mir benotzen WebStorm als eis Web Client Entwécklung Ëmfeld.
Fir Code Analyse benotze mir , wou mir statesch Code Analysatoren integréieren. Mat Analysatoren iwwerwaache mir d'Degradatioun vun der Qualitéit vum JavaScript Quellcode a probéieren et ze verhënneren.
Wéi eng Problemer hu mir geléist?
Bei der Ëmsetzung vum Projet hu mir eng Rei interessant Problemer gestouss, déi mir hu misse léisen.
Austausch Daten mam Server an tëscht Fënsteren
Et gi Situatiounen, wou Verdueblung vum Quellcode mat der Operatioun vum System stéieren kann. Code extern zum ausführbare Code vum Webclient, wéinst Verdueblung, kënne Funktiouns- a Parameternamen hunn, déi vun deenen ënnerscheeden, déi eisen ausführbare Code erwaart. Den externen Code fir eis ass:
- Code kënnt vum Server a Form vun Datenstrukturen
- Code fir eng aner Applikatioun Fënster
Fir Verdueblung ze vermeiden wann Dir mam Server interagéiert, benotze mir den @expose Tag:
/**
* @constructor
* @extends {Base.SrvObject}
*/
Srv.Core.GenericException = function ()
{
/**
* @type {string}
* @expose
*/
this.descr;
/**
* @type {Srv.Core.GenericException}
* @expose
*/
this.inner;
/**
* @type {string}
* @expose
*/
this.clsid;
/**
* @type {boolean}
* @expose
*/
this.encoded;
}A fir Verdueblung ze vermeiden wann Dir mat anere Fënstere interagéiert, benotze mir sougenannte exportéiert Schnëttplazen (Interfaces an deenen all Methoden exportéiert ginn).
/**
* Экспортируемый интерфейс контрола DropDownWindow
*
* @interface
* @struct
*/
WebUI.IDropDownWindowExp = function(){}
/**
* Перемещает выделение на 1 вперед или назад
*
* @param {boolean} isForward
* @param {boolean} checkOnly
* @return {boolean}
* @expose
*/
WebUI.IDropDownWindowExp.prototype.moveMarker = function (isForward, checkOnly){}
/**
* Перемещает выделение в начало или конец
*
* @param {boolean} isFirst
* @param {boolean} checkOnly
* @return {boolean}
* @expose
*/
WebUI.IDropDownWindowExp.prototype.moveMarkerTo = function (isFirst, checkOnly){}
/**
* @return {boolean}
* @expose
*/
WebUI.IDropDownWindowExp.prototype.selectValue = function (){}Mir hunn Virtual DOM benotzt ier et Mainstream gouf)
Wéi all Entwéckler déi sech mat komplexe Web UIs beschäftegen, hu mir séier gemierkt datt d'DOM schlecht passt fir mat dynamesche User-Interfaces ze schaffen. Bal direkt gouf en Analog vu Virtual DOM implementéiert fir d'Aarbecht mat der UI ze optimiséieren. Wärend Eventveraarbechtung ginn all DOM Ännerungen an der Erënnerung gespäichert an nëmmen wann all Operatiounen ofgeschloss sinn, ginn déi accumuléiert Ännerungen op den DOM Bam applizéiert.
Optimisatioun vum Web Client
Fir eise Webclient méi séier ze maachen, probéieren mir d'Standard Browser-Fähigkeiten (CSS, etc.) maximal ze benotzen. Also gëtt d'Form Kommando Panel (op bal all Form vun der Applikatioun lokaliséiert) exklusiv mat Browser Tools gemaach, mat dynamesche Layout baséiert op CSS.
Testen
Fir funktionell a Performance Tester benotze mir e propriétaire Tool (geschriwwe op Java an C++), souwéi eng Suite vun Tester déi uewen opgebaut sinn .
Eist Tool ass universell - et erlaabt Iech bal all Fënstere Programm ze testen, an dofir ass gëeegent fir souwuel en dënnen Client wéi och e Web Client ze testen. D'Tool notéiert d'Aktiounen vum Benotzer deen d'1C Applikatiounsléisung an eng Skriptdatei lancéiert huet. Zur selwechter Zäit ginn d'Biller vum Aarbechtsberäich vum Écran - Standarden - opgeholl. Wann Dir nei Versioune vum Web Client iwwerwaacht, ginn Scripte gespillt ouni Benotzerparticipatioun. A Fäll wou de Screenshot net mat der Referenz op all Schrëtt entsprécht, gëtt den Test als gescheitert ugesinn, no deem e Qualitéitsspezialist eng Enquête mécht fir ze bestëmmen ob dëst e Feeler ass oder eng geplangte Ännerung vum Verhalen vum System. Am Fall vu geplangte Verhalen ginn d'Standarden automatesch duerch nei ersat.
D'Tool moosst och d'Performance vun der Applikatioun mat enger Genauegkeet vu bis zu 25 Millisekonnen. An e puer Fäll loosse mir Deeler vum Skript (zum Beispill widderhuelen d'Bestellung e puer Mol) fir d'Degradatioun vun der Ausféierungszäit iwwer Zäit ze analyséieren. D'Resultater vun all Miessunge ginn an engem Logbuch fir Analyse opgeholl.
Eist Testinstrument an Applikatioun ënner Test
Eist Tool a Selenium ergänzen sech géigesäiteg; zum Beispill, wann e puer Knäppercher op ee vun de Schiirme seng Positioun geännert huet, kann Selenium dëst net verfollegen, awer eisen Tool wäert bemierken, well mécht e Pixel-fir-Pixel Verglach vum Screenshot mam Standard. D'Tool ass och fäeg Probleemer mat der Veraarbechtung vum Input vun der Tastatur oder der Maus ze verfollegen, well dat ass genau wat et reproduzéiert.
Tester op béid Tools (eis a Selenium) lafen typesch Aarbechtsszenarie vun eisen Applikatiounsléisungen. Tester ginn automatesch gestart nom deegleche Bau vun der 1C: Enterprise Plattform. Wann d'Skripte méi lues sinn (am Verglach zum fréiere Build), ënnersicht a léise mir d'Ursaach vun der Verlängerung. Eise Critère ass einfach - den Neibau soll net méi lues funktionnéieren wéi dee virdrun.
D'Entwéckler benotzen verschidden Tools fir Zwëschefäll z'ënnersichen; haaptsächlech benotzt Produktioun Firma . Logbicher vun der Ausféierung vun der problematescher Operatioun op der viregter an neier Builder ginn opgeholl, da ginn d'Logbicher analyséiert. Zur selwechter Zäit kann d'Ausféierungszäit vun eenzel Operatiounen (a Millisekonnen) net en entscheedende Faktor sinn - Serviceprozesser wéi Müllsammlung ginn periodesch am Browser gestart, si kënne mat der Ausféierungszäit vu Funktiounen iwwerlappen an d'Bild verzerren. Méi relevant Parameteren an dësem Fall wieren d'Zuel vun de JavaScript-Uweisungen, déi ausgefouert goufen, d'Zuel vun den atomarer Operatiounen op der DOM, etc. Wann d'Zuel vun den Instruktiounen/Operatiounen am selwechte Skript an enger neier Versioun eropgaang ass, heescht dat bal ëmmer e Réckgang an der Leeschtung déi muss korrigéiert ginn.
Och ee vun de Grënn fir d'Performance Réckgang kann sinn datt de Google Closure Compiler aus irgendege Grënn net fäeg war inline Ersatz vun der Funktioun auszeféieren (zum Beispill well d'Funktioun rekursiv oder virtuell ass). An dësem Fall probéieren mir d'Situatioun ze korrigéieren andeems Dir de Quellcode nei schreift.
Browser Extensiounen
Wann eng Applikatiounsléisung Funktionalitéit brauch déi net a JavaScript verfügbar ass, benotze mir Browser-Extensiounen:
- fir mat Dateien ze schaffen
- fir mat Kryptografie ze schaffen
- schaffen mat
Eis Extensiounen besteet aus zwee Deeler. Den éischten Deel ass wat e Browser Extensioun genannt gëtt (normalerweis Extensiounen fir Chrome a Firefox geschriwwen a JavaScript), déi mam zweeten Deel interagéieren - eng binär Extensioun déi d'Funktionalitéit implementéiert déi mir brauchen. Et sollt erwähnt ginn datt mir 3 Versioune vu binäre Extensiounen schreiwen - fir Windows, Linux a MacOS. D'binär Extensioun gëtt als Deel vun der 1C:Enterprise Plattform geliwwert a läit um 1C Applikatiounsserver. Déi éischte Kéier gëtt et vun engem Webclient opgeruff, gëtt et op de Clientcomputer erofgelueden an am Browser installéiert.
Wann Dir am Safari leeft, benotzen eis Extensiounen NPAPI; wann se am Internet Explorer lafen, benotze se ActiveX Technologie. ënnerstëtzt nach keng Extensiounen, sou datt de Web Client an et mat Restriktiounen funktionnéiert.
Weider Entwécklung
Eng vun den Aufgaben fir d'Web Client Entwécklung Team ass d'Weiderentwécklung vun der Funktionalitéit. D'Funktionalitéit vum Web Client soll identesch mat der Funktionalitéit vum dënnen Client sinn; all nei Funktionalitéit gëtt gläichzäiteg a béid dënnen a Web Clienten ëmgesat.
Aner Aufgaben enthalen d'Entwécklung vun der Architektur, d'Refactoring, d'Verbesserung vun der Leeschtung an der Zouverlässegkeet. Zum Beispill, eng vun den Richtungen ass weider Bewegung a Richtung asynchronen Aarbechtsmodell. E puer vun der Funktionalitéit vum Web Client ass momentan op engem synchrone Modell vun der Interaktioun mam Server gebaut. Den asynchrone Modell gëtt elo méi relevant an de Browser (an net nëmmen an de Browser), an dëst forcéiert eis de Web Client z'änneren andeems se synchron Uruff mat asynchronen ersetzen (an de Code deementspriechend refaktoréieren). De graduellen Iwwergang zu engem asynchrone Modell gëtt erkläert duerch d'Noutwendegkeet fir verëffentlecht Léisungen an hir graduell Adaptatioun z'ënnerstëtzen.
Source: will.com