Web Notes
1.0.0
Baca online >>
Kasus Kode · Bahan Referensi
Pengembangan web mudah untuk memulai tetapi sulit diketahui. Ini dibagi menjadi beberapa tahap seperti pandangan pertama di pintu, memasuki ruangan, dan mengintegrasikan seluruh proses. Jika Anda membaca serangkaian artikel penulis untuk pertama kalinya, disarankan untuk pergi ke jalur teknis beruang tertentu untuk pemahaman yang komprehensif. Dalam seri ini, penulis berkomitmen untuk mengeksplorasi bagaimana meningkatkan efisiensi R&D tim secara efektif dan melengkapi pengiriman secara tepat waktu dan andal sepanjang siklus hidup iterasi produk; Pada saat yang sama, ia dapat mengontrol kompleksitas keseluruhan sistem dan terus mengoptimalkan kinerja dan pengalaman sistem.
Melihat kembali perubahan brilian dalam teknologi web dan ekologi selama beberapa dekade terakhir, kami telah mengalami perubahan menarik dan sering hilang dalam kebingungan pilihan. Dengan inovasi versi browser dan peningkatan kinerja perangkat keras, pengembangan front-end web telah memasuki era yang cepat dan terus berubah. Kerangka kerja pengembangan front-end yang tak terhitung jumlahnya dan sistem teknis bersaing untuk kecantikan, yang membuat pengembang bingung dan bahkan bingung. Terutama dengan munculnya kerangka kerja front-end modern (Angular, React, Vue.js), peningkatan fitur bahasa seperti JavaScript, CSS, HTML, dll., Dan konsep teoritis yang diusulkan seperti teknik, cross-platform, front-end mikro, front-end besar, dan BFF, Teknik dan Komunitas. status. Adapun apa yang disebut insinyur front-end modern, mereka biasanya perlu menggunakan banyak pengetahuan profesional untuk menyelesaikan masalah teknik, termasuk cara memodulasi proyek, cara merancang interaksi antara komponen, cara meningkatkan penggunaan kembali, cara meningkatkan efisiensi kemasan, mengoptimalkan kinerja rendering browser, dll;; Tidak lagi seperti sebelumnya, mereka hanya membutuhkan rutin HTML/CSS/JS untuk mengembangkan halaman statis.
Secara keseluruhan, setiap ekosistem pemrograman akan melewati tiga tahap, pertama -tama, periode aslinya. Karena perlu untuk memperluas bahasa dan API dasar, tahap ini akan melahirkan sejumlah besar alat tambahan. Pada tahap kedua, karena hal -hal yang dibuat menjadi lebih kompleks, lebih banyak organisasi diperlukan, dan sejumlah besar pola desain dan pola arsitektur akan diperkenalkan. Tahap ini akan melahirkan sejumlah besar kerangka kerja. Pada tahap ketiga, dengan kompleksitas permintaan lebih lanjut dan perluasan tim, memasuki tahap teknik, dan berbagai MVC hierarkis, MVP, MVVM, dll., Pengembangan visual, pengujian otomatis, dan sistem kolaborasi tim muncul.
Menariknya, ketika kita berdiri pada titik waktu yang berbeda, divisi dari tiga tahap ini juga tidak konsisten. Menurut pemahaman penulis saat ini, ini dibagi menjadi tiga tahap yang berbeda: rendering template, pemisahan front-end dan aplikasi satu halaman, teknik dan front-end mikro, front-end besar dan tanpa server.
Tentu saja, setiap tahap kecil akan disertai dengan kemunculan kerangka kerja baru dan alat -alat baru:
Pengembangan Web Front-End dapat ditelusuri kembali ke Publik Tim Berners-Lee yang menyebutkan deskripsi HTML pada tahun 1991, dan kemudian W3C merilis standar HTML4 pada tahun 1999. Tahap ini terutama arsitektur B/S, dan tidak ada konsep pengembangan front-end yang disebut. Pada saat ini, sebagian besar halaman statis berdasarkan rendering template. Hal utama adalah menulis beberapa templat dinamis melalui JSP, PHP dan teknologi lainnya, dan kemudian menguraikan templat ke dalam file HTML melalui server web. Browser hanya bertanggung jawab untuk membuat file HTML ini. Tidak ada pembagian kerja antara ujung depan dan belakang pada tahap ini, dan biasanya insinyur ujung belakang menulis halaman ujung depan.
Dalam beberapa tahun ke depan, dengan diperkenalkannya standar arsitektur seperti AJAX Technology dan Rest, konsep pemisahan front-end dan klien kaya menjadi semakin diakui. Kita perlu memperluas bahasa dan API dasar. Pada tahap ini, serangkaian alat tambahan front-end yang diwakili oleh jQuery telah muncul. Berdasarkan Ajax, ujung depan dan belakang juga membuka jalan pemisahan, dan arsitektur pemisahan ujung depan dan belakang secara bertahap menjadi populer. Front-end bertanggung jawab atas antarmuka dan interaksi, dan back-end bertanggung jawab untuk pemrosesan logika bisnis. Ujung depan dan belakang berinteraksi melalui antarmuka. Kami tidak perlu lagi menulis HTML yang sulit dipelihara dalam setiap bahasa backend. Kompleksitas halaman web juga telah bergeser dari server web backend ke javascript sisi browser.
Sejak 2009, pengembangan smartphone telah menjadi populer, dan gelombang terminal seluler telah tak terbendung. Konsep desain aplikasi halaman tunggal spa juga telah menjadi populer. Modularitas front-end terkait, komponen, pengembangan responsif, pengembangan hibrida dan teknologi lainnya sangat mendesak. Terutama kemunculan Node.js pada tahun 2009, serta spesifikasi CommonJS yang menyertainya dan mekanisme manajemen paket NPM, melahirkan serangkaian kerangka kerja yang sangat baik seperti Angular 1 dan Ionic, serta standar modul seperti AMD, CMD, UMD, Persyaratan, Seajs, dan alat -alat seperti Prough dan Bengkak. Insinyur front-end juga telah menjadi bidang pengembangan khusus, dengan sistem teknis dan model arsitektur terlepas dari backend.
Di masa lalu, kami hanya membutuhkan HTML dan JS sederhana. Sekarang kami harus menggunakan Paket Manajer untuk secara otomatis mengunduh paket pihak ketiga, menggunakan Module Manager untuk membuat file skrip tunggal, menggunakan kompiler terjemahan untuk menerapkan fungsi JavaScript baru, dan menggunakan runner tugas untuk secara otomatis menjalankan setiap langkah konstruksi.
Dalam dua tahun terakhir, dengan peningkatan kompleksitas aplikasi web, perluasan personel tim, dan permintaan pengguna untuk keramahan interaksi halaman dan optimasi kinerja, kami membutuhkan kerangka pengembangan yang lebih baik dan fleksibel untuk membantu kami menyelesaikan pengembangan front-end yang lebih baik. Tahap ini telah muncul banyak kerangka kerja dengan kekhawatiran yang relatif terkonsentrasi dan konsep desain yang lebih baik. Misalnya, kerangka kerja komponen seperti React, Vue.js, dan Angular 2 memungkinkan kami untuk mengganti pemrograman imperatif dengan operasi DOM sebagai inti dengan pemrograman deklaratif, yang mempercepat pengembangan komponen dan meningkatkan reusabilitas dan komposabilitas komponen. Redux, yang mengikuti pemrograman fungsional, dan MOBX, yang meminjam konsep pemrograman responsif, keduanya merupakan kerangka kerja tambahan manajemen negara yang sangat baik, membantu pengembang untuk memisahkan logika bisnis dari pandangan rendering, membagi struktur proyek lebih wajar, lebih baik mengimplementasikan prinsip tanggung jawab tunggal dan meningkatkan pemeliharaan kode. Dalam alat konstruksi proyek, manajemen operasi tugas yang diwakili oleh Grunt dan Gulp dan alat pengemasan proyek yang diwakili oleh Webpack, Rollup, dan JSPM semuanya memimpin, membantu pengembang dengan lebih baik membangun proses konstruksi front-end dan melakukan preprocessing, pemuatan asinkron, polyfilling, kompresi dan operasi lain dengan cara yang diotomatisasi.
Kematangan rantai alat ini juga telah membawa permintaan teknik, dengan bisnis yang terkemuka bisnis dan bisnis yang mendorong teknologi. Rekayasa front-end adalah untuk menstandarkan dan membakukan proses pengembangan front-end, teknologi, alat, pengalaman, dll. Berdasarkan karakteristik bisnis tertentu. Tujuannya adalah untuk memungkinkan pengembangan front-end membentuk sistemnya sendiri, memaksimalkan efisiensi pengembangan insinyur front-end, dan mengurangi biaya koordinasi dan komunikasi yang disebabkan oleh pemilihan teknologi, commissioning bersama-end dan back-end, dll.
Kompleksitas logis aplikasi sendiri, pemuatan rekayasa dan peningkatan kompleksitas kombinasi juga membawa tantangan tertentu pada kinerja front-end. Misalnya, kerangka kerja komponen seperti React akan memiliki waktu layar putih ketika inisialisasi halaman, yang tidak ramah terhadap SEO; Front-end telah mulai mencoba menyelesaikan masalah ini melalui rendering server, dan mengganti templat bahasa server seperti JSP dan PHP berdasarkan aplikasi isomorfik yang diimplementasikan oleh React, Vue, dll., atau mengembalikannya ke browser dalam bentuk dokumen HTML lengkap.
Berfokus pada tumpukan penuh, setelah bertahun-tahun pengembangan, Node.js telah sepenuhnya memiliki kemampuan untuk mendukung aplikasi tingkat perusahaan dan memiliki sejumlah besar praktik di banyak perusahaan domestik dan asing seperti Lowe, Netflix, dan Alibaba. Selain itu, Node.js memiliki afinitas bahasa alami, memudahkan pengembang untuk memikul tanggung jawab tumpukan penuh. Dengan munculnya konsep-konsep seperti arsitektur layanan mikro dan cloud asli dan tanpa server, antarmuka backend secara bertahap menjadi atom, dan antarmuka layanan mikro tidak lagi langsung menghadap ke halaman, dan panggilan front-end menjadi rumit. Oleh karena itu, konsep BFF (backend for Frontend) yang diwakili oleh GraphQL muncul. Lapisan BFF ditambahkan antara layanan mikro dan front-end, dan antarmuka dikumpulkan dan dipotong oleh BFF, dan kemudian output ke front-end.
Saat menyelesaikan masalah koordinasi dan agregasi antarmuka, BFF juga menanggung tekanan bersamaan asli pada backend, yang juga membawa banyak pengembangan dan tekanan operasi dan pemeliharaan kepada insinyur front-end. Serverless dapat mengurangi masalah ini. Kami dapat menggunakan fungsi untuk mengimplementasikan agregasi dan pemangkasan antarmuka; Permintaan front-end untuk BFF dikonversi menjadi pemicu untuk pemicu FAAS HTTP. Fungsi ini mengimplementasikan logika bisnis untuk permintaan, seperti memanggil beberapa layanan microser untuk mendapatkan data, dan kemudian mengembalikan hasil pemrosesan ke front-end. Dengan cara ini, tekanan operasi dan pemeliharaan telah bergeser dari server BFF sebelumnya ke layanan FAAS, dan front-end tidak lagi harus peduli dengan server. Serverless juga dapat diterapkan pada rendering sisi server, membagi setiap rute sebelumnya menjadi fungsi, dan kemudian menggunakan fungsi yang sesuai di FAAS. Dengan cara ini, jalur yang diminta oleh pengguna sesuai dengan setiap fungsi individu. Dengan cara ini, operasi operasi dan pemeliharaan ditransfer ke platform FAAS. Ketika front-end membuat sisi server, tidak perlu peduli dengan operasi operasi dan pemeliharaan program server. Selain itu, program mini seperti WeChat dan Alipay juga menyediakan platform pengembangan cloud yang sesuai dengan konsep tanpa server, memberdayakan iterasi cepat front-end bisnis.
Untuk informasi dan panduan lebih lanjut, lihat Pendahuluan.
Versi Cina | Versi bahasa Inggris
Jika Anda adalah pengembang yang sangat berpengalaman dan ingin tahu tentang rekayasa dan arsitektur front-end, disarankan untuk membaca artikel evolusi front-end.
Jika Anda tidak memiliki pemahaman lengkap tentang Sintaks Dasar JavaScript, disarankan agar Anda terlebih dahulu menelusuri "dasar -dasar sintaks JavaScript modern dan praktik teknik" untuk memahami sintaks javascript dasar dan aplikasi praktis.
Jika Anda ingin memahami pengembangan tumpukan penuh node.js, Anda dapat merujuk pada node-notes.
Setelah memahami pengetahuan teoretis, disarankan untuk pergi ke WX-FE untuk memeriksa semua proyek open source terkait front-end penulis.
Semua artikel penulis tunduk pada Atribusi Creative Commons Non-Commercial yang diproduksi oleh Penjelasan 4.0 Lisensi Internasional. Cetak ulang dipersilakan dan hak cipta dihormati. Anda juga dapat pergi ke beranda buku NGTE untuk menelusuri daftar buku untuk beberapa kategori termasuk sistem pengetahuan, bahasa pemrograman, rekayasa perangkat lunak, model dan arsitektur, web dan front-end besar, praktik pengembangan sisi server dan arsitektur teknik, infrastruktur terdistribusi, kecerdasan buatan dan pembelajaran mendalam, operasi produk dan entrepreneurship, dan lainnya: dan lainnya:
