Frontend untuk si Backend

Rasanya dalam beberapa tahun terakhir jika bicara webdev banyak orang langsung menerjamahkan bahwa mereka butuh backend dan frontend secara terpisah, tidak jarang saya menemukan pertanyaan seperti ini:

Saya udah bisa [masukan framework FE javascsript] enaknya pake backend apa?

Saya uda ada backend-nya, FE yang cocok apa ya?

Mungkin ini saya bias karena saya tumbuh dan belajar ketika framework fullstack MVC lagi naik daun, jadi dulu ketika bicara webdev yang kepikiran bukan backend-nya apa frontend-nya apa tapi lebih frameworknya apa?

Benefit

Dulu dan bahkan sekarangpun, saya bekerja dengan kondisi pemisahan backend dan frontend, karena memang pemisahan ini atau lebih kecilnya lagi framework fe memberikan cukup banyak benefit, seperti:

• Partial render
• Interactive
• Separation of concern yang jelas sekali

Bandingkan dengan "klasik" webdev yang click dan reload semua page, form yang submit lalu reload, dan juga kode yang bercampur antara misal PHP+HTML+Javacsript dalam satu berkas.

Drawback

Tapi, di luar benefit itu ada juga drawback dari framework fe ini

• expensive

Yup, mahal, pengalaman saya ketika menggunakan framework fe ini kadang banyak fitur yang sebelumnya default menjadi konfgirasi terpisah bahkan tools yang berbeda, setidaknya yang saya ingat:

• router yang secara default tidak terintegrasi dengan history browser, bisa diset history tapi ada konfigurasinya lagi
• session, mayoritas fe memang lebih menggunakan jwt auth untuk "session" tapi pernah bingung untuk nyimpen token yang aman, dulu pengalaman saya menggunakan express-session
• State, saat masih fullstack cenderung "tidak peduli" dengan state lokal atau global karena sebelum dirender sudah pasti sudah diolah di controller, view cukup menampilkan, di fe dulu saya pakai vuex.
• Butuh tim yang lebih banyak, iya jika sudah jelas, tapi ketika masih MVP?

Mencoba menggantikan javascript

Lalu bagaimana jika kita ingin mendapatkan efek interaktif yang menyerupai framework frontend tapi enggan menulis javascript? Beruntung untuk saat ini, ada beberapa tools yang mampu membuat interaktif sebuah web tanpa perlu menulis atau minimal sedikit saja menulis javascript, mari lihat gif di bawah ini

Contoh di atas itu terdiri:

• inline validation
• search table

Dan berapa banyak javascript yang saya tulis?

swal.fire({ 
                    icon: 'warning',
                    title: 'Are you sure??',
                    text: 'data deleted permanently!!',
                    showCancelButton: true,
                    confirmButtonText: 'Confirm',
                    cancelButtonText: 'Cancel',
                    }).then((result) => {
                    if (result.isConfirmed) {
                        Unicorn.call('list-contact', 'delete', '{{ data.id}}')
                    } 
 })"

Iya, hanya itu saja javascript yang saya tulis, btw contoh di atas menggunakan django unicorn.

Dalam tulisan selanjutnya saya mencoba untuk eksplorasi tools yang bisa membuat interaktif yang bisa membantu dalam membuat interaktif dengan sedikit javacript, di antaranya:

• django unicorn
• laravel livewire
• htmx

Tapi itu dalam tulisan yang berbeda.