Tumpukan JavaScript dari Awal
Ini adalah panduan Jonathan Vereki versi Rusia ( @verekia). Manual aslinya ada. Panduan ini terus dikembangkan dan ditambah oleh penulis, memberikan pembaca informasi terkini dan berkualitas tinggi. Teks manual asli dan kode yang menyertainya akan berubah seiring waktu. Kami juga akan mencoba untuk selalu memperbarui versi Rusia. Terjemahan ini sesuai dengan versi bahasa Inggris pada . Kami akan senang melihat Anda
Selamat datang di panduan modern saya tentang tumpukan teknologi JavaScript: Tumpukan Teknologi JavaScript dari Awal
Ini adalah panduan minimalis dan berorientasi praktik untuk menggunakan teknologi JavaScript. Anda memerlukan pengetahuan pemrograman umum dan JavaScript dasar. Tutorial ini bertujuan untuk mengintegrasikan alat-alat yang diperlukan dan memberikan contoh paling sederhana untuk setiap alat. Anda dapat melihat dokumen ini sebagai kemampuan untuk membuat proyek template Anda sendiri dari awal.
Tentu saja, Anda tidak memerlukan semua teknologi ini jika Anda membuat halaman web sederhana dengan beberapa fungsi JS (kombinasi Browserify/Webpack + Babel + jQuery sudah cukup untuk menulis kode ES6 di beberapa file dan mengkompilasi semuanya melalui baris perintah), tetapi jika Anda ingin membuat aplikasi web yang dapat diskalakan dan Anda perlu mengonfigurasi semuanya dengan benar, maka panduan ini sangat cocok untuk Anda.
Karena tujuan panduan ini adalah untuk merakit berbagai alat, saya tidak akan menjelaskan secara detail masing-masing alat. Jika Anda ingin mendapatkan pengetahuan lebih mendalam tentangnya, lihat dokumentasinya atau panduan lainnya.
Sebagian besar teknologi yang dijelaskan di sini menggunakan React. Jika Anda baru mulai menggunakan React dan ingin mempelajarinya, ini akan membantu Anda dan memberi Anda pengenalan singkat tentang framework React berdasarkan konfigurasi pra-instal. Misalnya, saya akan merekomendasikan pendekatan ini bagi mereka yang perlu bergabung dengan tim menggunakan React dan mempraktikkan sesuatu untuk meningkatkan pengetahuan mereka. Kami tidak akan menggunakan konfigurasi preset dalam tutorial ini karena saya ingin Anda memahami sepenuhnya semua yang terjadi.
Contoh kode disertakan di setiap bagian, dan Anda dapat menjalankannya melalui benang && benang mulai atau npm install && npm start . Saya sarankan menulis semuanya sendiri dari awal, mengikuti petunjuk langkah demi langkah untuk setiap bagian.
Setiap bagian berisi kode yang ditulis di bagian sebelumnya, jadi jika Anda hanya ingin proyek akhir dengan semua yang Anda butuhkan, salin saja bagian terakhir dan lanjutkan.
Catatan: Urutan bagian tidak selalu diperlukan. Misalnya, pengujian/pengetikan dapat dilakukan sebelum memperkenalkan React. Memindahkan atau mengedit bagian yang dipublikasikan bisa jadi cukup sulit karena Anda harus melakukan perubahan pada semua bagian berikutnya. Mungkin, ketika semuanya sudah diputuskan, saya akan membawa semua dokumentasi ke dalam bentuk yang lebih nyaman.
Kode yang ditunjukkan dalam contoh berfungsi di Linux, macOS, dan Windows.
Saat ini, apa pun aplikasi web yang Anda tulis, Anda harus membuat banyak keputusan arsitektur. Dan Anda ingin menerapkannya dengan benar: menggunakan teknologi yang berkembang pesat, iterasi berkelanjutan, seefisien mungkin, cepat, andal, dll. Anda ingin melakukan lebih sedikit dan mendapatkan lebih banyak dengan menggunakan berbagai teknologi. Namun teknologi seperti itu tidak selalu mudah untuk dikuasai.
Menurut pengalaman saya (yang dengannya kita akan memahami lebih lanjut siklus pengembangan penuh dalam JavaScript), ia melakukan semua tugas di atas. Mungkin Anda pernah menemukannya di suatu tempat; Anda mungkin yakin akan keefektifannya dan bahkan pernah berdebat dengan teman tentang hal itu. Sudahkah Anda mencobanya sendiri? Dalam posting ini saya akan mengulas JavaScript full-stack, memberi tahu Anda mengapa Anda membutuhkannya dan bagaimana semuanya bekerja.
Mengapa saya menggunakan JavaScriptSaya telah menjadi pengembang web sejak tahun 1998. Pada masa itu, kami paling sering menggunakan Perl untuk pengembangan sisi server, namun tetap saja ada JavaScript di sisi klien. Sejak itu, teknologi server telah banyak berubah: satu demi satu kita diliputi oleh gelombang bahasa dan teknologi, seperti PHP, ASP, JSP, .NET, Ruby, Python, dll. Pengembang mulai menyadari bahwa menggunakan dua teknologi server yang berbeda bahasa di klien dan server mempersulit segalanya.
Pada awal era PHP dan ASP, ketika mesin template masih dalam masa pertumbuhan, pengembang menyematkan kode aplikasi langsung ke dalam HTML. Misalnya:
peringatan("Selamat Datang");
Atau lebih buruk lagi:
var pengguna_dihapus = ; pengguna_dihapus.push("");
Pemula memiliki masalah umum dalam memahami operator dalam berbagai bahasa, seperti for atau foreach. Selain itu, menulis kode serupa di server dan di klien untuk memproses data yang sama masih merepotkan hingga saat ini:
$.ajax(( url:"/json.php", sukses: fungsi(data)( var x; for(x dalam data)( alert("buah:" + x + " poin:" + data[x]) ;
Upaya pertama untuk melakukan semuanya dalam satu bahasa terdiri dari pembuatan komponen klien di server dan mengkompilasinya ke dalam JavaScript. Itu tidak berfungsi seperti yang diharapkan, dan banyak dari proyek tersebut gagal (misalnya, ASP MVC, yang menggantikan formulir Web ASP.NET, dan GWT, yang digantikan oleh Polymer yang sangat meragukan). Tapi idenya sendiri sangat bagus, terutama: satu bahasa pada klien dan server, memungkinkan kita untuk menggunakan kembali komponen dan alat (kata kuncinya di sini: alat).
Solusinya sederhana: jalankan JavaScript di server.
Aplikasi Halaman TunggalSaat bekerja dengan JavaScript full-stack, Anda sering kali perlu membuat aplikasi satu halaman (SPA). Banyak pengembang web tergoda untuk mencoba SPA. Pernahkah Anda membandingkan SPA dan aplikasi web biasa pada koneksi seluler? Perbedaan responsnya hanya sekitar sepuluh detik.
(Catatan: beberapa orang mungkin tidak setuju dengan ini. Twitter, misalnya,
Tumpukan, antrian, dan deque adalah yang paling dasar dari struktur data tingkat lanjut yang akan Anda temui. Kabar baiknya adalah mereka sangat, sangat mudah diimplementasikan dalam JavaScript.
Isi Struktur Data JavaScript
JavaScript memiliki objek Array yang sangat berguna yang dapat digunakan untuk membuat beberapa struktur data paling dasar - tumpukan dan antrian. Dalam artikel singkat ini kita akan melihat cara membuat tumpukan dan antrian serta menjelaskan beberapa aspek mengapa mereka berguna.
Tumpukan LIFOSelalu sulit untuk mengetahui tumpukan mana yang paling dasar tetapi tumpukan LIFO atau Last In First Out mungkin yang paling umum digunakan.
Objek array sederhana sudah memiliki dua metode dasar yang diperlukan untuk membuat tumpukan LIFO push dan pop.
Metode push akan menambahkan objek apa pun ke bagian atas tumpukan dan metode pop akan menghapusnya. Untuk memperlakukan array sebagai tumpukan LIFO, Anda cukup membuat sebuah instance dan menggunakan push dan pop.
var tumpukan=Array baru();
tumpukan.push("A);
tumpukan.push("B");
tumpukan.push("C"
peringatan(tumpukan.pop());
peringatan(tumpukan.pop());
peringatan(tumpukan.pop());
Jika Anda mencobanya, Anda akan melihat tampilan peringatan "C", "B" dan "A". Ini adalah properti utama tumpukan LIFO - ini membalikkan urutan data yang Anda simpan di dalamnya. Anda menekan A, B, lalu C, lalu Anda mendapatkan kembali C, B, lalu A.
Anda dapat menggunakan objek Array apa pun sebagai tumpukan LIFO dan terkadang berguna untuk memperlakukan array sebagai tumpukan untuk sementara waktu dan kemudian kembali menggunakannya sebagai array. Jika Anda benar-benar ingin membuat objek tumpukan yang hanya dapat digunakan sebagai tumpukan maka Anda harus merangkum Array dan hanya mengekspos metode push dan pop.
fungsi Tumpukan()
{
this.stac=Array baru();
ini.pop=fungsi())(
kembalikan ini.stac.pop();
}
ini.push=fungsi(item)(
ini.stac.push(item);
}
}
Jika Anda menjadikan objek stac Array pribadi menggunakan penutupan, maka satu-satunya operasi yang diperbolehkan di Stack adalah push dan pop.
var tumpukan=Tumpukan baru();
tumpukan.push("A");
tumpukan.push("B");
tumpukan.push("C");
peringatan(tumpukan.pop());
peringatan(tumpukan.pop());
peringatan(tumpukan.pop());
dan sekali lagi Anda akan melihat data diambil dalam urutan "C", "B", "A".
Perhatikan bahwa ketika kita mengacu pada "top of the stack" push menambahkan objek ke "end" array dan pop menghapus elemen terakhir.
Itu jika array sudah memiliki tiga item yang disimpan, yaitu. array, array dan array lalu Push() menyimpan objeknya dalam array.
Perhatikan juga bahwa jika Anda mencoba memunculkan nilai yang tidak ada, yaitu memunculkan tumpukan kosong, hasilnya tidak terdefinisi. Anda dapat menguji kesalahan ini di objek Stack dan melemparkan pengecualian atau kesalahan lain jika pengguna mencoba memunculkan nilai tumpukan kosong.
Tumpukan tipikal sering kali memungkinkan Anda memanipulasi penunjuk tumpukan, misalnya, atau mengintip nilai di bagian atas tumpukan. mengambilnya tanpa menghapusnya tetapi operasi "non-stack" ini umumnya tidak diperlukan.
Perhatikan juga bahwa karena Anda dapat mendorong dan memunculkan objek apa pun ke dalam tumpukan, Anda dapat menggunakannya dengan cara yang sangat canggih. Misalnya, jika Anda perlu menyimpan suatu objek di tumpukan dalam waktu yang lama seiring dengan waktu pembuatannya, Anda tidak perlu membuat objek Stack yang lebih kompleks karena Anda cukup mendorong objek gabungan:
Dorong((Data Saya,Waktu));
Perhatikan juga bahwa tidak perlu khawatir tentang masalah pencacahan - karena secara alami Anda tidak perlu menghitung struktur tumpukan.
Kerabat dekat tumpukan LIFO adalah FIFO - tumpukan First In First Out - juga dikenal sebagai Antrian karena meniru perilaku antrian di dunia nyata. Yaitu Anda menyimpan item di belakang antrian dan mengambilnya dari depan.
Sekali lagi objek Array menyediakan metode yang memungkinkan kita membuat Antrian secara langsung. Metode unshift menambahkan item ke depan Array. Untuk membuat antrian kita harus menghapus item dari akhir Array dan ini bisa kita lakukan dengan menggunakan metode pop lagi.
Yaitu memperlakukan Array sebagai antrian yang harus kita lakukan hanyalah
var Q=Array baru();
Q.unshift("A);
Q.unshift("B");
Q.unshift("C");
peringatan(Q.pop());
peringatan(Q.pop());
peringatan(Q.pop());
Jika Anda mencobanya, Anda akan melihat data diambil dalam urutan "A", "B" dan "C". Itu adalah antrian atau tumpukan FIFO tidak mengubah urutan data item yang diambil sesuai urutan penyimpanannya.
Antrian berguna ketika Anda memiliki data untuk ditangani dan tidak memiliki cukup waktu untuk menangani semuanya. Anda cukup menambahkan data yang tidak dapat Anda tangani ke dalam antrean dan menanganinya kapan pun Anda bisa. Antrian memastikan bahwa data tersebut ditangani sesuai urutan kedatangannya. Nama lain untuk antrean adalah buffer.
Jika Anda ingin membuat objek antrian Anda dapat mengikuti ide dasar yang digunakan untuk tumpukan LIFO:
Fungsi Antrian()
{
this.stac=Array baru();
ini.dequeue=fungsi())(
kembalikan ini.stac.pop();
}
this.enqueue=fungsi(item)(
ini.stac.unshift(item);
}
}
Var Q=Antrian baru();
Q.enqueue("A");
Q.enqueue("B");
Q.enqueue("C");
Peringatan(Q.dequeue());
alert(Q.dequeue());
alert(Q.dequeue());
Metode enqueue dan dequeue bukanlah nama standar tetapi sering digunakan. Kontroversi lainnya adalah mengenai apakah Anda bergabung dengan kepala atau memulai antrian dari ekor atau akhir antrian selama Anda mendapatkan tindakan FIFO dasar, semuanya berfungsi.
Seperti dalam kasus tumpukan yang mencoba menghapus sesuatu dari antrian kosong, hasilnya tidak terdefinisi. Anda juga dapat mengantri objek kompleks dan menambah antrean dengan metode tambahan untuk mengembalikan jumlah item dalam antrean dan bahkan item ke-n dalam antrean.
Ada jenis antrean yang lebih kompleks yang dapat Anda terapkan, namun jenis ini jarang ditemui.
Misalnya, antrian prioritas bekerja dengan cara yang sama tetapi ketika Anda mengantrekan suatu item, Anda juga dapat menentukan prioritasnya. Ketika barang sudah dikeluarkan dari antrean, barang dikembalikan berdasarkan urutan prioritas, bukan berdasarkan urutan kedatangannya. Anda dapat menerapkan antrian prioritas dengan mengurutkan array dalam urutan prioritas atau cukup mencari nilai yang akan dikembalikan dalam daftar yang tidak diurutkan.
Anda juga dapat menggunakan struktur data yang lebih kompleks untuk mengimplementasikan antrean prioritas seperti heap - lihat artikel selanjutnya untuk mengetahui detailnya.
JavaScript semakin populer, dengan kemampuannya yang digunakan di berbagai lapisan tumpukan teknologi pengembang dan di berbagai platform. Mereka menggunakan JS untuk membuat frontend dan backend, menulis aplikasi hybrid dan embedded, dan banyak lagi.
Sistem informasi statistik lain di GitHub dapat ditemukan, ini menegaskan apa yang dikatakan di atas.
Jika banyak proyek yang terikat erat dengan JavaScript, maka pengembang perlu memanfaatkan semua yang diberikan oleh bahasa dan ekosistemnya, berusaha untuk mengembangkan pemahaman mendalam tentang cara kerja internal bahasa tersebut sambil mengembangkan program yang hebat.
Anehnya, ada banyak pengembang yang rutin menulis dalam JavaScript, tetapi tidak mengetahui apa yang terjadi secara mendalam. Saatnya untuk memperbaikinya: materi ini dikhususkan untuk ikhtisar mesin JS menggunakan V8 sebagai contoh, mekanisme runtime, dan tumpukan panggilan.
Ikhtisar Hampir semua orang pernah mendengar, secara umum, tentang mesin JavaScript V8, dan sebagian besar pengembang mengetahui bahwa JavaScript adalah bahasa single-thread, atau menggunakan antrian panggilan balik.Di sini kita akan berbicara, pada tingkat yang cukup tinggi, tentang mengeksekusi kode JS. Dengan mengetahui apa yang sebenarnya terjadi saat JavaScript dijalankan, Anda dapat menulis program lebih baik yang berjalan lancar dan memanfaatkan API yang tersedia dengan cerdas.
Jika Anda baru saja mulai menulis JavaScript, artikel ini akan membantu Anda memahami mengapa JS, dibandingkan dengan bahasa lain, terlihat agak aneh.
Jika Anda seorang pengembang JS berpengalaman, kami harap ini membantu Anda lebih memahami cara kerja sebenarnya barang-barang yang Anda gunakan setiap hari.
Mesin JavaScript V8 Google adalah mesin JS yang terkenal. Ini digunakan, misalnya, di browser Chrome dan Node.js. Begini cara Anda membayangkannya, dengan sangat sederhana:
Representasi sederhana dari mesin V8
Dalam diagram kami, mesin direpresentasikan terdiri dari dua komponen utama:
- Heap (Memory Heap) adalah tempat dimana memori dialokasikan.
- Call Stack adalah tempat di mana frame tumpukan disebut selama eksekusi kode.
Mereka berasal dari mana? Ternyata kenyataannya sedikit lebih rumit daripada yang terlihat pada pandangan pertama.
Mesin, loop peristiwa, antrean panggilan balik, dan API yang disediakan browser
Jadi, selain mesin, kami punya lebih banyak lagi. Katakanlah - yang disebut API Web yang disediakan browser kepada kita - alat untuk bekerja dengan DOM, alat untuk mengeksekusi permintaan AJAX, sesuatu seperti fungsi setTimeout, dan banyak lagi.
Tumpukan panggilan JavaScript adalah bahasa pemrograman single-thread. Artinya, ia memiliki satu tumpukan panggilan. Jadi, pada suatu waktu tertentu ia hanya dapat melakukan satu tugas.Tumpukan panggilan adalah struktur data yang, sederhananya, mencatat informasi tentang tempat kita berada dalam program. Jika kita memasukkan suatu fungsi, kita mendorong entri tersebut ke bagian atas tumpukan. Saat kita kembali dari suatu fungsi, kita mengeluarkan elemen paling atas dari tumpukan dan berakhir kembali di tempat kita memanggil fungsi tersebut. Hanya itu yang bisa dilakukan tumpukan.
Mari kita lihat sebuah contoh. Lihatlah kode berikut:
Fungsi perkalian(x, y) ( kembalikan x * y; ) fungsi printSquare(x) ( var s = perkalian(x, x); console.log(s); ) printSquare(5);
Saat mesin pertama kali mulai mengeksekusi kode ini, tumpukan panggilan kosong. Setelah itu terjadi hal berikut: 
Panggil tumpukan selama eksekusi program
Setiap entri dalam tumpukan panggilan disebut bingkai tumpukan.
Mekanisme analisis bingkai tumpukan didasarkan pada informasi tumpukan panggilan, jejak tumpukan yang dihasilkan ketika terjadi pengecualian. Pelacakan tumpukan mewakili keadaan tumpukan pada saat pengecualian. Lihatlah kode berikut:
Fungsi foo() ( throw new Error("SessionStack akan membantu Anda mengatasi kerusakan :)"); ) fungsi bar() ( foo(); ) fungsi mulai() ( bar(); ) mulai();
Jika kita menjalankan ini di Chrome (dengan asumsi kodenya ada di foo.js), kita akan melihat informasi tumpukan berikut:
Pelacakan tumpukan setelah terjadi kesalahan
Jika ukuran tumpukan maksimum tercapai, yang disebut stack overflow akan terjadi. Hal ini dapat terjadi secara sederhana, misalnya dengan penggunaan rekursi yang tidak bijaksana. Lihatlah cuplikan kode ini:
Fungsi foo() ( foo(); ) foo();
Ketika mesin mulai mengeksekusi kode ini, semuanya dimulai dengan panggilan ke fungsi foo. Ini adalah fungsi rekursif yang tidak mengandung syarat untuk menghentikan rekursi. Dia memanggil dirinya sendiri tanpa terkendali. Hasilnya, pada setiap langkah eksekusi, informasi tentang fungsi yang sama ditambahkan ke tumpukan panggilan berulang kali. Ini terlihat seperti ini: 
Tumpukan Melimpah
Namun, pada titik tertentu, volume data pemanggilan fungsi akan melebihi ukuran tumpukan panggilan dan browser akan memutuskan untuk melakukan intervensi dengan menimbulkan kesalahan:
Melebihi ukuran tumpukan panggilan maksimum
Model eksekusi kode single-thread membuat hidup pengembang lebih mudah. Hal ini tidak perlu memperhitungkan pola interaksi perangkat lunak yang rumit, seperti kemungkinan kebuntuan thread, yang muncul di lingkungan multi-thread.
Namun, mengeksekusi kode dalam mode single-threaded juga memiliki batasan tertentu. Mengingat JavaScript memiliki tumpukan panggilan tunggal, mari kita bahas tentang apa yang terjadi ketika program melambat.
Eksekusi Kode Paralel dan Perulangan Peristiwa Apa yang terjadi jika ada fungsi pada tumpukan panggilan yang membutuhkan waktu sangat lama untuk dijalankan? Misalnya, bayangkan Anda perlu melakukan transformasi gambar yang rumit menggunakan JavaScript di browser.“Apa masalahnya di sini?” Anda bertanya. Masalahnya adalah selama ada fungsi yang berjalan di tumpukan panggilan, browser tidak dapat melakukan tugas lain - fungsi tersebut diblokir. Artinya browser tidak dapat menampilkan apa pun di layar, juga tidak dapat mengeksekusi kode lain. Dia berhenti begitu saja. Efek tersebut, misalnya, tidak kompatibel dengan antarmuka interaktif.
Namun, ini bukan satu-satunya masalah. Jika browser mulai menangani tugas-tugas berat, browser mungkin berhenti merespons pengaruh apa pun untuk waktu yang cukup lama. Kebanyakan browser akan menampilkan kesalahan dalam situasi ini, menanyakan pengguna apakah mereka ingin menghentikan skrip dan menutup halaman.
Browser meminta Anda untuk menutup halaman tersebut
Pengguna pasti tidak akan menyukai hal seperti itu.
Jadi bagaimana Anda melakukan perhitungan berat tanpa memblokir antarmuka pengguna atau membekukan browser? Solusi untuk masalah ini adalah dengan menggunakan fungsi panggilan balik asinkron. Ini adalah topik untuk diskusi terpisah.
Ringkasan Secara umum, kami telah memeriksa struktur mesin JS, mekanisme runtime, dan tumpukan panggilan. Memahami konsep yang disajikan di sini memungkinkan Anda meningkatkan kualitas kode Anda.Pembaca yang budiman! Posting ini adalah yang pertama dalam seri "Cara Kerja JavaScript" dari blog SessionStack. Yang kedua telah diterbitkan - didedikasikan untuk fitur V8 dan teknik optimasi kode. Apakah menurut Anda layak untuk diterjemahkan?
Jadi, Anda dan pasangan punya ide bisnis yang bagus. Benar?
Anda terus-menerus menambahkan lebih banyak kemungkinan dalam pikiran Anda.
Anda secara teratur menanyakan pendapat klien potensial, dan mereka semua tergila-gila dengan ide Anda.
Oke, jadi orang membutuhkannya. Anda bahkan dapat menghasilkan uang dari ini. Dan satu-satunya alasan orang masih tidak menggunakannya adalah karena Anda belum mengimplementasikan ide Anda. Belum diimplementasikan.
Dan akhirnya, suatu hari Anda memutuskan: “Ayo kita lakukan!” Dan sekarang Anda sudah mencoba mencari cara untuk mengimplementasikan logika bisnis aplikasi Anda, fitur mematikan yang akan memajukan produk. Anda mempunyai gagasan bagaimana melakukannya, dan Anda tahu bahwa Anda mampu melakukannya.
Jadi Anda berkata: “Selesai! Berhasil!" Anda memiliki prototipe yang sukses! Yang tersisa hanyalah mengemasnya ke dalam aplikasi web.
“Oke, ayo buat website,” katamu.
Dan baru kemudian Anda menyadari bahwa untuk ini Anda perlu memilih bahasa pemrograman; Anda harus memilih platform (modern); Anda perlu memilih beberapa kerangka kerja (modern); Anda perlu menyiapkan (dan membeli) penyimpanan, database, dan hosting; perlu menyediakan antarmuka untuk administrasi; Anda perlu menyediakan kontrol akses dan sistem manajemen konten. Anda ingin menjadi ramping dan fleksibel. Anda ingin menggunakan teknologi yang akan membantu Anda sukses baik dalam jangka pendek maupun jangka panjang. Namun memilihnya tidak selalu mudah.
Anda memiliki lusinan keputusan arsitektur yang perlu dibuat. Dan Anda tidak ingin salah paham: Anda memerlukan teknologi yang memungkinkan perkembangan pesat, mendukung iterasi yang konstan, efisiensi maksimum, kecepatan, keberlanjutan, dan banyak lagi. Anda ingin menjadi ramping dan fleksibel. Anda ingin menggunakan teknologi yang akan membantu Anda sukses baik dalam jangka pendek maupun jangka panjang. Namun memilihnya tidak selalu mudah.
"Saya kewalahan," kata Anda, dan Anda merasa kewalahan. Energinya tidak lagi seperti semula. Anda mencoba mengumpulkan pikiran Anda, tetapi ada terlalu banyak pekerjaan.
Prototipe tersebut perlahan memudar dan mati.
MenawarkanSetelah memberikan banyak ide untuk alasan serupa, saya memutuskan untuk merancang solusi untuk masalah ini. Saya menamai proyek ini 'Init' (atau init.js).
Ide dasarnya adalah menggunakan satu proyek untuk memulai proyek apa pun, biarkan pengembang atau pimpinan teknis membuat semua keputusan besar sekaligus dan mendapatkan template awal yang sesuai berdasarkan keputusan tersebut. Saya tahu banyak orang akan mengatakan “Anda tidak bisa menerapkan satu solusi untuk semua masalah” (pembenci akan membenci). Dan mereka mungkin benar. Tapi kita bisa mencoba menciptakan solusi umum yang sesuai, dan menurut pendapat saya, Init mengatasi tugas ini.
Untuk mencapai tujuan tersebut, ada beberapa hal penting yang perlu diperhatikan. Saat mengembangkan Init, saya fokus pada hal berikut:
Komponen
Representasi komponen adalah salah satu karakteristik utama sistem apa pun karena memungkinkan komponen perangkat lunak digunakan kembali di banyak proyek, yang merupakan tujuan utama Init. Namun representasi komponen mengandung efek samping - substitusi, yang akan menjadi sekutu utama kita dalam memerangi berbagai masalah, yang solusinya “hampir” sama.
Kemudahan pengembangan
Beberapa masalah di suatu tempat memiliki solusi, paling baik diterapkan oleh Brainf*ck. hampir mustahil untuk menulis, apalagi membaca. Ini akan menghabiskan banyak waktu dan usaha. Secara umum, Anda harus menggunakan bahasa dan kerangka kerja yang membuat pengembangan lebih mudah, bukan mempersulit, bagi Anda (dan siapa pun yang melakukannya nanti).
Masyarakat
Apapun platform yang Anda pilih, pastikan ada komunitas besar di sekitarnya. Salah satu yang dapat membantu Anda mengatasi sebagian besar masalah standar dan non-standar. Ingat: jQuery mungkin bukan perpustakaan tercepat, terbersih, atau paling elegan, namun ia adalah pemenang berkat komunitasnya.
Saya akan menunjukkan kepada Anda bagaimana saya membuat keputusan saat membuat Init, dengan mengingat tujuan-tujuan ini.
Singkatnya: Pemrograman non-pemblokiran bertujuan untuk menghilangkan tugas-tugas yang memakan waktu. Hal ini biasanya dilakukan dengan menentukan apa yang harus terjadi ketika tugas selesai, sehingga memungkinkan prosesor untuk menangani permintaan lain sementara itu.
Namun ide-ide ini bukanlah hal baru, mengapa mereka menjadi begitu populer dengan munculnya Node.js? Pemrograman non-pemblokiran sederhana dicapai dengan beberapa cara. Mungkin yang paling sederhana adalah dengan menggunakan callback dan event loop. Dalam sebagian besar bahasa, ini bukanlah tugas yang mudah: meskipun callback adalah fitur yang cukup umum, event loop tidak, dan pada titik tertentu Anda akhirnya bertengkar dengan perpustakaan eksternal (misalnya: Python, dengan Tornado). Namun dalam JavaScript, callback adalah bagian dari bahasa, sama seperti event loop, dan setiap programmer yang pernah mencoba JavaScript pasti mengenalnya (atau setidaknya menggunakannya, meskipun mereka tidak sepenuhnya memahami apa itu event loop) .
Tiba-tiba, setiap startup di Bumi dapat menggunakan kembali pengembang (baca: sumber daya) di sisi klien dan server, sehingga memecahkan masalah kepegawaian "Kami membutuhkan guru Python".
Ya, alternatif untuk JavaScript lahir setiap hari, seperti CoffeeScript, TypeScript, dan jutaan bahasa yang dikompilasi ke JavaScript. Alternatif-alternatif ini mungkin berguna dalam tahap pengembangan (), tetapi mereka tidak akan berhasil menggantikan JavaScript dalam jangka panjang karena dua alasan: komunitas mereka tidak akan pernah bertambah besar, dan fitur terbaik mereka akan diimplementasikan dalam ECMA Script (baca: JavaScript) . JavaScript bukanlah bahasa assembly, ini adalah bahasa pemrograman tingkat tinggi dengan kode sumber yang dapat Anda pahami, jadi Anda harus memahaminya.
Sayangnya, saya harus mengakui bahwa saya memiliki sedikit pengalaman dengan Angular.js, jadi saya akan mengecualikannya dari diskusi ini. Jadi, Ember.js dan Backbone.js adalah dua cara berbeda untuk menyelesaikan masalah yang sama.
Minimal, sederhana dan menawarkan Anda kebutuhan minimum untuk menulis SPA sederhana. Ember.js adalah kerangka kerja yang lengkap dan profesional untuk membuat aplikasi satu halaman. Ini memiliki lebih banyak fitur, tetapi kurva pembelajarannya lebih curam.
Tergantung pada ukuran aplikasi, solusinya mungkin sesederhana menganalisis hubungan "fitur yang digunakan/fitur yang tersedia". Ini akan memberi Anda petunjuk bagus.
Dalam kasus Init, saya ingin mencakup sebagian besar skenario, jadi saya memilih Backbone.js untuk pembuatan SPA yang mudah, dengan Backbone.Marionette.View untuk komponenisasi. Dalam desain ini, setiap komponen merupakan aplikasi sederhana, dan produk akhir dapat dibuat serumit yang saya inginkan.
Styling juga merupakan tugas besar, tapi sekali lagi kita dapat mengandalkan kerangka kerja. Tidak ada yang lebih baik untuk CSS
