🥇 Konsènan kliyan entènèt 1C

Youn nan bèl karakteristik teknoloji 1C:Enterprise se ke solisyon aplikasyon an, ki devlope ak teknoloji fòm jere, ka lanse tou de nan yon kliyan mens (egzekutabl) pou Windows, Linux, MacOS X, ak kòm yon kliyan entènèt pou 5 navigatè - Chrome, Internet Explorer, Firefox, Safari, Edge, ak tout bagay sa yo san yo pa chanje kòd sous aplikasyon an. Anplis, deyò aplikasyon an nan kliyan an mens ak nan fonksyon yo navigatè ak sanble prèske idantik.
Jwenn 10 diferans (2 foto anba koupe a):

Fenèt kliyan mens sou Linux:

Menm fenèt la nan kliyan entènèt la (nan navigatè a Chrome):

Poukisa nou te fè yon kliyan entènèt? Pou di yon ti jan patetik, tan te mete yon travay konsa pou nou. Travay sou entènèt la depi lontan te yon avantou pou aplikasyon pou biznis. Premyèman, nou te ajoute kapasite nan travay atravè entènèt la pou kliyan mens nou an (kèk nan konpetitè nou an, nan chemen an, te sispann nan sa a; lòt moun, okontrè, abandone kliyan an mens ak limite tèt yo a mete ann aplikasyon yon kliyan entènèt). Nou deside bay itilizatè nou yo opòtinite pou yo chwazi opsyon kliyan ki pi bon pou yo.

Ajoute kapasite ki baze sou entènèt nan kliyan an mens se te yon gwo pwojè ak yon chanjman konplè nan achitekti kliyan-sèvè. Kreye yon kliyan entènèt se yon pwojè konplètman nouvo, kòmanse nan grafouyen.

Deklarasyon sou pwoblèm nan

Se konsa, kondisyon pwojè yo: kliyan entènèt la dwe fè menm jan ak kliyan an mens, sètadi:

Montre koòdone itilizatè
Egzekite kòd kliyan ekri nan lang 1C

Se koòdone itilizatè a nan 1C ki dekri nan yon editè vizyèl, men deklarasyon, san yo pa aranjman pixel-pa-piksèl nan eleman; Apeprè twa douzèn kalite eleman koòdone yo itilize - bouton, jaden antre (tèks, nimerik, dat/lè), lis, tab, graf, elatriye.

Kòd kliyan nan lang 1C a ka genyen apèl sèvè, travay ak resous lokal yo (fichye, elatriye), enprime, ak plis ankò.

Tou de kliyan an mens (lè w ap travay sou entènèt la) ak kliyan entènèt la itilize menm seri sèvis entènèt la pou kominike ak sèvè aplikasyon 1C la. Enplemantasyon kliyan yo, nan kou, yo diferan - kliyan an mens ekri nan C++, kliyan entènèt la ekri nan JavaScript.

Yon istwa ti kras

Pwojè kliyan entènèt la te kòmanse an 2006, ak yon ekip (an mwayèn) 5 moun. Nan sèten etap nan pwojè a, devlopè yo te enplike pou aplike fonksyonalite espesifik (dokiman fèy papye, dyagram, elatriye); kòm yon règ, sa yo te devlopè yo menm ki te fè fonksyonalite sa a nan kliyan an mens. Moun sa yo. devlopè yo te re-ekri eleman nan JavaScript ke yo te deja kreye nan C++.

Depi nan konmansman an, nou rejte lide nenpòt konvèsyon otomatik (menm pasyèl) nan kòd kliyan mens C++ nan kliyan entènèt JavaScript akòz gwo diferans konseptyèl ekspresyon ant de lang yo; kliyan entènèt la te ekri nan JavaScript soti nan grafouyen.

Nan premye iterasyon pwojè a, kliyan entènèt la te konvèti kòd kliyan an nan lang 1C entegre dirèkteman nan JavaScript. Kliyan an mens aji yon fason diferan - kòd la nan lang 1C bati-an konpile nan bytecode, ak Lè sa a, bytecode sa a entèprete sou kliyan an. Imedyatman, kliyan entènèt la te kòmanse fè menm bagay la - premyèman, li te bay yon pwogrè pèfòmans, ak dezyèmman, li te fè li posib pou inifye achitekti kliyan yo mens ak entènèt.

