Frontend is Enough

Transcript

1. Frontend is Enough* Rizqy H. Product Engineer, Dicoding *) syarat dan ketentuan berlaku
2. Belajar frontend dulu, atau backend dulu, ya?
3. (Mulai) Frontend aja dulu • Pondasi layouting dan styling di web • Vanilla javascript • Web API ◦ DOM ◦ Service Worker ◦ Push notification ◦ Dll • Next: view libraries (Vue/React/Angular/Svelte/dll)
4. Bikin web tanpa backend, emang bisa?
5. Kenapa tidak bisa? • Back to basic • Reinventing static web: static site generator ◦ Jekyll, GatsbyJS, Hugo, Hexo • Memahami kebutuhan web yang akan dibangun
6. Kalau butuh menyimpan data atau memproses hal lain, gimana?
7. Begini • Arsitektur JAMstack • Manfaatkan layanan cloud (SaaS/PaaS), misal: ◦ Penyimpanan dokumen: Google Drive, OneDrive, etc. ◦ Storage aset statis: AWS S3, Azure Blob Storage, Google Cloud Storage, etc. ◦ Video streaming: YouTube, Vimeo, Wistia, etc. ◦ Database: Firebase Firestore, AWS DynamoDB, Airtable, etc. ◦ Memproses sesuatu: AWS Lambda, Azure Functions, Firebase Cloud Function, etc. ◦ Kirim email: Sendgrid, Mailgun, AWS SES, etc. ◦ Transformasi gambar: Cloudinary, imgIX, etc. ◦ Pencarian konten: Algolia, ElasticSearch, Amazon CloudSearch, etc. • Sebagian besar menyediakan free tier, yay!
8. • Transfer donasi harus ketika manual nomor rekening • Konfirmasi harus ketik manual nomor WA, atau bahkan harus simpan kontak dulu • Susah copy/paste dari caption IG/WA • Tim konten harus bikin poster update donasi tiap hari • Laporan donasi belum terbuka untuk publik • Harus deploy dalam 2 hari
9. Solusi • Static web untuk informasi nomor rekening dan konfirmasi https://ghsbergerak.no w.sh/ • Otomasi poster laporan donasi harian https://ghsbergerak.no w.sh/poster-donasi
10. Solusi • Laporan donasi dengan Google Sheets https://ghsbergerak.no w.sh/laporan
11. Solusi • Static web hosting di Vercel • Otomasi dengan Serverless Functions dari Vercel • Kode open source di GitHub • Tailwind CSS, alternatif Bootstrap https://github.com/rizqyhi/g hs-bergerak
12. https://github.com/rizqyhi/sadarkawasan.org
13. Lessons Learned • Cari solusi yang paling sederhana untuk menyelesaikan masalah • Ketika fokus pada frontend: ◦ Tidak perlu memikirkan hosting ◦ Tidak perlu setup server ◦ (Bisa jadi) tidak perlu sewa domain • Manfaatkan layanan cloud sebagai pendukung/pengganti backend • Maksimalkan layanan yang menyediakan free tier • Syarat dan ketentuan berlaku ◦ Ada limitasi yang perlu disadari
14. Thanks! T: @rizqyhi G: rizqyhi E: rizqy@dicoding.com