Pengenalan Rangka Kerja Frontend

Kerangka frontend nampaknya telah menggegarkan dunia pengembangan Web dalam beberapa tahun kebelakangan ini. Sesiapa sahaja yang beroperasi sebagai pembangun Web, pereka, pengaturcara atau arkitek, terutama yang baru dalam permainan ini dan lebih-lebih lagi mereka yang hanya menggunakan reka bentuk Web sebagai hobi dan bukannya peranan sepenuh masa, akan mengetahui dengan baik langkah industri ini bergerak . Mengikuti kecepatan tanpa henti di mana teknologi baru dilepaskan dan teknologi lama dikemas kini adalah salah satu tugas paling penting dan kritikal yang mesti dilakukan oleh setiap orang dalam industri ini. Jika tidak melakukannya selama lebih dari beberapa bulan mengakibatkan kita merasa tersesat di lautan maklumat, tidak dapat menggunakan pada kadar yang lebih cepat daripada hasil teknologi. Setelah anda tidak berhubung, sukar untuk menghubungi anda kembali.


Oleh itu, ini membawa kita ke kerangka depan; boleh dikatakan salah satu perkembangan yang paling asas, tetapi benar-benar bermanfaat dan teknikal yang telah dilihat oleh industri pembangunan laman web sejak kebelakangan ini. (Ngomong-ngomong, ketika kita menyebut ‘industri’, kita merujuk kepada profesional dan penggemar … ini adalah industri yang jarang berlaku yang tidak membezakan antara keduanya, tetapi industri kita adalah salah satu daripadanya).

Apa itu Kerangka Depan?

Anda mungkin mengenali mereka sebagai Bootstrap atau Foundation. Ini adalah dua kerangka depan yang paling popular, tetapi masih banyak lagi yang akan kita bincangkan kemudian dalam catatan blog ini.

Rangka kerja frontend sendiri bukanlah perkara baru. Dalam bentuk yang paling asas, mereka tidak lebih dari sekumpulan kelas CSS yang telah ditentukan dan fungsi Javascript untuk digunakan oleh pembangun dengan cepat dan mudah. Sebilangannya lebih asas lagi, menghilangkan Javascript dan hanya menjadi senarai kelas CSS.

Teknik penentuan pra-penentuan markup ini untuk digunakan semula dari masa ke masa telah berlaku selama bertahun-tahun, tetapi lebih kerap daripada tidak secara peribadi, sama ada agensi yang telah membina kelas, perpustakaan dan fungsi mereka sendiri untuk mempercepat pengeluaran, atau satu penggemar lelaki yang mahu bekerja lebih pintar, bukannya lebih keras. Perbezaannya sekarang, tentu saja, kerangka frontend telah terbuka kepada umum, menjadi arus perdana, dan dapat diakses oleh orang ramai.

Salah satu kelemahan yang jelas untuk kerangka kerja dalaman yang dibangunkan secara swasta, adalah kerja kaki yang diperlukan untuk dikembangkan di tempat pertama. Sudah tentu, ia menjimatkan masa dan usaha orang-orang itu dalam jangka panjang (dan saya tidak ragu ia bernilai lama) tetapi kerja awal untuk membuat rangka kerja dalaman (dan masih ada, sekiranya anda membuat sendiri) cukup signifikan untuk dianggap sebagai aliran projek yang tersendiri dengan sendirinya.

Kerangka umum, arus perdana, mudah diakses dan pra-dikembangkan seperti Bootstrap oleh Twitter atau Foundation oleh ZURB, bagaimanapun, mengambil langkah awal ini dari pengguna dan meletakkannya pada pemaju kerangka itu sendiri. Jadi sekarang kerangka kerja, konsep yang dikembangkan terutamanya secara persendirian untuk mempercepat pembangunan dalaman, telah membantu pembangun Web menjadi lebih cekap berkat sekumpulan orang ramah yang berperanan mengembangkan kerangka kerja bagi kita yang tidak hanya kekurangan masa untuk menulis semua markup dari awal (masalah pertama), tetapi terlalu terikat untuk masa kita bahkan tidak dapat menulis kerangka kita sendiri untuk menyelesaikan masalah pertama. Pandai, dan sangat berguna!

