🥇 Mahitungod sa 1C web client

Usa sa mga nindot nga bahin sa 1C: Enterprise nga teknolohiya mao nga ang solusyon sa aplikasyon, nga gihimo gamit ang pagdumala sa mga porma nga teknolohiya, mahimong ilunsad sa usa ka nipis (mahimo) nga kliyente alang sa Windows, Linux, MacOS X, ug isip usa ka web client alang sa 5 ka mga browser - Chrome, Internet Explorer, Firefox, Safari, Edge, ug tanan niini nga wala usba ang source code sa aplikasyon. Dugang pa, sa gawas ang aplikasyon sa manipis nga kliyente ug sa browser naglihok ug halos parehas.
Pangitag 10 ka kalainan (2 ka hulagway ubos sa cut):

Nipis nga bintana sa kliyente sa Linux:

Ang sama nga bintana sa web client (sa Chrome browser):

Ngano nga naghimo kami usa ka kliyente sa web? Sa pagkasulti nga medyo makalolooy, ang panahon nagtakda sa ingon nga buluhaton alang kanamo. Ang pagtrabaho sa Internet dugay na nga kinahanglanon alang sa mga aplikasyon sa negosyo. Una, gidugang namo ang abilidad sa pagtrabaho pinaagi sa Internet alang sa among nipis nga kliyente (ang uban sa among mga kakompetensya, sa laing bahin, mihunong niini; ang uban, sa sukwahi, mibiya sa nipis nga kliyente ug limitado ang ilang kaugalingon sa pagpatuman sa usa ka web client). Nakahukom kami nga hatagan ang among mga tiggamit og higayon sa pagpili sa kapilian sa kliyente nga labing angay kanila.

Ang pagdugang sa mga kapabilidad nga nakabase sa web sa manipis nga kliyente usa ka dako nga proyekto nga adunay kompleto nga pagbag-o sa arkitektura sa kliyente-server. Ang paghimo og web client usa ka bug-os nga bag-ong proyekto, sugod sa wala.

Pagbuot sa problema

Mao nga, ang mga kinahanglanon sa proyekto: ang kliyente sa web kinahanglan nga buhaton ang parehas sa manipis nga kliyente, nga mao:

Ipakita ang user interface
Ipatuman ang code sa kliyente nga gisulat sa 1C nga pinulongan

Ang user interface sa 1C gihulagway sa usa ka visual editor, apan deklaratibo, nga walay pixel-by-pixel nga kahikayan sa mga elemento; Mga tulo ka dosena nga matang sa mga elemento sa interface ang gigamit - mga buton, input field (teksto, numeric, petsa/oras), mga listahan, mga lamesa, mga graph, ug uban pa.

Ang code sa kliyente sa 1C nga lengguwahe mahimong adunay mga tawag sa server, nagtrabaho kauban ang mga lokal nga kapanguhaan (mga file, ug uban pa), pag-imprinta, ug daghan pa.

Ang thin client (kung nagtrabaho pinaagi sa web) ug ang web client naggamit sa samang set sa mga serbisyo sa web aron makigkomunikar sa 1C application server. Ang mga pagpatuman sa kliyente, siyempre, lahi - ang nipis nga kliyente gisulat sa C ++, ang web client gisulat sa JavaScript.

Usa ka gamay nga kasaysayan

Ang proyekto sa web client nagsugod sa 2006, nga adunay usa ka team nga (sa aberids) 5 ka mga tawo. Sa pipila ka mga yugto sa proyekto, ang mga developers nalambigit sa pagpatuman sa piho nga gamit (spreadsheet nga dokumento, mga diagram, ug uban pa); ingon nga usa ka lagda, kini ang parehas nga mga developer nga naghimo niini nga pag-andar sa manipis nga kliyente. Mga. Gisulat pag-usab sa mga developer ang mga sangkap sa JavaScript nga ilang nahimo kaniadto sa C++.

