Apa aplikasi scalable?
Sebuah aplikasi scalable harus mampu mencapai pertumbuhan dalam beberapa cara, dan menambahkan, menghapus, peningkatan, rekonstruksi beberapa komponen, komponen lain dari dampak minimal.
Aplikasi besar lainnya sering dimulai dari skala yang sangat kecil, dan kemudian sedikit demi sedikit berkembang. Tapi kadang-kadang mungkin karena pertumbuhan yang berlebihan, skala menjadi lebih dan lebih, sehingga sulit untuk mengelola proyek, perangkat lunak akhir mungkin memerlukan penulisan ulang lengkap.
Pengembang coding diperlukan di awal untuk sepenuhnya memperhitungkan situasi ini. Dalam tulisan ini, yang ditulis dalam fungsi JavaScript secara independen dari aplikasi sebagai contoh untuk menggambarkan bagaimana membangun aplikasi scalable, dan juga akan membahas bagaimana menulis diuji, dipertahankan, komisioning, kode intuitif.
Artikel ini akan menggunakan soma.js kerangka kerja untuk menulis sangat scalable aplikasi jam JavaScript.
Apa soma.js?
Penting untuk membangun aplikasi yang sangat scalable yang membangun kecil, modul individu dari aplikasi. soma.js adalah kerangka JavaScript yang menyediakan berbagai alat untuk membantu pengembang menciptakan didekomposisi menjadi beberapa blok dari longgar digabungkan arsitektur.
soma.js tidak tergantung pada model arsitektur tertentu. Kerangka tersebut dapat digunakan sebagai MVC atau MV * kerangka, di samping itu, soma.js juga dapat digunakan untuk mengelolamodul terpisah , menciptakan sebuah widget yang terpisah atau arsitektur lainnya.
Masalah Coupling
Mari kita bayangkan sebuah skenario umum, "A" komponen memerlukan komponen "B" dalam rangka untuk menjalankan, yang berarti bahwa A ke B memiliki ketergantungan langsung. Jika kode komponen ketergantungan pada satu sama lain sangat besar, hal itu disebut kode tinggi ditambah . Kode ini pada akhirnya akan menyebabkan proyek keras untuk mempertahankan dan mengubah, perubahan akan mempengaruhi bagian lain dari kode.
Tinggi dan rendah kopling kode sangat berbeda dalam pekerjaan pengembang, manifestasi paling langsung adalah waktu yang dibutuhkan untuk memodifikasi kode modul, kode kopling rendah mungkin perlu lima menit, sedangkan kode coupling tinggi mungkin akan membutuhkan lima jam.
Solusinya adalah - untuk menulis mandiri, self-kemasan, kode tidak mempengaruhi komponen lain untuk memaksimalkan pengurangan ketergantungan. Ini sederhana dalam teori, tetapi dalam prakteknya sangat sulit.
Pada saat yang sama, mengurangi ketergantungan juga memunculkan pertanyaan lain: Jika komponen ada kontak satu sama lain, bagaimana berkomunikasi antara komponen? Pada titik ini,pola desain datang ke dalam bermain.
soma.js menyediakan berbagai alat dan pengujian untuk arsitektur dipisahkan, pola desain dan berbagai solusi, seperti ketergantungan suntikan (injeksi ketergantungan), pengamat mode (pola pengamat), perantara modus (pola mediator), Penampilan modus (pola fasad), modus perintah(pola perintah), sebuah berorientasi objek (OOP) tool set, dan menyediakan DOM sebagai operasi mesin template plug-in opsional.
Contoh Aplikasi
Mari kita lihat contoh aplikasi, aplikasi dapat membuat tiga jam yang berbeda di layar: jam digital, jam analog dan jam polaritas. Melalui pola desain yang berbeda, untuk membuat unsur-unsur proyek dapat kembali digunakan di luar proyek.
Lihat demo: Jam Application
Mari kita lihat bagaimana program ini dibangun.
Perencanaan proyek dan decoupling elemen
Perencanaan proyek dan dekomposisi fungsional (elemen decoupling) adalah langkah yang sangat penting dalam penyusunan kode sebelum latihan berikut, akan ada dua jenis fungsi:
- Tidak ada fungsi dependent (Idealnya, semua model dan pandangan harus sedemikian rupa sehingga dapat digunakan kembali)
- Fungsi menghapus dependensi dari komponen lain
Melalui analisis, aplikasi harus mencakup entitas yang berbeda sebagai berikut:
- Sebagai contoh aplikasi dari komponen awal --/js/app/clock.js (ClockDemo). Hal yang diperlukan untuk persiapan aplikasi, peran adalah untuk mendefinisikan dependensi dan menciptakan elemen. Ini menerima elemen DOM sebagai parameter, sehingga aplikasi tidak memiliki hard referensi DOM. --/js/app/models/timer.js Sebuah kondisi aplikasi tabungan (waktu) Model (TimerModel). Digunakan untuk memberikan informasi waktu yang diperlukan untuk melihat lapisan dapat menampilkan waktu saat ini.
- Tiga jenis tampilan jam. Peran adalah pada layar dengan cara yang berbeda untuk menampilkan jam, semua pandangan mengimplementasikan antarmuka yang sama, sehingga mereka dapat menerima informasi waktu dengan cara yang sama. / Js / app / views / jam / analog / analog.js (AnalogView), / js / app / views / jam / digital / digital.js (DigitalView) / js / app / views / jam / kutub / polar.js ( PolarView)
- Perantara (mediator) --/js/app/mediators/clock.js (ClockMediator), merupakan elemen DOM.Perannya adalah untuk menyembunyikan dan menciptakan jam, model waktu juga terhubung ke lapisan tampilan, sehingga Anda dapat menerima waktu. Mediator merangkum aktivitas komunikasi, dan menghilangkan ketergantungan dari lapisan model dan lapisan tampilan.
- Pandangan pemilih --/js/app/views/selector.js (SelectorView), digunakan untuk membuat tiga tombol jam yang berbeda. Perannya adalah untuk jadwal acara dan elemen pemberitahuan perlu menghapus jam saat ini, dan kemudian membuat jam baru.
Aplikasi kode sumber: somajs-flippin-Jam-app
Struktur file dan arsitektur dari aplikasi ditampilkan di bawah.
Refleksi pada antarmuka
Meskipun antarmuka tidak ada dalam bahasa JavaScript, tetapi banyak digunakan di Jawa atau bahasa lainnya. Oleh karena itu, kita dapat menerapkan konsep antarmuka dalam program JavaScript.
Antarmuka adalah seperangkat metode umum dan properti deskripsi. Sebuah fungsi jika Anda ingin mengimplementasikan antarmuka, Anda juga perlu untuk mengimplementasikan antarmuka dalam semua metode.
Dalam pemrograman berorientasi objek, antarmuka dapat memecahkan banyak-reuse terkait kode masalah . Beberapa superset ketat JavaScript (misalnya Ketikan ) juga mengandung fungsi antarmuka. Lihat di bawah dalam hal ini contoh , realisasi di Ketikan "mobil" kode antarmuka adalah sebagai berikut:
- antarmuka ICAR {
- engine: IEngine;
- basePrice: Nomor;
- negara: string;
- membuat: string;
- Model: string;
- Tahun: Nomor;
- }
- Kelas Mobil Mengimplementasikan Icar {
- / / Harus menerapkan tanda tangan ICAR di kelas ini
- }
Dalam JavaScript, antarmuka bukan fungsi built-in, tetapi Anda dapat menulis beberapa fungsi untuk mencapai fungsi yang sama.
Pertama, pengembang harus berpikir tentang unsur-unsur dari kebutuhan antarmuka dalam aplikasi independen, dapat digunakan kembali? Sebagai contoh, tampilan jam harus dipertukarkan, digunakan kembali, dan menyediakan cara yang persis sama, sehingga mereka dapat dipertukarkan tanpa mempengaruhi unsur-unsur lain dari situasi.
mode timer dan jam tampilan kode antarmuka adalah sebagai berikut:
- antarmuka ITimerModel {
- add (callback: Function );
- menghapus (callback: Function );
- update ();
- }
- antarmuka IClockView {
- Pembaruan (waktu: Object);
- buang ();
- }
Gambar berikut menunjukkan aplikasi jam dari antarmuka yang berbeda:
Contoh aplikasi
Langkah pertama adalah membuat aplikasi soma.js menciptakan contoh aplikasi, yang memutuskan apakah kerangka aplikasi fitur skalabilitas yang unik adalah momen penting. Semua entitas lain mungkin fungsi JavaScript dapat digunakan kembali, dan tidak dapat terikat oleh framework.
Aplikasi contoh utama untuk melakukan dua fungsi: init dan mulai, sehingga aplikasi dapat diatur oleh arsitektur yang diperlukan fungsi.
- ( Function (Jam, soma) {
- var ClockDemo = soma.Application.extend ({
- init: Fungsi () {
- }
- mulai: Fungsi () {
- }
- });
- var clockDemo = new ClockDemo ();
- }) (Window.clock = window.clock | | {}, soma);
Sebuah aplikasi mandiri
Menggunakan elemen DOM dalam aplikasi sebagai root adalah praktek yang sangat baik, yang untuk aplikasi mandiri sangat berguna. Setiap DOM seleksi dan operasi harus dimulai dari akar.
Juga, secara umum, dianjurkan untuk menggunakan CSS "kelas" pemilih bukan "ID". Karena penggunaan "ID" dapat menyebabkan aplikasi untuk elemen DOM tertentu memiliki ketergantungan keras.
- var ClockDemo = soma.Application.extend ({
- konstruktor: Fungsi (element) {
- / / Simpan root DOM Element
- ini elemen = elemen.;
- / / Panggil konstruktor super
- soma.Application.call ( ini );
- }
- init: Fungsi () {
- }
- mulai: Fungsi () {
- }
- });
- var clockDemo = new ClockDemo (document.querySelector ( 'Jam-app.' ));
Sebuah cara sederhana untuk menguji apakah aplikasi mandiri adalah untuk menciptakan beberapa contoh layar untuk melihat apakah mereka bisa bekerja secara independen.
Aturan pemetaan Injection
Sekarang bahwa aplikasi sudah memiliki infrastruktur yang dapat membuat aturan pemetaan injeksi.
Aturan pemetaan tidak lebih dari sebuah fungsi tertentu, atau menentukan nilai string. String dapat digunakan sebagai "variabel bernama" digunakan di tempat lain, sehingga injector tahu apa yang harus injeksi.
- ini . injector.mapClass ( 'waktu' , clock.TimerModel, benar );
Aturan pemetaan memungkinkan injector untuk mengetahui ketika dihadapkan dengan timer variabel harus menyuntikkan contoh fungsi clock.TimerModel. Parameter ketiga memberitahu injector selalu menyuntikkan contoh yang sama, bukan menciptakan yang baru.
- ini injector.mapClass (. 'wajah' , clock.FaceView);
- ini injector.mapClass (. 'needleSeconds' , clock.NeedleSeconds);
- ini injector.mapClass (. 'needleMinutes' , clock.NeedleMinutes);
- ini injector.mapClass (. 'needleHours' , clock.NeedleHours);
Karena jam analog telah dibagi menjadi beberapa pandangan, itu memerlukan atas empat aturan pemetaan.
- ini injector.mapValue. ( 'tampilan' , {
- 'Digital' : clock.DigitalView,
- 'Analog' : clock.AnalogView,
- 'Polar' : clock.PolarView
- });
Berisi semua benda memiliki jam yang berbeda dan pemetaan harus dibuat dalam injektor. Jam mediator bertanggung jawab untuk menciptakan objek menggunakan jam, dan dipakai sebagai pandangan yang benar.
Instantiated jam Mediator
Jam mediator elemen DOM dibuat untuk mewakili jam. Parameter pertama adalah turunan dari fungsi mediator, argumen kedua adalah elemen DOM yang diwakilinya. Variabel Target disuntikkan digunakan untuk mewakili elemen DOM.
Dibuat dengan menggunakan kerangka dari unsur-unsur inti dari "mediator" mediator:
- ini mediators.create (clock.ClockMediator,. ini element.querySelector (.'Jam.' ));
Berikut adalah kode mediator jam:
- ( Function (Jam) {
- var ClockMediator = Fungsi (target) {
- };
- clock.ClockMediator = ClockMediator;
- }) (Window.clock = window.clock | | {});
Tampilan Instansiasi picker
Tampilan Picker untuk mewakili elemen DOM digunakan untuk membuat jam tiga tombol.
- ( Function (Jam) {
- var SelectorView = Fungsi () {
- };
- clock.SelectorView = SelectorView;
- }) (Window.clock = window.clock | | {});
Buat jam pertama
Aplikasi panggilan buat acara untuk membuat jam pertama.
- ini dispatcher.dispatch (. 'Buat' , 'Analog' );
Untuk informasi lebih lanjut tentang acara tersebut dapat dibaca dalam dokumen ini .
Contoh kode aplikasi lengkap
Contoh aplikasi clock.js kode lengkap: clock.js sumber
- ( Function (Jam, soma) {
- var ClockDemo = soma.Application.extend ({
- konstruktor: Fungsi (element) {
- / / Toko akar DOM Element
- ini elemen = elemen.;
- / / Panggil konstruktor Super
- soma.Application.call ( ini );
- }
- init: Fungsi () {
- Aturan / / Pemetaan
- ini . injector.mapClass ( 'waktu' , clock.TimerModel, benar );
- ini injector.mapClass (. 'wajah' , clock.FaceView);
- ini injector.mapClass (. 'needleSeconds' , clock.NeedleSeconds);
- ini injector.mapClass (. 'needleMinutes' , clock.NeedleMinutes);
- ini injector.mapClass (. 'needleHours' , clock.NeedleHours);
- ini injector.mapValue. ( 'tampilan' , {
- 'Digital' : clock.DigitalView,
- 'Analog' : clock.AnalogView,
- 'Polar' : clock.PolarView
- });
- / / Buat jam mediator
- ini mediators.create (clock.ClockMediator,. inielement.querySelector (. 'Jam.' ));
- / / Buat jam pemilih Template
- ini createTemplate (clock.SelectorView,. inielement.querySelector (. 'Jam-Selector.' ));
- }
- mulai: Fungsi () {
- / Dispatch event / untuk membuat jam analog
- ini dispatcher.dispatch (. 'Buat' , 'Analog' );
- }
- });
- / / Instantiate aplikasi jam dengan akar DOM Element
- var clockDemo = new ClockDemo (document.querySelector ( 'Jam-app.'));
- }) (Window.clock = window.clock | | {}, soma);
Model Timer
Model tindakan timer disediakan untuk unsur-unsur lain dari waktu saat ini, tanpa harus mengetahui unsur-unsur informasi lainnya. Antarmuka yang menyediakan dua metode: menambah dan menghapus. Mereka datang dengan parameter yang digunakan untuk mengirim waktu saat ini.
- ( Function (Jam) {
- var TimerModel = Fungsi () {
- };
- TimerModel.prototype.add = Fungsi (callback) {
- / / Daftar fungsi
- };
- TimerModel.prototype.remove = Fungsi (callback) {
- / / Hapus fungsi terdaftar
- };
- clock.TimerModel = TimerModel;
- }) (Window.clock = window.clock | | {});
Tidak tergantung Model timer, tidak instantiate fungsi lainnya, dan selama mereka mengimplementasikan antarmuka yang sama (menambah dan menghapus) dapat dipertukarkan, penerapan unsur-unsur lain (seperti pandangan dan jam mediator) tidak akan diubah.
Bahkan jika seluruh model yang akan digunakan dalam aplikasi, tetapi juga hanya memodifikasi baris kode berikut:
- var ModelFunction = isOnline ServerTimeModel: timemodel;?
- ini . injector.mapClass ( 'waktu' , ModelFunction, benar );
Dapat melihat Github pada ini bagian dari sumber kode .
Tampilan Picker
Satu-satunya efek adalah bahwa pandangan pemilih peristiwa menangani pengguna. Ketika pengguna mengklik tombol, pandangan untuk mendapatkan event klik dan mengirimkan sebuah acara adat, dengan jam mediator mendengarkan dan menciptakan jam baru.
Berikut penggunaan soma template (tersedia sebagai perpustakaan yang terpisah atau soma.js plug-in) untuk memantau acara klik pengguna.
- <Div Kelas = "Jam-Selector" >
- <Data-klik tombol = "Pilih ('digital')" > Jam Digital </ button>
- <Data-klik tombol = "Pilih ('Analog')" > Analog Clock </ button>
- <Data-klik tombol = "Pilih ('Polar')" > Polar Jam </ button>
- </ Div>
- ( Function (Jam) {
- var SelectorView = Fungsi (Lingkup, dispatcher) {
- scope.select = Fungsi (Event, ID) {
- dispatcher.dispatch ( 'Buat' , ID);
- };
- };
- clock.SelectorView = SelectorView;
- }) (Window.clock = window.clock | | {});
Dapat melihat Github pada bagian ini dari sumber kode , dan soma template dokumen.
Jam View
Penerapan tiga jenis tampilan jam:
- Tampilan Analog (clock.AnalogView);
- DigitalView (clock.DigitalView);
- PolarView (clock.PolarView);
Dengan model timer, pandangan menjadi sangat dapat digunakan kembali karena:
- Mereka tidak perlu mengetahui unsur-unsur aplikasi lainnya
- Mereka adalah kode kerangka gratis
- Mereka menyediakan API sederhana untuk memperbarui kondisi saat ini
Views antara mereka yang dipertukarkan karena mereka berdua menyediakan antarmuka yang sama:
- Resepsi elemen DOM konstruktor
- Sebuah metode menerima pembaruan kejadian terkini
Hal ini membuat mereka sangat dapat digunakan kembali. Berikut adalah tampilan dari struktur jam digital:
- ( Function (Jam) {
- var DigitalView = Fungsi (target) {
- };
- DigitalView.prototype.update = Fungsi (waktu) {
- };
- DigitalView.prototype.dispose = Fungsi () {
- };
- clock.DigitalView = DigitalView;
- }) (Window.clock = window.clock | | {});
Dapat dipandang sebagai terkait dengan sumber pada Github:
Gambar injeksi ketergantungan
Unit uji aplikasi jam
Unit pengujian dirancang untuk mengisolasi setiap bagian dari aplikasi, dan menguji setiap bagian dengan benar. Unit pengujian adalah apakah aplikasi dapat memperpanjang langkah yang sangat penting.
Elemen diuji aplikasi jam harus tinggi, karena tidak ada kopling antara satu sama lain. Ini adalah ketergantungan manfaat injeksi. Contoh ini menggunakan Mocha dan Jasmine tes, yang merupakan dua banyak digunakan JavaScript kerangka pengujian unit, Anda dapat Mengejekmudah membuat objek fungsi simulasi, dan menguji setiap elemen individu.
Unit tes juga dapat dijalankan dari baris perintah. Hal ini membutuhkan penggunaan NPM untuk menginstal dependensi:
- $ NPM menginstal
- $ NPM install-g mocha
Jalankan tes:
- $ Test NPM
Kesimpulan
Untuk membuat aplikasi scalable, atau mengubah aplikasi yang ada scalable, tidak terlepas dari dua proses: menganalisa dan memecahkan masalah. Pertama, mempertimbangkan dua pertanyaan berikut:
- Apa yang membuat aplikasi scalable?
- Cara membuat aplikasi scalable?
Apa yang membuat aplikasi scalable?
Dengan metode yang berbeda dapat diperpanjang untuk mengidentifikasi tingkat aplikasi.Pertama-tama, melihat semua elemen aplikasi memenuhi persyaratan sebagai berikut:
- Elemen ini harus digunakan kembali itu?
- Ini adalah elemen tes itu?
- Apakah elemen ini memiliki tanggungan?
- Tujuan dari elemen tunggal ini itu?
Jika elemen sulit untuk diuji, atau mengandung terlalu banyak fitur, atau ada terlalu banyak dependensi, maka elemen ini harus ditingkatkan untuk membuat aplikasi scalable.
Cara membuat aplikasi scalable?
Daftar berikut tugas masing-masing dapat digunakan untuk meningkatkan skalabilitas aplikasi.
- Mengidentifikasi unsur-unsur non-sekali pakai, dan istirahat mereka
- Identifikasi " bad taste kode "dan rekonstruksi
- Menghindari duplikasi kode (DRY)
- Hindari fungsi besar
- Hindari fungsi anonim
- Tersedia, publik, diuji API
- Menggunakan konstruktor berbasis referensi atau metode setter untuk instantiate objek untuk menghindari
- Kemungkinan untuk menghilangkan ketergantungan
- Gunakan pola Observer (event) untuk menghilangkan ketergantungan dan mengirim pesan
- Dibuat untuk menghapus mediator elemen ketergantungan dan menerima pesan
- Kemungkinan untuk mencapai antarmuka yang jelas
- Menyembunyikan atau privatisasi beberapa konten dengan unsur-unsur lain yang tidak terkait.
- Direkomendasikan untuk menggunakan kombinasi (Komposisi), daripada warisan (warisan)
Ketika mengikuti kasus ini, deskripsi unsur-unsur yang sudah skalabilitas:
- Elemen ini dapat dengan mudah dipertukarkan dengan unsur-unsur lain tanpa merusak aplikasi
- Elemen ini dapat dengan mudah digunakan kembali untuk proyek-proyek eksternal
- Elemen ini dapat berhasil unit uji
Biasanya, Anda perlu menemukan sebuah buruk rasa kode , dan kemudian direkonstruksi dan diperbaiki. Kode rasa tidak enak adalah kode untuk potensi masalah yang ada dalam sinyal peringatan, untuk sebagian besar rasa buruk, memiliki kebutuhan untuk meninjau dan membuat keputusan yang tepat. Kode enak adalah tanda kebutuhan untuk rekonstruksi.
Akhirnya, makalah ini menganalisis aplikasi jam dibuat
Dalam aplikasi Jam, kerangka kerja tergantung pada dua elemen adalah:
- Contoh aplikasi
- Jam mediator
Elemen yang sangat independen dan sangat tersedia adalah:
- Model Timer
- tampilan jam
Untuk mencapai skalabilitas tinggi dan usabilitas, aplikasi telah membusuk, tujuan dari semua elemen yang tunggal:
- waktu proses waktu untuk model.
- Jam mediator digunakan untuk menyembunyikan dan membuat jam
- Sebuah selector tampilan untuk menangani peristiwa pengguna
- tampilan jam penciptaan pada layar untuk membuat tampilan jam
- Model Perantara digunakan untuk menghapus model ketergantungan dan tampilan jam timer, tanpa mediator, mereka akan memiliki ketergantungan langsung pada satu sama lain.
- Pola Observer (untuk membuat event) digunakan untuk memisahkan dari beberapa elemen lainnya melihat pemetik, unsur-unsur lain dapat memantau acara bingkai yang sama, yang juga membuat aplikasi lebih terukur,
- Ketergantungan injeksi digunakan untuk mengirim referensi untuk semua elemen dan decoupling mereka, sehingga mereka sangat diuji.
- Tampilan jam referensi konstruktor menerima referensi ke elemen DOM, yang memungkinkan mereka untuk digunakan dalam hubungannya dengan setiap elemen DOM lainnya. Selain itu, juga menyediakan API umum untuk memperbarui konten mereka sendiri, membuat unsur-unsur lain Anda dapat menggunakannya di luar, tanpa mengetahui informasinya.
- Model Timer menyediakan sebuah antarmuka untuk menambah dan menghapus callback, memungkinkan untuk mengirim waktu saat ini kepada sekelompok aktor yang terdaftar tanpa harus memahami informasi mereka.
Struktur ini membuat kode proyek renovasi lebih mudah, Anda dapat dengan mudah mengubah struktur proyek, menambah atau menghapus elemen, pengujian setiap komponen, memperbarui elemen individual tanpa harus khawatir tentang mempengaruhi seluruh aplikasi.
0 Response to "Langkah demi langkah bagaimana membangun aplikasi yang sangat scalable?"
Posting Komentar