ProHoster > blog > administrasi > Tentang klien web 1C

Tentang klien web 1C

Salah satu fitur bagus dari 1C: Teknologi perusahaan adalah bahwa solusi aplikasi yang dikembangkan menggunakan teknologi bentuk terkelola dapat diluncurkan baik dalam klien tipis (dapat dieksekusi) di bawah Windows, Linux, MacOS X, dan sebagai klien web untuk 5 browser - Chrome, Internet Explorer, Firefox, Safari, Edge, dan semuanya tanpa mengubah kode sumber aplikasi. Selain itu, secara eksternal, aplikasi di thin client dan di browser berfungsi dan terlihat hampir sama.
Temukan 10 perbedaan (di bawah potongan 2 gambar):

Jendela klien tipis di Linux:

Tentang klien web 1C

Jendela yang sama di klien web (di browser Chrome):

Tentang klien web 1C

Mengapa kami membuat klien web? Berbicara agak menyedihkan, waktu telah menetapkan tugas seperti itu bagi kami. Untuk waktu yang lama, bekerja melalui Internet telah menjadi prasyarat untuk aplikasi bisnis. Pertama, kami menambahkan kemampuan untuk bekerja melalui Internet untuk klien tipis kami (omong-omong, beberapa pesaing kami berhenti di sana; yang lain, sebaliknya, meninggalkan klien tipis dan membatasi diri pada penerapan klien web). Kami memutuskan untuk memberi pengguna kami kesempatan untuk memilih opsi klien yang paling cocok untuk mereka.

Tentang klien web 1C

Menambahkan kemampuan web ke thin client merupakan pekerjaan besar dengan perubahan total dalam arsitektur klien/server. Membuat klien web adalah proyek yang benar-benar baru yang dimulai dari awal.

Pernyataan masalah

Jadi, persyaratan untuk proyek: klien web harus melakukan hal yang sama dengan klien tipis, yaitu:

  1. Menampilkan antarmuka pengguna
  2. Jalankan kode klien yang ditulis dalam bahasa 1C

Antarmuka pengguna dalam 1C dijelaskan dalam editor visual, tetapi secara deklaratif, tanpa susunan elemen piksel demi piksel; sekitar tiga lusin jenis elemen antarmuka digunakan - tombol, kolom input (teks, digital, tanggal / waktu), daftar, tabel, grafik, dll.

Kode klien dalam bahasa 1C dapat berisi panggilan server, bekerja dengan sumber daya lokal (file, dll.), Mencetak, dan banyak lagi.

Baik klien tipis (ketika bekerja melalui web) dan klien web menggunakan rangkaian layanan web yang sama untuk berkomunikasi dengan server aplikasi 1C. Implementasi klien, tentu saja, berbeda - klien tipis ditulis dalam C ++, klien web ditulis dalam JavaScript.

Sedikit sejarah

Proyek klien web dimulai pada tahun 2006 dengan tim (rata-rata) yang terdiri dari 5 orang. Pada tahap tertentu dari proyek, pengembang dilibatkan untuk mengimplementasikan fungsionalitas tertentu (dokumen spreadsheet, diagram, dll.); sebagai aturan, ini adalah pengembang yang sama yang membuat fungsionalitas ini di thin client. Itu. pengembang menulis ulang komponen dalam JavaScript yang sebelumnya mereka buat di C++.

Sejak awal, kami menolak ide konversi otomatis (setidaknya sebagian) dari kode C++ klien tipis ke JavaScript klien web karena perbedaan konseptual yang kuat antara kedua bahasa; klien web ditulis dalam JavaScript dari awal.

Pada iterasi pertama proyek, klien web mengonversi kode klien dalam bahasa 1C bawaan langsung ke JavaScript. Thin client bertindak berbeda - kode dalam bahasa 1C bawaan dikompilasi menjadi bytecode, dan kemudian bytecode ini ditafsirkan pada klien. Selanjutnya, klien web mulai melakukan hal yang sama - pertama, memberikan peningkatan kinerja, dan kedua, memungkinkan untuk menyatukan arsitektur klien tipis dan web.