Mengapa Saya Menggunakan Rangka Kerja Depan?

kerangka kerja

Rangka kerja frontend mempunyai pelbagai kelebihan, terutama menumpukan pada membantu pembangun untuk mempercepat pengeluaran dan mengurangkan bug di seluruh peringkat pengembangan markup semua projek pembangunan Web frontend.

Kelajuan dan Kesederhanaan

Matlamat utama kerangka kerja frontend adalah untuk mempercepat pengeluaran untuk pemaju, mengurangkan kos, meningkatkan hasil, dan melakukannya sambil tetap mudah, ringkas dan mudah untuk pemaju Web paling baru. Setiap kerangka frontend yang baik mencapai tujuan ini, membolehkan mereka yang tidak biasa dengan markup dengan cepat mengambil dan mempelajari kelas dan fungsi yang ditentukan dengan sedikit usaha.

Tidak ada yang lebih mengecewakan daripada mengambil alih laman web yang tidak anda bangunkan dan terpaksa menghabiskan hari, atau berpotensi berminggu-minggu, untuk membiasakan diri dengan markup pembangun sebelumnya. Kita semua mempunyai tulisan tangan yang unik, dan markup HTML, CSS dan Javascript adalah sama. Setiap pembangun Web mempunyai tandatangan unik mereka sendiri; cara penstrukturan markup mereka sendiri dan pendekatan mereka sendiri untuk pembetulan pepijat biasa. Kerangka umum yang umum menyelesaikan masalah ini dengan segera, kerana struktur dan tandatangan tanda ditentukan bukan oleh pengguna akhir, tetapi oleh pemaju rangka kerja, dan diakui di seluruh dunia.

Saya boleh masuk ke mana-mana syarikat, pejabat hobi mana pun, agensi mana pun, dan sepanjang mereka menggunakan salah satu kerangka kerja yang disenaraikan dalam artikel ini, saya dapat mengenali, memahami, dan pentingnya merasa selesa dengan penambahan mereka dalam beberapa minit. Itulah kelebihan bahasa umum yang disokong oleh struktur bersama dan sekumpulan peraturan bersama untuk mencapai tujuan bersama. Tanpa kerangka kerja, atau dengan kerangka kerja yang dibangunkan secara dalaman, manfaat ini tidak ada. Sebagai gantinya, pembangun terus berusaha untuk membiasakan diri dengan markup yang diwarisi untuk hari atau minggu pertama setiap projek yang mereka jalankan dari individu masa lalu.

Sokongan Merentas Peranti Responsif Dibina Dalam

Di dunia di mana sebahagian besar lalu lintas Internet ke laman web di dunia Barat berasal dari peranti genggam, sama ada tablet atau telefon pintar, ada alasan yang sangat kecil untuk tidak memenuhi permintaan pasar ini dengan laman web yang responsif. Membangunkan lembaran gaya responsif untuk menargetkan semua ukuran dan peranti skrin yang diperlukan sukar untuk dikuasai dari awal. Pada resolusi skrin apakah CSS lanskap telefon pintar boleh dimuat? Bagaimana dengan potret telefon pintar? Dan jangan lupa landskap dan potret tablet. Dan resolusi yang sangat besar dilihat di beberapa televisyen dan papan pintar. Dan peranti dengan skrin retina. Adakah anda tahu berapa titik pemisah lebar untuk semua peranti dan senario yang berpotensi untuk membolehkan anda menargetkan mereka secara individu dengan CSS? Sebilangan daripada anda mungkin. Banyak yang lain tidak akan.

Walaupun sangat berguna untuk membuat penyelidikan dan mengetahui (saya sangat mengesyorkannya), pemikiran untuk menulis templat helaian gaya untuk menargetkan semua senario itu membuat saya merasa ngeri.

