Framework atau kerangka kerja adalah kumpulan dan fungsi/ prosedur dan class untuk tujuan tertentu yang sudah siap pakai. Framework memberi banyak kemudahan bagi pengembang web. Saat membuat prototype situs web, kita tidak perlu memulai (membuat class/fungsi) dari awal. Kita hanya perlu memanggil beberapa komponen yang tersedia.
Apa saja isi framework? Pada umumnya, kerangka kerja atau framework terdiri dari kode HTML, CSS, Javascript pra tulis yang dapat kita digunakan dalam membuat situs web.
Ada banyak keuntungan yang kita dapatkan dengan menggunakan framework. Terutama, adalah menghemat waktu dan tenaga.
Saat membicarakan soal front-end Framework, maka Bootstrap dan Foundation lah yang paling Populer di dunia. Lalu, framework manakah yang lebih baik dan mana yang paling cocok kita pilih untuk membuat website. Jawabannya adalah tergantung. Kedua Framework ini selain memiliki karakteristik tersendiri dan juga memiliki pengguna dan penggemar yang berbeda.
Bootstrap adalah front end framework yang lengkap dan mudah digunakan untuk pengembangan web yang responsif. Framework ini mencakup template desain berbasis HTML, CSS.
Bootstrap, yang awalnya bernama blueprint merupakan framework yang dikembangkan oleh Mark Otto dan Jacob Thornton untuk menghilangkan inkosistensi di aplikasi internal mereka. Dan pada akhirnya mereka memutuskan untuk merilisnya sebagai open source pada 19 Agustus 2011. Versi terkahir Framework ini adalah V4.00 Beta 1.
Foundation juga merupakan front end framework yang sifatnya open source yang dikembangkan oleh Zurb. Versi terkahir Framework ini adalah 6.4.3.
Sekilas, keduanya ini terlihat sama, namun jika kita pelajari lebih mendalam maka akan terlihat perbedaan yang mendasar diantara keduanya. Mengetahui kemiripan serta perbedaan kedua framework ini dapat membantu kita dalam memutuskan framework mana yang lebih baik yang akan kita pilih untuk memudahkan pekerjaan dalam mengembangkan web.Apa saja isi framework? Pada umumnya, kerangka kerja atau framework terdiri dari kode HTML, CSS, Javascript pra tulis yang dapat kita digunakan dalam membuat situs web.
Ada banyak keuntungan yang kita dapatkan dengan menggunakan framework. Terutama, adalah menghemat waktu dan tenaga.
 |
| Bootstrap 4 vs Foundation 6 (image:dannyherran.com) |
Apa itu Bootstrap dan Foundation Framework?
Saat membicarakan soal front-end Framework, maka Bootstrap dan Foundation lah yang paling Populer di dunia. Lalu, framework manakah yang lebih baik dan mana yang paling cocok kita pilih untuk membuat website. Jawabannya adalah tergantung. Kedua Framework ini selain memiliki karakteristik tersendiri dan juga memiliki pengguna dan penggemar yang berbeda.
Bootstrap
Bootstrap adalah front end framework yang lengkap dan mudah digunakan untuk pengembangan web yang responsif. Framework ini mencakup template desain berbasis HTML, CSS.
Bootstrap, yang awalnya bernama blueprint merupakan framework yang dikembangkan oleh Mark Otto dan Jacob Thornton untuk menghilangkan inkosistensi di aplikasi internal mereka. Dan pada akhirnya mereka memutuskan untuk merilisnya sebagai open source pada 19 Agustus 2011. Versi terkahir Framework ini adalah V4.00 Beta 1.
Foundation
Apa saja kemiripan diantara kedua Framework ini?
- Keduanya merupakan Framework yang bersifat open source dan dirilis dibawah lisensi MIT
- Keduanya memiliki sistem grid 12 kolom
- Keduanya responsif dan mobile - fisrt Framework
- Keduanya memiliki komponen pra tulis
- Sass sebagai prepocessor CSS
Mari kita bandingkan kedua framework ini berdasarkan kriteria tertentu. Disini saya telah membandingkan dua Framework ini berdasarkan Popularitas, pre Built Komponen, CSS Pre Pocessor, sistem grid, dukungan browser, kinerja dan dukungan komunitas.
Popularitas
Bootstrap paling populer di antara semua front end Framework. Versi terbaru Bootstrap 4 merupakan pembaruan dari versi sebelumnya. Bootstrap juga merupakan proyek yang paling populer di GitHub.Saat membandingkan Bootstrap dan Foundation, Bootstrap jauh lebih unggul. Bootstrap memiliki 115.193 bintang di GitHub and Foundation hanya memiliki 22.227 bintang.
Grafik di Google Trends juga menunjukkan perbandingan berapa kali istilah Bootstrap 4 dan Foundation 6 telah dipertanyakan.
 |
