Cara Memilih Rangka Kerja Front-End yang Betul Untuk Syarikat Anda

Titik utama untuk pemilihan bingkai depan

Untuk memilih rangka kerja front-end peringkat perusahaan yang sesuai, memandangkan skala, fleksibiliti, sokongan luar talian, penyampaian sisi pelayan dan kematangan rangka kerja. Pengalaman praktikal adalah penting, dan pasukan penulis menggunakan Aurelia dan bertindak balas untuk membina halaman pengesahan untuk penilaian.

Pilihan akhir React didasarkan pada kematangannya, sokongan masyarakat dan kemudahan pengambilan. Angular 2 telah dihapuskan kerana gagal memenuhi kriteria pemilihan yang paling. Vue dan Aurelia melakukan dengan baik dan memenuhi keperluan, tetapi menyewa pemaju yang berpengalaman adalah faktor penentu utama.

Dalam menilai platform rangkaian teras Kumpulan Permulaan Kebajikan Pekerja Singapura, kami memutuskan untuk meninggalkan seni bina yang sedia ada dan membina semula hujung depan dari awal. Salah satu cabaran yang dihadapi platform adalah untuk membuat aplikasi web yang berfungsi dengan baik di 12 negara sasaran di seluruh Asia oleh kumpulan CXA.

Memandangkan tarikh akhir yang ketat untuk penghantaran projek, saya mengetuai penilaian pelbagai kerangka JavaScript front-end. Terdapat beberapa peluang untuk tahap perubahan dalam projek perusahaan yang besar, jadi kami berusaha untuk menjadi teliti dalam proses penilaian.

Keputusan ini penting: Apabila perniagaan berkembang dengan pesat, kita tidak mampu membuat sebarang kesilapan. Kami juga perlu mempertimbangkan bahawa tiada siapa di dalam pasukan mempunyai pengalaman penting dengan rangka kerja yang kami sedang mempertimbangkan.

sempit skop

Rangka kerja front-end baru nampaknya dibebaskan setiap hari, jadi kami melakukan analisis meta untuk mengurangkan skop rangka kerja yang kami anggap. Termasuk rangka kerja yang telah kami dengar atau disyorkan kepada kami, kami akhirnya memilih Angular 2 (didengar), Aurelia (Heard of), Vue.js (disyorkan), dan React (disyorkan).

Kami mengukur kedudukan setiap bingkai final berdasarkan senarai keperluan utama. Sesetengah keperluan adalah berdasarkan apa yang kita tahu apa yang diperlukan oleh projek, sementara yang lain menantikan apa yang kita mahu lakukan.

fleksibiliti

Rangka kerja yang kami pilih memerlukan pelbagai pilihan konfigurasi dan agak mudah disesuaikan. Ini seolah -olah sangat bergantung pada falsafah seni bina: sama ada anda membuat keputusan seni bina bagi pihak anda atau terbuka sepenuhnya kepada mereka.

Angular 2 terletak di hujung ini, menjadikan setiap pilihan untuk anda (pelayan negeri, penghala, pengendali). Kelebihan ini adalah mudah untuk bermula dengan cepat, dan kos yang berpotensi adalah bahawa modul tidak dapat berfungsi seperti yang anda perlukan dan tidak ada tempat untuk pergi.

React, Vue dan Aurelia terletak di hujung skala yang lain, memberikan keupayaan untuk menukar komponen seperti yang diperlukan. Aurelia dan Vue mempunyai boilerplate yang boleh dikonfigurasikan dalam persediaan awal mereka, yang mempunyai kelebihan utama terhadap React.

Seperti Vue, React sendiri hanya menyediakan sebahagian kecil daripada apa yang diperlukan untuk membina sesuatu. Dari sana, banyak keputusan perlu dibuat, yang pasti menakutkan. Oleh kerana React mula -mula dikeluarkan, pelbagai boilerplates (termasuk reaksi boilerplate dan membuat aplikasi React) telah dibuat untuk mempermudah proses pengenalan.