Ada berita baik. Sebilangan besar kerangka depan dibina untuk responsif, untuk memperluas dan menguncup dengan baik untuk sebarang peranti dan resolusi skrin.

Sebagai contoh, keupayaan untuk menyembunyikan dan menunjukkan bekas yang berbeza pada ukuran skrin yang berbeza tidak lebih daripada penambahan kelas untuk kelas anda. (untuk menyembunyikan div pada peranti telefon pintar menggunakan Twitter Bootstrap, by the way). Ia mudah, lurus ke depan, dan selagi anda mempunyai senarai semua kelas dan fungsi yang tersedia (yang akan kita bincangkan sebentar lagi), jauh lebih mudah daripada perlu mengetahui lebar skrin yang tepat yang perlu anda targetkan dan kemudian tulis peraturan untuk menetapkan div ini kepada paparan: tidak ada. Sudah tentu, ini masih berlaku di latar belakang, tetapi sudah ditulis untuk anda dan yang perlu anda lakukan adalah menyasarkannya dengan kelas yang telah ditentukan sebelumnya.

Markup Pra-Diuji

Anda boleh yakin bahawa markup yang terdapat dalam kerangka frontend yang baik telah diuji dan telah memenuhi kriteria yang ketat sebelum ditandatangani dan diserahkan kepada anda, pengguna akhir. Bug yang biasa dan tidak biasa telah dikenal pasti, dinilai dan diselesaikan, menjadikan anda sedikit bug yang dapat dilakukan sepanjang projek anda.

Proses Membuat Keputusan Dipermudah

Semasa mengembangkan laman web, aspek yang paling memakan masa bukanlah menulis markup, tetapi membuat keputusan mengenai fungsi seperti yang kita kodkan. Malah pereka terbaik kadang-kadang akan membiarkan elemen terbuka untuk ditafsirkan oleh pembangun, dan oleh itu membuat keputusan mengenai sama ada mempunyai header yang melekit, slaid nav bar atau sticker footer kadang-kadang jatuh kepada kita semasa kita membuat kod.

Tanpa kerangka kerja, menerapkan beberapa dari ini akan memakan waktu dan berpotensi sia-sia, sekiranya kita memutuskan untuk menggunakan metode lain setelah kita membuatnya dan melihatnya berfungsi. Dengan kerangka depan, bagaimanapun, menghidupkan elemen seperti slaid navigasi, header dan footer yang melekit dan elemen interaktif lain, serta butang gaya dan memberikan kesan hover yang lancar, dibuat semudah menambahkan senarai kelas yang ditentukan ke yang betul elemen dalam markup anda. Sekarang, membuat bar navigasi dengan butang bergaya, menu lungsur turun, dan tajuk yang melekat, adalah pekerjaan lima minit dan bukannya pekerjaan 30+ minit.

Dokumentasi terperinci dan Rangkaian Sokongan Luas

Seperti yang telah kita bincangkan sebelumnya, kerangka kerja sangat berguna apabila anda mempunyai dokumentasi untuk menyokong anda. Ini adalah alat yang tidak bernilai tanpa dokumentasi untuk menjelaskan struktur kerangka dan kelas dan fungsi yang tersedia untuk anda manfaatkan. Nasib baik, semua kerangka depan yang baik dilengkapi dengan dokumentasi yang sangat baik, dan kebanyakannya dilengkapi dengan rangkaian sokongan komuniti yang hebat, yang terdiri daripada kedua-dua pembangun rangka dan pengguna akhir yang berpengalaman.

Kelemahan Kerangka Depan

Terdapat banyak faedah menggunakan kerangka kerja, tetapi ada juga kekurangannya. Tidak betul membincangkan satu tanpa menunjukkan yang lain, jadi di bawah ini kita membincangkan beberapa masalah yang mungkin ditimbulkan oleh kerangka kerja.

Kesukaran Penyesuaian

