Bagaimana seharusnya aplikasi JavaScript besar disusun?

Baru-baru ini saya telah ditunjukkan beberapa plugin JavaScript yang ditulis untuk OBIEE Mobile App Developer, serta beberapa perpustakaan khusus untuk berbagai proyek.

Berasal dari latar belakang OOP, saya sedikit bingung dengan struktur proyek-proyek ini. Saya melihat file yang panjangnya ribuan baris. Saya terbiasa membagi hal-hal menjadi file dan kelas tapi saya mengerti bahwa ini adalah kerangka kerja yang berbeda - untuk satu, ukuran file adalah masalah - tetapi harus ada cara yang lebih baik untuk melakukan semuanya?

Panjangnya skrip tidak hanya memengaruhi readibilitas dan pemeliharaan, tetapi juga pemahaman umum seseorang tentang cara kerja program.

Bagaimana struktur aplikasi besar? Adakah pola desain OOP umum untuk ini?

Jika Anda tidak terbiasa dengan pola JavaScript, saya dapat memberi tahu Anda banyak aplikasi besar dan perpustakaan menggunakan Revealing Module Pattern , tetapi ada banyak pola lain yang dapat Anda gunakan tergantung pada kebutuhan Anda.

Pola Penyingkapan Modul akan memberi Anda cara yang bagus untuk membagi file besar dan mengaturnya secara logis; Namun ketika Anda bekerja dengan pola desain apa pun dalam JavaScript, ketahuilah bahwa ini bisa sangat membingungkan. Coba gunakan ini , baru , prototipe , .call()dan .apply()bijak.

Saat bekerja pada proyek-proyek besar, ini dapat bermanfaat juga:

• Jika memungkinkan, beralihlah ke TypeScript atau ES6.
• Tulis kode Modular . Ada berbagai cara dan perpustakaan pihak ketiga, tetapi salah satunya lebih baik daripada tidak sama sekali.
• Gunakan Pelari Tugas / Sistem Bangun untuk mengotomatiskan tugas.
• Baca tentang Pola Desain . Ini bisa menjadi awal yang baik. Seperti yang saya katakan di atas, Revealing Module Pattern sangat berguna, khususnya jika Anda berpikir Anda perlu waktu untuk menguasai semua pola populer.
• Tulis Tes Unit . Bekerja dengan bahasa yang dinamis bisa lebih menantang. Menguji bagian-bagian penting dari aplikasi Anda dapat menghemat banyak waktu.
• Gunakan IDE atau Editor Teks yang benar-benar dapat membantu Anda dengan menulis kode dan menangkap bug. WebStorm adalah pilihan yang bagus. Teks Sublim juga.
• Jika IDE Anda tidak menawarkan debugger, cobalah untuk menguasai debugger browser web favorit Anda.
• Gunakan perpustakaan. Bergantung pada sifat proyek, coba gunakan kode pihak ketiga terbaik yang dapat Anda temukan. Jika Anda menulis aplikasi web, lihat Angular , React , dan backbone.js yang bagus-lama . Jika Anda menulis aplikasi Node.js, maka luangkan waktu Anda untuk mencari di repositori NPM . Anda akan terkejut betapa banyak paket sudah melakukan apa yang baru saja Anda lakukan.
• Sekalipun Anda adalah satu-satunya orang yang mengerjakan proyek ini, masih menggunakan sistem kontrol versi seperti Git dan mengikuti Standar Pengkodean yang tidak terlalu ketat dan beralasan tetapi tetap memberikan garis panduan yang baik bahwa rekan setim Anda juga akan senang untuk mengikuti.
• Bahkan jika Anda memilih TypeScript atau ES6, masih memahami OOP kelas-JavaScript JavaScript, OOP Prototypal dapat berguna, khususnya saat debug.

Saya seorang pengembang C ++ dan sudah mulai melakukan pengembangan web belakangan ini. Saya porting aplikasi desktop besar ke lingkungan web. Saya menyusun kode JavaScript saya persis seperti saya menyusun kode C ++, menggunakan pola yang sama. Saya memiliki sekitar 25-30 file di semua tetapi saya akhirnya akan mengurangi mereka menjadi 3-5 dengan clubbing yang sesuai dan mengecilkan semuanya.

Bagi saya, hanya bahasa yang telah berubah, baik atau buruk, tetapi bukan paradigma. JavaScript, untuk semua kesalahan dan frustrasinya, adalah perpaduan yang bagus antara gaya fungsional dan OOP. Sejauh ini semuanya berjalan baik.