Untuk projek React Test kami, kami memutuskan untuk meninggalkan mana -mana boilerplate tertentu dan menggali terus ke dalamnya. Kami masih memasang beberapa, walaupun hanya untuk kod rujukan. Pendekatan ini pastinya sukar, tetapi kami banyak belajar tentang setiap komponen dalam timbunan React dan lebih yakin pada akhirnya.

Vue dan Aurelia memenangi pusingan dengan keluk pembelajaran yang dikurangkan dan struktur modular. React memperoleh beberapa titik fleksibiliti walaupun persediaan awal jauh lebih sukar.

sokongan luar talian

Dengan API seperti pekerja perkhidmatan, ia menjadi mungkin untuk aplikasi web berjalan tanpa sambungan internet masa nyata atau stabil. Kami tidak mempunyai banyak pengalaman dalam hal ini dalam pasukan kami, dan kami tidak menyelidikinya kecuali mengesahkan bahawa semua rangka kerja yang dinilai memberikan beberapa bentuk sokongan luar talian.

ringan

saiz byte kod yang dihantar kepada pelanggan mempunyai kesan yang besar terhadap prestasi penyemak imbas, termasuk kedua -dua jalur lebar dan masa pemproses. Dengan penambahan kod tersuai dan perpustakaan pihak ketiga, saiz byte hanya akan menjadi lebih besar dan lebih besar, jadi penting untuk memulakan kecil. Pasaran sasaran kumpulan CXA meluas ke negara -negara di mana jalur lebar sangat berharga, jadi penting untuk menyampaikan sedikit kod yang mungkin kepada pelanggan.

Oleh kerana kekurangan data keras yang mencerminkan konfigurasi pengeluaran, kami melihat saiz perpustakaan teras untuk sekurang -kurangnya mendapat rasa apa yang akan kita hadapi. Saiz pengeluaran sebenar lebih besar daripada apa yang ditunjukkan di sini.

pemaju Vue telah melakukan yang terbaik untuk menyempitkan perpustakaan teras mereka ke 23 kb yang mengagumkan. React dan Aurelia berada di pertengahan (kira -kira 42 kb dan 64 kb, masing -masing), manakala Angular 2 kekal sebagai kelas berat dengan lebih dari 143 kb (termasuk RXJs untuk pengurusan negeri).

Malah, versi pengeluaran Vue, Aurelia dan React sangat dekat antara satu sama lain dan boleh dipertimbangkan. Angular 2 menonjol lagi dengan cara yang salah.

Rendering sisi pelayan

Rangka kerja aplikasi halaman tunggal (SPA) awal mengikuti model menghantar semua kod kepada pelanggan. Ini bermakna bahawa rendering awal halaman ditinggalkan kepada pelanggan dan secara langsung membawa kepada pemuatan perlahan halaman awal. Konsep penyampaian sisi pelayan di SPA meletakkan beban penyerahan awal pada pelayan, yang membolehkan semua kandungan lain ditangguhkan selepas rendering itu.

Vue dan React Gunakan plugin untuk menambah rendering sisi pelayan. Angular 2 kini sedang dalam proses menggabungkan keupayaan sejagatnya ke dalam teras, walaupun keupayaannya tidak sepadan dengan apa yang diberikan oleh Vue atau React. Aurelia menandakan penyerahan sisi pelayan sebagai ciri dalam pembangunan, tetapi walaupun ia mempunyai tip prestasi lain, ia tidak mempunyai garis masa pelaksanaan.

kematangan

Apabila memilih rangka kerja untuk laman web peringkat perusahaan, sokongan komuniti yang luas, keupayaan kestabilan dan pengambilan adalah faktor yang sangat penting. Adalah sukar untuk membuat spekulasi sama ada rangka kerja masih disokong selepas tiga tahun, tetapi kami memutuskan untuk melihat kesihatan semasa setiap rangka kerja untuk membuat keputusan.

Melihat tarikh pelepasan awam awal rangka kerja memberi kita idea tentang keteguhan setiap rangka kerja. Perpustakaan yang lebih tua harus mempunyai pelbagai fungsi yang lebih baik dan lebih sedikit pepijat utama, sekurang -kurangnya dalam teori.

