Mengapa Mason Dan Front-End Sebagai Layanan Akan Menjadi Game Changer Untuk Pengembangan Produk

Diterbitkan: 2022-03-10
Ringkasan cepat Pengembangan dan pemeliharaan perangkat lunak, secara umum, merupakan proses yang memakan waktu dan sulit bagi pengembang dan insinyur yang menanggung beban pekerjaan. Namun, dengan diperkenalkannya front-end-as-a-service, dan perusahaan seperti Mason yang merintis jalan, itu semua bisa berubah. Inilah yang perlu Anda ketahui tentang FEaaS.

(Ini adalah artikel bersponsor.) Lihatlah aplikasi dan perangkat lunak yang sering Anda gunakan untuk berinteraksi. Masing-masing memiliki desain yang unik, bukan? Namun, ada sesuatu yang serupa tentang masing-masing dari mereka. Bilah navigasi, formulir kontak, kotak fitur, CTA — elemen tertentu cenderung ada di mana pun Anda pergi.

Itu karena elemen ini memainkan peran penting dalam cara pengguna terlibat dengan produk yang Anda buat. Dari sisi pengguna, ini adalah hal yang baik. Dengan memasukkan elemen yang dapat dikenali dan diprediksi ini dalam struktur frontend aplikasi, fokus pengguna adalah pada konten sebelum mereka; tidak mencoba memecahkan misteri UI.

Namun, dari pihak pengembang perangkat lunak, ini menyebalkan. Anda tahu jenis komponen apa yang perlu disertakan dalam suatu produk. Namun, sampai sekarang, Anda harus membangunnya dari awal berulang kali. Lebih buruk lagi, setiap kali sesuatu perlu diperbarui, Anda harus mengimplementasikan pembaruan dan mendorongnya ke situs langsung — dan tidak sering Anda memiliki bandwidth untuk membuat perubahan itu segera.

Itulah mengapa apa yang dilakukan Mason dengan front-end-as-a-service (FEaaS) sangat menarik. Dalam artikel ini, saya akan memberi Anda pandangan lebih dekat tentang FEaaS, untuk siapa dan mengapa memberdayakan tim produk dan pemasaran dengannya adalah masalah besar.

Apa itu FEaaS?

Anda tahu apa itu software-as-a-service (SaaS). Tapi pernahkah Anda mendengar tentang software-components-as-a-service (SCaaS)?

Ada beberapa keluhan ringan di sekitar SCaaS beberapa tahun yang lalu. Ide dasarnya adalah Anda dapat membuat dan dengan mudah memelihara komponen dan widget UI yang dapat digunakan kembali untuk perangkat lunak Anda. Namun, itu tidak pernah benar-benar berhasil — dan itu mungkin karena terlalu membatasi apa yang memungkinkan pengembang lakukan.

Namun, dengan FEaaS, Anda memiliki solusi yang jauh lebih berharga dan kuat. Pada dasarnya, solusi front-end-as-a-service Mason memungkinkan Anda dengan cepat dan efektif membangun aspek visual dan fungsionalitas perangkat lunak Anda.

Ini berarti Anda sedang membangun fitur yang kompleks dan membuatnya berbicara dengan API. Contoh bentuk kompleks yang dirancang berbeda yang terhubung ke Airtable sebagai sumber data dapat ditemukan di sini.

Terlebih lagi, setiap fitur yang Anda buat dengan Mason berada dalam basis kode yang sama dengan produk Anda lainnya. Mari kita lihat Chatbot bertenaga Apixu yang dapat disesuaikan yang dibuat dengan Mason:

Demo daftar tugas Mason Airtable
Contoh jenis konten dinamis yang dapat Anda buat dengan FEaaS. (Sumber: Mason) (Pratinjau besar)

Dan ini adalah banner hero yang saya buat untuk giveaway ebook menggunakan template Mason :

Templat pahlawan tukang batu
Contoh template gambar pahlawan, disesuaikan dan diterbitkan dengan Mason. (Sumber: Mason) (Pratinjau besar)