Premye vèsyon 1C:Enterprise platfòm ak sipò kliyan entènèt te pibliye an 2009. Kliyan entènèt la nan moman sa a te sipòte 2 navigatè - Internet Explorer ak Firefox. Plan orijinal yo enkli sipò pou Opera, men akòz pwoblèm enfranchisabl nan moman sa a ak moun kap okipe aplikasyon an fèmen nan Opera (li pa t posib yo swiv ak 100% sètitid ke aplikasyon an te fèmen, epi nan moman sa a fè pwosedi dekoneksyon an soti nan sèvè aplikasyon an 1C) soti nan plan sa yo te dwe abandone.

Estrikti pwojè

An total, platfòm 1C:Enterprise gen 4 pwojè ki ekri an JavaScript:

WebTools - bibliyotèk pataje lòt pwojè yo itilize (nou enkli tou Bibliyotèk Fèmen Google).
Eleman kontwòl FormattedDocument (aplike nan JavaScript nan tou de kliyan an mens ak kliyan entènèt la)
Eleman kontwòl Orè (aplike nan JavaScript nan tou de kliyan an mens ak kliyan entènèt la)
Kliyan entènèt

Estrikti chak pwojè sanble ak estrikti pwojè Java (oswa pwojè .NET - kèlkeswa sa ki pi pre); Nou gen espas non, epi chak espas non se nan yon katab separe. Anndan katab la gen dosye ak klas namespace. Gen apeprè 1000 dosye nan pwojè kliyan entènèt la.

Estriktirèl, kliyan entènèt la lajman divize an sistèm sa yo:

Jere koòdone aplikasyon kliyan
- Koòdone aplikasyon jeneral (meni sistèm, panno)
- Entèfas fòm jere, ki gen ladan, pami lòt bagay, apeprè 30 kontwòl (bouton, divès kalite jaden antre - tèks, nimerik, dat/lè, elatriye, tab, lis, graf, elatriye)
Modèl objè ki disponib pou devlopè sou kliyan an (plis pase 400 kalite total: modèl objè koòdone jere, paramèt Layout done, fason kondisyonèl, elatriye)
Entèprèt nan lang 1C bati-an
Ekstansyon navigatè (itilize pou fonksyonalite ki pa sipòte nan JavaScript)
- Travay ak kriptografik
- Travay ak dosye
- Teknoloji nan eleman ekstèn, ki pèmèt yo dwe itilize nan tou de kliyan mens ak entènèt

Karakteristik devlopman

Aplike tout sa ki anwo yo nan JavaScript pa fasil. Petèt kliyan entènèt 1C la se youn nan pi gwo aplikasyon pou kliyan ki ekri nan JavaScript - apeprè 450.000 liy. Nou aktivman itilize yon apwòch oryante objè nan kòd kliyan entènèt la, ki senplifye travay ak yon gwo pwojè konsa.

Pou minimize gwosè kòd kliyan an, nou te itilize pwòp obfuscator nou an, epi kòmanse ak vèsyon platfòm 8.3.6 (Oktòb 2014) nou te kòmanse itilize. Google Fèmen Konpilateur. Efè a nan itilize nan nimewo - gwosè a nan kad kliyan entènèt la apre obfuscation:

Pwòp obfuscator – 1556 kb
Google Fèmen Konpilateur - 1073 kb

Sèvi ak Google Closure Compiler te ede nou amelyore pèfòmans kliyan entènèt la pa 30% konpare ak obfuscator pwòp nou an. Anplis de sa, kantite memwa konsome pa aplikasyon an diminye pa 15-25% (selon navigatè a).

Google Closure Compiler travay trè byen ak kòd objè oryante, kidonk efikasite li pou kliyan entènèt la otank posib. Closure Compiler fè kèk bon bagay pou nou:

Tcheke kalite estatik nan etap konstriksyon pwojè a (asire ke nou kouvri kòd la ak anotasyon JSDoc). Rezilta a se tape estatik, trè pre nan nivo sezisman nan C++. Sa a ede trape yon pousantaj jistis gwo erè nan etap konpilasyon pwojè a.
Diminye gwosè kòd atravè obfuscation
Yon kantite optimize nan kòd la egzekite, pou egzanp, tankou:
- ranplasman fonksyon inline. Rele yon fonksyon nan JavaScript se yon operasyon jistis chè, ak ranplasman enline nan metòd yo itilize souvan ti siyifikativman akselere kòd la.
- Konte konstan nan tan konpile. Si yon ekspresyon depann sou yon konstan, valè aktyèl la nan konstan an pral ranplase nan li