Gikan sa sinugdanan, gisalikway namo ang ideya sa bisan unsang awtomatik (bisan partial) nga pagkakabig sa C++ thin client code ngadto sa JavaScript web client tungod sa lig-on nga mga kalainan sa konsepto tali sa duha ka pinulongan; ang web client gisulat sa JavaScript gikan sa scratch.

Sa unang mga pag-usab sa proyekto, ang web client nag-convert sa client code sa built-in nga 1C nga pinulongan direkta ngadto sa JavaScript. Lahi ang paglihok sa nipis nga kliyente - ang code sa built-in nga 1C nga lengguwahe gihugpong sa bytecode, ug dayon kini nga bytecode gihubad sa kliyente. Pagkahuman, ang kliyente sa web nagsugod sa pagbuhat sa parehas - una, naghatag kini usa ka ganansya sa pasundayag, ug ikaduha, nahimo nga posible nga mahiusa ang arkitektura sa mga manipis ug mga kliyente sa web.

Ang unang bersyon sa 1C:Enterprise platform nga adunay suporta sa web client gipagawas niadtong 2009. Ang web client niadtong panahona nagsuporta sa 2 ka browser - Internet Explorer ug Firefox. Ang orihinal nga mga plano naglakip sa suporta alang sa Opera, apan tungod sa dili mabuntog nga mga problema nianang panahona sa mga tigdumala sa pagsira sa aplikasyon sa Opera (dili posible nga masubay uban ang 100% nga kasiguruhan nga ang aplikasyon nagsira, ug nianang higayona ipatuman ang pamaagi sa pagdiskonekta gikan sa ang 1C application server) gikan niini nga mga plano kinahanglang biyaan.

Istruktura sa proyekto

Sa kinatibuk-an, ang 1C: Enterprise nga plataporma adunay 4 nga mga proyekto nga gisulat sa JavaScript:

WebTools – gipaambit nga mga librarya nga gigamit sa ubang mga proyekto (gilakip usab namo Google Closure Library).
Kontrol nga elemento Giporma nga Dokumento (gipatuman sa JavaScript sa thin client ug sa web client)
Kontrol nga elemento scheduler (gipatuman sa JavaScript sa thin client ug sa web client)
Web kliyente

Ang istruktura sa matag proyekto susama sa istruktura sa mga proyekto sa Java (o .NET nga mga proyekto - bisan asa ang mas duol); Kami adunay mga namespace, ug ang matag namespace naa sa usa ka lahi nga folder. Sa sulod sa folder adunay mga file ug mga klase sa namespace. Adunay mga 1000 ka mga file sa proyekto sa web client.

Sa istruktura, ang kliyente sa web kadaghanan gibahin sa mosunod nga mga subsystem:

Gidumala nga interface sa aplikasyon sa kliyente
- Kinatibuk-ang interface sa aplikasyon (mga menu sa sistema, mga panel)
- Interface sa gidumala nga mga porma, lakip, sa uban pang mga butang, mga 30 ka mga kontrol (mga buton, lain-laing klase sa input field - text, numeric, petsa/oras, ug uban pa, mga lamesa, lista, mga graph, ug uban pa)
Ang modelo sa butang nga magamit sa mga nag-develop sa kliyente (kapin sa 400 nga mga tipo sa kinatibuk-an: gidumala nga modelo sa butang nga interface, mga setting sa layout sa datos, kondisyon nga istilo, ug uban pa)
Interpreter sa built-in nga 1C nga pinulongan
Mga extension sa browser (gigamit alang sa pagpaandar nga dili suportado sa JavaScript)
- Nagtrabaho sa cryptography
- Pagtrabaho uban sa mga file
- Teknolohiya sa gawas nga mga sangkap, nga gitugotan sila nga magamit sa manipis ug web nga mga kliyente

Mga Feature sa Pag-uswag

Ang pagpatuman sa tanan sa ibabaw sa JavaScript dili sayon. Tingali ang 1C web client usa sa pinakadako nga client-side nga aplikasyon nga gisulat sa JavaScript - mga 450.000 ka linya. Aktibo namong gigamit ang usa ka object-oriented approach sa web client code, nga nagpasayon sa pagtrabaho sa ingon ka dako nga proyekto.