React menang dengan mudah, dan pembebasan awam pertama adalah pada bulan Mac 2013. Walaupun Vue pada asalnya dikeluarkan pada bulan Oktober 2015, ia tidak mencapai puncaknya sehingga pembebasan September 2016. Aurelia adalah pemula dan mencapai versi 1.0 pada bulan Ogos 2016.

Angular 2 menarik: Ia sangat berbeza dari versi 1, dan sebenarnya, ia pertama kali dikeluarkan pada September 2016.

Sebahagian daripada penilaian ini melibatkan menyelidiki sejarah pembangunan setiap perpustakaan, bukan hanya tarikh pelepasan itu sendiri. Sejarah pembangunan yang panjang dan stabil -walaupun dalam beta -tentu saja, ia juga meningkatkan keyakinan.

Pelbagai ahli pasukan telah memberi perhatian kepada perkembangan kerangka calon, yang memberi kita sekurang -kurangnya beberapa pemahaman tentang kestabilan keseluruhan setiap rangka kerja. Sejarah perkembangan masalah Angular 2 menonjol di antara semua rangka kerja yang kami semak, dengan perubahan ketara yang ketara dan tarikh pelepasan yang tidak jelas. Rangka kerja itu akhirnya dibebaskan dalam versi terakhirnya, tetapi ia benar -benar kemas dalam proses itu.

Aspek utama kematangan (seperti yang dinyatakan di atas) adalah keupayaan untuk merekrut pekerja yang berpengalaman. Memandangkan pengalaman terhad pasukan kami dalam rangka penilaian dan garis masa radikal yang kami hadapi, kami ingin merekrut pemaju yang berpengalaman.

Walau bagaimanapun, menyewa orang dengan pengalaman tertentu boleh dibatasi, tetapi ia memberi impak kepada projek -projek yang lebih besar seperti kita. Kami menghapuskan Angular 2 pada peringkat ini kerana ia gagal memenuhi banyak keperluan kami sebelum ini.

Untuk rangka kerja yang tinggal, kami mula -mula mencari laman web carian pekerjaan yang berbeza dan mencatatkan iklan pekerjaan yang berasingan untuk setiap rangka kerja. Kami tidak menemui iklan pekerjaan untuk Aurelia atau Vue, dan kami juga tidak menerima sebarang permohonan. Sebaliknya, kami mendapati beberapa pekerjaan bertindak balas dan kami menerima banyak aplikasi berkualiti tinggi.

Fungsi lain

Selebihnya alat -alat pemaju dan sokongan ujian unit -tersedia dalam semua rangka kerja yang kita lihat. Debugging hampir mustahil tanpa alat pemaju yang boleh dipercayai, dan ujian unit hampir penting untuk aplikasi kelas perusahaan seperti kami.

Pengalaman praktikal

Tiada teori boleh dibandingkan dengan pengalaman praktikal. Dengan ini, kami memilih dua rangka kerja yang memenuhi kebanyakan keperluan -arelia dan bertindak balas -dan mula pengekodan selari. Tidak ada alasan yang baik untuk menghilangkan vue pada peringkat ini;

Tugas yang diberikan adalah untuk membina skrin pengesahan yang sepadan dengan fungsi asas aplikasi sedia ada kami: log masuk, hubungi API, dan buat sesi. Kedua -dua ahli pasukan itu diberikan rangka kerja secara berasingan dan diberi minggu kalendar untuk melihat apa yang mereka boleh bina.

Demo Aurelia lebih lengkap, sebahagiannya disebabkan oleh proses persediaan yang lebih mudah. Selepas memilih kerja yang dilakukan di setiap bahagian, kami berasa seperti kami mempunyai pemahaman yang lebih baik tentang apa yang ada di dalam timbunan React. Aurelia masih menang dengan mudah dari segi kemudahan persediaan awal.

Kami tidak dapat membuat sebarang kesimpulan penting berdasarkan semata -mata pada pengekodan praktikal. Mungkin satu -satunya kejutan adalah bagaimana kod yang sama adalah: ini sebahagian besarnya disebabkan oleh perubahan struktur yang diperkenalkan dalam ECMAScript 6, kedua -dua rangka kerja yang menggunakan Ecmascript 6.

Hasil

