Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Apa itu Meteor?

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

Akhir-akhir ini, ada telah cukup buzz di platform web baru, yang disebut Meteor. Dalam artikel ini, saya akan menjelaskan apa, dan mengapa Anda harus mempertimbangkan untuk aplikasi masa depan Anda!


Hal paling Pertama

Tidak memikirkan Meteor sebagai manajer paket, karena itu jauh lebih kuat daripada itu!

Meteor merupakan suatu kerangka JavaScript, dibangun di sekitar banyak paket kecil - beberapa yang Anda mungkin sudah menggunakan, seperti MongoDB atau jQuery. Tapi jangan berpikir dari Meteor sebagai manajer paket, karena itu jauh lebih kuat daripada itu! Meteor menysesuaikan paket ini menjadi apa yang mereka sebut sebagai "smart paket" berkomunikasi dengan lancar satu sama lain.

Meteor adalah jauh lingkungan pengembangan termudah untuk menginstal, dengan hanya satu baris perintah yang menginstall database, pengembangan server, dan program baris perintah, yang mengurus membuat dan menyebarkan aplikasi Anda. Aku akan menunjukkan kepada Anda bagaimana cara menginstalnya hanya sedikit.

Jika saya harus menentukan, Singkatnya, bagaimana Meteor dapat membantu Anda, saya harus mengatakan bahwa itu adalah kecepatan di mana Anda dapat mengembangkan aplikasi Anda. Situs yang digunakan untuk membutuhkan ribuan baris kode, hanya mengambil beberapa ratus di Meteor. Hal ini dengan menggabungkan tiga inti kunci fitur:

  1. Meteor adalah "Realtime oleh Desain"
  2. "Akses Database" dari klien
  3. "Latensi Kompensasi"

Dengan menggabungkan tiga fitur ini bersama staf meteor telah menciptakan sebuah kerangka kerja yang sangat kuat dan pendekatan baru untuk pemrograman. Sekarang mari kita lihat apa artinya masing masing.


1 - "Realtime oleh Desain"

Meteor, Anda tidak memprogram routines dan functions, Anda memrogram elemen halaman. Ini sangat berorientasi pada komponen, hanya menginstruksikan Meteor bagaimana sesuatu harus bekerja, dan itu akan mengurus pembaruan halaman secara realtime. Ini berarti bahwa Anda tidak perlu menulis kode AJAX atau DOM manipulasi, menghemat sejumlah besar waktu.

Dalam tutorial ini, saya akan menggunakan Meteor apa adanya, tanpa menyesuaikan paketnya. Plugin templating default untuk meletakkan komponen Anda adalah Handlebars. Di Handlebars, Anda membuat template untuk komponen Anda, dan Meteor akan memproses ini saat runtime dan menghasilkan HTML dinamis. Mari kita membangun sebuah aplikasi Meteor yang mengambil array JSON objek, satu untuk setiap produk, dan menampilkan nama, harga, dan ketersediaan. Untuk memulai, saya akan menginstal Meteor dan membuat proyek baru.

Pertama, buka jendela Terminal dan ketik perintah berikut:

Di dalam direktori proyek, Anda akan menemukan tiga file: JavaScript, HTML, dan CSS file. Buka file HTML, dan menggantikan isinya dengan berikut:

Di atas, kami telah membuat template untuk produk kami, yang pada dasarnya hanya siklus melalui masing-masing dan menampilkan nama, harga, dan ketersediaan. Sekarang, mari kita membuka JavaScript file dan menggantikan segala sesuatu dalam Meteor.is_client if statement:

Apa pun yang ada di dalam bagian Meteor.is_client dijalankan hanya pada klien. Sebagian besar kode kita akan ditempatkan di sini. JavaScript adalah apa yang mungkin Anda harapkan: array untuk menahan produk, dan variabel ProductsArr yang kita didefinisikan dalam template. Untuk menguji aplikasi Anda, cukup ketik "meteor" di Terminal, dan Meteor akan menjalankan development server Anda untuk menguji aplikasi Anda.

 Anda mungkin mengatakan bahwa ini cukup keren, tetapi pada dasarnya hanya fungsi Handlebars standar - dan kita semua pernah melihat ini sebelumnya. Namun, itulah yang dilakukan Meteor di latar belakang yang merupakan bagian yang benar-benar keren. Meteor mengenali bahwa bagian halaman ini bergantung pada array Products, sehingga akan memantau variabel itu dan, kapan pun berubah, (yaitu Anda menambahkan item) Meteor akan memperbarui laman secara otomatis dengan perubahan baru ... secara realtime! Bukan itu saja; jika Anda ingin menambahkan event handler ke produk ini, Anda tidak perlu mulai menebak tombol mana yang ditekan pengguna, dengan menambahkan atribut khusus atau dengan membaca DOM, karena Meteor memanggil event pada objek itu sendiri - sehingga Anda memiliki akses ke propertinya.