Walaupun kerangka kerja dan struktur serta peraturan umum mereka di sepanjang markup dapat menjadi positif dalam beberapa cara, manfaat yang sama ini juga dapat menjadi cacat ketika anda berusaha untuk menyesuaikan laman web dengan menggunakan kerangka kerja.

Kerangka kerja mesti berusaha mencari keseimbangan antara menyediakan elemen siap pakai, dan juga tidak mengunci fungsi dan kemampuan penyesuaian elemen ini. Kadang-kadang, keseimbangan ini tidak dijumpai, dan akhirnya kami menggunakan fungsi dan kelas yang sudah dipra-gaya untuk kami dan diprogramkan untuk berfungsi dengan cara tertentu. Menyimpang dari ini sering kali agak sukar. Ini membawa kita ke kelemahan seterusnya.

Potensi untuk Laman Web Terlihat Sama

Dengan perjuangan untuk menyesuaikan elemen kerangka kerja tertentu, selalu ada potensi untuk laman web kelihatan sama. Walaupun sangat mustahil untuk menyesuaikan susun atur keseluruhan laman web dan setiap halaman individu, elemen pada halaman tersebut mungkin (dan mungkin akan) kelihatan serupa dengan laman web lain. Sebagai contoh, Bootstrap mempunyai butang pra-gaya. Walaupun cepat dan mudah mengubah warna ini agar sesuai dengan laman web anda, lebih memakan masa untuk mula mengubah keadaan hover, animasi dan kesan gradien. Sebilangan besar pengguna akhir kerangka hanya mengubah pengaturan gaya dasar, seperti fon dan warna, yang menjadikan gaya lain yang lebih halus tetap sesuai dengan kerangka lalai. Anda mungkin tidak terlalu memperhatikannya, tetapi saya jamin, setelah anda melihat butang gaya Bootstrap atau Foundation, memperhatikan kesan hover dan peralihan, anda akan mula melihatnya di seluruh Internet.

Kekurangan Kod Pengenalan

Walaupun merupakan kelebihan yang sangat baik untuk menggunakan kerangka umum dan dapat mengedit laman web di seluruh dunia dalam beberapa minit setelah memeriksa sumbernya, sebaik sahaja anda mula mengedit markup kerangka, dan bukannya hanya menggunakan sistem sebagai pengguna akhir, ia menjadi sukar. Dengan beratus-ratus baris CSS dan beratus-ratus baris Javascript, semuanya ditulis oleh pembangun rangka kerja, pembiasaan kod anda tidak akan wujud, oleh itu menjadikannya sangat sukar sekiranya anda ingin mengedit fungsi kerangka itu sendiri.

Keperluan untuk Mengemas kini Rangka Kerja

Seperti pakej perisian, ambil WordPress misalnya, kerangka kerja perlu dikemas kini secara berkala. Rilis baru dikembangkan oleh pasukan kerangka, bug diperbaiki ketika masyarakat melaporkannya, dan fitur baru dihasilkan.

Walaupun anda mungkin perlu mengemas kini markup anda setiap beberapa tahun kerana versi baru HTML / CSS dikembangkan jika anda mengkodkannya dari awal tanpa kerangka kerja, anda mungkin akhirnya meningkatkan markup kerangka anda setiap beberapa bulan. Ini memakan masa dan berpotensi berisiko.

Adakah Kita Mengehadkan Pengetahuan Pembangunan Kita Sendiri?

Satu hujah menentang kerangka kerja adalah mereka menyekat pengetahuan mentah kami mengenai HTML, CSS dan Javascript. Lagipun, jika seseorang memberi kami senarai kelas CSS, yang sudah digayakan dan ditentukan sebelumnya dalam helaian gaya, serta struktur HTML biasa, dan fungsi Javascript yang sudah ditulis sebelumnya, pasti pengetahuan kita sendiri sebagai pengguna akhir mempunyai potensi untuk berkurang. Mungkin begitu, dan oleh sebab inilah kita harus sentiasa mendorong diri kita dan mendorong kerangka kerja untuk memastikan kita (dan pelanggan kita, sekiranya anda mengembangkannya) sentiasa mendapat pengalaman pengguna yang terbaik, tidak kira kita menggunakan kerangka kerja atau tidak.

