Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Membuat Website Zaman Sekarang

Membuat Website Zaman Sekarang

Berbagai informasi mengenai pembuatan website dengan teknologi terkini

Irfan Maulana

March 11, 2022
Tweet

More Decks by Irfan Maulana

Other Decks in Programming

Transcript

  1. MEMBUAT
    WEBSITE
    Zaman Sekarang
    STMIK Widya Cipta Dharma - Samarinda
    12 Maret 2022

    View full-size slide

  2. Halo, saya Irfan Maulana (dipanggil
    mazipan).
    Saat ini bekerja di Tokopedia sebagai
    Principal Engineer untuk tim Web Platform,
    bergabung sejak 2019.
    Telah menjadi pemrogram web sejak
    2013-an.
    Kalian bisa baca lebih lanjut mengenai saya
    di blog mazipan.space
    Bisa juga ikuti twitter saya di @maz_ipan
    Perkenalan

    View full-size slide

  3. Semua yang saya sampaikan adalah
    pendapat pribadi saya sebagai profesional
    berdasarkan pengalaman yang saya
    pelajari dan berbagai sumber daya yang
    saya baca, bukan merupakan pendapat
    resmi dari tempat saya bekerja.
    Resiko yang timbul sebagai akibat dari
    kesalahan interpretasi dari materi yang
    ada, bukan merupakan tanggung jawab
    saya.
    Penafian

    View full-size slide

  4. Poin-poin yang akan dibahas
    Kenapa memilih web?
    profesi web developer
    Membuat web dengan (hampir) tanpa biaya
    Kenyataan kerumitan pengembangan web
    Belajar pengembangan web
    Berbagai skill yang perlu ditempa
    Kesimpulan

    View full-size slide

  5. Kenapa
    memilih web?
    Mudah dicari
    Selalu terbarukan Mudah diakses
    Mudah Disebarkan

    View full-size slide

  6. Beberapa pekerjaan yang “naik daun” 2021 di
    asia tenggara
    ksana.in/jobs-sea-2021

    View full-size slide

  7. ● Konsumer di asia tenggara semakin berkembang ke arah “digital”.
    ● Para “Brand” menemukan cara baru untuk berhubungan dengan
    konsumer.
    ● E-commerce meledak di 2020, melecutkan munculnya berbagai
    sektor.
    ● Posisi “tradisional” semakin berevolusi, sebagai akibat Covid-19.
    Beberapa pekerjaan yang “naik daun” 2021 di
    asia tenggara

    View full-size slide

  8. Beberapa pekerjaan yang “naik daun” 2021 di
    asia tenggara

    View full-size slide

  9. predictsalary.com/salaries
    Berapa rentang gaji
    Web developer?

    View full-size slide

  10. Beberapa bagian dari web
    Perangkat
    Peramban Antarmuka Peladen Basis data

    View full-size slide

  11. Bagian mana kerjaannya web developer?
    Perangkat
    Peramban Antarmuka Peladen Basis data
    Web Developer

    View full-size slide

  12. Spesialisasi profesi
    Antarmuka Peladen Basis data
    Web Developer
    DB
    ADMINISTRATOR
    Backend developer
    Frontend
    developer
    System
    Engineer/Devops

    View full-size slide

  13. Backend vs Frontend
    Rest APIs / GraphQL
    Business Flow Engine
    Designing DB Table
    Caching System
    Authentication + Authorization
    Service Communication
    Server Management
    Job / Task Scheduler
    Containerization
    CI / CD
    Cloud Service
    Many more…
    Visual Layouting
    Interactivity
    Server/Client Rendering
    Client Side Validation
    Data Fetching
    Web Performance
    Web Accessibility
    Build Process
    CI / CD
    Many more…

    View full-size slide

  14. Backend vs Frontend
    Java
    Go
    Python
    PHP
    Ruby
    HTML
    CSS
    JavaScript

    View full-size slide

  15. Membuat web (hampir) tanpa biaya
    1 2
    3
    4

    View full-size slide

  16. Alternatif hosting gratis

    View full-size slide

  17. Custom domain (Kalau perlu)
    Wowww

    View full-size slide

  18. Tambahan konten semi dinamis
    Metode:
    ● Markdown sebagai sumber konten
    ● Menjadi bagian dari kode
    ● Static-Site Generation (SSG)
    ● Membutuhkan proses build tiap kali ada perubahan
    ● Membutuhkan pengiriman berkelanjutan (continuous delivery) yang baik
    ● Disajikan dalam bentuk web statis
    Kelebihan:
    ● Pada umumnya bisa lebih cepat dimuat,
    tidak membutuhkan proses di server
    ● Biasanya lebih murah, banyak tersedia hosting gratisnya
    ● Teknologi lebih familiar dengan Frontend Developer
    https://jamstack.org/generators/

    View full-size slide

  19. Dukungan data dinamis
    Headless CMS
    - Strapi
    - Ghost
    - Netlify CMS
    - Headless Wordpress
    - Google Doc?
    Backend as a Service (BaaS)
    - Firebase
    - Supabase
    - AWS Amplify
    https://jamstack.org/
    DB as a Service (DBaaS)
    - Prisma
    - PlanetScale
    - FaunaDB
    - FireStore from Firebase

    View full-size slide

  20. Contoh nyata web (hampir) tanpa biaya
    mazipan.space
    - Next.js
    - Static generated
    - Konten dengan markdown
    - Hosting di Vercel
    ksana.in
    - Next.js
    - Server render
    - Supabase
    - Hosting di Vercel
    pramuka.online
    - Next.js
    - Static generated
    - Konten dengan JS statis
    - Hosting di Vercel
    www.baca-quran.id
    - Next.js
    - Static generated
    - Konten dengan berkas JSON statis
    - Hosting di GitHub
    learning.byphp.id
    - Svelte
    - Static generated
    - Konten dengan markdown
    - Hosting di Netlify
    https://ksana.in/gh

    View full-size slide

  21. Tren teknologi terkini: javascript
    https://2021.stateofjs.com/en-US/libraries/front-end-frameworks

    View full-size slide

  22. Tren teknologi terkini: alat build
    https://2021.stateofjs.com/en-US/libraries/build-tools

    View full-size slide

  23. Tren teknologi terkini: css
    https://2020.stateofcss.com/en-US/technologies/css-frameworks/

    View full-size slide

  24. Bikin aplikasi yang production-grade, gak segampang bikin aplikasi prakarya.
    Ada lebih banyak sudut pandang yang mesti diperhatikan:
    ● Validasi
    ● Skalabilitas
    ● Keamanan
    ● Performa
    ● Manajemen dependensi
    ● Integrasi dan pengiriman berkelanjutan
    ● Monitoring aplikasi
    ● Dan banyak lainnya
    Kenyataan kerumitan pengembangan web
    https://ksana.in/susahnya-bikin-aplikasi

    View full-size slide

  25. Sumber daya:
    ● Materi pembelajaran interaktif
    ● Artikel / tutorials / video / dokumentasi resmi
    ● Mentorship / belajar dari & dengan yang lebih bisa
    ● Belajar bersama / berkelompok
    ● Projek bersama / kode sumber terbuka
    ● Bootcamp / kursus intensif
    Catatan:
    ● Semuanya butuh komitmen waktu dan tenaga
    ● Tetap perlu praktek, banyak nyoba, berulang, konsisten,
    bikin projek nyata
    ● Jangan panik kalau error
    ● Tulis ulang yang sudah dipelajari, ajarkan dan bagikan
    ke teman
    belajar jadi pengembangan web
    https://ksana.in/belajar-pemrograman

    View full-size slide

  26. belajar jadi pengembangan web
    https://roadmap.sh

    View full-size slide

  27. #MULAIAJADULU

    View full-size slide

  28. GIT
    Version control buat kolaborasi
    Unix command
    Biar bisa mengeksekusi berbagi perintah di server dan di lokal
    Data structure + Algorithm
    Bisa lancar buat manipulasi berbagai jenis struktur data
    Debugging skill
    Biar tidak heboh dan putus asa kalau ketemu bug/error
    Seni mencari jawaban dan bertanya
    Biar terbiasa mencari jawaban di mesin pencari, dan bisa
    bertanya tentang suatu hal dengan lebih baik
    Skill teknis yang berguna dimana saja

    View full-size slide

  29. Membaca
    Kolaborasi
    Komunikasi
    Berpikir kritis
    Growth Mindset
    Beradaptasi dengan perubahan
    Bahasa Inggris
    Skill non-teknis yang sering diremehkan

    View full-size slide

  30. Kesimpulan
    Kenapa WEB?
    Mudah dicari, mudah diakses, mudah disebarluaskan dan selalu
    terbarukan
    Profesi web programmer
    Menanjak di 2021 dan terlihat menjanjikan di tahun mendatang
    Bagian dari web
    Ada layer backend dan frontend, kendati sering dikerjakan oleh
    orang/tim berbeda, mungkin saja semuanya dikerjakan
    orang/tim yang sama.
    Bikin web (hampir) tanpa modal
    Kita bisa membuat web murah tapi tidak murahan. Bongkar
    pasang berbagai layanan. Pintar-pintar memanfaatkan layanan
    gratis yang tersedia.
    Skill yang perlu dipelajari
    Ada skill spesifik macam HTML, CSS, JS untuk Frontend. Tapi ada
    beberapa skill yang bisa diterapkan dimanapun kamu
    ditempatkan. Jangan lupa untuk mempelajari skill non-teknis
    juga

    View full-size slide

  31. Unduh slide
    speakerdeck.com/mazipan

    View full-size slide

  32. CREDITS: This presentation template was created by
    Slidesgo, including icons by Flaticon, and infographics
    & images by Freepik.
    TERIMA KASIH!
    Silahkan bertanya!!!

    View full-size slide