Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Frameworks

Panduan Pemula untuk Memilih Kerangka Javascript

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Biyan Pasau (you can also view the original English article)

Jika berkaitan tentang memilih Kerangka Javascript (Javascript Framework) yang benar, cakupannya luas dan membingungkan. Panduan ini akan membantu anda-front-end developer pemula-untuk melalui kesulitan saat waktunya tiba untuk memilih kerangka yang tepat untuk anda. Setiap kerangka yang saya pilih untuk ditampilkan akan mendeskripsikan prinsip dasar, bahasa syntax dan juga termasuk bahan pembelajaran yang sangat membantu.

Apa itu Kerangka Javascript?

Di dunia development kita, sebuah "kerangka (framework)", dapat didefinisikan sebagai pustaka Javascript yang menampilkan dan menterjemahkan "data-driven", antarmuka interaktif. Mereka ada untuk membantu menterjemahkan data ke pengguna saat interaksi dipicu. Semua pustaka (library) sedikit berbeda antara satu dengan yang lainnya, tapi tujuan mereka tetap sama; menampilkan data baru saat "interaksi" terjadi.

Mari memeriksa kerangka-kerangka berikut lebih dalam agar membantu kita menyaring dengan lebih mudah.

Pemain-Pemain Kerangka Javascript

Ada banyak pilihan terkait memilih kerangka—berikut ini adalah daftar yang ada, termasuk Vue, React, Angular, dan Ember. Masing masing dipilih berdasarkan perkembangan komunitas dan keberlanjutannya, aktifitas GitHub, seberapa lama proyek ini sudah tersedia untuk developer, dan apakah masih aktif digunakan di group developer dan perusahaan pengembangan.

Vue

Mulai Pembuatan: 27 Juli, 2013
Ukuran berkas: 27.5KB diperkecil

Vue mengklain sebagai kerangka kerja progresif yang mudah didekati, serba guna dan berbasis kinerja. Jika anda memiliki pemahaman dasar dari "the good ol' web stack" (HTML, CSS, JS), anda sudah dalam posisi yang tepat memilih Vue.

"Pustaka intinya difokuskan hanya pada tampilan lapisan (layer), dan sangat mudah untuk dipilih dan diintegrasikan dengan pustaka lainnya atau proyek yang sedang berjalan. Disisi lain, Vue juga mampu menggerakkan Aplikasi berbasis Halaman-Tunggal canggih saat digunakan dalam kombinasi dengan peralatan moderen dan pustaka pendukung." — VueJS Panduan Pengguna

Terkait syntax, ini adalah apa yang pustaka tawarkan menggunakan kerangka dasar demo "Hello World":

Pustaka ini juga akan menjadi lebih expresif menggunakan "attribute value" dalam markup. Ini beberapa syntax bersangkutan menggunakan atribut-atribut ini:

Sintaks di samping, Vue.js akan memungkinkan penanganan input pengguna, membangun komponen template, mengikat data ke struktur DOM dengan kondisional (conditional) dan loop, dan "rendering deklaratif (declarative rendering)" yang dicapai dengan syntax lurus ke depan yang dengan bebas dimodelkan pada Komponen Web Spec.

Bahan Pembelajaran

React

Mulai Pembuatan 29 Mei, 2013
Ukuran Berkas: 7.3KB diperkecil Dengan Add-ons: 11.3KB diperkecil

React mendefinisikan dirinya sebagai pustaka JavaScript untuk membangun antarmuka yang didorong oleh data dinamis. Ini dikembangkan oleh karyawan Facebook dan juga Open Source di GitHub. Anda mungkin merasa sedikit aneh saat saya mengatakan bahwa Anda akan menulis HTML di JavaScript, tapi sayangnya beginilah React bekerja.

Mari kita lihat contoh sintaks langsung dari dokumentasi pengenalan React. Contoh ini menciptakan apa yang React sebut sebagai "Component subclasses" meskipun memiliki beberapa jenis komponen juga. Syntax untuk pemanggil komponen mirip XML yang akan Anda lihat dalam kode HTML ini:

React dilengkapi dengan pilihan tambahan seperti add-on yang dianggap sebagai seperangkat modul utilitas yang berguna. Add-ons ini mencakup utilitas yang membantu saat berhadapan dengan animasi dan transisi, peralatan profil kinerja, pembantu uji kasus dan banyak lagi. Dokumentasi React juga merekomendasikan penggunaan React dengan Babel untuk memungkinkan penggunaan ES6 dan JSX dalam kode JavaScript Anda. Ada juga ekstensi React Devtools yang berguna untuk Chrome dan Firefox yang memungkinkan Anda memeriksa komponen jaringan React di peralatan Dev browser Anda.