Untuk mendemonstrasikan ini, mari tambahkan tanda konfirmasi, ketika seorang pengguna mengklik suatu produk. Tambahkan kode berikut setelah fungsi sebelumnya:

Fungsi ini dipanggil pada objek asli, bukan pada elemen halaman, sehingga memungkinkan Anda untuk mulai bekerja dengannya tanpa terlebih dahulu harus menentukan produk mana yang sesuai dengan elemen yang diklik. Hal lain yang harus diperhatikan adalah bahwa kita sedang menggunakan aturan CSS, ketika menyatakan event di Meteor. Ini berarti menggunakan periode untuk kelas, pound simbol untuk id, dan nama tag untuk elemen HTML.


2 - Database Everywhere

Meteor hadir dengan versi MongoDB yang berfungsi baik di server dan klien.

Secara default, Meteor datang dengan versi MongoDB yang bekerja pada server dan klien. Di server, ia bekerja sebagai Anda mungkin berharap untuk, tapi database pada klien lebih dari database pseudo. Apa yang saya maksudkan dengan ini adalah bahwa Meteor memiliki API yang ditulis untuk meniru Mongo API, tetapi untuk custom database yang cache dalam memori pada klien. Hal ini memungkinkan Anda untuk mengirim subset data. Misalnya, jika Anda hanya ingin pengguna memiliki baris tertentu, atau Anda tidak ingin mengirim kolom sandi, Meteor memungkinkan Anda untuk hanya "menerbitkan" info yang Anda inginkan, dan Meteor akan memperlakukannya sebagai database pada klien, memungkinkan Anda untuk membuat aplikasi Anda lebih cepat dan lebih aman!

Dengan menempatkan database pada klien, Anda dapat memberi feed database langsung ke halaman HTML Anda. Misalnya, pada contoh sebelumnya, daripada mendapatkan produk dari array, kita dapat memberi makan dalam database products. Jadi kapan pun perubahan basis data, pembaruan Anda akan didorong secara realtime ke semua klien.

Untuk mengintegrasikan ke dalam aplikasi kita, pertama kita harus menambah database ke dalam aplikasi kami, sebelum is_client if statement, karena database untuk klien dan server. Tambahkan kode berikut:

Selanjutnya, Anda dapat menghapus array Products yang kita buat sebelumnya, dan memodifikasi fungsi ProductsArr terlihat seperti berikut:

Kelebihan lainnya karena memiliki basis data pada klien adalah memungkinkan Anda untuk menggunakan API pengurutan MongoDB untuk secara otomatis mengurutkan elemen-elemen di halaman pada tingkat basis data, yang, sekali lagi, menghemat waktu Anda lebih banyak, saat mengembangkan aplikasi Anda. Anda dapat menambahkan catatan dalam kode atau di konsol browser Anda. Either way, Anda akan menggunakan perintah insert pada variabel Products. Berikut ini contohnya:

Saya menggunakan Google Chrome konsol masukkan kode ini, meskipun Anda pasti bisa melakukannya di editor Anda juga.


3 - Latency Kompensasi

Meteor akan memperbarui UI secara realtime.

Akhirnya, kami datang ke Meteor di latensi kompensasi. Sekarang, kita tahu bahwa kita dapat mendefinisikan elemen, menghubungkan mereka ke database, dan Meteor akan memperbarui situs Anda secara otomatis. Tapi menghubungkan aplikasi Anda begitu erat ke database dapat menimbulkan masalah serius. Jika aplikasi Anda hanya berubah ketika database berubah, maka mungkin ada sedikit jeda antara saat pengguna mengklik sesuatu, ketika perubahan di push ke database, dan kembali ke aplikasi Anda. Ini dapat membuat situs Anda merasa lebih lambat dari seharusnya.

Tim Meteor sudah memikirkan ini; mereka membuat apa yang mereka sebut sebagai 'Kompensasi Latency.' Ketika Anda mengirim sesuatu ke database, Meteor akan segera berpura-pura seolah-olah telah menerima pembaruan baru dari database, dan memperbarui UI Anda secara realtime. Dengan melakukan ini, Meteor tidak perlu menunggu pembaruan basis data, dan pengguna Anda akan segera melihat perubahan saat mereka membuatnya. Pada kesempatan langka ketika pembaruan Anda tidak mencapai server, Meteor akan merekonsiliasi data Anda dan mengepush pembaruan ke browser, tanpa Anda perlu menulis satu baris kode.