Versi pertama 1C: Platform perusahaan dengan dukungan klien web dirilis pada tahun 2009. Klien web pada saat itu mendukung 2 browser - Internet Explorer dan Firefox. Rencana awal adalah untuk mendukung Opera, tetapi karena masalah yang tidak dapat diatasi dengan penangan penutupan aplikasi di Opera pada saat itu (tidak mungkin untuk melacak dengan kepastian 100% bahwa aplikasi ditutup, dan pada saat itu untuk melakukan prosedur pemutusan dari server aplikasi 1C) dari rencana ini harus ditinggalkan.

Struktur proyek

Secara total, platform 1C:Enterprise memiliki 4 proyek yang ditulis dalam JavaScript:

  1. WebTools - pustaka bersama yang digunakan oleh proyek lain (di sini kami sertakan Perpustakaan Penutupan Google).
  2. Kontrol Dokumen Terformat (diimplementasikan dalam JavaScript baik di thin client maupun di web client)
  3. Kontrol Penjadwal (diimplementasikan dalam JavaScript baik di thin client maupun di web client)
  4. klien web

Struktur setiap proyek menyerupai struktur proyek Java (atau proyek .NET - mana yang lebih dekat dengan Anda); kami memiliki ruang nama, dan setiap ruang nama berada di folder terpisah. Di dalam folder tersebut terdapat file dan kelas namespace. Ada sekitar 1000 file dalam proyek klien web.

Secara struktural, klien web sebagian besar dibagi menjadi subsistem berikut:

  • Antarmuka aplikasi klien terkelola
    • Antarmuka aplikasi umum (menu sistem, panel)
    • Antarmuka formulir terkelola, yang mencakup, antara lain, sekitar 30 kontrol (tombol, berbagai jenis bidang input - teks, digital, tanggal / waktu, dll., Tabel, daftar, grafik, dll.)

  • Model objek tersedia untuk pengembang pada klien (total lebih dari 400 jenis: model objek antarmuka terkelola, pengaturan komposisi data, pemformatan bersyarat, dll.)
  • Penerjemah bahasa tertanam 1C
  • Ekstensi peramban (digunakan untuk fungsionalitas yang tidak didukung dalam JavaScript)
    • Bekerja dengan kriptografi
    • Bekerja dengan file
    • Teknologi komponen eksternal yang memungkinkannya digunakan di klien tipis dan web

Fitur pengembangan

Menerapkan semua hal di atas dalam JavaScript bukanlah tugas yang mudah. Mungkin klien web 1C adalah salah satu aplikasi sisi klien terbesar yang ditulis dalam JavaScript - sekitar 450.000 baris. Kami secara aktif menggunakan pendekatan berorientasi objek dalam kode klien web, yang menyederhanakan pekerjaan dengan proyek sebesar itu.

Untuk meminimalkan ukuran kode klien, pertama-tama kami menggunakan obfuscator kami sendiri, dan mulai dari platform versi 8.3.6 (Oktober 2014) kami mulai menggunakan Kompiler Penutupan Google. Efek penggunaan angka adalah ukuran kerangka kerja klien web setelah kebingungan:

  • Obfuscator sendiri - 1556 kb
  • Penyusun Penutupan Google - 1073 kb

Menggunakan Google Closure Compiler membantu kami meningkatkan kinerja klien web sebesar 30% dibandingkan obfuscator kami sendiri. Selain itu, jumlah memori yang dikonsumsi oleh aplikasi berkurang 15-25% (tergantung browser).

Google Closure Compiler bekerja sangat baik dengan kode berorientasi objek, sehingga efisiensinya paling tinggi untuk klien web. Closure Compiler melakukan beberapa hal baik untuk kita:

  • Pemeriksaan tipe statis pada tahap pembuatan proyek (disediakan oleh fakta bahwa kami menutupi kode dengan anotasi JSDoc). Hasilnya adalah pengetikan statis, sangat mirip dengan pengetikan di C++. Ini membantu menangkap persentase kesalahan yang cukup besar pada tahap kompilasi proyek.
  • Mengurangi ukuran kode melalui kebingungan
  • Sejumlah optimalisasi kode yang dapat dieksekusi, misalnya, seperti:
    • substitusi fungsi inline. Memanggil fungsi dalam JavaScript adalah operasi yang cukup mahal, dan penggantian inline dari metode kecil yang sering digunakan dapat mempercepat kode secara signifikan.
    • Menghitung konstanta pada waktu kompilasi. Jika ekspresi tergantung pada sebuah konstanta, maka akan diganti dengan nilai sebenarnya dari konstanta tersebut