Kerangka Depan Paling Popular

Oleh itu, dengan andaian anda ingin menggunakan kerangka depan, mana yang anda gunakan? Terdapat banyak di luar sana, ada yang lebih popular daripada yang lain, dan ada yang dibuat lebih teknikal daripada yang baru. Di sini, kita akan melihat secara ringkas beberapa yang paling popular.

Bootstrap Twitter

tali but

Bootstrap, yang dikembangkan oleh dua pekerja di Twitter, telah menjadi kerangka depan paling popular di dunia.

Walaupun bukan kerangka pertama yang responsif sepenuhnya, kini begitu, dan menangani semua peranti dan resolusi skrin dengan sangat baik.

Terdapat komuniti pembangun Bootstrap yang sangat baik dan pengguna akhir yang berpengalaman untuk membantu, dan dokumentasi difikirkan dengan teliti.

Kelas dan fungsi Bootstrap cenderung sangat ‘lengkap’, sering digayakan sepenuhnya dengan fon, warna dan jenama Bootstrap tradisional. Akibatnya, sukar untuk menjauhkan kapal anda dari rasa ini untuk memastikannya kelihatan unik. Oleh itu, dengan beberapa kerja mungkin mutlak untuk membangunkan laman web Bootstrap yang kelihatan khusus dan unik bagi anda..

Ketahui lebih lanjut mengenai Bootstrap
.

Yayasan ZURB

zurb

Selalunya pilihan antara menggunakan Bootstrap atau Foundation adalah pilihan peribadi semata-mata kerana kesamaannya, tetapi Foundation mempunyai beberapa ciri yang dapat mempengaruhi suara anda ke arah ini.

Pertama, elemen Foundation tidak begitu ‘lengkap’ pada pandangan pertama, jadi menjauhkan diri dari penampilan dan nuansa lalai untuk memberikan laman web anda jenama uniknya pada umumnya sangat mudah.

Foundation, tidak seperti Bootstrap yang menggunakan piksel, menggunakan rem untuk ukuran fon. Walaupun ini kelihatan seperti perbezaan halus, masuk akal untuk menggunakan unit relatif seperti rem pada reka bentuk responsif, berbanding unit mutlak seperti piksel.

Foundation juga mempunyai beberapa ciri bawaan yang sangat baik yang tidak terdapat dalam Bootstrap, seperti pengesahan bentuk bawaan dan Pertukaran, sistem yang digunakan untuk memuatkan kandungan responsif secara dinamik untuk penyemak imbas yang berbeza bergantung pada peranti dan ukuran skrin (ini sangat berguna untuk memuat lebih kecil gambar pada peranti mudah alih, bukannya memuatkan gambar dimensi yang lebih besar yang mungkin diperlukan pada desktop).

Di samping itu, ciri lain yang terdapat di dalamnya termasuk sokongan kanan ke kiri ke
dengan mudah membolehkan anda menukar salinan sehingga terbaca dari kanan ke kiri, serta jadual harga terbina dalam.

Foundation mempunyai semua ciri ini, ditambah sebahagian besar dari apa yang dikandung oleh Bootstrap, dan sebagai hasilnya sering dilihat sebagai kerangka kerja untuk pemaju Web menengah hingga profesional.

Ketahui lebih lanjut mengenai Foundation
.

Tulen.css

Pure-css-framework-oleh-Yahoo

Salah satu cengkaman terbesar pembangun yang menggunakan Bootstrap atau Foundation adalah jumlah markup kembung yang terdapat di dalamnya. Terdapat ribuan baris CSS dan Javascript, dan kemungkinannya, anda hanya akan memanfaatkan dan menggunakan sebilangan kecil ini.

Pure.css, disebut sebagai ‘Murni’, mengatasi masalah ini dengan perkembangan minimalisnya. Seperti namanya, kerangka ini murni CSS (iaitu tanpa Javascript).