Jangan salah: ini bukan pembuat situs web. Mason memberdayakan Anda dan tim Anda untuk membangun komponen individual dan fitur yang berfungsi penuh; tidak seluruh situs web atau produk hosting terkelola. Dengan cara ini, Anda tidak lagi dibatasi oleh kemampuan solusi pembuat situs Anda.

Anda dapat membangun situs web, aplikasi, atau produk perangkat lunak lainnya di alat pilihan Anda. Kemudian, rancang dan ekspor fitur yang sangat kompleks dari Mason untuk diintegrasikan ke dalam basis kode Anda. Penting untuk menunjukkan bahwa tidak seperti platform yang mengunci Anda dan data pelanggan Anda, Mason memungkinkan tim produk menambah produk mereka saat ini dan memiliki segalanya (bukan seperti beberapa pembuat situs web yang memiliki seluruh situs web dan bisnis Anda sebagai gantinya).

Untuk Siapa Mason?

Dengan Mason, Anda seharusnya sudah memiliki produk perangkat lunak yang dikembangkan sepenuhnya atau, paling tidak, solusi untuk membangunnya. Mason adalah alat yang akan Anda gunakan untuk membangun dan mendesain fitur (dan fungsinya) untuk produk Anda — dan melakukannya dengan mudah (yaitu tanpa pengkodean).

Fitur-fitur itu kemudian akan berdiri sendiri dan dimasukkan ke dalam produk saat siap digunakan.

Mengenai orang-orang yang sebenarnya Mason dibangun, Tom McLaughlin, CEO Mason, menjelaskan:

“Saat ini, seluruh produk hidup dalam basis kode, sehingga menjadi ranah de facto tim teknik saja, meskipun begitu banyak fitur yang membentuk produk dapat ditemukan di setiap basis kode lain di bumi — mereka hanya tidak begitu unik. Mason memungkinkan tim produk Anda membangun fitur umum ini lebih cepat, tetapi, yang lebih penting, memungkinkan siapa pun di organisasi — teknis atau tidak — mengelolanya, bahkan setelah mereka dalam produksi.”

Tim produk Anda — pengembang dan perancang perangkat lunak Anda — adalah orang-orang yang akan menggunakan Mason untuk membangun perangkat lunak Anda. Namun, tim pemasaran dan konten Anda akan memperoleh kemampuan untuk memperbarui fitur yang telah Anda buat di Mason setelah diterapkan, tanpa perlu menunggu teknisi untuk menerapkan setiap pengeditan atau penyesuaian baru.

Artinya, pemeliharaan fitur front end tidak lagi hanya bergantung pada Anda, sang developer. Siapa pun di tim Anda — desainer, pemasar, pembuat konten, dll. — dapat menggunakan platform FEaaS Mason untuk membangun dan memperbarui fitur perangkat lunak Anda.

Jadi, Anda tidak hanya dapat membuat fitur canggih dengan lebih efisien untuk produk Anda, tim Anda juga dapat menerapkan pembaruan secara real-time, daripada membiarkannya menumpuk di daftar tiket terbuka Anda.

Mengapa FEaaS Penting

Apakah jadwal pengembangan, penerapan, atau pembaruan perangkat lunak Anda mengalami kendala di masa lalu karena (walaupun sepenuhnya dapat dimengerti) hambatan pengembang perangkat lunak? Jika demikian, maka FEaaS seharusnya terdengar seperti mimpi bagi Anda.

Sampai sekarang, benar-benar tidak ada pilihan lain untuk insinyur perangkat lunak. Jika Anda ingin membuat produk untuk web, semuanya harus dibuat dari awal dan Anda memerlukan waktu yang cukup lama untuk melakukannya, terutama jika tujuan Anda lebih kompleks. Sementara itu, sisa tim Anda dibiarkan menunggu di sayap untuk Anda melakukan bagian Anda.