Aron maminusan ang gidak-on sa code sa kliyente, una namong gigamit ang among kaugalingon nga obfuscator, ug sugod sa bersyon sa platform 8.3.6 (Oktubre 2014) nagsugod kami sa paggamit Google Closure Compiler. Ang epekto sa paggamit sa mga numero – ang gidak-on sa web client framework human sa obfuscation:

Kaugalingong obfuscator – 1556 kb
Google Closure Compiler - 1073 kb

Ang paggamit sa Google Closure Compiler nakatabang kanamo sa pagpausbaw sa performance sa web client sa 30% itandi sa among kaugalingong obfuscator. Dugang pa, ang gidaghanon sa memorya nga gigamit sa aplikasyon mikunhod sa 15-25% (depende sa browser).

Ang Google Closure Compiler maayo kaayo nga nagtrabaho sa object-oriented code, mao nga ang kahusayan niini para sa web client kay taas kutob sa mahimo. Ang Closure Compiler naghimo og pipila ka maayong mga butang alang kanato:

Static type checking sa yugto sa pagtukod sa proyekto (nagsiguro nga atong tabunan ang code sa mga anotasyon sa JSDoc). Ang resulta mao ang static nga pag-type, duol kaayo sa lebel sa pag-type sa C++. Nakatabang kini nga makuha ang medyo dako nga porsyento sa mga sayup sa yugto sa pagtipon sa proyekto.
Pagpakunhod sa gidak-on sa code pinaagi sa obfuscation
Daghang mga pag-optimize sa gipatuman nga code, pananglitan, sama sa:
- inline nga function substitutions. Ang pagtawag sa usa ka function sa JavaScript usa ka medyo mahal nga operasyon, ug ang mga inline nga pagpuli sa kanunay nga gigamit nga gagmay nga mga pamaagi labi nga nagpadali sa code.
- Pag-ihap sa mga makanunayon sa oras sa pag-compile. Kung ang usa ka ekspresyon nagdepende sa usa ka makanunayon, ang aktuwal nga kantidad sa makanunayon ilisan niini

Gigamit namo ang WebStorm isip among web client development environment.

Alang sa pagtuki sa code among gigamit soundQube, diin among gi-integrate ang static code analyzers. Gamit ang mga analisador, among gibantayan ang pagkadaot sa kalidad sa source code sa JavaScript ug gisulayan kini nga mapugngan.

Unsa nga mga problema ang atong nasulbad?

Atol sa pagpatuman sa proyekto, nakasugat mi og ubay-ubay nga makaiikag nga mga problema nga kinahanglan namo nga sulbaron.

Pagbaylo sa datos sa server ug sa taliwala sa mga bintana

Adunay mga sitwasyon diin ang pagkalipong sa source code mahimong makabalda sa operasyon sa sistema. Ang code sa gawas sa executable code sa web client, tungod sa obfuscation, mahimong adunay function ug parameter names nga lahi sa gipaabot sa atong executable code. Ang eksternal nga code alang kanamo mao ang:

Ang code nga gikan sa server sa porma sa mga istruktura sa datos
Code alang sa laing bintana sa aplikasyon

Aron malikayan ang pagkalibog kung makig-uban sa server, gigamit namon ang tag nga @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;
}

Ug aron malikayan ang obfuscation kung makig-uban sa ubang mga bintana, gigamit namon ang gitawag nga gi-export nga mga interface (mga interface diin ang tanan nga mga pamaagi gi-eksport).

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

Gigamit namo ang Virtual DOM sa wala pa kini nahimong mainstream)

Sama sa tanan nga mga developers nga nag-atubang sa komplikado nga mga Web UI, dali namong naamgohan nga ang DOM dili maayo nga haum sa pagtrabaho uban sa dinamikong user interface. Hapit dayon, usa ka analogue sa Virtual DOM ang gipatuman aron ma-optimize ang trabaho sa UI. Atol sa pagproseso sa panghitabo, ang tanang pagbag-o sa DOM gitipigan sa panumduman ug, kung nahuman na ang tanan nga operasyon, ang natipon nga mga pagbag-o magamit sa punoan sa DOM.