Kami menggunakan WebStorm sebagai lingkungan pengembangan klien web kami.

Untuk analisis kode kami menggunakan soundQube, tempat kami mengintegrasikan penganalisa kode statis. Dengan bantuan penganalisis, kami memantau penurunan kualitas kode sumber JavaScript dan mencoba mencegahnya.

Tentang klien web 1C

Tugas apa yang kami selesaikan

Selama pelaksanaan proyek, kami menghadapi sejumlah tugas menarik yang harus kami selesaikan.

Pertukaran data dengan server dan antar windows

Ada situasi di mana kebingungan kode sumber dapat mengganggu pengoperasian sistem. Kode di luar kode yang dapat dieksekusi dari klien web, karena kebingungan, mungkin memiliki nama fungsi dan parameter yang berbeda dari yang diharapkan oleh kode yang dapat dieksekusi. Kode eksternal untuk kami adalah:

  • Kode yang berasal dari server sebagai struktur data
  • Kode untuk jendela aplikasi lain

Untuk menghindari kebingungan saat berinteraksi dengan server, kami menggunakan 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;
}

Dan untuk menghindari kebingungan saat berinteraksi dengan jendela lain, kami menggunakan apa yang disebut antarmuka yang diekspor (antarmuka di mana semua metode dapat diekspor).