Untuk menggunakannya, semudah memasukkan satu fail CSS di laman web anda.

Murni mempunyai banyak elemen berbeza yang semuanya dapat diambil dan dimakan, atau anda boleh memutuskan elemen mana yang akan diambil dan membuang yang lain, oleh itu menjaga minimum markup.

Elemen pra-pembangunan merangkumi sistem grid responsif yang kuat untuk diusahakan, seperti Bootstrap dan Foundation, serta gaya bentuk, butang, meja, dan menu.

Ketahui lebih lanjut mengenai Murni
.

Kerangka Mana Yang Harus Saya Gunakan?

Terdapat begitu banyak kerangka untuk dipilih. Kami telah menyenaraikan tiga perkara di atas, tetapi terdapat lebih banyak lagi, beberapa yang lebih terkenal daripada yang lain. Selalunya, pilihan itu bergantung kepada pilihan peribadi.

Keutamaan saya adalah memilih Bootstrap atau Foundation, semata-mata kerana saya tahu ini menjadikan saya lebih baik untuk bekerja di puluhan ribu laman web lain. Sekiranya saya berada dalam kedudukan di mana saya mengambil alih laman web dari pembangun lain, ada kemungkinan besar pembangun akan menggunakan Bootstrap atau Foundation.

Semasa memutuskan antara Bootstrap dan Foundation, saya sering menilai ciri-ciri yang saya tahu akan saya perlukan untuk setiap laman web tertentu. Contohnya, laman web Web hosting berbahasa Arab yang penuh dengan jadual harga akan mendorong saya terus ke arah Foundation untuk sokongan jadual kanan ke kiri dan jadual harga.

Laman web brosur asas untuk pelanggan yang mencari sesuatu yang cepat dan sederhana dengan sedikit kekecohan akan mengalihkan saya lebih banyak ke arah Bootstrap, selamat mengetahui bahawa komponen Bootstrap menyediakan asas yang kukuh dan lengkap untuk menyesuaikan dan meminda.

Nasihat saya adalah mencubanya sepanjang masa dan mempelajarinya dengan baik sehingga anda dapat mengambil kerangka yang betul berdasarkan keperluan anda untuk setiap projek.

Sekiranya Saya Perlu Menggunakan Rangka Kerja?

Rasanya salah untuk mengemukakan soalan ini di akhir artikel yang membincangkan faedah kerangka kerja individu, tetapi soalan yang sering diajukan di kalangan komuniti pembangunan, dan akhirnya, seperti semua kerangka kerja, ini adalah pilihan peribadi semata-mata.

Sekiranya anda mempunyai masa dan kecenderungan untuk menulis titik putus responsif dan mengembangkan sistem grid setiap kali anda mengembangkan laman web baru, dan anda lebih suka menulis markup anda sendiri untuk menu drop-down dan menu respons-off, maka nasihat saya tidak akan ‘ menggunakan kerangka kerja. Namun, saya hampir pasti bahawa jika anda memilih untuk menulis semuanya dari awal, setelah anda melakukannya lebih dari dua kali, anda akan mula menyimpannya secara berasingan sebagai komponen untuk digunakan dalam projek akan datang. Dan tiba-tiba, dengan melakukan ini, anda mula membina kerangka kerja anda sendiri.

Pada akhirnya, semua kerangka adalah alat yang ampuh untuk meningkatkan output kami sebagai pemaju, sambil membantu kami untuk mengekalkan struktur yang sama. Ini adalah kaedah terbaik untuk membangun laman web responsif yang kuat dan mesra pengguna dengan cepat dan mudah. Sama ada anda mengembangkan komponen anda sendiri dan menggunakannya dengan cepat, atau anda menggunakan kerangka akses umum yang umum, tugas kami sebagai pembangun sekarang lebih mudah terima kasih kepada orang yang berusaha untuk bekerja lebih pintar, tidak lebih sukar.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map