Pag-optimize sa kliyente sa web

Aron mas paspas ang pagtrabaho sa among kliyente sa web, gisulayan namon nga gamiton ang sagad nga kapabilidad sa browser (CSS, ug uban pa) hangtod sa labing taas. Busa, ang porma nga command panel (nga nahimutang sa halos tanang porma sa aplikasyon) gihubad nga eksklusibo gamit ang mga himan sa browser, gamit ang dinamikong layout base sa CSS.

Pagsulay

Para sa functional ug performance testing, naggamit mi og proprietary tool (gisulat sa Java ug C++), ingon man usa ka suite sa mga pagsulay nga gitukod sa ibabaw sa selenium.

Ang among himan kay unibersal - kini nagtugot kanimo sa pagsulay sa halos bisan unsang windowed nga programa, ug busa angay alang sa pagsulay sa usa ka manipis nga kliyente ug usa ka web client. Girekord sa himan ang mga aksyon sa tiggamit nga naglansad sa solusyon sa aplikasyon sa 1C sa usa ka file sa script. Sa parehas nga oras, ang mga imahe sa nagtrabaho nga lugar sa screen-mga sumbanan-girekord. Kung gimonitor ang mga bag-ong bersyon sa kliyente sa web, ang mga script gidula nga wala’y pag-apil sa tiggamit. Sa mga kaso diin ang screenshot dili motakdo sa reperensiya sa bisan unsang lakang, ang pagsulay giisip nga napakyas, pagkahuman ang usa ka kalidad nga espesyalista nagpahigayon usa ka imbestigasyon aron mahibal-an kung kini usa ka sayup o usa ka giplano nga pagbag-o sa pamatasan sa sistema. Sa kaso sa giplano nga pamatasan, ang mga sumbanan awtomatiko nga gipulihan sa mga bag-o.

Gisukod usab sa himan ang pasundayag sa aplikasyon nga adunay katukma hangtod sa 25 milliseconds. Sa pipila ka mga kaso, among gi-loop ang mga bahin sa script (pananglitan, gisubli ang order entry sa makadaghang higayon) aron analisahon ang pagkadaot sa oras sa pagpatuman sa paglabay sa panahon. Ang mga resulta sa tanan nga mga pagsukod girekord sa usa ka log alang sa pagtuki.

Ang among pagsulay nga himan ug aplikasyon ubos sa pagsulay

Ang among himan ug Selenium nagtinabangay sa usag usa; pananglitan, kung ang pipila ka buton sa usa sa mga screen nagbag-o sa lokasyon niini, ang Selenium mahimong dili masubay kini, apan ang among himan makamatikod, tungod kay naghimo ug pixel-by-pixel nga pagtandi sa screenshot sa standard. Ang himan makahimo usab sa pagsubay sa mga problema sa pagproseso sa input gikan sa keyboard o mouse, tungod kay mao gayud kini ang gipadaghan niini.

Ang mga pagsulay sa duha ka himan (among ug Selenium) nagpadagan sa kasagarang mga sitwasyon sa trabaho gikan sa among mga solusyon sa aplikasyon. Awtomatikong gilusad ang mga pagsulay human sa adlaw-adlaw nga pagtukod sa 1C:Enterprise nga plataporma. Kung ang mga script mas hinay (itandi sa miaging pagtukod), among gisusi ug gisulbad ang hinungdan sa paghinay. Ang among sukdanan yano - ang bag-ong pagtukod kinahanglan nga molihok nga dili hinay kaysa sa nauna.