/**
 * ЭкспортируСмый интСрфСйс ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π° 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 (){}

Kami menggunakan Virtual DOM sebelum menjadi arus utama)

Seperti semua pengembang yang berurusan dengan UI Web yang rumit, kami segera menyadari bahwa DOM tidak cocok untuk antarmuka pengguna yang dinamis. Hampir seketika, analog dari Virtual DOM diimplementasikan untuk mengoptimalkan pekerjaan dengan UI. Selama pemrosesan peristiwa, semua perubahan DOM disimpan dalam memori dan, hanya ketika semua operasi selesai, akumulasi perubahan diterapkan ke pohon DOM.

Pengoptimalan klien web

Agar klien web kami bekerja lebih cepat, kami mencoba menggunakan fitur standar browser (CSS, dll.) Secara maksimal. Jadi, bilah perintah formulir (terletak di hampir setiap formulir aplikasi) digambar secara eksklusif oleh browser, tata letak dinamis berdasarkan CSS.

Tentang klien web 1C

Pengujian

Untuk pengujian fungsional dan kinerja, kami menggunakan alat kami sendiri (ditulis dalam Java dan C++), serta serangkaian pengujian yang dibuat berdasarkan Selenium.

Alat kami bersifat universal - memungkinkan Anda untuk menguji hampir semua program jendela, dan karenanya cocok untuk menguji klien tipis dan klien web. Alat merekam tindakan pengguna yang meluncurkan solusi aplikasi 1C ke dalam file skrip. Pada saat yang sama, gambar area kerja layar (standar) direkam. Saat memantau versi baru klien web, skenario dimainkan tanpa partisipasi pengguna. Jika tangkapan layar tidak cocok dengan referensi pada langkah apa pun, pengujian dianggap gagal, setelah itu spesialis kualitas melakukan penyelidikan - apakah ini kesalahan atau perubahan terencana dalam perilaku sistem. Dalam hal perilaku terencana, standar secara otomatis diganti dengan yang baru.

Alat ini juga mengukur kinerja aplikasi dengan akurasi 25 milidetik. Dalam beberapa kasus, kami mengulang bagian skrip (misalnya, mengulangi entri pesanan beberapa kali) untuk menganalisis degradasi waktu eksekusi dari waktu ke waktu. Hasil semua pengukuran dicatat dalam log untuk dianalisis.

Tentang klien web 1C
Alat pengujian dan aplikasi kami sedang diuji

Alat kami dan Selenium saling melengkapi; misalnya, jika beberapa tombol di salah satu layar telah mengubah lokasinya - Selenium mungkin tidak melacaknya, tetapi alat kami akan mengetahuinya, karena membuat perbandingan piksel demi piksel tangkapan layar dengan standar. Selain itu, alat ini dapat melacak masalah dengan memproses input dari keyboard atau mouse, karena itulah yang direproduksi.

Pengujian pada kedua alat (milik kami dan Selenium) menjalankan skenario kerja tipikal dari solusi aplikasi kami. Tes diluncurkan secara otomatis setelah build harian platform 1C:Enterprise. Jika skrip melambat (dibandingkan dengan versi sebelumnya), kami akan menyelidiki dan memperbaiki penyebab pelambatan tersebut. Kriteria kami sederhana - perakitan baru harus bekerja tidak lebih lambat dari yang sebelumnya.

Pengembang menggunakan alat yang berbeda untuk menyelidiki insiden pelambatan; terutama digunakan Edisi Dynatrace AJAX produksi perusahaan Jejak Dyna. Log eksekusi operasi bermasalah pada perakitan sebelumnya dan baru dicatat, kemudian log dianalisis. Pada saat yang sama, waktu eksekusi operasi tunggal (dalam milidetik) mungkin bukan faktor penentu - proses layanan seperti pengumpulan sampah diluncurkan secara berkala di browser, mereka dapat tumpang tindih dengan waktu eksekusi fungsi dan merusak gambar. Parameter yang lebih relevan dalam hal ini adalah jumlah instruksi JavaScript yang dieksekusi, jumlah operasi atom pada DOM, dan seterusnya. Jika jumlah instruksi / operasi dalam skrip yang sama di versi baru bertambah, ini hampir selalu berarti penurunan kinerja yang perlu diperbaiki.

Selain itu, salah satu alasan penurunan kinerja mungkin karena Google Closure Compiler karena beberapa alasan tidak dapat membuat substitusi fungsi sebaris (misalnya, karena fungsinya rekursif atau virtual). Dalam hal ini, kami mencoba memperbaiki situasi dengan menulis ulang kode sumber.

Ekstensi peramban

Jika solusi yang diterapkan membutuhkan fungsionalitas yang tidak ada dalam JavaScript, kami menggunakan ekstensi browser:

  • untuk bekerja dengan file
  • untuk bekerja dengan kriptografi
  • bekerja dengan komponen eksternal

Ekstensi kami terdiri dari dua bagian. Bagian pertama adalah apa yang disebut ekstensi browser (biasanya ekstensi JavaScript untuk Chrome dan Firefox) yang berinteraksi dengan bagian kedua, ekstensi biner yang mengimplementasikan fungsionalitas yang kita butuhkan. Harus disebutkan bahwa kami menulis 3 versi ekstensi biner - untuk Windows, Linux dan MacOS. Ekstensi biner disediakan sebagai bagian dari platform 1C:Enterprise dan terletak di server aplikasi 1C. Pertama kali dipanggil dari klien web, itu diunduh ke komputer klien dan diinstal di browser.

Saat berjalan di Safari, ekstensi kami menggunakan NPAPI; saat berjalan di Internet Explorer, ekstensi kami menggunakan teknologi ActiveX. Microsoft Edge belum mendukung ekstensi, sehingga klien web bekerja dengan batasan di dalamnya.

Pengembangan lebih lanjut

Salah satu kelompok tugas untuk tim pengembangan klien web adalah pengembangan fungsionalitas lebih lanjut. Fungsionalitas klien web harus identik dengan fungsionalitas klien tipis, semua fungsionalitas baru diimplementasikan secara bersamaan di klien tipis dan klien web.

Tugas lainnya adalah pengembangan arsitektur, refactoring, peningkatan kinerja dan keandalan. Misalnya, salah satu arahannya adalah pergerakan lebih lanjut menuju model kerja asinkron. Bagian dari fungsionalitas klien web saat ini dibangun di atas model interaksi sinkron dengan server. Model asinkron sekarang menjadi lebih relevan di browser (dan tidak hanya di browser), dan ini memaksa kami untuk memodifikasi klien web dengan mengganti panggilan sinkron dengan panggilan asinkron (dan memfaktor ulang kode yang sesuai). Transisi bertahap ke model asinkron dijelaskan oleh kebutuhan untuk mendukung solusi yang dirilis dan menyesuaikannya secara bertahap.

Sumber: www.habr.com

Tambah komentar