Dengan Mason yang memimpin dengan solusi FEaaS-nya, saya ingin melihat bagaimana kemampuannya akan merevolusi alur kerja pengembangan produk Anda.

Rancang Komponen UI Secara Visual

FEaaS membawa insinyur dan pengembang keluar dari basis kode produk dan masuk ke antarmuka pembuatan visual. Dengan demikian, Anda melihat dengan tepat apa yang sedang Anda bangun tanpa harus bolak-balik antara kode Anda dan pratinjau visual tentang tampilannya setelah diterapkan.

Dengan pembuat visual Mason, Anda dapat mendesain komponen UI yang kompleks namun penting menggunakan sistem wadah, kolom, lapisan, dan elemen yang telah dikonfigurasi sebelumnya seperti teks, bidang formulir, tombol, dan lainnya.

Pembangun visual tukang batu
Lihat ke dalam alat pembuat visual Mason. (Sumber: Mason) (Pratinjau besar)

Mirip dengan cara kerja alat pembangun modern lainnya, ada banyak opsi yang tersedia untuk membantu Anda melakukan lebih banyak tanpa harus menulis sebaris kode. Dan berkat peralihan yang nyaman antara tampilan desktop, seluler, dan tablet, desain responsif juga tidak menjadi masalah.

Selain itu, Mason hadir dengan kit UI berfitur lengkap yang mencakup berbagai template untuk komponen UI yang paling umum. Atau Anda dapat memilih sendiri yang Anda butuhkan:

Template tukang batu
Pustaka templat komponen UI bawaan Mason. (Sumber: Mason) (Pratinjau besar)

Kartu fitur. Layar masuk. Blok konten blog. Gambar pahlawan. tombol CTA. Semua komponen inti yang Anda butuhkan untuk membuat pengunjung terlibat dengan produk Anda dan mengambil tindakan telah dibuat untuk Anda.

Jika Anda bosan membuatnya dari awal di setiap produk yang Anda buat, template ini akan sangat membantu. Seperti yang dapat Anda bayangkan, memiliki kemampuan untuk merancang dan menyesuaikan komponen produk dengan cara ini akan menjadi keuntungan besar bagi produktivitas tim Anda.

Bangun Komponen Dan Fungsionalitas Lebih Cepat

Sekarang, kemampuan untuk mendesain komponen secara visual hanyalah salah satu keuntungan menggunakan platform FEaaS seperti Mason. Seperti yang Anda duga, alat seperti ini dibuat untuk kecepatan.

Dalam hal benar-benar menggunakan Mason, ini adalah alat yang memuat dengan sangat cepat — yang akan membuat ini sangat berharga bagi siapa saja yang kehilangan waktu di masa lalu menunggu alat mereka diluncurkan, menyimpan perubahan, atau berpindah dari satu tampilan ke tampilan lainnya.

Dalam hal bagaimana hal itu mempengaruhi alur kerja Anda, berharap untuk mendapatkan kecepatan di sana juga.

Dengan pembuat Mason, Anda dapat:

  • Tambahkan wadah, kolom, baris, blok konten baru, atau elemen berkode khusus dengan drag-and-drop sederhana:
Pilihan Desain Mason
Set lengkap tata letak desain, komponen, dan opsi pengkodean Mason. (Sumber: Mason) (Pratinjau besar)
  • Tinjau, edit, duplikat, pindahkan, atau hapus lapisan komponen Anda menggunakan hierarki elemen yang divisualisasikan ini:
Lapisan tukang batu
Kontrol lapisan Mason yang mudah dikelola. (Sumber: Mason) (Pratinjau besar)
  • Bukan hanya bagian desain UI yang disederhanakan. Anda juga dapat menghubungkan komponen Anda ke sumber lain melalui API dengan mudah.
sumber data tukang batu
Menghubungkan sumber data ke fitur Mason untuk mempersiapkan pemetaan. (Sumber: Mason) (Pratinjau besar)
Pemetaan Mason API
Menghubungkan API ke komponen Mason melalui pemetaan. (Sumber: Mason) (Pratinjau besar)