| Grafik Google Trends:Bootstrap 4 vs Foundation 6 |
Komponen
Bootstrap dan Foundation memfasilitasi pengkodean dan membantu kita menghemat waktu menggunakan komponen pra-built yang dapat kita bangun ke dalam aplikasi kita. Pada tampilan awal, keduanya memiliki komponen yang serupa dengan desain yang berbeda. Tapi kalau kita lihat lebih dekat, perbedaan akan sangat jelas.
Dalam hal desain, komponen Bootstrap lebih siap digunakan. Ada lebih banyak contoh untuk setiap komponen Bootstrap daripada di Foundation.
Kedua framework ini memiliki komponen tertentu, seperti tombol, tanda, bentuk, tab, namun berbeda dalam komponen seperti Jumbotron, korsel, scrollspy, popovers dll.
Dokumentasi Bootstrap sangat detil, jelas dan lengkap. Dokumentasi memuat baik dari instalasi, persiapan dan contoh template. Lab dokumentasi Bootstrap jauh lebih jelas dan terorganisir daripada Foundation.
Kedua kerangka kerja menggunakan em dan rem sebagai unit CSS utama. em dan rem adalah unit CSS relatif yang membantu mengukur ukuran elemen relatif terhadap ukuran font yang cukup membantu saat membuat desain responsif.
Foundation menggunakan rem sebagai unit CSS utama namun Bootstrap telah mengisi celah CSS dengan versi terbaru.
Awalnya Bootstrap menggunakan piksel sebagai unit CSS namun kemudian pada Bootstrap versi 4, ia menggantinya dengan satuan em dan rem.
CSS preprocessor membantu bekerja dengan CSS lebih mudah. CSS bagus saat bekerja dengan aplikasi web kecil dan situs web, namun bisa menyulitkan saat mengerjakan aplikasi berskala besar. Ini dapat membantu menjaga agar file CSS tetap teratur dan mengurangi waktu dengan fitur seperti mixin, fungsi, variabel, nesting dll.
Foundation menggunakan Sass seperti CSS preprocessor dan juga Bootstrap.
Bootstrap, seperti namanya memungkinkan kita membuat situs web dengan mudah dan cepat. Komponen di Bootstrap sudah dipoles dengan baik dan siap pakai. Tidak banyak yang perlu kita lakukan dalam hal styling. Sehingga seringkali tampilan web akan terlihat seragam dengan tampilan web orang lain yang juga menggunakan bootstrap.
Berbeda dengan Foundation, sesuai dengan namanya yaitu memberi dasar bagi pengembang untuk mengerjakannya. Foundation memberi kebebasan pengembang untuk melakukan kustomisasi/pengaturan.Pengaturan styling di foundation lebih mudah dibanding dengan Bootstrap.
Sistem grid sangat penting dalam menciptakan tata letak yang responsif. Ini adalah bagian integral dari kerangka kerja. Sistem grid adalah apa yang menentukan tata letak seperti apa dan konten apa yang terjadi di setiap perangkat.
Tapi di bagian ini Foundation lebih unggul. Dari dua kerangka itu, Foundation adalah yang pertama bersikap responsif dan mobile-first. Bootstrap, bagaimanapun, tidak bisa menangkap responsif di Bootstrap 2.0 dan langsung masuk ke ponsel dengan Bootstrap 3.
Kedua kerangka kerja memiliki sistem grid 12 kolom. Masih ada beberapa perbedaan mencolok selain penamaan kelas dan sintaksinya. Kotak Blok menjadi sorotan utama. Fitur di Foundation ini memungkinkan kita untuk menyelaraskan daftar yang tidak berurutan ke dalam grid yang sama jaraknya, tidak peduli area pandang.
Bootstrap telah beralih ke flexbox secara default di Bootstrap 4. Jadi, lebih mudah membuat baris dengan tinggi yang sama dengan Bootstrap, walaupun foundation memiliki flexbox opsional.
Kedua Framework ini bekerja dengan baik pada semua browser. Termasuk semua versi terbaru Chrome, Firefox, Opera, Safari, dan Interner Explorer.
Bootstrap sejak rilis alfa 6 , telah meninggalkan dukungan terhadap IE9. Jika kita menginginkan dukungan IE9, kita harus memilih Foundation atau jika kita ingin tetap menggunakan Bootstrap, kita harus menggunakan Bootstrap 3.
Bootstrap tidak mendukung browser proxy seperti Opera Mini, mode Turbo Opera Mobile, UC Browser Mini, dan Amazon Silk.
Kedua kerangka kerja mendukung semua sistem operasi termasuk Android, Windows 10, Mac, iOS, dan Windows
Dalam hal stabilitas, Foundation 6 sedikit lebih stabil daripada Bootstrap 4. Foundation terus menerus melakukan perbaikan terhadap setiap bug.
Bootstrap 4 saat ini dalam versi beta setelah menghabiskan hampir dua tahun dalam tahap alpha. Meskipun banyak bug telah diperbaiki dan masih diperbaiki, masih ada sedikit perubahan yang dapat diharapkan dari kerangka kerja ini.
Komunitas untuk Foundation tidak sebesar Bootstrap tapi berkembang dan cukup besar dalam hal dukungan teknis.
Framework memudahkan pekerjaan pengembang web dengan kemudahan dalam membuat coding mudah, teratur dan menghemat banyak waktu.
Bootstrap dan Foundation, ini bukan tentang siapa yang menang dalam pertempuran atau framework mana yang lebih baik dari yang lain. Namun, ini tentang framework mana yang bisa bekerja lebih baik untuk memenuhi kebutuhan kita.
Dalam hal desain, komponen Bootstrap lebih siap digunakan. Ada lebih banyak contoh untuk setiap komponen Bootstrap daripada di Foundation.
Kedua framework ini memiliki komponen tertentu, seperti tombol, tanda, bentuk, tab, namun berbeda dalam komponen seperti Jumbotron, korsel, scrollspy, popovers dll.
Dokumentasi
Dokumentasi Bootstrap sangat detil, jelas dan lengkap. Dokumentasi memuat baik dari instalasi, persiapan dan contoh template. Lab dokumentasi Bootstrap jauh lebih jelas dan terorganisir daripada Foundation.
Primary CSS Units
Kedua kerangka kerja menggunakan em dan rem sebagai unit CSS utama. em dan rem adalah unit CSS relatif yang membantu mengukur ukuran elemen relatif terhadap ukuran font yang cukup membantu saat membuat desain responsif.
Foundation menggunakan rem sebagai unit CSS utama namun Bootstrap telah mengisi celah CSS dengan versi terbaru.
Awalnya Bootstrap menggunakan piksel sebagai unit CSS namun kemudian pada Bootstrap versi 4, ia menggantinya dengan satuan em dan rem.
CSS Preprocessor
CSS preprocessor membantu bekerja dengan CSS lebih mudah. CSS bagus saat bekerja dengan aplikasi web kecil dan situs web, namun bisa menyulitkan saat mengerjakan aplikasi berskala besar. Ini dapat membantu menjaga agar file CSS tetap teratur dan mengurangi waktu dengan fitur seperti mixin, fungsi, variabel, nesting dll.
Foundation menggunakan Sass seperti CSS preprocessor dan juga Bootstrap.
Kustomisasi
Bootstrap, seperti namanya memungkinkan kita membuat situs web dengan mudah dan cepat. Komponen di Bootstrap sudah dipoles dengan baik dan siap pakai. Tidak banyak yang perlu kita lakukan dalam hal styling. Sehingga seringkali tampilan web akan terlihat seragam dengan tampilan web orang lain yang juga menggunakan bootstrap.
Berbeda dengan Foundation, sesuai dengan namanya yaitu memberi dasar bagi pengembang untuk mengerjakannya. Foundation memberi kebebasan pengembang untuk melakukan kustomisasi/pengaturan.Pengaturan styling di foundation lebih mudah dibanding dengan Bootstrap.
Sistem Grid
Sistem grid sangat penting dalam menciptakan tata letak yang responsif. Ini adalah bagian integral dari kerangka kerja. Sistem grid adalah apa yang menentukan tata letak seperti apa dan konten apa yang terjadi di setiap perangkat.
Tapi di bagian ini Foundation lebih unggul. Dari dua kerangka itu, Foundation adalah yang pertama bersikap responsif dan mobile-first. Bootstrap, bagaimanapun, tidak bisa menangkap responsif di Bootstrap 2.0 dan langsung masuk ke ponsel dengan Bootstrap 3.
Kedua kerangka kerja memiliki sistem grid 12 kolom. Masih ada beberapa perbedaan mencolok selain penamaan kelas dan sintaksinya. Kotak Blok menjadi sorotan utama. Fitur di Foundation ini memungkinkan kita untuk menyelaraskan daftar yang tidak berurutan ke dalam grid yang sama jaraknya, tidak peduli area pandang.
Bootstrap telah beralih ke flexbox secara default di Bootstrap 4. Jadi, lebih mudah membuat baris dengan tinggi yang sama dengan Bootstrap, walaupun foundation memiliki flexbox opsional.
Dukungan browser dan OS
Kedua Framework ini bekerja dengan baik pada semua browser. Termasuk semua versi terbaru Chrome, Firefox, Opera, Safari, dan Interner Explorer.
Bootstrap sejak rilis alfa 6 , telah meninggalkan dukungan terhadap IE9. Jika kita menginginkan dukungan IE9, kita harus memilih Foundation atau jika kita ingin tetap menggunakan Bootstrap, kita harus menggunakan Bootstrap 3.
Bootstrap tidak mendukung browser proxy seperti Opera Mini, mode Turbo Opera Mobile, UC Browser Mini, dan Amazon Silk.
Kedua kerangka kerja mendukung semua sistem operasi termasuk Android, Windows 10, Mac, iOS, dan Windows
Kinerja dan Stabilitas
Dalam hal stabilitas, Foundation 6 sedikit lebih stabil daripada Bootstrap 4. Foundation terus menerus melakukan perbaikan terhadap setiap bug.
Bootstrap 4 saat ini dalam versi beta setelah menghabiskan hampir dua tahun dalam tahap alpha. Meskipun banyak bug telah diperbaiki dan masih diperbaiki, masih ada sedikit perubahan yang dapat diharapkan dari kerangka kerja ini.
Dukungan Komunitas
Di sinilah Bootstrap lebih unggul dibandingkan framework lainnya. Komunitas Bootstrap sangat besar. Jika kita menemui kendala apa pun saat menggunakan bootstrap, kita akan dengan mudah menemukan solusinya dengan bertanya di beberapa komunitas yang tersedia.Komunitas untuk Foundation tidak sebesar Bootstrap tapi berkembang dan cukup besar dalam hal dukungan teknis.
Kesimpulan
Framework memudahkan pekerjaan pengembang web dengan kemudahan dalam membuat coding mudah, teratur dan menghemat banyak waktu.
Bootstrap dan Foundation, ini bukan tentang siapa yang menang dalam pertempuran atau framework mana yang lebih baik dari yang lain. Namun, ini tentang framework mana yang bisa bekerja lebih baik untuk memenuhi kebutuhan kita.
0 Comments