Pelajaran yang didapat dari membuat starter-kit web

Transcript

1. Pelajaran yang didapat dari membuat starter-kit web Satya Kresna
2. Aktivitas setiap kali mengerjakan sebuah proyek 1. Membuat direktori proyek 2. Merancang struktur folder (misal 3 - 10 menit) 3. Menginstal perkakas (maks. 5 menit) 4. Mengatur konfigurasi perkakas (misal 10 - 15 menit) 5. Mulai mengerjakan proyek
3. Pangkas aktivitas yang tidak diperlukan 1. Membuat direktori proyek 2. Merancang struktur folder (misal 3 - 10 menit) 3. Menginstal perkakas (maks. 5 menit) 4. Mengatur konfigurasi perkakas (misal 10 - 15 menit) 5. Mulai mengerjakan proyek 1. Mengunduh starter kit 2. Menginstal perkakas (maks. 5 menit) 3. Mulai mengerjakan proyek
4. Apa itu starter kit? Satu set hal yang diperlukan untuk membuat sesuatu.
5. Manfaat dari starter kit • Menghemat waktu merancang struktur folder dan mengatur konfigurasi, • Mempercepat langkah mengerjakan proyek, • Penyelamat Hackathon.
6. Starter Kit Saya KISS KIT (Keep It Simple Stupid) Kit Starter kit berbasis aplikasi satu halaman (single page application)
7. Bumbu KISS Kit • Gulp (menjalankan beragam tugas), • Browsersync (memuat ulang halaman setiap kali ada perubahan di suatu file), • TailwindCSS (framework CSS), • Page.js (pustaka untuk mengatur navigasi SPA).
8. Pengetahuan pakai KISS Kit HTML, CSS, JavaScript (ES6, DOM manipulation, ES modules, History API untuk routing) dan Gulp.
9. Degit Sebuah perancah proyek langsung dan lebih cepat dibandingkan git clone karena tidak mengunduh riwayat git. Syarat: NodeJS >= 8 karena butuh async await Instalasi: npm install -g degit
10. Buat Proyek dengan KISS Kit dan Degit degit satyakresna/kiss-kit nama-proyek
11. Proyek yang dibangun pakai KISS-Kit bfwiki.satyakresna.io wasm-summit-clone.satyakresna.io
12. Isu Single Page Application Refresh halaman Akses halaman lain (/users)
13. Penyebab Isu Single Page Application 1. SPA dirender di sisi klien. 2. SPA biasanya hanya menggunakan satu file indeks yang dapat diakses oleh browser web (umumnya index.html) dan navigasi ditangani menggunakan History API. Akibat: server web akan mengembalikan pesan 404 (tidak ditemukan) kepada pengguna.
14. Solusi Isu Single Page Application (development) Connect-history-api-fallback Kriteria: 1. Request method GET yang menerima tipe text/html, 2. Bukan permintaan file langsung, misalnya request yang diminta tidak boleh ada . (DOT) karakter dan tidak cocok dengan pola yang disediakan di options.rewrites.
15. netlify.toml (pengalihan eksplisit / explicit redirect) [[redirects]] from = "/*" to = "/index.html" status = 200 force = false Solusi Isu Single Page Application (production) Netlify
16. Gunakan ES Modules di Single Page Application units.js Halaman Card.js SearchFor m.js Import UnitCard from “./Card.js” Import SearchForm from “./SearchForm.js” Komponen Komponen
17. Manfaat ES Modules • Membagi kode dalam suatu file menjadi beberapa file yang disebut dengan modul dan bisa digunakan berulang-ulang. • Merampingkan kode dalam suatu file.
18. Dukungan ES Modules
19. Kesimpulan Starter kit adalah satu set hal yang diperlukan untuk membuat sesuatu. Manfaat Starter kit: • Menghemat waktu merancang struktur folder dan mengatur konfigurasi, • Mempercepat langkah mengerjakan proyek, • Penyelamat Hackathon.
20. Dukung saya https://karyakarsa.com/satyakresna https://trakteer.id/satyakresna
21. Terima kasih https://satyakresna.io/posts/pelajaran-dari-membuat-starter-kit-web/