Nou itilize WebStorm kòm anviwònman devlopman kliyan entènèt nou an.

Pou analiz kòd nou itilize soundQube, kote nou entegre analizè kòd estatik. Sèvi ak analizeur, nou kontwole degradasyon nan bon jan kalite a nan kòd sous JavaScript epi eseye anpeche li.

Ki pwoblèm nou te rezoud?

Pandan aplikasyon pwojè a, nou te rankontre yon kantite pwoblèm enteresan ke nou te oblije rezoud.

Echanj done ak sèvè a ak ant fenèt yo

Gen sitiyasyon kote bouche kòd sous la ka entèfere ak operasyon an nan sistèm nan. Kòd ekstèn nan kòd ègzekutabl kliyan entènèt la, akòz ofiske, ka gen non fonksyon ak paramèt ki diferan de sa yo ke kòd ègzekutabl nou an espere. Kòd ekstèn pou nou se:

Kòd ki soti nan sèvè a nan fòm estrikti done yo
Kòd pou yon lòt fenèt aplikasyon

Pou evite konfizyon lè nou kominike avèk sèvè a, nou itilize tag @expose:

/**
 * @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;
}

Epi pou evite obfuscation lè kominike avèk lòt fenèt, nou itilize sa yo rele interfaces ekspòte (koòdone nan ki tout metòd yo ekspòte).

/**
 * Экспортируемый интерфейс контрола 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 (){}

Nou te itilize Virtual DOM anvan li te vin endikap)

Tankou tout devlopè ki fè fas ak entèfas entènèt konplèks, nou byen vit reyalize ke DOM a mal adapte pou travay ak entèfas itilizatè dinamik. Prèske imedyatman, yon analogue nan Virtual DOM la te aplike pou optimize travay ak UI la. Pandan pwosesis evènman, tout chanjman DOM yo estoke nan memwa epi, sèlman lè tout operasyon yo fini, chanjman yo akimile yo aplike nan pyebwa DOM la.

Optimize kliyan entènèt la

Pou fè kliyan entènèt nou an travay pi vit, nou eseye sèvi ak kapasite navigatè estanda (CSS, elatriye) nan maksimòm. Kidonk, panèl kòmand fòm (ki sitiye sou prèske tout fòm aplikasyon an) rann sèlman lè l sèvi avèk zouti navigatè, lè l sèvi avèk layout dinamik ki baze sou CSS.

Tès

Pou tès fonksyonèl ak pèfòmans, nou itilize yon zouti propriétaires (ekri an Java ak C++), ansanm ak yon seri tès ki bati sou tèt yo. Selenyòm.

Zouti nou an se inivèsèl - li pèmèt ou teste prèske nenpòt pwogram fenèt, epi kidonk li apwopriye pou teste tou de yon kliyan mens ak yon kliyan entènèt. Zouti a anrejistre aksyon itilizatè a ki te lanse solisyon aplikasyon 1C la nan yon dosye script. An menm tan an, imaj zòn k ap travay nan ekran an-estanda-yo anrejistre. Lè w ap kontwole nouvo vèsyon kliyan entènèt la, scripts yo jwe san patisipasyon itilizatè yo. Nan ka kote ekran an pa matche ak referans youn nan nenpòt etap, tès la konsidere kòm echwe, apre sa yon espesyalis kalite fè yon ankèt pou detèmine si sa a se yon erè oswa yon chanjman te planifye nan konpòtman an nan sistèm nan. Nan ka konpòtman planifye, estanda yo otomatikman ranplase ak nouvo.

Zouti a mezire pèfòmans aplikasyon an ak yon presizyon ki rive jiska 25 milisgond. Nan kèk ka, nou boukle pati nan script la (pa egzanp, repete antre lòd la plizyè fwa) analize degradasyon nan tan ekzekisyon sou tan. Rezilta tout mezi yo anrejistre nan yon boutèy demi lit pou analiz.

Zouti tès nou an ak aplikasyon nou an anba tès

Zouti nou yo ak Selenyòm konplete youn ak lòt; pou egzanp, si kèk bouton sou youn nan ekran yo te chanje kote li, Selenium ka pa swiv sa a, men zouti nou an ap remake, paske fè yon konparezon pixel-pa-piksèl nan ekran an ak estanda a. Zouti a kapab tou swiv pwoblèm ak pwosesis opinyon soti nan klavye a oswa sourit, depi sa a se egzakteman sa li repwodui.

Tès sou tou de zouti (nou an ak Selenyòm) kouri senaryo travay tipik nan solisyon aplikasyon nou an. Tès yo lanse otomatikman apre yo fin konstwi chak jou platfòm 1C:Enterprise. Si scripts yo pi dousman (konpare ak konstriksyon anvan an), nou envestige epi rezoud kòz ralentissement la. Kritè nou an se senp - nouvo bati a pa ta dwe travay pi dousman pase youn anvan an.

Devlopè yo sèvi ak diferan zouti pou mennen ankèt sou ensidan ralentissement; sitou itilize Dynatrace AJAX edisyon konpayi pwodiksyon DynaTrace. Yo anrejistre mòso bwa nan ekzekisyon operasyon an pwoblèm sou konstriksyon anvan yo ak nouvo, Lè sa a, mòso bwa yo analize. An menm tan an, tan an ekzekisyon nan operasyon sèl (an milisgond) pa ka yon faktè desizif - pwosesis sèvis tankou koleksyon fatra yo detanzantan te lanse nan navigatè a, yo ka sipèpoze ak tan an ekzekisyon nan fonksyon ak defòme foto a. Paramèt ki pi enpòtan nan ka sa a ta dwe kantite enstriksyon JavaScript egzekite, kantite operasyon atomik sou DOM la, elatriye. Si kantite enstriksyon/operasyon nan menm script la ogmante nan yon nouvo vèsyon, sa prèske toujou vle di yon gout nan pèfòmans ki bezwen korije.

Epitou, youn nan rezon ki fè yo tonbe nan pèfòmans ka se ke Google Closure Compiler pou kèk rezon pa t 'kapab fè sibstitisyon an liy nan fonksyon an (pa egzanp, paske fonksyon an se recursif oswa vityèl). Nan ka sa a, nou eseye korije sitiyasyon an pa reekri kòd sous la.

Ekstansyon navigatè

Lè yon solisyon aplikasyon bezwen fonksyonalite ki pa disponib nan JavaScript, nou itilize ekstansyon navigatè:

pou travay ak dosye
pou travay ak kriptografik
travay avèk konpozan ekstèn

Ekstansyon nou yo konpoze de de pati. Premye pati a se sa yo rele yon ekstansyon navigatè (anjeneral ekstansyon pou Chrome ak Firefox ekri nan JavaScript), ki kominike avèk dezyèm pati a - yon ekstansyon binè ki aplike fonksyonalite nou bezwen an. Li ta dwe mansyone ke nou ekri vèsyon 3 nan ekstansyon binè - pou Windows, Linux ak MacOS. Ekstansyon binè a bay kòm yon pati nan platfòm 1C:Enterprise epi li sitiye sou sèvè aplikasyon 1C la. Premye fwa yo rele li soti nan yon kliyan entènèt, li telechaje sou òdinatè kliyan an epi enstale li nan navigatè a.

Lè w ap kouri nan Safari, ekstansyon nou yo itilize NPAPI; lè w ap kouri nan Internet Explorer, yo itilize teknoloji ActiveX. Microsoft Edge poko sipòte ekstansyon, kidonk kliyan entènèt la nan li travay ak restriksyon.

Pli lwen devlopman

Youn nan travay yo pou ekip devlopman kliyan entènèt la se plis devlopman nan fonksyonalite. Fonksyonalite kliyan entènèt la ta dwe idantik ak fonksyonalite kliyan mens la; tout nouvo fonksyonalite aplike ansanm nan tou de kliyan mens ak entènèt.

Lòt travay yo enkli devlope achitekti a, refactoring, amelyore pèfòmans ak fyab. Pou egzanp, youn nan direksyon yo se plis mouvman nan direksyon pou yon modèl travay asynchrone. Gen kèk nan fonksyonalite nan kliyan entènèt la kounye a bati sou yon modèl synchrone nan entèraksyon ak sèvè a. Modèl asynchrone a ap vin pi enpòtan kounye a nan navigatè (e pa sèlman nan navigatè), e sa fòse nou modifye kliyan entènèt la lè nou ranplase apèl synchrone ak asynchrone (ak refactoring kòd la kòmsadwa). Tranzisyon gradyèl nan yon modèl asynchrone eksplike pa bezwen sipòte solisyon lage ak adaptasyon gradyèl yo.

Sous: www.habr.com

Konsènan kliyan entènèt la 1C