Tab "Konfigurasi" Mason memungkinkan Anda berintegrasi dengan cepat dengan aplikasi lain, seperti:

  • Authy
  • Facebook
  • Hubspot
  • Garis
  • Twilio
  • Dan banyak lagi.

Jadi, katakanlah Anda ingin menjual eBuku yang dipromosikan di spanduk pahlawan Anda alih-alih hanya mengumpulkan prospek dengannya. Hal pertama yang akan Anda lakukan adalah mengatur integrasi Stripe.

Yang Anda butuhkan hanyalah kunci yang Dapat Diterbitkan dan Rahasia dari dasbor Pengembang Stripe:

Kunci API garis
Ambil kunci API dari dasbor pengembang Stripe Anda. (Sumber: Stripe) (Pratinjau besar)

Kemudian, masukkan masing-masing kunci ke bidang yang sesuai di Mason:

Integrasi pihak ketiga Mason
Integrasikan aplikasi lain dengan komponen Mason sebagai sumber data, seperti contoh Stripe ini. (Sumber: Mason) (Pratinjau besar)

Kembali ke tab “Desain” dan seret Elemen Formulir Kartu Kredit ke dalam komponen.

Elemen formulir kartu kredit Mason
Gunakan Elemen Formulir Kartu Kredit di Mason untuk menerima pembayaran melalui komponen. (Sumber: Mason) (Pratinjau besar)

Dengan formulir Anda ditambahkan ke halaman, ada satu langkah terakhir yang harus diambil untuk menyiapkan integrasi ini.

Kembali ke tab Konfigurasi. Anda sekarang akan melihat opsi baru di bilah sisi yang disebut "Formulir":

Integrasi Mason dengan Stripe
Konfigurasikan formulir pembayaran Stripe hanya dalam beberapa langkah dengan Mason. (Sumber: Mason) (Pratinjau besar)

Anda dapat melihat bahwa semua detail terkait telah ditambahkan di sini dan koneksi telah dibuat ke formulir Anda.

Sekali lagi, Mason membuat pekerjaan ringan dari sesuatu yang biasanya membutuhkan waktu untuk dilakukan oleh para insinyur perangkat lunak jika mereka ingin membangun komponen dari awal. Sebagai gantinya, Anda sekarang memiliki semua alat yang Anda butuhkan untuk merancang dan memprogram fitur baru dengan cepat untuk produk Anda.

Terapkan Fitur Baru Dengan Mudah

Yang pasti, kemampuan merancang fitur baru dengan cepat adalah penting bagi tim produk. Namun, itu masih tidak memperbaiki masalah penerapan.

Kemacetan dapat terjadi di berbagai titik pengembangan produk. Dan ketika Anda membangun perangkat lunak yang begitu kompleks sehingga hanya seorang insinyur yang dapat dengan mudah meluncurkannya atau menyebarkan pembaruan, Anda hanya dapat mengharapkan penundaan lebih lanjut dalam proses.

Mason telah mengembangkan solusi untuk ini. Untuk memulai, menerbitkan komponen ke perpustakaan Mason sangatlah mudah. Cukup klik tombol "Terbitkan" di sudut kanan atas pembuat dan Mason akan mengurus sisanya.

Namun, untuk memasukkan komponen ke dalam produk atau aplikasi Anda, pengembang perlu terlibat — tetapi hanya sekali ini saja dan tidak akan memakan waktu lebih dari lima menit.

Untuk melakukan ini, gunakan tombol “< > Deploy” di pojok kanan atas builder. Ini kemudian akan meminta Anda untuk melakukan hal berikut:

Proses penyebaran Mason
Menyebarkan komponen Mason hanya membutuhkan waktu lima menit dan empat langkah. (Sumber: Mason) (Pratinjau besar)