Akhirnya, pilihan kami adalah bertindak balas; Walaupun React adalah pemenang yang jelas mengenai piawaian kami, sangat bagus untuk melihat rangka kerja berkualiti tinggi wujud dalam rangka kompetitif yang kami cari.

Vue dan Aurelia terbukti berada di belakang. Vue membawa sedikit dengan senarai ciri yang lebih lengkap, tetapi memandangkan keperluan kami, sama ada seseorang mungkin akan berfungsi dengan baik. Jika kita tidak mempunyai tekanan masa, merekrut kurang penting, dan kita akan memperluaskan kerja tangan kita untuk memasukkan Vue.

Angular 2 gagal memenuhi sebahagian besar kriteria pemilihan kami dan mengecewakan. Walaupun banyak kelebihannya, ia jelas tidak sesuai dengan kita.

Selepas memilih React dan mula membina projek kami, tidak mungkin kami akan melakukan ini lagi tidak lama lagi. Bagi anda, kriteria apa yang akan anda tambahkan ke senarai kami? Apa yang telah kita rindukan, kita boleh melakukan lebih baik? Saya menantikan komen dan cadangan anda.

Artikel ini dikaji semula oleh Stuart Mitchell, Ralph Mason dan Vildan Softic. Terima kasih kepada semua pengulas rakan sebaya di SitePoint untuk mendapatkan kandungan SitePoint dengan sebaik -baiknya!

Soalan Lazim untuk memilih rangka kerja depan yang betul untuk syarikat anda

Apakah faktor utama yang perlu dipertimbangkan ketika memilih rangka kerja depan yang sesuai dengan syarikat kami?

Beberapa faktor utama yang perlu anda pertimbangkan ketika memilih rangka kerja depan untuk syarikat anda. Pertama, pertimbangkan keperluan projek. Rangka kerja yang berbeza mempunyai kebaikan dan keburukan yang berbeza, jadi penting untuk memilih salah satu yang sesuai dengan keperluan projek anda. Kedua, pertimbangkan lengkung pembelajaran. Sesetengah rangka kerja lebih mudah dipelajari daripada yang lain, yang boleh menjejaskan kelajuan pembangunan. Ketiga, pertimbangkan komuniti dan sokongan. Komuniti yang kuat dapat menyediakan sumber dan bantuan yang berharga apabila anda menghadapi masalah. Akhirnya, pertimbangkan prestasi dan saiz rangka kerja. Rangka kerja yang ringan dan berprestasi tinggi boleh membawa pengalaman pengguna yang lebih baik.

Bagaimanakah saiz bingkai depan mempengaruhi prestasinya?

Saiz bingkai depan akan menjejaskan prestasinya. Rangka kerja yang lebih besar biasanya datang dengan lebih banyak ciri dan ciri, tetapi juga boleh memuat dan berjalan lebih perlahan. Ini boleh membawa kepada pengalaman pengguna yang lemah, terutamanya pada sambungan internet yang lebih perlahan atau peranti yang lebih lemah. Bingkai yang lebih kecil, sebaliknya, biasanya lebih cepat dan lebih cekap, tetapi mereka mungkin kekurangan ciri atau fungsi tertentu. Oleh itu, sangat penting untuk mengimbangi saiz dan prestasi rangka kerja mengikut keperluan projek anda.

Apakah rangka kerja depan yang popular dan kelebihan mereka?

Terdapat banyak kerangka depan yang popular, masing-masing dengan kelebihannya sendiri. Sebagai contoh, React dikenali dengan DOM maya dan prestasi tinggi, menjadikannya pilihan yang baik untuk aplikasi web dinamik yang kompleks. Sudut, sebaliknya, adalah rangka kerja yang berfungsi sepenuhnya yang mengandungi semua yang anda perlukan untuk membina aplikasi web, menjadikannya pilihan yang baik untuk projek besar. Vue.js terkenal dengan kesederhanaan dan kemudahan penggunaannya, menjadikannya pilihan yang baik untuk pemaju baru dalam projek kecil atau kerangka depan.

Betapa pentingnya sokongan komuniti apabila memilih rangka kerja front-end?

