Pandangan mendalam tentang Shopify Hydrogen dan Shopify Oxygen

Shopify semakin populer dalam bisnis. Karena cukup mudah untuk disesuaikan dan memiliki banyak manfaat, perusahaan ingin terjun ke pasar ini untuk memperluas peluang dan pengalaman pelanggan mereka. Oleh karena itu, pasar online menjadi cukup kompetitif. Kemudian, bisnis harus memikirkan cara untuk membuat toko mereka di Shopify lebih menarik dan nyaman untuk memenangkan pesaing. Untungnya, Shopify telah meluncurkan Shopify Hydrogen dan Shopify Oxygen untuk membuat prosesnya menjadi lebih sederhana. Oleh karena itu, dalam artikel ini, kami akan memberi Anda pengenalan terperinci tentang Shopify Hydrogen dan Shopify Oxygen untuk Anda.

Beberapa fitur utama yang harus Anda ketahui tentang Shopify Hydrogen dan Shopify Oxygen

Ikhtisar Shopify Hidrogen

Shopify Hydrogen, yang diumumkan di Unite 2021 adalah kerangka kerja React baru yang memungkinkan pengembang membuat toko Shopify yang benar-benar unik. Hidrogen adalah platform berbasis React dan JavaScript yang memberi pedagang alat dan komponen yang kuat. Kapasitas ekstra ini memungkinkan Anda untuk memulai dari bawah ke atas dan membuat toko yang dipersonalisasi dan unik.

Bagaimana Shopify Hidrogen bekerja

Anda akan menggunakan hidrogen untuk membuat etalase yang dipesan lebih dahulu. Ini mencakup kerangka kerja serta komponen antarmuka pengguna.

Kerangka kerja untuk hidrogen: Shopify Hydrogen menawarkan plugin Vite yang mencakup rendering sisi server (SSR), middleware hidrasi, dan transformasi kode untuk komponen klien.

Komponen Antarmuka Pengguna Hidrogen: Hidrogen adalah sekumpulan komponen, kait, dan utilitas yang mendukung fitur dan konsep Shopify.

Sumber informasi: Hidrogen dirancang untuk bekerja dengan data dari Storefront API Shopify. Data yang diberikan ke komponen, kait, dan utilitas memiliki bentuk yang cocok dan sesuai dengan jenis GraphQL API Storefront.

Shopify Hydrogen dapat menjadi asisten dengan data untuk sumber pihak ketiga. Jika Anda ingin menggunakan komponen Hidrogen dengan sumber data pihak ketiga, Anda harus terlebih dahulu mengubah data dari sumber pihak ketiga menjadi jenis yang diharapkan oleh komponen, kait, dan utilitas Hidrogen, lalu meneruskannya ke komponen, kait, dan utilitas.

Beberapa praktik terbaik yang harus Anda ikuti untuk menyiapkan Hidrogen

Agar toko pedagang Anda cepat, mudah diakses, dan mudah ditemukan, Anda perlu mempertimbangkan faktor-faktor berikut:

• Pertunjukan
• Aksesibilitas
• Pengujian

Ada prinsip panduan untuk pengembangan Hidrogen Shopify

Lalu, Apa itu Shopify Oxygen?

Sederhananya, Oxygen adalah layanan hosting yang Shopify tawarkan untuk memungkinkan Anda meng-host toko yang Anda buat dengan Hydrogen.

Oksigen adalah bantuan untuk membantu toko Anda menangani lalu lintas dalam jumlah besar untuk menjalankan penjualan kilat atau promosi sosial yang efektif. Bahkan situs web perusahaan besar pun bisa mogok ketika mereka mendapatkan banyak lalu lintas. Jadi Oxygen berusaha membantu Anda untuk menjaga situs Anda berjalan dengan lancar.

Manfaat yang pasti akan Anda terima saat menggunakan Shopify Hydrogen

Shopify Hydrogen menawarkan keuntungan berikut jika Anda berpikir untuk membuat etalase kustom.

Template Toko Demo

Hidrogen menyediakan template Toko Demo yang memudahkan pembuatan etalase khusus Shopify. Muncul dengan kode boilerplate, dan terintegrasi dengan situs Shopify dengan mulus. Selain itu, ia menawarkan pengalaman membeli yang lengkap langsung dari kotak.

Anda dapat menata template Demo Store berkat paket utilitas Tailwind CSS dan kerangka kerja Shopify Hydrogen. Anda dapat menggunakan perpustakaan Tailwind atau membuat gaya Anda sendiri.

Pengoptimalan kinerja

Untuk kecepatan optimal, arsitektur Shopify Hydrogen memungkinkan penggabungan pengambilan data statis dan dinamis di sisi klien dan server. Karena teknologi web mutakhir dan pendekatan pengembangan web, ia menyediakan fitur-fitur berikut:

• Untuk kecepatan dan kinerja, ada kontrol caching bawaan untuk menangani informasi dinamis dan meminimalkan panggilan API.
• Sisi Server memiliki tanggung jawab untuk mengurangi beban awal.
• React Server Components adalah alur pengambilan data dan rendering untuk proyek React yang memiliki opini. Pengalaman pengembangan menggunakan React Server Components jauh lebih baik. Komponen merender dengan cepat, memungkinkan Anda untuk melihat pekerjaan Anda saat Anda membangunnya.

Perkembangan cepat

Hidrogen menggunakan tumpukan teknologi dasar dan keterampilan perdagangan Shopify untuk mempercepat proses pengembangan. Ia bekerja bahu-membahu dengan Storefront API untuk menyediakan pengambilan data yang cepat.

