Viena iš malonių 1C:Enterprise technologijos savybių yra ta, kad taikomųjų programų sprendimas, sukurtas naudojant valdomų formų technologiją, gali būti paleistas tiek ploname (vykdomajame) kliente, skirtame Windows, Linux, MacOS X, tiek kaip žiniatinklio klientas 5 naršyklėms. Chrome, Internet Explorer, Firefox, Safari, Edge ir visa tai nekeičiant programos šaltinio kodo. Be to, iš išorės programa plonajame kliente ir naršyklėje veikia ir atrodo beveik identiškai.
Raskite 10 skirtumų (2 nuotraukos po pjūviu):
Plonas kliento langas sistemoje „Linux“:
Tas pats langas žiniatinklio kliente (Chrome naršyklėje):
Kodėl sukūrėme interneto klientą? Šiek tiek patetiškai tariant, laikas mums iškėlė tokią užduotį. Darbas internetu jau seniai buvo būtina verslo programų sąlyga. Pirma, savo plonajam klientui pridėjome galimybę dirbti internetu (beje, kai kurie mūsų konkurentai sustojo ties tuo, kiti, priešingai, atsisakė plonojo kliento ir apsiribojo interneto kliento įdiegimu). Mes nusprendėme suteikti savo vartotojams galimybę pasirinkti jiems tinkamiausią kliento variantą.
Internetinių galimybių įtraukimas į ploną klientą buvo didelis projektas, visiškai pakeistas kliento ir serverio architektūra. Interneto kliento kūrimas yra visiškai naujas projektas, pradedant nuo nulio.
Problemos teiginys
Taigi, projekto reikalavimai: žiniatinklio klientas turi daryti tą patį, ką ir plonasis klientas, būtent:
- Rodyti vartotojo sąsają
- Vykdykite kliento kodą, parašytą 1C kalba
1C vartotojo sąsaja aprašyta vaizdiniame redaktoriuje, bet deklaratyviai, be elementų išdėstymo po pikselius; Naudojama apie tris dešimtys sąsajos elementų tipų – mygtukai, įvesties laukai (tekstas, skaitiniai, data/laikas), sąrašai, lentelės, grafikai ir kt.
Kliento kode 1C kalba gali būti serverio skambučių, darbo su vietiniais ištekliais (failais ir kt.), spausdinimo ir daug daugiau.
Tiek plonasis klientas (dirbant per žiniatinklį), tiek žiniatinklio klientas naudoja tą patį žiniatinklio paslaugų rinkinį, kad galėtų susisiekti su 1C programų serveriu. Klientų diegimai, žinoma, skiriasi – plonasis klientas parašytas C++, žiniatinklio klientas – JavaScript.
Truputis istorijos
Interneto kliento projektas prasidėjo 2006 m., su (vidutiniškai) 5 žmonių komanda. Tam tikrais projekto etapais buvo įtraukti kūrėjai, diegdami specifinį funkcionalumą (skaičiuoklės dokumentas, diagramos ir kt.); Paprastai tai buvo tie patys kūrėjai, kurie atliko šią funkciją plonajame kliente. Tie. kūrėjai perrašė „JavaScript“ komponentus, kuriuos anksčiau sukūrė C++.
Nuo pat pradžių atmetėme idėją apie bet kokį automatinį (net ir dalinį) C++ plonojo kliento kodo konvertavimą į JavaScript žiniatinklio klientą dėl didelių konceptualių skirtumų tarp dviejų kalbų; žiniatinklio klientas buvo parašytas JavaScript nuo nulio.
Pirmosiose projekto iteracijose žiniatinklio klientas kliento kodą įmontuota 1C kalba konvertavo tiesiai į „JavaScript“. Plonasis klientas veikia kitaip - kodas integruotoje 1C kalboje sukompiliuojamas į baitinį kodą, o tada šis baito kodas interpretuojamas kliente. Vėliau žiniatinklio klientas pradėjo daryti tą patį - pirma, jis padidino našumą ir, antra, leido suvienodinti plonųjų ir žiniatinklio klientų architektūrą.
Pirmoji platformos 1C:Enterprise versija su žiniatinklio klientų palaikymu buvo išleista 2009 m. Interneto klientas tuo metu palaikė 2 naršykles - Internet Explorer ir Firefox. Į pradinius planus buvo įtrauktas „Opera“ palaikymas, tačiau dėl to meto neįveikiamų problemų su „Opera“ programų uždarymo tvarkytuvais (nebuvo įmanoma 100% užtikrinti, kad programa uždaroma, ir tuo metu atlikti atjungimo procedūrą nuo 1C programų serveris) iš šių planų turėjo būti atsisakyta.
Projekto struktūra
Iš viso 1C: Enterprise platformoje yra 4 projektai, parašyti JavaScript:
- WebTools – bendrinamos bibliotekos, naudojamos kituose projektuose (taip pat įtraukiame ).
- Valdymo elementas (įdiegta JavaScript ir plonajame kliente, ir žiniatinklio kliente)
- Valdymo elementas (įdiegta JavaScript ir plonajame kliente, ir žiniatinklio kliente)
- Interneto klientas
Kiekvieno projekto struktūra primena Java projektų (arba .NET projektų – pagal tai, kuris artimesnis) struktūrą; Turime vardų erdves ir kiekviena vardų sritis yra atskirame aplanke. Aplanko viduje yra failai ir vardų erdvės klasės. Žiniatinklio kliento projekte yra apie 1000 failų.
Struktūriškai žiniatinklio klientas yra suskirstytas į šiuos posistemius:
- Valdoma kliento programos sąsaja
- Bendroji programos sąsaja (sistemos meniu, skydeliai)
- Valdomų formų sąsaja, apimanti, be kita ko, apie 30 valdiklių (mygtukai, įvairių tipų įvesties laukai – tekstas, skaitiniai, data/laikas ir kt., lentelės, sąrašai, grafikai ir kt.)
- Kliento kūrėjams pasiekiamas objekto modelis (iš viso daugiau nei 400 tipų: valdomos sąsajos objekto modelis, duomenų išdėstymo nustatymai, sąlyginis stilius ir kt.)
- Integruotos 1C kalbos vertėjas
- Naršyklės plėtiniai (naudojami „JavaScript“ nepalaikomoms funkcijoms)
- Darbas su kriptografija
- Darbas su failais
- Išorinių komponentų technologija, leidžianti juos naudoti tiek plonose, tiek žiniatinklio programose
Plėtros ypatybės
Įdiegti visus aukščiau nurodytus dalykus „JavaScript“ nėra lengva. Galbūt 1C žiniatinklio klientas yra viena didžiausių kliento programų, parašytų JavaScript – apie 450.000 XNUMX eilučių. Interneto kliento kode aktyviai naudojame objektinį metodą, kuris supaprastina darbą su tokiu dideliu projektu.
Norėdami sumažinti kliento kodo dydį, pirmiausia panaudojome savo obfuskatorių, o nuo 8.3.6 platformos versijos (2014 m. spalio mėn.) pradėjome naudoti . Naudojimo skaičiais poveikis – žiniatinklio kliento sistemos dydis po užmaskavimo:
- Nuosavas obfuskatorius – 1556 kb
- Google Closure Compiler – 1073 kb
„Google Closure Compiler“ naudojimas padėjo mums pagerinti žiniatinklio kliento našumą 30 %, palyginti su mūsų pačių obfuskatoriumi. Be to, programos suvartojamos atminties kiekis sumažėjo 15-25% (priklausomai nuo naršyklės).
Google Closure Compiler labai gerai veikia su objektiniu kodu, todėl jos efektyvumas žiniatinklio klientui yra kuo didesnis. „Closure Compiler“ mums daro keletą gerų dalykų:
- Statinis tipo tikrinimas projekto kūrimo etape (užtikrina, kad kodą padengtume JSDoc anotacijomis). Rezultatas yra statinis spausdinimas, labai artimas spausdinimui C++. Tai padeda sugauti gana didelę klaidų dalį projekto sudarymo etape.
- Kodo dydžio sumažinimas naudojant užmaskavimą
- Keletas vykdomo kodo optimizavimo būdų, pavyzdžiui:
- eilutiniai funkcijų pakaitalai. Funkcijos iškvietimas „JavaScript“ yra gana brangi operacija, o dažnai naudojamų mažų metodų tiesioginiai keitimai žymiai pagreitina kodą.
- Konstantų skaičiavimas kompiliavimo metu. Jei išraiška priklauso nuo konstantos, į ją bus pakeista tikroji konstantos reikšmė
Mes naudojame WebStorm kaip savo žiniatinklio kliento kūrimo aplinką.
Kodo analizei naudojame , kur integruojame statinius kodo analizatorius. Naudodami analizatorius stebime JavaScript šaltinio kodo kokybės pablogėjimą ir stengiamės to išvengti.
Kokias problemas išsprendėme/sprendžiame?
Įgyvendindami projektą susidūrėme su daugybe įdomių problemų, kurias turėjome išspręsti.
Keiskitės duomenimis su serveriu ir tarp langų
Yra situacijų, kai šaltinio kodo užtemdymas gali trukdyti sistemos veikimui. Kodas, esantis už žiniatinklio kliento vykdomojo kodo, dėl užtemimo gali turėti funkcijų ir parametrų pavadinimus, kurie skiriasi nuo tų, kurių tikisi vykdomasis kodas. Išorinis kodas mums yra:
- Kodas, gaunamas iš serverio duomenų struktūrų pavidalu
- Kodas kitam programos langui
Kad išvengtume užtemimo bendraujant su serveriu, naudojame @expose žymą:
/**
* @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;
}O kad nesusidurtume su kitais langais, naudojame vadinamąsias eksportuotas sąsajas (sąsajas, kuriose eksportuojami visi metodai).
/**
* Экспортируемый интерфейс контрола 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 (){}Naudojome virtualųjį DOM, kol jis tapo įprastas)
Kaip ir visi kūrėjai, dirbantys su sudėtingomis žiniatinklio vartotojo sąsajomis, greitai supratome, kad DOM yra prastai pritaikytas darbui su dinaminėmis vartotojo sąsajomis. Beveik iš karto buvo įdiegtas Virtual DOM analogas, optimizuojantis darbą su vartotojo sąsaja. Įvykių apdorojimo metu visi DOM pakeitimai išsaugomi atmintyje ir tik atlikus visas operacijas, sukaupti pakeitimai taikomi DOM medžiui.
Interneto kliento optimizavimas
Kad mūsų interneto klientas veiktų greičiau, stengiamės maksimaliai išnaudoti standartines naršyklės galimybes (CSS ir kt.). Taigi formos komandų skydelis (esantis beveik visose programos formose) pateikiamas tik naudojant naršyklės įrankius, naudojant dinaminį išdėstymą, pagrįstą CSS.
Bandymai
Funkcijų ir našumo testavimui naudojame patentuotą įrankį (parašytą Java ir C++ kalbomis), taip pat testų rinkinį, sukurtą ant .
Mūsų įrankis yra universalus – leidžia išbandyti beveik bet kurią langinę programą, todėl tinka tiek plonam klientui, tiek žiniatinklio klientui. Įrankis įrašo vartotojo, paleidusio 1C programos sprendimą, veiksmus į scenarijaus failą. Tuo pačiu metu įrašomi ekrano darbo srities vaizdai - standartai. Stebint naujas žiniatinklio kliento versijas, scenarijai leidžiami be vartotojo dalyvavimo. Tais atvejais, kai ekrano kopija bet kuriuo žingsniu nesutampa su pamatine, testas laikomas neįvykusiu, po kurio kokybės specialistas atlieka tyrimą, kad nustatytų, ar tai klaida, ar planuojamas sistemos veikimo pokytis. Suplanuoto elgesio atveju standartai automatiškai pakeičiami naujais.
Įrankis taip pat matuoja programos našumą iki 25 milisekundžių tikslumu. Kai kuriais atvejais mes sujungiame scenarijaus dalis (pavyzdžiui, kelis kartus pakartodami užsakymo įrašą), kad analizuotume vykdymo laiko pablogėjimą laikui bėgant. Visų matavimų rezultatai įrašomi į žurnalą analizei.
Mūsų testavimo įrankis ir programa yra bandoma
Mūsų įrankis ir Selenas papildo vienas kitą; Pavyzdžiui, jei kuris nors mygtukas viename iš ekranų pakeitė savo vietą, Selenas gali to nesekti, bet mūsų įrankis pastebės, nes lygina ekrano kopiją su standartiniu pikseliu po pikselio. Įrankis taip pat gali sekti problemas, susijusias su įvesties iš klaviatūros arba pelės apdorojimu, nes būtent tai atkuria.
Abiejų įrankių (mūsų ir seleno) bandymai atlieka tipinius darbo scenarijus iš mūsų taikomųjų sprendimų. Testai automatiškai paleidžiami kasdien sukūrus 1C:Enterprise platformą. Jei scenarijai yra lėtesni (palyginti su ankstesne versija), tiriame ir pašaliname lėtėjimo priežastį. Mūsų kriterijus paprastas – nauja konstrukcija turėtų veikti ne lėčiau nei ankstesnė.
Kūrėjai naudoja įvairius įrankius lėtėjimo incidentams tirti; daugiausia naudojamas gamybos įmonė . Užfiksuojami probleminės operacijos vykdymo žurnalai ankstesnėje ir naujoje statyboje, tada žurnalai analizuojami. Tuo pačiu metu atskirų operacijų vykdymo laikas (milisekundėmis) gali būti ne lemiamas veiksnys – naršyklėje periodiškai paleidžiami paslaugų procesai, tokie kaip šiukšlių išvežimas, jie gali sutapti su funkcijų vykdymo laiku ir iškraipyti vaizdą. Šiuo atveju aktualesni parametrai būtų vykdomų „JavaScript“ instrukcijų skaičius, DOM atliekamų atominių operacijų skaičius ir kt. Jei instrukcijų/operacijų skaičius tame pačiame scenarijuje padidėjo naujoje versijoje, tai beveik visada reiškia našumo sumažėjimą, kurį reikia pataisyti.
Be to, viena iš našumo sumažėjimo priežasčių gali būti ta, kad Google Closure Compiler dėl kokių nors priežasčių negalėjo atlikti tiesioginio funkcijos pakeitimo (pavyzdžiui, dėl to, kad funkcija yra rekursinė arba virtuali). Tokiu atveju bandome ištaisyti situaciją perrašydami šaltinio kodą.
Naršyklės plėtiniai
Kai programos sprendimui reikia funkcijų, kurių nėra „JavaScript“, naudojame naršyklės plėtinius:
- darbui su failais
- darbui su kriptografija
- dirbti su
Mūsų plėtiniai susideda iš dviejų dalių. Pirmoji dalis yra tai, kas vadinama naršyklės plėtiniu (dažniausiai tai yra „Chrome“ ir „Firefox“ plėtiniai, parašyti JavaScript), kurie sąveikauja su antrąja dalimi – dvejetainiu plėtiniu, įgyvendinančiu mums reikalingą funkcionalumą. Reikia paminėti, kad mes rašome 3 dvejetainių plėtinių versijas – Windows, Linux ir MacOS. Dvejetainis plėtinys tiekiamas kaip 1C:Enterprise platformos dalis ir yra 1C taikomųjų programų serveryje. Kai pirmą kartą iškviečiama iš žiniatinklio kliento, jis atsisiunčiamas į kliento kompiuterį ir įdiegiamas naršyklėje.
Kai veikia „Safari“, mūsų plėtiniai naudoja NPAPI, o kai veikia „Internet Explorer“, jie naudoja „ActiveX“ technologiją. dar nepalaiko plėtinių, todėl jame esantis žiniatinklio klientas veikia su apribojimais.
Tolimesnis vystymas
Viena iš interneto klientų kūrimo komandos užduočių yra tolesnis funkcionalumo tobulinimas. Žiniatinklio kliento funkcionalumas turi būti identiškas plonojo kliento funkcionalumui, visos naujos funkcijos yra diegiamos vienu metu tiek plonajame, tiek žiniatinklio kliente.
Kitos užduotys apima architektūros kūrimą, pertvarkymą, našumo ir patikimumo gerinimą. Pavyzdžiui, viena iš krypčių yra tolesnis judėjimas asinchroninio darbo modelio link. Kai kurios žiniatinklio kliento funkcijos šiuo metu yra sukurtos remiantis sinchroniniu sąveikos su serveriu modeliu. Asinchroninis modelis dabar tampa vis aktualesnis naršyklėse (ir ne tik naršyklėse), ir tai verčia mus modifikuoti žiniatinklio klientą, sinchroninius skambučius pakeičiant asinchroniniais (ir atitinkamai pertvarkant kodą). Laipsniškas perėjimas prie asinchroninio modelio paaiškinamas būtinybe palaikyti išleistus sprendimus ir laipsnišką jų pritaikymą.
Šaltinis: www.habr.com