Sokongan komuniti sangat penting apabila memilih kerangka depan. Komuniti yang kuat dapat menyediakan banyak sumber, termasuk tutorial, dokumentasi, dan forum di mana anda boleh bertanya dan mendapatkan bantuan. Tambahan pula, komuniti besar sering menunjukkan bahawa rangka kerja itu popular dan digunakan secara meluas, yang boleh membawa kepada kemas kini dan penambahbaikan yang lebih kerap.

Bolehkah saya menggunakan pelbagai rangka depan dalam satu projek?

Walaupun secara teknikal pelbagai rangka kerja front-end boleh digunakan dalam satu projek, ini biasanya tidak disyorkan. Setiap kerangka mempunyai cara sendiri untuk melakukan sesuatu, dan mencampurkannya boleh menyebabkan kekeliruan dan kerumitan. Sebaliknya, biasanya adalah lebih baik untuk memilih rangka kerja yang paling sesuai dengan keperluan projek anda dan melekat dengannya.

Bagaimanakah lengkung pembelajaran kerangka depan mempengaruhi pembangunan projek?

Kurva pembelajaran rangka kerja depan akan mempengaruhi perkembangan projek dengan serius. Rangka kerja dengan lengkung pembelajaran yang curam mungkin mengambil masa lebih lama untuk menguasai, yang mungkin melambatkan permulaan pembangunan. Sebaliknya, rangka kerja dengan lengkung pembelajaran yang lembut membolehkan anda memulakan pembangunan lebih cepat. Walau bagaimanapun, kemudahan pembelajaran bukanlah satu -satunya faktor dalam memilih rangka kerja. Ia juga perlu untuk mempertimbangkan fungsi rangka kerja dan seberapa baik ia sepadan dengan keperluan projek.

Apakah peranan kerangka depan dalam pembangunan web?

Rangka kerja front-end memainkan peranan penting dalam pembangunan web. Ia menyediakan struktur untuk kod untuk memudahkan untuk mengekalkan dan skala. Ia juga menyediakan kod pra-ditulis untuk tugas-tugas yang sama, dengan itu mempercepatkan proses pembangunan. Di samping itu, rangka kerja front-end sering merangkumi alat untuk ujian dan debugging, menjadikannya lebih mudah untuk memastikan kualiti kod anda.

Berapa kerap saya perlu mengemas kini rangka kerja front-end yang saya gunakan?

Sangat penting untuk memastikan rangka kerja front-end terkini. Kemas kini biasanya termasuk pembetulan pepijat, penambahbaikan prestasi, dan ciri -ciri baru. Walau bagaimanapun, mengemas kini rangka kerja juga boleh memperkenalkan perubahan yang memecahkan kod sedia ada, jadi penting untuk menguji aplikasi anda dengan teliti selepas kemas kini. Secara umumnya, anda perlu mengemas kini rangka kerja anda dengan segera selepas versi stabil baru dikeluarkan.

Bagaimana membuat keputusan antara rangka kerja front-end monolitik dan mikro?

Keputusan antara rangka kerja front-end monolitik dan mikro bergantung kepada keperluan projek anda. Rangka kerja monolitik menyediakan semua yang anda perlukan dalam satu pakej, yang dapat memudahkan pembangunan, tetapi juga termasuk ciri -ciri yang tidak perlu. Sebaliknya, microframework hanya menyediakan asas -asas, yang membolehkan anda menambah ciri -ciri yang anda perlukan. Ini mungkin membawa kepada aplikasi yang lebih ringan dan lebih cekap, tetapi ia juga memerlukan lebih banyak kerja untuk menubuhkan dan mengekalkan.

sumber apa yang ada untuk mengetahui lebih lanjut mengenai kerangka depan?

Terdapat banyak sumber yang tersedia untuk mengetahui lebih lanjut mengenai kerangka depan. Tutorial, dokumen dan kursus dalam talian adalah tempat yang bagus untuk bermula. Laman web seperti Stack Overflow dan GitHub juga boleh memberikan pandangan dan contoh yang berharga. Di samping itu, banyak rangka kerja mempunyai komuniti sendiri di mana anda boleh bertanya dan belajar dari pemaju lain.

Atas ialah kandungan terperinci Cara Memilih Rangka Kerja Front-End yang Betul Untuk Syarikat Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!