Jedna od lijepih karakteristika 1C:Enterprise tehnologije je da se aplikativno rješenje, razvijeno korištenjem tehnologije upravljanih obrazaca, može pokrenuti i u tankom (izvršnom) klijentu za Windows, Linux, MacOS X i kao web klijent za 5 pretraživača - Chrome, Internet Explorer, Firefox, Safari, Edge i sve to bez promjene izvornog koda aplikacije. Štaviše, spolja aplikacija u tankom klijentu i u pretraživaču funkcionira i izgleda gotovo identično.
Pronađite 10 razlika (2 slike ispod rezanja):
Prozor tankog klijenta na Linuxu:
Isti prozor u web klijentu (u pregledniku Chrome):
Zašto smo napravili web klijent? Nekako patetično rečeno, vrijeme nam je postavilo takav zadatak. Rad preko interneta odavno je preduslov za poslovne aplikacije. Prvo smo dodali mogućnost rada putem interneta za naš tanki klijent (neki od naših konkurenata su, inače, stali na tome; drugi su, naprotiv, napustili tanki klijent i ograničili se na implementaciju web klijenta). Odlučili smo dati našim korisnicima mogućnost da odaberu opciju klijenta koja im najviše odgovara.
Dodavanje web-baziranih mogućnosti tankom klijentu bio je veliki projekt s potpunom promjenom klijent-server arhitekture. Kreiranje web klijenta je potpuno nov projekat, počevši od nule.
Izjava o problemu
Dakle, zahtjevi projekta: web klijent mora učiniti isto što i tanki klijent, naime:
- Prikaz korisničkog interfejsa
- Izvršite klijentski kod napisan na 1C jeziku
Korisnički interfejs u 1C opisan je u vizuelnom uređivaču, ali deklarativno, bez rasporeda elemenata piksel po piksel; Koristi se oko tri desetine tipova elemenata interfejsa - dugmad, polja za unos (tekst, broj, datum/vreme), liste, tabele, grafikoni itd.
Klijentski kod na 1C jeziku može sadržavati pozive servera, rad s lokalnim resursima (datoteke, itd.), Ispis i još mnogo toga.
I tanki klijent (kada radi preko weba) i web klijent koriste isti skup web servisa za komunikaciju sa 1C aplikacijskim serverom. Klijentske implementacije su, naravno, različite – tanki klijent je napisan u C++, a web klijent je napisan u JavaScript-u.
Malo istorije
Projekat web klijenta započeo je 2006. godine, sa timom od (u prosjeku) 5 ljudi. U određenim fazama projekta, programeri su bili uključeni u implementaciju specifične funkcionalnosti (dokument proračunske tablice, dijagrami, itd.); u pravilu su to bili isti programeri koji su ovu funkcionalnost radili u tankom klijentu. One. programeri su ponovo napisali komponente u JavaScript-u koje su prethodno kreirali u C++.
Od samog početka, odbacili smo ideju bilo kakve automatske (čak i djelomične) konverzije C++ koda tankog klijenta u JavaScript web klijent zbog jakih konceptualnih razlika između dva jezika; web klijent je napisan u JavaScript-u od nule.
U prvim iteracijama projekta, web klijent je konvertovao klijentski kod u ugrađenom 1C jeziku direktno u JavaScript. Tanki klijent se ponaša drugačije - kod u ugrađenom 1C jeziku se kompajlira u bajtkod, a zatim se taj bajt kod interpretira na klijentu. Nakon toga, web klijent je počeo da radi isto - prvo, dao je povećanje performansi, a drugo, omogućio je objedinjavanje arhitekture tankog i web klijenta.
Prva verzija platforme 1C:Enterprise s podrškom za web klijente objavljena je 2009. godine. Web klijent je u to vrijeme podržavao 2 pretraživača - Internet Explorer i Firefox. Prvobitni planovi su uključivali podršku za Operu, ali zbog nepremostivih problema u to vrijeme sa obrađivačima zatvaranja aplikacija u Operi (nije bilo moguće sa 100% sigurnošću pratiti da se aplikacija zatvara, te u tom trenutku izvršiti proceduru odvajanja od 1C aplikacijski server) iz ovih planova morali su biti napušteni.
Struktura projekta
Platforma 1C:Enterprise ukupno ima 4 projekta napisana u JavaScript-u:
- WebTools – dijeljene biblioteke koje koriste drugi projekti (mi također uključujemo ).
- Kontrolni element (implementirano u JavaScript-u i u tankom i web klijentu)
- Kontrolni element (implementirano u JavaScript-u i u tankom i web klijentu)
- Web klijent
Struktura svakog projekta liči na strukturu Java projekata (ili .NET projekata - šta je bliže); Imamo prostore imena, a svaki prostor imena je u zasebnom folderu. Unutar foldera nalaze se fajlovi i klase imenskog prostora. Postoji oko 1000 datoteka u projektu web klijenta.
Strukturno, web klijent je uglavnom podijeljen na sljedeće podsisteme:
- Upravljani interfejs klijentske aplikacije
- Opšti interfejs aplikacije (sistemski meniji, paneli)
- Interfejs upravljanih formi, uključujući, između ostalog, oko 30 kontrola (dugmad, razne vrste polja za unos - tekstualna, numerička, datum/vrijeme, itd., tabele, liste, grafikoni, itd.)
- Objektni model dostupan programerima na klijentu (ukupno preko 400 tipova: objektni model upravljanog interfejsa, postavke rasporeda podataka, uslovni stil itd.)
- Tumač ugrađenog 1C jezika
- Ekstenzije preglednika (koriste se za funkcionalnost koja nije podržana u JavaScriptu)
- Rad sa kriptografijom
- Rad sa fajlovima
- Tehnologija eksternih komponenti, koja omogućava njihovu upotrebu u tankim i web klijentima
Razvojne karakteristike
Implementacija svega gore navedenog u JavaScript nije laka. Možda je 1C web klijent jedna od najvećih aplikacija na strani klijenta napisanih u JavaScript-u - oko 450.000 linija. Aktivno koristimo objektno orijentirani pristup u kodu web klijenta, što pojednostavljuje rad s tako velikim projektom.
Da bismo smanjili veličinu klijentskog koda, prvo smo koristili vlastiti obfuscator, a počevši od verzije platforme 8.3.6 (oktobar 2014.) počeli smo koristiti . Efekat upotrebe u brojevima – veličina okvira web klijenta nakon zamagljivanja:
- Vlastiti obfuskator – 1556 kb
- Google Closure Compiler – 1073 kb
Korištenje Google Closure Compiler nam je pomoglo da poboljšamo performanse web klijenta za 30% u poređenju sa našim vlastitim obfuskatorom. Osim toga, količina memorije koju aplikacija troši smanjena je za 15-25% (u zavisnosti od pretraživača).
Google Closure Compiler radi veoma dobro sa objektno orijentisanim kodom, tako da je njegova efikasnost za web klijenta što je moguće veća. Closure Compiler čini nekoliko dobrih stvari za nas:
- Statička provjera tipa u fazi izgradnje projekta (osigurava da pokrijemo kod JSDoc napomenama). Rezultat je statičko kucanje, vrlo blisko kucanju u C++. Ovo pomaže da se uhvati prilično veliki procenat grešaka u fazi kompilacije projekta.
- Smanjenje veličine koda kroz zamagljivanje
- Brojne optimizacije izvršenog koda, na primjer, kao što su:
- inline funkcije zamjene. Pozivanje funkcije u JavaScript-u je prilično skupa operacija, a inline zamjene često korištenih malih metoda značajno ubrzavaju kod.
- Brojanje konstanti u vrijeme kompajliranja. Ako izraz zavisi od konstante, stvarna vrijednost konstante će biti zamijenjena u njega
Koristimo WebStorm kao okruženje za razvoj web klijenata.
Za analizu koda koristimo , gdje integriramo statičke analizatore koda. Pomoću analizatora pratimo degradaciju kvaliteta JavaScript izvornog koda i pokušavamo je spriječiti.
Koje probleme smo rješavali/rješavali?
Tokom realizacije projekta naišli smo na niz zanimljivih problema koje smo morali riješiti.
Razmjena podataka sa serverom i između prozora
Postoje situacije u kojima zamagljivanje izvornog koda može ometati rad sistema. Kod izvan izvršnog koda web klijenta, zbog zamagljivanja, može imati imena funkcija i parametara koja se razlikuju od onih koje naš izvršni kod očekuje. Eksterni kod za nas je:
- Kod koji dolazi sa servera u obliku struktura podataka
- Kod za drugi prozor aplikacije
Kako bismo izbjegli zamagljivanje prilikom interakcije sa serverom, koristimo oznaku @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;
}A da bismo izbjegli zamagljivanje pri interakciji s drugim prozorima, koristimo takozvana izvezena sučelja (sučelja u kojima se izvoze sve metode).
/**
* Экспортируемый интерфейс контрола 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 (){}Koristili smo Virtual DOM prije nego što je postao mainstream)
Kao i svi programeri koji se bave složenim web korisničkim sučeljima, brzo smo shvatili da DOM nije pogodan za rad sa dinamičkim korisničkim interfejsima. Gotovo odmah je implementiran analog Virtual DOM-a za optimizaciju rada sa korisničkim sučeljem. Tokom obrade događaja, sve DOM promjene se pohranjuju u memoriju i, tek kada se sve operacije završe, akumulirane promjene se primjenjuju na DOM stablo.
Optimizacija web klijenta
Da bi naš web klijent radio brže, trudimo se da maksimalno koristimo standardne mogućnosti pretraživača (CSS, itd.). Dakle, komandna tabla forme (koja se nalazi na skoro svakom obliku aplikacije) se prikazuje isključivo pomoću alata pretraživača, koristeći dinamički izgled baziran na CSS-u.
Testiranje
Za funkcionalno testiranje i testiranje performansi koristimo vlasnički alat (napisan na Javi i C++), kao i paket testova izgrađen na vrhu .
Naš alat je univerzalan - omogućava vam da testirate gotovo svaki prozorski program, te je stoga pogodan za testiranje i tankog klijenta i web klijenta. Alat bilježi radnje korisnika koji je pokrenuo 1C aplikacijsko rješenje u datoteku skripte. Istovremeno se snimaju slike radnog područja ekrana - standarda. Prilikom praćenja novih verzija web klijenta, skripte se reproduciraju bez učešća korisnika. U slučajevima kada snimak ekrana ni u jednom koraku ne odgovara referentnom, test se smatra neuspješnim, nakon čega stručnjak za kvalitet provodi istragu kako bi utvrdio da li je riječ o grešci ili planiranoj promjeni ponašanja sistema. U slučaju planiranog ponašanja, standardi se automatski zamjenjuju novim.
Alat takođe meri performanse aplikacije sa tačnošću do 25 milisekundi. U nekim slučajevima petljamo dijelove skripte (na primjer, ponavljamo unos naloga nekoliko puta) da analiziramo degradaciju vremena izvršenja tokom vremena. Rezultati svih mjerenja se zapisuju u dnevnik radi analize.
Naš alat za testiranje i aplikacija u testiranju
Naš alat i selen se međusobno nadopunjuju; na primjer, ako je neko dugme na jednom od ekrana promijenilo svoju lokaciju, Selen to možda neće pratiti, ali će naš alat primijetiti, jer pravi piksel po piksel poređenje snimka ekrana sa standardom. Alat takođe može da prati probleme sa obradom unosa sa tastature ili miša, jer je upravo to ono što reprodukuje.
Testovi na oba alata (naš i Selenium) pokreću tipične radne scenarije iz naših aplikativnih rješenja. Testovi se automatski pokreću nakon dnevne izgradnje platforme 1C:Enterprise. Ako su skripte sporije (u odnosu na prethodnu verziju), istražujemo i rješavamo uzrok usporavanja. Naš kriterij je jednostavan - nova verzija ne bi trebala raditi sporije od prethodne.
Programeri koriste različite alate za istraživanje incidenata usporavanja; uglavnom se koristi proizvodna kompanija . Evidencije izvršenja problematične operacije na prethodnim i novim buildovima se snimaju, a zatim se analiziraju dnevnici. Istovremeno, vrijeme izvršavanja pojedinačnih operacija (u milisekundama) možda nije odlučujući faktor - procesi usluge kao što je sakupljanje smeća povremeno se pokreću u pretraživaču, mogu se preklapati s vremenom izvršavanja funkcija i iskriviti sliku. Relevantniji parametri u ovom slučaju bi bili broj izvršenih JavaScript instrukcija, broj atomskih operacija na DOM-u, itd. Ako se broj instrukcija/operacija u istoj skripti povećao u novoj verziji, to gotovo uvijek znači pad performansi koji treba ispraviti.
Također, jedan od razloga za pad performansi može biti to što Google Closure Compiler iz nekog razloga nije mogao izvršiti inline zamjenu funkcije (na primjer, jer je funkcija rekurzivna ili virtuelna). U ovom slučaju pokušavamo ispraviti situaciju ponovnim pisanjem izvornog koda.
Ekstenzije pretraživača
Kada je aplikacijskom rješenju potrebna funkcionalnost koja nije dostupna u JavaScript-u, koristimo ekstenzije preglednika:
- za rad sa fajlovima
- za rad sa kriptografijom
- rad sa
Naše ekstenzije se sastoje iz dva dijela. Prvi dio je ono što se naziva ekstenzija preglednika (obično proširenja za Chrome i Firefox napisana u JavaScriptu), koja je u interakciji s drugim dijelom - binarnom ekstenzijom koja implementira funkcionalnost koja nam je potrebna. Treba napomenuti da pišemo 3 verzije binarnih ekstenzija - za Windows, Linux i MacOS. Binarna ekstenzija se isporučuje kao dio platforme 1C:Enterprise i nalazi se na 1C aplikacijskom serveru. Kada se prvi put pozove sa web klijenta, preuzima se na klijentski računar i instalira u pretraživač.
Kada se pokreću u Safariju, naše ekstenzije koriste NPAPI; kada rade u Internet Exploreru, koriste ActiveX tehnologiju. još ne podržava ekstenzije, tako da web klijent u njemu radi s ograničenjima.
Dalji razvoj
Jedan od zadataka razvojnog tima web klijenta je daljnji razvoj funkcionalnosti. Funkcionalnost web klijenta treba da bude identična funkcionalnosti tankog klijenta; sve nove funkcionalnosti se implementiraju istovremeno i u tankom i u web klijentu.
Ostali zadaci uključuju razvoj arhitekture, refaktoring, poboljšanje performansi i pouzdanosti. Na primjer, jedan od pravaca je dalje kretanje ka asinkronom modelu rada. Neke od funkcionalnosti web klijenta trenutno su izgrađene na sinkronom modelu interakcije sa serverom. Asinhroni model sada postaje relevantniji u pretraživačima (i ne samo u pretraživačima), a to nas tjera da modificiramo web klijent zamjenom sinkronih poziva asinhronim (i refaktoriranjem koda u skladu s tim). Postepeni prelazak na asinhroni model objašnjava se potrebom da se podrže objavljena rešenja i njihova postepena adaptacija.
izvor: www.habr.com