Gigamit sa mga developer ang lainlaing mga himan aron imbestigahan ang mga insidente sa paghinay; nag-una nga gigamit Dynatrace AJAX nga Edisyon kompanya sa produksiyon DynaTrace. Ang mga log sa pagpatuman sa problema nga operasyon sa kaniadto ug bag-ong mga pagtukod girekord, dayon ang mga troso gisusi. Sa parehas nga oras, ang oras sa pagpatuman sa usa ka operasyon (sa millisecond) mahimo’g dili usa ka mahukmanon nga hinungdan - ang mga proseso sa serbisyo sama sa pagkolekta sa basura kanunay nga gilunsad sa browser, mahimo silang mag-overlap sa oras sa pagpatuman sa mga gimbuhaton ug pagtuis sa litrato. Ang mas may kalabutan nga mga parameter niini nga kaso mao ang gidaghanon sa mga instruksiyon sa JavaScript nga gipatuman, ang gidaghanon sa atomic nga mga operasyon sa DOM, ug uban pa. Kung ang gidaghanon sa mga instruksyon/operasyon sa parehas nga script midaghan sa usa ka bag-ong bersyon, kini hapit kanunay nagpasabut nga usa ka pagkunhod sa pasundayag nga kinahanglan nga tul-iron.

Usab, usa sa mga hinungdan sa pag-ubos sa pasundayag mahimo nga ang Google Closure Compiler sa usa ka hinungdan wala makahimo sa inline nga pagpuli sa function (pananglitan, tungod kay ang function recursive o virtual). Niini nga kaso, gisulayan namon ang pagtul-id sa sitwasyon pinaagi sa pagsulat pag-usab sa source code.

Mga extension sa browser

Kung ang solusyon sa aplikasyon nanginahanglan gamit nga wala magamit sa JavaScript, gigamit namon ang mga extension sa browser:

alang sa pagtrabaho uban sa mga file
alang sa pagtrabaho uban sa cryptography
pagtrabaho uban sa gawas nga mga sangkap

Ang among mga extension naglangkob sa duha ka bahin. Ang una nga bahin mao ang gitawag nga extension sa browser (kasagaran mga extension alang sa Chrome ug Firefox nga gisulat sa JavaScript), nga nakig-uban sa ikaduha nga bahin - usa ka binary extension nga nagpatuman sa gamit nga kinahanglan namon. Kinahanglan nga hisgutan nga nagsulat kami sa 3 nga mga bersyon sa binary extension - alang sa Windows, Linux ug MacOS. Ang binary extension gihatag isip kabahin sa 1C:Enterprise platform ug nahimutang sa 1C application server. Kung gitawag sa unang higayon gikan sa usa ka web client, kini ma-download sa computer sa kliyente ug ma-install sa browser.

Kung nagdagan sa Safari, gigamit sa among mga extension ang NPAPI; kung nagdagan sa Internet Explorer, gigamit nila ang teknolohiya sa ActiveX. Microsoft Edge wala pa nagsuporta sa mga extension, mao nga ang kliyente sa web niini nagtrabaho uban ang mga pagdili.

Dugang kalamboan

Usa sa mga buluhaton alang sa web client development team mao ang dugang nga pagpalambo sa functionality. Ang pagpaandar sa web client kinahanglan nga parehas sa functionality sa thin client; ang tanang bag-ong functionality dungan nga gipatuman sa thin ug web clients.

Ang ubang mga buluhaton naglakip sa pagpalambo sa arkitektura, refactoring, pagpalambo sa performance ug kasaligan. Pananglitan, usa sa mga direksyon mao ang dugang nga paglihok padulong sa usa ka asynchronous nga modelo sa trabaho. Ang pipila sa mga gamit sa web client karon gitukod sa usa ka synchronous nga modelo sa interaksyon sa server. Ang asynchronous nga modelo karon nahimong mas may kalabutan sa mga browser (ug dili lamang sa mga browser), ug kini nagpugos kanato sa pag-usab sa web client pinaagi sa pag-ilis sa mga synchronous nga tawag sa mga asynchronous (ug refactoring sa code sumala niana). Ang anam-anam nga pagbalhin ngadto sa usa ka asynchronous nga modelo gipatin-aw sa panginahanglan sa pagsuporta sa gipagawas nga mga solusyon ug sa ilang hinay-hinay nga pagpahiangay.

Source: www.habr.com

Mahitungod sa 1C web client