Bahan Pembelajaran:

Angular

Mulai Pembuatan 18 September, 2014 (Berdasarkan data GitHub)
Rilis Awal (Berdasarkan Wikipedia) 20 Oktober, 2010
Ukuran Berkas: CLI Tools. Tidak lagi menjadi file JS yang berdiri sendiri.

Angular dikembangkan oleh tim di Google. Karena HTML tidak pernah dimaksudkan untuk menjadi bahasa dinamis Angular memperluas kosa kata HTML dengan membiarkan atribut diperluas dalam markup Anda. Hal ini pada akhirnya memungkinkan "declarative bindings" terhadap "event", untuk menampilkan data dinamis berdasarkan interaksi. Anda dapat memenuhi persyaratan data yang besar dengan membangun model data di RxJS, Immutable.js atau push-model lainnya. Dan Anda dapat memperpanjang bahasa template dengan komponen Anda sendiri dan menggunakan beragam "array" dari komponen yang ada.

"Pelajari satu cara untuk membangun aplikasi dengan Angular dan gunakan kembali kode dan kemampuan Anda untuk membuat aplikasi untuk target penerapan apa pun. Untuk web, mobile web, native mobile dan native desktop."

Syntax Angular bukanlah hal baru dalam hal atribut HTML dan placeholder Mustache-esque, dengan namespacing menggunakan ng- seperti yang akan Anda lihat pada contoh berikut:

Sudut juga utamanya terdiri dari komponen yang merupakah kombinasi template HTML dan kelas komponen yang mengatur sebagian layar.

File dengan ekstensi .ts dari contoh di atas tertulis di TypeScript. Bahasa yang dimulai dari syntax yang sama dan semantik JavaScript. Ini  merupakah "superset" JavaScript yang dikompilasi ke JavaScript, atau yang mungkin Anda anggap sebagai "language enhancer" i.e syntax sugar. Di sinilah alat CLI akan membantu saat tiba saatnya untuk mengkompilasi kode Anda.

Bahan Pembelajaran:

Ember

Mulai Pembuatan 30 April, 2011
Ukuran Berkas: ?

Ember adalah pustaka seperti yang telah kita bahas yang juga terintegrasi dengan Handlebars. Bagi mereka yang tidak terbiasa dengan Handlebars, ini adalah bahasa template untuk membangun halaman statis, seperti yang mungkin Anda kenal Jekyll. Pengembang dapat menggunakan Handlebet untuk mendeskripsikan markup dan menggunakan JavaScript untuk menerapkan perilaku khusus untuk komponen berdasarkan interaksi.

"Ember adalah kerangka aplikasi JavaScript untuk membuat aplikasi web sisi klien halaman tunggal, yang menggunakan pola Model-View-Controller (MVC)."

Ember dibangun dengan Node dan menggunakan berbagai modul Node.js untuk beroperasi. Ember juga memiliki alat antarmuka baris perintah (dipasang melalui npm jika Anda mau) yang menyediakan struktur proyek standar dan seperangkat alat pengembangan termasuk sistem addon. Ini juga dikemas dengan "development server" dan membangun "environment flags" yang bisa dilewatkan melalui command-line.

Syntax untuk Ember terlihat tidak biasa, bergantung pada literal objek dan "dot notation" yang sangat kita kenal di JavaSript, ditambah Handlebars untuk panggilan template.

Contoh di atas adalah rasa yang sangat mendasar dari struktur syntax dan file. Kode demo akan mengekspor dan memperpanjang kontroler Ember dan mengkompilasi nama dari objek literal ke markup Anda.

Perlu juuga disebutkan bahwa kemampuan router Ember memungkinkan Anda untuk menghentikan pemutusan web. Anda mendapatkan URL dan tombol bekerja-kembali secara default dengan setiap rute yang Anda buat, dan API mudah digunakan (dan lazim bagi mereka yang berpengalaman dalam kerangka web sisi server). Ember gratis, open source dan akan selalu demikian seperti yang mereka sebutkan di websitenya.

Bahan Pembelajaran:

Kesimpulan

Pilihan framework selalu bermuara pada preferensi pengkodean pribadi dan kepercayaan diri dalam proyek jangka panjang. Jika Anda ingin masuk lebih dalam ke X vs. Y untuk membantu membuat pilihan, Vue memiliki penjelasan dan perbandingan yang layak di situs mereka yang juga mencakup informasi tentang perpustakaan lain seperti Knockout, Polymer and Riot. Anda mungkin juga ingin mengikuti kuis kami, yang akan membantu Anda mempersempit pilihan Anda!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.