Jedna od lijepih značajki 1C:Enterprise tehnologije je da se aplikacijsko 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 preglednika - Chrome, Internet Explorer, Firefox, Safari, Edge i sve to bez promjene izvornog koda aplikacije. Štoviše, izvana aplikacija u tankom klijentu iu pregledniku 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? Vrijeme nam je, pomalo patetično rečeno, postavilo takav zadatak. Rad preko interneta odavno je preduvjet za poslovne aplikacije. Prvo, dodali smo mogućnost rada putem Interneta za naš tanki klijent (neki od naših konkurenata, usput, tu su stali; drugi su, naprotiv, napustili tanki klijent i ograničili se na implementaciju web klijenta). Odlučili smo našim korisnicima pružiti mogućnost odabira klijentske opcije koja im najviše odgovara.
Dodavanje mogućnosti temeljenih na webu tankom klijentu bio je veliki projekt s potpunom promjenom arhitekture klijent-poslužitelj. Izrada web klijenta je potpuno novi projekt, koji počinje od nule.
Formuliranje problema
Dakle, zahtjevi projekta: web klijent mora raditi isto što i tanki klijent, naime:
- Prikaz korisničkog sučelja
- Izvršite kod klijenta napisan u 1C jeziku
Korisničko sučelje u 1C opisano je u vizualnom editoru, ali deklarativno, bez rasporeda elemenata po pikselima; Koristi se oko tri desetine vrsta elemenata sučelja - gumbi, polja za unos (tekst, numerički, datum/vrijeme), popisi, tablice, grafikoni itd.
Klijentski kod na jeziku 1C može sadržavati pozive poslužitelja, rad s lokalnim resursima (datoteke itd.), Ispis i još mnogo toga.
I tanki klijent (kada radite putem weba) i web klijent koriste isti skup web usluga za komunikaciju s 1C aplikacijskim poslužiteljem. Klijentske implementacije su, naravno, različite - tanki klijent je napisan u C++, a web klijent je napisan u JavaScriptu.
Malo povijesti
Projekt web klijenta započeo je 2006. godine s timom od (u prosjeku) 5 ljudi. U određenim fazama projekta, programeri su bili uključeni u implementaciju specifične funkcionalnosti (tablični dokument, dijagrami, itd.); u pravilu su to bili isti programeri koji su radili ovu funkcionalnost u tankom klijentu. Oni. programeri su ponovno napisali komponente u JavaScriptu koje su prethodno stvorili 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 velikih konceptualnih razlika između ta dva jezika; web klijent je ispočetka napisan u JavaScriptu.
U prvim iteracijama projekta, web klijent je pretvorio klijentski kod u ugrađenom 1C jeziku izravno u JavaScript. Tanki klijent djeluje drugačije - kod u ugrađenom 1C jeziku se prevodi u bajt kod, a zatim se taj bajt kod tumači na klijentu. Nakon toga, web klijent je počeo činiti isto - prvo, dao je dobitak performansi, a drugo, omogućio je objedinjavanje arhitekture tankih i web klijenata.
Prva verzija platforme 1C:Enterprise s podrškom za web klijente objavljena je 2009. godine. Web klijent je u to vrijeme podržavao 2 preglednika - Internet Explorer i Firefox. Prvotni planovi uključivali su podršku za Operu, no zbog tada nepremostivih problema s rukovateljima zatvaranja aplikacije u Operi (nije bilo moguće sa 100% sigurnošću pratiti da se aplikacija zatvara, te u tom trenutku provesti proceduru prekida veze s 1C aplikacijski poslužitelj) iz ovih planova moralo se odustati.
Struktura projekta
Ukupno, platforma 1C:Enterprise ima 4 projekta napisana u JavaScript-u:
- WebTools – dijeljene biblioteke koje koriste drugi projekti (također uključujemo ).
- Upravljački element (implementirano u JavaScript-u u tankom klijentu i web klijentu)
- Upravljački element (implementirano u JavaScript-u u tankom klijentu i web klijentu)
- Web klijent
Struktura svakog projekta nalikuje strukturi Java projekata (ili .NET projekata - što god je bliže); Imamo prostore imena, a svaki prostor imena je u zasebnoj mapi. Unutar mape nalaze se datoteke i klase imenskog prostora. Postoji oko 1000 datoteka u projektu web klijenta.
Strukturno, web klijent je uglavnom podijeljen na sljedeće podsustave:
- Sučelje upravljane klijentske aplikacije
- Opće sučelje aplikacije (izbornici sustava, ploče)
- Sučelje upravljanih formi, uključujući između ostalog oko 30 kontrola (gumbi, razne vrste polja za unos - tekstualna, numerička, datum/vrijeme itd., tablice, liste, grafikoni itd.)
- Objektni model dostupan programerima na klijentu (ukupno preko 400 tipova: objektni model upravljanog sučelja, postavke izgleda podataka, uvjetni stil itd.)
- Tumač ugrađenog 1C jezika
- Proširenja preglednika (koriste se za funkcije koje nisu podržane u JavaScriptu)
- Rad s kriptografijom
- Rad s datotekama
- Tehnologija vanjskih komponenti, koja im omogućuje korištenje iu tankim i web klijentima
Značajke razvoja
Implementacija svega navedenog u JavaScript nije laka. Možda je 1C web klijent jedna od najvećih aplikacija na strani klijenta napisanih u JavaScriptu - oko 450.000 XNUMX redaka. Aktivno koristimo objektno orijentirani pristup u kodu web klijenta, što pojednostavljuje rad s tako velikim projektom.
Kako bismo smanjili veličinu klijentskog koda, prvo smo koristili vlastiti maskor, a počevši od verzije platforme 8.3.6 (listopad 2014.) počeli smo koristiti . Učinak korištenja u brojkama – veličina okvira web klijenta nakon maskiranja:
- Vlastiti obfuskator – 1556 kb
- Google Closure Compiler – 1073 kb
Korištenje Google Closure Compiler pomoglo nam je poboljšati izvedbu web klijenta za 30% u usporedbi s našim vlastitim maskatorom. Osim toga, količina memorije koju aplikacija troši smanjena je za 15-25% (ovisno o pregledniku).
Google Closure Compiler vrlo dobro radi s objektno orijentiranim kodom, tako da je njegova učinkovitost za web klijenta najveća moguća. Closure Compiler čini nekoliko dobrih stvari za nas:
- Statička provjera tipa u fazi izgradnje projekta (osigurava da pokrivamo kod JSDoc komentarima). Rezultat je statično tipkanje, vrlo blizu razine tipkanja u C++. To pomaže uhvatiti prilično velik postotak pogrešaka u fazi kompilacije projekta.
- Smanjenje veličine koda kroz maskiranje
- Niz optimizacija izvedenog koda, na primjer, kao što su:
- zamjene inline funkcija. Pozivanje funkcije u JavaScriptu prilično je skupa operacija, a ugrađene zamjene često korištenih malih metoda značajno ubrzavaju kod.
- Brojanje konstanti u vrijeme prevođenja. Ako izraz ovisi o konstanti, stvarna vrijednost konstante bit će zamijenjena u njega
Koristimo WebStorm kao naše razvojno okruženje za web klijente.
Za analizu koda koristimo , gdje integriramo statičke analizatore koda. Pomoću analizatora pratimo degradaciju kvalitete JavaScript izvornog koda i pokušavamo to spriječiti.
Koje probleme smo/rješavamo?
Tijekom provedbe projekta naišli smo na niz zanimljivih problema koje smo morali riješiti.
Razmjena podataka s poslužiteljem i između prozora
Postoje situacije u kojima maskiranje izvornog koda može ometati rad sustava. Kod izvan izvršnog koda web klijenta, zbog maskiranja, može imati nazive funkcija i parametara koji se razlikuju od onih koje očekuje naš izvršni kod. Eksterni kod za nas je:
- Kod koji dolazi s poslužitelja u obliku podatkovnih struktura
- Kod za drugi prozor aplikacije
Kako bismo izbjegli zamagljivanje prilikom interakcije s poslužiteljem, 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 kako bismo izbjegli zamagljivanje prilikom interakcije 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 sučeljima, brzo smo shvatili da DOM nije prikladan za rad s dinamičkim korisničkim sučeljima. Gotovo odmah implementiran je analog Virtual DOM-a za optimizaciju rada s korisničkim sučeljem. Tijekom obrade događaja, sve promjene DOM-a pohranjuju se u memoriju i tek kada su sve operacije dovršene, akumulirane promjene se primjenjuju na DOM stablo.
Optimiziranje web klijenta
Kako bi naš web klijent radio brže, nastojimo maksimalno koristiti standardne mogućnosti preglednika (CSS, itd.). Dakle, komandna ploča obrasca (koja se nalazi na gotovo svakom obrascu aplikacije) prikazuje se isključivo pomoću alata preglednika, koristeći dinamički izgled temeljen na CSS-u.
Testiranje
Za testiranje funkcionalnosti i performansi koristimo vlasnički alat (napisan u Javi i C++), kao i paket testova izgrađenih na temelju .
Naš je alat univerzalan - omogućuje vam testiranje gotovo bilo kojeg programa s prozorima i stoga je prikladan za testiranje i tankog klijenta i web klijenta. Alat bilježi radnje korisnika koji je pokrenuo 1C aplikacijsko rješenje u datoteku skripte. Istodobno se snimaju slike radnog područja zaslona - standardi. Prilikom praćenja novih verzija web klijenta, skripte se reproduciraju bez sudjelovanja korisnika. U slučajevima kada screenshot niti u jednom koraku ne odgovara referentnom, test se smatra neuspjelim, nakon čega stručnjak za kvalitetu provodi istragu kako bi utvrdio radi li se o pogrešci ili planiranoj promjeni ponašanja sustava. U slučaju planiranog ponašanja, standardi se automatski zamjenjuju novima.
Alat također mjeri rad aplikacije s točnošću do 25 milisekundi. U nekim slučajevima, ponavljamo dijelove skripte u petlji (na primjer, ponavljamo unos naloga nekoliko puta) kako bismo analizirali degradaciju vremena izvršenja tijekom vremena. Rezultati svih mjerenja bilježe se u dnevnik radi analize.
Naš alat za testiranje i aplikacija na testu
Naš alat i Selenium se nadopunjuju; na primjer, ako je neki gumb na jednom od zaslona promijenio svoju lokaciju, Selenium to možda neće pratiti, ali naš će alat primijetiti, jer pravi piksel po piksel usporedbu snimke zaslona sa standardom. Alat također može pratiti probleme s obradom unosa s tipkovnice ili miša, budući da je to upravo ono što reproducira.
Testovi na oba alata (naš i Selenium) pokreću tipične scenarije rada iz naših aplikacijskih rješenja. Testovi se automatski pokreću nakon dnevne izgradnje platforme 1C:Enterprise. Ako su skripte sporije (u usporedbi s prethodnom verzijom), 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 tvrtka . Bilježe se dnevnici izvršenja problematične operacije na prethodnim i novim buildovima, zatim se dnevnici analiziraju. Istodobno, vrijeme izvršenja pojedinačnih operacija (u milisekundama) možda neće biti odlučujući čimbenik - servisni procesi poput skupljanja smeća povremeno se pokreću u pregledniku, mogu se preklapati s vremenom izvršavanja funkcija i iskriviti sliku. Relevantniji parametri u ovom slučaju bili bi 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 ugrađenu zamjenu funkcije (na primjer, jer je funkcija rekurzivna ili virtualna). U ovom slučaju pokušavamo ispraviti situaciju prepisivanjem izvornog koda.
Proširenja preglednika
Kada aplikacijsko rješenje treba funkcionalnost koja nije dostupna u JavaScriptu, koristimo proširenja preglednika:
- za rad s datotekama
- za rad s kriptografijom
- Raditi sa
Naše ekstenzije se sastoje od dva dijela. Prvi dio je ono što se naziva ekstenzija preglednika (obično ekstenzije za Chrome i Firefox napisana u JavaScriptu), koje su u interakciji s drugim dijelom - binarnim ekstenzijom koja implementira funkcionalnost koja nam je potrebna. Treba spomenuti da pišemo 3 verzije binarnih proširenja - za Windows, Linux i MacOS. Binarno proširenje isporučuje se kao dio platforme 1C:Enterprise i nalazi se na poslužitelju aplikacija 1C. Kada se prvi put pozove s web klijenta, preuzima se na klijentsko računalo i instalira u preglednik.
Kada rade u Safariju, naša proširenja koriste NPAPI; kada rade u Internet Exploreru, koriste ActiveX tehnologiju. još ne podržava proširenja, tako da web klijent u njemu radi s ograničenjima.
Daljnji razvoj
Jedan od zadataka razvojnog tima web klijenta je daljnji razvoj funkcionalnosti. Funkcionalnost web klijenta trebala bi biti identična funkcionalnosti tankog klijenta; sve nove funkcionalnosti implementirane su istovremeno iu tankom i u web klijentu.
Ostali zadaci uključuju razvoj arhitekture, refaktoriranje, poboljšanje performansi i pouzdanosti. Primjerice, jedan od smjerova je daljnje kretanje prema asinkronom modelu rada. Neke od funkcionalnosti web klijenta trenutno su izgrađene na sinkronom modelu interakcije s poslužiteljem. Asinkroni model sada postaje sve relevantniji u preglednicima (i ne samo u preglednicima), a to nas tjera da modificiramo web klijent zamjenom sinkronih poziva asinkronim (i refaktoriranjem koda u skladu s tim). Postupni prijelaz na asinkroni model objašnjava se potrebom podrške objavljenim rješenjima i njihovom postupnom prilagodbom.
Izvor: www.habr.com