Bot#

Jadi, sebenarnya aku itu dulunya bukan seorang frontend developer, awal aku mengenal tentang bahasa pemrograman adalah Python.

Dlu kenal Python itu karena LINE Bot (unofficial), soalnya dulu aku aktif banget main LINE gabung-gabung grup random khususnya anime, lalu aku melihat seseorang menggunakan bot menggunakan perintah seperti
!help atau /help, lalu mengeluarkan pesan yang panjang seperti panduan menggunakan botnya, lalu aku bertanya ke orang yang menjadikan akunnya sebagai bot seperti bagaimana akun dia bisa respon cepat seperti itu, lalu aku dikasih repository GitHubnya yang membuatku kebingungan melihat link tersebut kayak:
“waduh, web apaan ini, ga paham sama sekali”
Namun aku pasrah aja dan tidak ingin cari tahu lebih dalam.

Singkat cerita ada momen di mana aku ingin minta file bot yang sudah ready-to-use dan minta cara pakenya,
lalu orang yang ngasih tutorial tersebut akhirnya kasih tau cara-cara setupnya dan BOOM! 💥,
akun ku seperti bot yang ketika mengirim /help akan mengeluarkan pesan yang sangat cepat.

Setelah senang akunku bisa menjadi bot, lalu aku penasaran dengan isi filenya, aku sangat bingung sekali dengan isi filenya yang sangat tidak umum. Aku mencoba mengubah filenya yang masih terlihat umum sekali di mataku seperti mengubah string, aku dulu berpikir:
“gimana ya caraku mengubah text pada pesan help message ini”
Aku search dah tuh textnya dengan fitur search di text editor, pas ketemu langsung aku ubah text di string tersebut, pas aku re-run scriptnya aku langsung senang banget karena bisa mengubah isi text pada bot yang ku jalankan.

API#

Semakin penasarannya aku dengan pemrograman, akhirnya aku ingin belajar cara membuat API. Aku membuat simple API sampai advance, dari JSON Hello World biasa sampai mengolah data seperti scraping data dari website lain, aku sempat integrasi dengan database juga, namun cuman simple query saja seperti SELECT, INSERT, DELETE, UPDATE dan kala itu belum tau yang namanya ACID programming, jadi aku lebih memilih membuat API untuk keperluan scraping saja untuk beberapa orang yang menggunakan API-ku.

Vue#

Jadi pertama kali aku belajar Frontend itu pake Vue, dulu masih Vue 2 klo ga salah, yang kodenya masih seperti

1
Vue.app({
2
  data(): {
3
    return {
4
      name: 'Kizu'
5
    }
6
  },
7
  methods: {
8
    setName(value) {
9
      this.data = value
10
    }
11
  },
12
  render(): {
13
    return (
14
      <div>{this.data}</div>
15
    )
16
  }
17
})

Wah, pokoknya pusing banget dah cara ngodingnya yang kayak gitu, belum ada sebulan langsung nyerah.

React#

Lalu beberapa bulan kemudian kenal sama React, waktu belajar React langsung paham cara kerjanya dan semangat bikin simple UI dan data manipulation, sampai saat di mana aku stuck pas menggunakan fetch():

1
import { useState, useEffect } from 'react';
2

3
const HelloWorld = () => {
4
  const [data, setData] = useState()
5

6
  useEffect(() => {
7
    fetch('https://jsonplaceholder.typicode.com/todos/1')
8
      .then(response => response.json())
9
      .then(json => {
10
        setData(json)
11
      })
12
  })
13

14
  return (
15
    <pre>
16
      {JSON.stringify(data, null, 2)}
17
    </pre>
18
  )
19
}

Ujung-ujungnya pusing juga cara set state yang masih pake .then(), karena dlu masih belum tau cara ngoding yang benar gimana di React, sekarang enak udah ada library data fetcher kyk Tanstack Query.

Svelte#

Dulu kenal Svelte dari sebuah komunitas di Telegram, ada orang yang review tentang Svelte ini, di screenshot kodingan Svelte yang dia share yang ku lihat itu terlihatt simple banget sampai otakku berpikir “wah, kok syntaxnya simple banget ya berasa ngoding JS basic tutorial” kayak gini:

1
<script>
2
  let text = 'Hello '
3
  text += 'World'
4
</script>
5

6
<div>{text}</div>

kayak…, ga mungkin kan simple banget kayak gitu? sampai dia kasih tau aku data manipulation ala slow rendering buat simulasi data fetching.

1
<script>
2
  import { onMount } from 'svelte'
3

4
  let text = 'Hello '
5

6
  onMount(() => {
7
    setTimeout(() => {
8
      text += 'World'
9
    }, 1000)
10
  })
11
</script>
12

13
<div>{text}</div>

dan ya… render delay bekerja layaknya ngoding JavaScript seperti biasa.

Setelah review Svelte dari komunitas Telegram, aku langsung paham dan langsung pilih Svelte sebagai project pribadi atau project hobi.

Sekarang pun lebih enak dengan adanya Svelte Runes yang syntaxnya lebih enak dipahami, bahkan bisa pake syntax svelte di dalam file TypeScript atau JavaScript, caranya tinggal namain filenya dengan .svelte.ts atau .svelte.js. Biasanya content di file ini untuk data management, karena di situ lah business logic berada.

Yang mau belajar Svelte bisa ke svelte.docs langsung.