Untuk menyelesaikan tutorial ini, mari tambahkan troli belanja, untuk tujuan melihat kompensasi latensi dalam tindakan. Pertama, kami menambahkan HTML untuk keranjang:

Sekarang, kami akan menambahkan JavaScript diperlukan untuk membuat karya ini:

JavaScript ini adalah cukup lurus ke depan. Baris pertama menambahkan koleksi Cart, fungsi berikutnya menghubungkan database ke keranjang, ketiga fungsi mengembalikan total tarif untuk setiap item dalam keranjang, dan fungsi akhir kembali subtotal untuk bagian bawah dari keranjang.

Hal terakhir yang kami butuhkan, untuk membuat ini menjadi demo yang berfungsi penuh, adalah untuk memodifikasi acara yang kami buat ketika pengguna mengklik suatu produk, dan membuatnya menambahkan item ke keranjang. Berikut ini adalah pengendali event lengkap:

Dan di sana Anda memilikinya! Halaman produk dan keranjang belanja hanya dalam beberapa baris kode. Dengan penataan kerangka kerja dengan cara ini, kode ini tidak hanya lebih pendek, tetapi elegan. Sayangnya, dalam versi Meteor pada saat tulisan ini, "upserting" ke dalam database belum belum diimplementasikan, jadi aku harus secara manual memeriksa jika produk ini sudah di Shopping cart atau tidak.


Penggunaan

Sekarang setelah Anda membangun aplikasi, saatnya untuk menerapkannya ke web. Meteor memberi kita dua opsi:

  • Menggunakan server mereka gratis, yang telah mengatur staf Meteor
  • Menyebarkan server yang memiliki NodeJS dan MongoDB diinstal. Hal ini memungkinkan Anda untuk menyebarkan aplikasi Anda ke server apapun yang Anda memiliki akses ke Terminal.

Mengerahkan Meteor di Server

Mendeploy ke server gratis mereka mudah. Yang harus Anda lakukan hanyalah mengetik: 'meteor deploy yourSitesName.meteor.com'. Ini akan menyediakan nama host gratis dan mengunggah aplikasi Anda untuk dijalankan di sana. Anda juga dapat menggunakan pilihan ini dengan nama domain kustom Anda sendiri, seperti "YourSite.com," tetapi kemudian Anda akan perlu untuk memodifikasi pengaturan DNS situs Anda untuk menunjuk ke origin.meteor.com.

Mendeploy ke Server Anda Sendiri

Pilihan lainnya adalah menjalankannya di server Anda sendiri, yang dapat Anda lakukan dengan mengetik: 'meteor bundle.' Ini akan mengemas semua file yang diperlukan yang akan diperlukan untuk dijalankan. Kemudian, Anda harus mengatur database MongoDB dan dependensi NodeJS Anda. Tim Meteor telah menyertakan README dalam paket, ketika Anda bundel aplikasi Anda. File ini akan memberikan instruksi yang tepat untuk membuat aplikasi Anda aktif dan berjalan.

Untuk contoh situs yang lengkap di Meteor, saya membuat sebuah situs demo, yang disebut "Tasks;" Anda dapat melihat sumber pada GitHub di sini, atau melihat live demo di schedule.meteor.com. Terima kasih guys di watracz.com untuk melakukan desain khusus.


Kesimpulan

Untuk Merekap:

  • Anda tidak menggunakan Ajax
  • Tidak ada manipulasi DOM
  • Akses database pada klien
  • Otomatis realtime
  • Platform terbuka

Meskipun Meteor adalah masih dalam masa kanak-kanak (beta), tidak ada apa-apa yang Anda tidak bisa mendapatkan sekitar. Jumlah waktu yang menyimpan Meteor dalam aplikasi Anda membenarkan jarang terjadi yang mana Anda mungkin perlu untuk menulis solusi. Dengan rilis penuh diharapkan dalam kurang dari setahun, setiap saat ini kinks atau bug akan dengan cepat menjadi hal dari masa lalu.

Saya harap Anda menikmati tutorial ini; jika Anda memiliki pertanyaan, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah ini, dan saya akan melakukan yang terbaik untuk membantu! 

Advertisement
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.