Terakhir, satu hal yang saya sadari sejak awal adalah bahwa JavaScript memungkinkan untuk menulis lebih banyak kode ringkas daripada C ++, jadi terkadang memiliki banyak LOC yang berasal dari bahasa non JS bisa disebabkan oleh cara lama dalam melakukan sesuatu. Setelah hal ini diatasi, saya tidak melihat apa pun yang harus benar-benar berbeda Bagaimanapun, desain dan algoritme agnostik bahasa.

Tentu saja ini sangat bervariasi dari proyek ke proyek, tetapi praktik yang diterima secara umum adalah bahwa, untuk hal-hal yang dimaksudkan untuk berfungsi sebagai perpustakaan atau modul, untuk menempatkannya ke dalam satu file besar dan menggunakan enkapsulasi untuk mencegah internal ("pribadi") ) antarmuka dari bocor ke luar. Hal ini juga membantu bagi pengembang yang ingin menggunakan perpustakaan / modul - satu file untuk ditambahkan ke konfigurasi aplikasi atau potongan header daripada seluruh hierarki folder dan file untuk disalin dan ditempelkan. Ini juga mencerminkan fakta bahwa, dengan minimalisasi dan bundling, di lokasi produksi, kemungkinan besar semuanya akan digabungkan menjadi satu file untuk mengurangi jumlah permintaan HTTP.

Kode aplikasi Anda sendiri tidak perlu mengikuti praktik ini, dan mungkin tidak seharusnya. Karena aplikasi Anda adalah satu-satunya yang menggunakannya, Anda hanya perlu menambahkan file satu kali dan mungkin dapat mengandalkan platform untuk menangani minimisasi dan bundling untuk Anda.

Ketika mengerjakan kode, komponen-komponen yang berbeda biasanya dibagi menjadi modul-modul, masing-masing komponen mengimplementasikan satu kelas, dan masing-masing tinggal dalam file yang terpisah. Selama produksi, file-file ini kemudian dibundel bersama menjadi satu file (karenanya ribuan baris kode yang Anda lihat) menggunakan sesuatu seperti Browserify ( http://browserify.org/ ) atau RequireJS untuk mengurangi jumlah permintaan HTTP, tetapi juga untuk memastikan bahwa dependensi dimuat dalam urutan yang benar

Sejauh bagaimana kelas-kelas untuk modul-modul ini diimplementasikan, ini sedikit berbeda dari OOP dalam mekanika yang mendasarinya, tetapi tidak jauh berbeda di permukaan. ES6 bahkan memperkenalkan classkata kunci, jadi itu harus terlihat cukup akrab. Artikel tentang MDN ini bermanfaat untuk memulai: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

Saya menggunakan Elemen dan Anotasi Net (Petri) untuk mengatur atau "membuat struktur" perangkat lunak untuk aplikasi formulir PDF saya - program JavaScript yang menggunakan Acrobat / JavaScript API. Mungkin ini berguna dalam situasi Anda.

Diagram digunakan untuk menetapkan hubungan input-output elemen bersih dan dua tampilan bentuk anotasi. Berdasarkan diagram dan tampilan formulir, dimungkinkan untuk membuat program JavaScript secara sistematis untuk aplikasi formulir PDF. Dengan demikian "membaca" kode sumber dikurangi untuk memverifikasi bahwa itu sesuai dengan spesifikasi: diagram dan dua bentuk tampilan.

Implementasi perangkat lunak saya menggunakan konstruktor dan prototipe. Jika kinerja menjadi masalah maka mengganti prototipe dengan anggota contoh dapat meningkatkan kinerja dengan mengorbankan lebih banyak penggunaan memori. Array juga digunakan. Jika kinerja menjadi masalah maka referensi langsung digunakan.

Beberapa properti dibuat menggunakan eval; untuk objek dengan properti sangat banyak ini akan mengurangi jumlah kode dalam file sumber - dan mengurangi jumlah pengetikan oleh programmer.

Masih mungkin dan disarankan untuk menulis JavaScript dengan cara OOP yang biasa Anda lakukan. Berikut adalah buku bagus yang telah melewati pola desain paling penting dalam JavaScript.

https://addyosmani.com/resources/essentialjsdesignpatterns/book/

Ada banyak kerangka kerja JavaScript di luar sana juga di mana tujuan utamanya adalah untuk dapat membagi kode menjadi file dan modul yang berbeda. Jika kerangka kerja tempat Anda bekerja mengharuskan Anda memiliki semua kode dalam satu file, maka Anda harus beralih.