Pada dasarnya, apa yang Anda lakukan adalah mengambil pengidentifikasi unik yang telah dibuat Mason untuk fitur yang Anda buat dan menambahkannya ke basis kode Anda. Saat disiapkan dengan benar, produk Anda akan memanggil Mason API untuk merender sisi aplikasi komponen. Dan mereka yang berada di ujung depan situs tidak akan menjadi lebih bijaksana.

Sesederhana itu untuk mendorong komponen baru dan semua fungsinya secara langsung.

Berdayakan Semua Orang Untuk Membuat Perubahan Dan Mendorong Pembaruan

Semua poin yang saya buat di sini tentang manfaat FEaaS telah menari di sekitar final ini — dan manfaat besar —, yaitu ini:

FEaaS memberdayakan semua orang untuk membuat perubahan pada fitur dan mendorongnya ke aplikasi langsung.

Pikirkan tentang itu sejenak.

Berapa banyak waktu yang dihabiskan tim Anda untuk menunggu seorang insinyur menerapkan perubahan yang mereka butuhkan? Dan apa yang telah dilakukan dalam hal menghambat kemampuan aplikasi Anda untuk melibatkan dan mengonversi pengunjung? Tanpa tampilan UI yang mengesankan, tanpa fitur yang berfungsi dengan baik, tanpa semua elemen penting yang diperlukan untuk memaksa pengunjung mengambil tindakan.

Anda pada akhirnya menghabiskan uang bisnis dengan menyandera perangkat lunak. Sampai sekarang, itu adalah sesuatu yang tim produk perangkat lunak tidak dapat membantu. Itu hanya sifat pekerjaan mereka. Tetapi dengan FEaaS oleh Mason, ini akhirnya berubah.

Setelah Anda (1) menerbitkan komponen Anda dan (2) menerapkannya ke aplikasi Anda, fitur tersebut akan muncul di dalam produk Anda. Tapi katakanlah perubahan diperlukan untuk itu. Sebagai contoh:

  • Desainer Anda ingin mengubah gaya formulir untuk mencerminkan desain halaman arahan yang diubah.
  • Manajer pemasaran Anda memiliki citra merek baru yang perlu menggantikan citra pahlawan laman beranda.
  • Editor Anda telah memutuskan untuk mengubah susunan kata untuk penawaran gen prospek terbaru dan ingin memperbarui CTA.

Tidak masalah siapa yang masuk ke dalam pembuat Mason untuk mengubah komponen. Yang kedua terjadi, tombol "Tersimpan" yang pudar di sudut kanan atas pembuat berubah menjadi tombol "Buka Terbitkan" berwarna hijau.

Pembaruan komponen perangkat lunak Mason
Memperbarui komponen Mason dapat dilakukan oleh siapa saja. (Sumber: Mason) (Pratinjau besar)

Dan coba tebak? Tidak diperlukan pengalaman teknis untuk mengkliknya.

Mason menyederhanakan publikasi
Mason mengurus penerbitan komponen Anda dan pembaruannya ke perpustakaannya. (Sumber: Mason) (Pratinjau besar)

Mason mengurus penerbitan dan penerapan perubahan, jadi selama koneksi telah dibuat antara aplikasi Anda dan Mason, pembaruan ini akan langsung ditayangkan untuk dilihat pengunjung.

Jika Anda dan tim produk Anda telah terjebak dengan rentetan tiket, meminta Anda untuk membangun komponen baru atau mengubah yang sudah ada, ini akan secara efektif menghentikan itu.

Membungkus

Salah satu hal luar biasa tentang membangun produk untuk web adalah bahwa seseorang selalu mengembangkan cara baru untuk membantu kami mencapai lebih banyak sekaligus melakukan lebih sedikit.

Dengan aplikasi perangkat lunak, secara umum, sudah lama datang. Untungnya, FEaaS ada di sini dan sepertinya Mason telah mengembangkan alat yang sangat berharga untuk mempercepat pengembangan perangkat lunak, meningkatkan output, dan juga memberdayakan lebih banyak tim Anda untuk ikut serta.