Hidrogen berisi komponen, pengait, dan alat perdagangan khusus Shopify. Mereka mudah diakses, cepat, dan siap digunakan. Mereka juga membantu mengurangi kompleksitas awal dan boilerplate yang diperlukan untuk membuat etalase kustom.

React.js

Shopify telah mendukung React.js sebagai masa depan perdagangan yang dinamis, cepat, dan dipersonalisasi. Dan Anda dapat bertaruh bahwa keputusan Shopify untuk berinvestasi di React adalah pernyataan penting bagi industri. Ini memberi React.js lebih banyak kepercayaan sebagai masa depan perdagangan atau ke mana arahnya.

Anda akan menerima kit awal, yang mencakup item berikut:  

Pengadopsi awal Hidrogen akan menerima template dasar untuk membuat situs mereka aktif dan berjalan. Berikut daftar apa yang termasuk dalam paket awal (pikirkan: tombol, matikan, navigasi). Anda hampir pasti perlu membuat potongan sendiri sebagai pengadopsi awal, tetapi ada komponen pra-bangun yang dapat Anda gunakan untuk memulai.

Tim Anda dapat membantu membangun Hidrogen

Shopify sedang mencari bantuan dari komunitas pengembangan eCommerce. Dengan bantuan Shopify, Anda dapat merancang visi produk dari awal jika Anda memiliki tim pengembangan internal yang kuat.

Komponen yang Anda buat dapat digunakan kembali

Setelah Anda memulai dengan starter kit, Anda akan dapat merancang bagian awal yang dapat Anda gunakan kembali sesuai kebutuhan di seluruh situs akhirnya.

Namun, Anda harus menghadapi beberapa kelemahan potensial dari Shopify Hydrogen

Alur kerja berat pengembang yang Anda buat dari bawah ke atas  

Sementara kerangka Shopify memang memberi Anda manfaat menjadi tanpa kepala, semuanya harus dibuat di Hidrogen oleh pengembang. Sayangnya, ini berarti bahwa anggota tim non-teknis tidak dapat membuat perubahan pada lapisan frontend situs. Tidak ada alat drag-and-drop jangka pendek atau jangka panjang pada rencana 2022 pada acara balai kota Shopify pada bulan Desember. Pada akhirnya, strategi ini mungkin cocok untuk tim eCommerce yang sudah memiliki banyak sumber daya pengembangan staf.

Saat ini tidak ada pratinjau toko yang tersedia

Kecuali jika Anda ingin membuat lingkungan pratinjau Anda sendiri, Anda tidak akan dapat melihat pratinjau real-time dari toko bertenaga Hidrogen yang Anda buat sekarang. Hal ini dapat mempersulit penerapan bagi anggota non-teknis tim eCommerce Anda.

Menggunakan komponen server React

Output Hydrogen tidak akan menjadi aplikasi web progresif statis karena menggunakan komponen server React (PWA). Pemrogram Anda harus menulis kode untuk server Shopify. Komponen React Server, sebagai catatan tambahan, cukup panas dan baru. Anda dapat menyebutnya sebagai versi "beta". Itu ide yang bagus, tetapi sebagian besar pengembang belum benar-benar menerimanya.

Anda harus menautkan sistem manajemen konten (CMS) Anda sendiri

Hari ini, Shopify dan Sanity berkolaborasi untuk menghadirkan kemampuan Sistem Manajemen Konten (CMS) ke toko Hidrogen. Sanity adalah CMS pihak ketiga yang berorientasi pada pengembang, memungkinkan tim untuk membuat skema data konten (gambar, teks, video) untuk manajemen konten kode rendah.

Dukungan aplikasi hari ini sangat minim

Meskipun Shopify telah menetapkan skenario ideal untuk dukungan aplikasi potensial, ekosistem aplikasi pihak ketiganya saat ini masih dalam tahap awal. Untuk saat ini, API tidak tersedia untuk semuanya. Dan apa yang Anda buat tidak akan langsung kompatibel dengan toko aplikasi Shopify. Untuk setiap aplikasi Shopify yang Anda gunakan, Anda harus mendesain middleware Anda sendiri.

Hidrogen masih jauh dari pengganti cairan

Sejumlah besar pedagang baru-baru ini berinvestasi dalam tema Shopify. Kemudian Shopify mengubah fokusnya dari tema Shopify Liquid dan audiens non-teknis yang saat ini dilayani oleh tema-tema ini. Jika Anda mencari Hidrogen sebagai opsi tanpa kepala yang memungkinkan, perlu diingat bahwa mungkin perlu beberapa waktu agar kerangka kerja ini dapat mengejar Liquid.

Kesimpulan

Kami memandu Anda melalui artikel ini dengan harapan: Anda memiliki pemahaman dasar tentang Shopify Hydrogen dan Shopify Oxygen. Dengan banyak fitur yang menakjubkan, sudah pasti layak untuk digunakan untuk meningkatkan efektivitas toko online Anda. Oleh karena itu, bisnis Anda dapat memenuhi permintaan pelanggan dan membawa lebih banyak peluang untuk berkembang di lingkungan internet. Namun, jika Anda masih bingung dengan teknologi ini, Magesolution bersedia menjadi partner untuk membantu bisnis Anda. Dengan banyak pengalaman di bidang ini , kami yakin dapat memberikan layanan terbaik: Shopify Solutions . Oleh karena itu, jika Anda memiliki pertanyaan, hubungi kami untuk mendapatkan informasi lebih lanjut.