Thread by @omarqe

"Omar, boleh tak suggest language untuk saya belajar?"

Aku tak boleh bagi jawapan untuk soalan macamni sebab aku taktau apa objektif korang.

Jadi, ini senarai programming languages secara detail (nama, kegunaan, demand, etc.) supaya korang boleh buat penilaian sendiri:

Amaran: bebenang ini panjang. Kalau nak jadi seorang developer atau software engineer, korang tak semestinya kena belajar kesemuanya – memang tak perlu pun.

Belajarlah ikut objektif sendiri dan jangan ikut-ikut orang. Tanpa berlengah lagi, jom kita mula.

1. Hypertext Markup Language (HTML)

Pada asasnya, semua website yang korang lawati di Internet ini dibina menggunakan HTML. Ini adalah language yang paling mudah untuk dipelajari.

Ia boleh dilihat melalui browser dengan cara View Page Source atau DevTools (Inspect Element).

Kegunaannya adalah untuk buat dokumen laman web (.html)

Bagi memudahkan kefahaman mereka yang baru nak belajar, ia digunakan untuk strukturkan sesebuah laman web. Contohnya kau nak letak image di sini, footer di bawah & sebagainya.

Ia ibarat skeleton untuk web.

2. Cascading Style Sheet (CSS)

Kalau HTML adalah skeleton, CSS pula ialah dagingnya. Pada jasad manusia, daging menzahirkan sifat fizikal manusia, betul? Begitu juga dengan CSS – ia menzahirkan sifat/style HTML tersebut.

freeCodeCamp.org

Kalau tengok website ada macam-macam ragam design dan warna, itulah tugas CSS. Kalau korang buat website guna HTML sahaja takkan dapat lah semua tu.

> Kepada mereka yang baru nak berjinak-jinak dalam dunia programming, aku cadangkan korang mula dari HTML & CSS, ini bare-minimum.

Namun di dalam suasana development yang sebenar, kita kebiasaannya tak guna pure CSS untuk develop web – tetapi kita guna CSS preprocessor.

Apakah CSS preprocessor? Ia adalah language yang macam CSS, tapi programmable – ada variable, function (mixins), hierarchy & etc.

CSS preprocessor ini kemudian di-transpile-kan kepada kod CSS sebenar. Transpiling adalah proses di mana sebuah language lain diterjemahkan kepada CSS atau JavaScript.

Contohnya:
LESS (transpiled to)→ CSS
SASS (transpiled to)→ CSS

Faham?

2.1. LESS (.less)

LESS adalah sebuah CSS preprocessor yg paling mudah untuk digunakan. Pada asalnya transpiler-nya ditulis menggunakan Ruby, tapi diterjemahkan juga ke dalam JavaScript.

Kepada newbies, aku cadang belajar LESS untuk permulaan sebab …

lesscss.org

… korang boleh embed transpiler JavaScript (less.js) terus ke dalam HTML. Jadi korang tak perlu fikir lagi dah untuk transpile language tersebut kepada CSS dulu sebelum digunakan.

Namun cara ini sangat tak digalakkan untuk production kerana ia punca web korang jadi lambat.

Sebab setiap kali load page tu, less.js terpaksa bekerja keras untuk transpile LESS kepada CSS. Sementara menunggu proses tu selesai, web korang hanya plain.

Adalah lebih baik untuk transpile dulu siap-siap sebelum digunakan pada production.

2.2. SASS/SCSS (.sass/.scss)

Transpiler SASS ditulis menggunakan Ruby. Rasanya takde port JavaScript seperti LESS; korang tak boleh guna terus ke dalam HTML – wajib transpile dulu.

SASS adalah syntax lama; namun syntax barunya (SCSS) lebih CSS-friendly.

sass-lang.com

2.3. PostCSS

Tidak seperti LESS dan SASS, PostCSS masih menggunakan .css sebagai file extension. Cuma file itu diberi nafas baru menggunakan JavaScript.

Untuk setup PostCSS ni agak leceh juga sebenarnya. Rekemen untuk pro developer.

postcss.org

Nak guna feature seperti loop, variable, etc. dengan PostCSS, korang perlu install plugins berasingan, kemudian kena configure plugins tu baru boleh pakai.

Kalau awal-awal nak guna benda ni memang rasa leceh sikit la aku cakap. Kita guna ini dengan JS bundler seperti Webpack.

Tujuan LESS, SASS dan PostCSS adalah sama, mereka adalah preprocessor untuk CSS. Kita guna CSS preprocessor kerana ia lebih mudah untuk develop dan maintain berbanding pure CSS.

Korang akan dapati kalau bina responsive web dengan teknologi ini jauh lebih mudah!

3. Hypertext Preprocessor, PHP

Siapa tak kenal PHP, 80% laman web di seluruh dunia dibina menggunakan PHP termasuklah Facebook. Kegunaan utama PHP adalah untuk bina web.

Ia adalah percuma, mudah untuk setup dan belajar – sesuai untuk beginner.

php.net

Kalau tadi develop web guna HTML dan CSS; sekarang pula nak jadikan web itu dinamik.

Dinamik di sini bermaksud boleh tarik data dari database, boleh proses input pengguna dan simpan ke database, render konten kepada pengguna berdasarkan request, bina API dan sebagainya.

Selain Python, demand PHP pun agak tinggi di Malaysia. Memang tak rugilah belajar. Kalau nak minta kerja kat Malaysia ni, inshaAllah mesti ada PHP developer di mana-mana 😂

Banyak juga tempat yang demand skill framework. Jadi korang digalakkan belajar framework seperti Laravel.

PHP juga boleh digunakan untuk selain web, seperti program Command-Line Interface (CLI) dan aplikasi desktop; tetapi ia tidaklah begitu sesuai untuk tujuan itu.

Kalau korang baru nak belajar PHP harini, mulakan terus dengan PHP 7.x dan tinggalkan PHP 5.x.

4. JavaScript, JS

Kalau tanya apa programming language paling popular kat dunia sekarang ni, inilah jawapannya: JavaScript. Kalau dulu, JS digunakan untuk jadikan sesebuah laman web itu interaktif (frontend).

Namun harini, ia dah evolve lebih dari itu.

javascript.com

Sekarang, JS boleh digunakan untuk kedua-dua frontend dan backend – orang panggil MEAN dan MERN stack – the so-called modern web tech stacks.

MEAN = MongoDB, Express.js, Angular & Node.js
MERN = MongoDB, Express.js, React & Node.js

Secara peribadi, aku tak begitu minat sangat MEAN dan MERN ni; aku lebih suka cara 'tradisional', iaitu hanya fokuskan JS untuk bahagian frontend manakala backend pula guna teknologi lain.

Ramai developer sejak sebelum MEAN & MERN ini lebih suka cara tradisional juga.

Aku ada sebab peribadi kenapa pilih teknologi lain untuk backend; antaranya ialah fleksibiliti dan kestabilan. Lain orang lain pilihannya.

Kalau korang baru mula belajar programming dan taknak belajar banyak language untuk backend, kini korang boleh handle backend guna JS 100%.

Kalau korang tertanya apa itu ES5 dan ES6+ ni, dalam dunia JS ni ada satu entiti/organisasi yang dinamakan ECMA International.

Mereka inilah yang cipta "standard" atau spesifikasi untuk sesebuah scripting language. ECMAScript (ES) itu adalah standard yang dihasilkan.

JS dibuat berdasarkan spesifikasi ECMA-262; dan sebenarnya ada juga scripting languages lain yang dibuat berdasarkan ES juga seperti ActionScript (untuk flash).

ES5 & ES6 pula adalah "edisi" spesifikasi tersebut. ES6 dikeluarkan pada tahun 2015; ES6 juga dirujuk sebagai ES2015.

ES6 memberi perubahan yang besar kepada JS; banyak gila syntax baru muncul, menjadikan JS semakin menarik untuk dipelajari dan digunakan.

Selain itu, banyak juga framework JS muncul di pasaran, menjadikannya semakin popular terutamanya sebagai frontend language.

Apabila ECMA mengeluarkan edisi baru untuk ECMAScript, tak semua browser terus implemen ciri baru tersebut serta-merta – mereka implemen gradually.

Setiap browser mempunyai JavaScript Engine yang berbeza. Sebab itu kita selalu fikir tentang "compatibility" bila develop guna JS.

Jadi, cara setiap browser interpret JS juga sedikit berbeza; mungkin berbeza dari segi performance dan sokongan. Namun, kebanyakan browser moden kini dah support ES6+.

Tahun ini, ES2020 dikeluarkan, ia memberi beberapa syntax baru untuk JS seperti Nullish Coalesce Operator (??).

Artikel ni menerangkan tentang ECMAScript dengan sangat bagus, aku rekemen korang untuk baca kalau nak faham dengan lebih lanjut.

Aku stop pasal tu di sini sebab nak sambung dengan poin lain pulak haha 😅

bit.ly/2VOyCsm

4.1 jQuery

Sebelum munculnya framework seperti React.js, kebanyakan frontend developer bina frontend menggunakan jQuery. jQuery

Aku ingat lagi zaman tu npm belum popular, kalau malas/taktau nak implemen something kita cari saja kat DynamicDrive (DD) hahah.

Copy code kat DD kena include copyright comment sebagai tanda kita guna secara "legal" hahaha. Aku taktahu la kalau ada pembaca berkongsi pengalaman yang sama, tapi aku rasa mungkin ada 🤣

Kembali kepada jQuery, jQuery adalah sebuah JS library (function collections).

Penggunaanya sangat meluas sejak dahulu lagi, tak sah kalau pergi satu website tanpa jQuery padanya.

jQuery memudahkan developer untuk traverse atau memanipulasi DOM, membuat animasi pada laman web, menggunakan AJAX dan sebagainya.

Namun trend penggunaan jQuery semakin menurun sekarang – React.js sedang mengejar rapat sekarang. Buat masa ini, aku rasa bagus saja kalau korang baru nak belajar (tapi jangan lelama sangat 😂).

Dengan jQuery korang akan faham bagaimana DOM berfungsi dan beberapa asas dalam JS.

4.2 React.js

React.js adalah sebuah JS library dari Facebook untuk membina User Interface (UI). Dengan jQuery, apabila berlaku perubahan pada data, kita akan terus update DOM; tapi dengan React.js kita akan update state.

reactjs.org

Kalau korang yang baca ni masih baru, aku tak pastilah ayat di atas boleh difahami atau tak. Kalau tak faham, bayangkan sebuah komponen UI yang dijana berdasarkan kondisi (state) if..else.

Apabila kondisi tersebut berubah, secara automatik UI yang dijana juga berubah. Contoh:

Berbeza pula dengan jQuery, apabila data berubah, kita terpaksa menulis semula kod komponen yang kita nak paparkan kepada pengguna hasil daripada perubahan tersebut.

At some point, bila aplikasi kita semakin besar, kod kita akan jadi lebih kompleks. Contoh:

Kebiasaannya kita menulis React.js guna JSX. JSX adalah extension kepada JS syntax yg berbentuk seperti HTML bagi memudahkan developer menulis kod.

JS: React.createElement("div")
JSX: <div></div>

Kedua-dua di atas mempunyai hasil yang sama, iaitu menjana komponen div pada HTML.

Selain itu, dengan React.js, kod kita boleh diulangpakai (reuse). Ini akan meningkatkan produktiviti developer di samping mengurangkan kod yang kita perlu tulis.

Contohnya, sebuah komponen <Card /> boleh dipakai berulang kali di mana-mana di dalam UI.

Demand React.js adalah tinggi di seluruh dunia dan di Malaysia memandangkan penggunaannya yang sangat tinggi pada hari ini berbanding Angular, Vue dan lain-lain.

Anda boleh lihat statistik ini di StackOverflow Developer Survey 2020 di sini:

insights.stackoverflow.com/survey/2020#mo…

4.3 Angular

Angular adalah JS framework dari Google untuk membina UI. Kalau nak banding dengan React, learning curve Angular agak sukar sebab ia menggunakan TypeScript (berbanding React menggunakan JS).

Kita akan bincang tentang TypeScript nanti.

angular.io

Angular ni boleh dikatakan terbahagi kepada dua: Angular dan Angular 2+.

Angular dilancarkan pada tahun 2010. Ia menggunakan JavaScript dan aplikasi yang menggunakannya dibina berdasarkan MVC architecture. Versi ini tidak lagi disokong pada bulan Julai 2021.

Angular 2+ pula dilancarkan pada 2016. Ia adalah "complete rewrite" daripada Angular. Jadi, Angular dan Angular 2+ adalah berbeza dari pelbagai sudut: language, architecture dan lain-lain.

Pernah nak belajar Angular pada tahun 2016, masa itu masih guna MVC.

Tapi masa tu aku tak faham macamana ia berfungsi, tup-tup dia keluarkan Angular 2; lagilah tak faham sebab guna TS 😂. Nak belajar versi pertama tapi nampak macam tak berbaloi. Terus aku abandon sampai sekarang sebab malas hahaha.

Versi Angular paling terkini adalah Angular 10.

Untuk beginner, Angular 2+ mempunyai learning curve yang tinggi, namun ia sangat popular dan mempunyai demand yang tinggi juga di seluruh dunia.

4.3 Vue

Vue adalah sebuah JS framework. Ia bukan datang dari tech giant seperti Facebook dan Google, ia dibina oleh Evan You, bekas pekerja Google.

vuejs.org

Jika nak dibandingkan Vue, React dan Angular; ia mempunyai learning curve yang lebih rendah – sesuai untuk semua peringkat developer – beginner to expert.

Kalau lihat dari sudut file structure dan syntax, sebenarnya lebih kurang sahaja Vue dan React.

Tetapi kebanyakan developer yang mempunyai pengalaman dengan kedua-dua React dan Vue, mereka mengatakan Vue lebih straightforward berbanding React.

Mungkin kerana Vue adalah framework lengkap manakala React pula merupakan library.

Satu yang aku perasan; pada Vue, router config sudahpun tersedia manakala React pula perlu wire-up sendiri – at least itu yang aku terpaksa buat sendiri untuk React app aku sebelum ni.

Jadi, agak leceh di sini kalau guna pure React.

Banyak lagi benda yang straightforward pada Vue seperti data mutation (mengubah data), event handler dan lelain.

Walaubagaimanapun, lupa mention di atas, terdapat juga framework yang dibina menggunakan React seperti Next dan Gatsby.

Aku nak sambung bagi habis malam ni tapi tunggu jap, baru sampai rumah 🤣

4.4 Svelte

Pernah dengar Svelte? Svelte ni tak sepopular dan sematang React, Vue dan Angular (RVA). Komunitinya pun tak sebesar ketiga-tiga mainstream framework tu; tapi komunitinya aktif.

Berbanding React dan Vue, Svelte mempunyai compiler tersendiri.

svelte.dev

React dan Vue membolehkan kita untuk declare state dalam code, namun ini memaksa browser untuk buat kerja lebih untuk tukarkan code tersebut kepada operasi DOM.

Svelte buat semua tu semasa build time, kemudian hanya update DOM ketika state berubah.

Saiz aplikasi yg dibina menggunakan Svelte lebih ringan dan ini menjadikannya lebih pantas. Tambahan pula, code Svelte ni menarik dan mesra semua peringkat developer, baik beginner mahupun pakar.

Kalau nak baca dengan lebih lanjut tentang Svelte, korang boleh baca di web mereka.

5. TypeScript, TS

Tadi aku ada sentuh sedikit tentang TS pada Angular 2+. Jadi, apa sebenarnya TS ni? Untuk refresh semula ingatan, ingat tadi kita cakap tentang transpiler?

Asasnya, TypeScript adalah JavaScript, tetapi dengan tambahan type.

typescriptlang.org

Apa maksud type kat sini? Janganlah pelik dengan istilah ni, maksudnya bukan "menaip" tetapi sebenarnya "jenis" sesuatu variable di dalam sesebuah code.

Programming language ada dua jenis; statik dan dynamic type.

Static type bermaksud bila korang declare sesebuah variable, korang perlu declare juga jenis variable tersebut seperti integer, string, array & sebagainya.

Jenis variable tersebut TAK BOLEH berubah. Kalau lelaki, lelakilah dia sampai mati.

Contoh static type: Java, C, Go, etc.

Manakala dynamic type pula, type itu boleh berubah-ubah. Kalau initially korang declare variable tu sebagai string, kejap lagi korang boleh jadikannya integer pulak dengan secara tiba-tiba 😂

Contoh dynamic type: PHP, Python & JavaScript

Antara masalah dengan dynamic-typed language ni; ada risiko berlaku error atau bug yang tak nampak atau tak dijangka di dalam production (semasa app tengah live) hasil daripada perubahan type tersebut.

Static-typed catch error/bugs itu pada build time atau semasa compile.

Disebabkan JS merupakan dynamic-typed language, maka TS pula adalah superset kepada JS yang merupakan static-typed. Walaupun begitu, type declaration kat dalam TS adalah optional.

Kalau korang declare type pada sesuatu variable atau function, semasa compile nanti dia akan check.

Bila ada error/bug semasa tengah compile code tu, maka error/bug tersebut boleh dibetulkan sebelum dilancarkan kepada awam (production environment).

Jadi, aplikasi korang lebih robust lah, takde la pengguna tiba-tiba dapat fatal error yang tak dijangka.

Oh ya, TS adalah transpiled language macam CSS preprocessor di atas. Cuma TS akan transpile kepada JS lah (obviously, takkan tetiba transpile jadi CSS pulek 😅)

💡Honorable mention: tahukah anda? Selain TS, CoffeeScript juga merupakan transpiled language untuk JavaScript.

Nampaknya bebenang ni terlalu panjang la pulak wahahaha. Sori aku memang tak berniat nak buat bebenang lebih 50 tweet di dalamnya.

Maka aku akan berhenti kat sini dulu; inshaAllah aku akan sambung explanation tentang language lain tu di Bahagian 2 nanti.

Semua language yang aku sebut kat dalam Bahagian 1 ini adalah lebih kepada frontend (kecuali PHP). Kalau korang berminat untuk jadi seorang Frontend Engineer, korang boleh belajar language di atas.

Manakala di dalam Bahagian 2 nanti, language yang bakal diterangkan adalah lebih kepada backend. Kalau nak jadi backend engineer, sila belajar language dalam Bahagian 2.

Kalau teringin nak jadi fullstack, kuasai kedua-dua bahagian wahaha.

Baca ini juga:

https://twitter.com/omarqe/status/1271658704501264385

Sementara tunggu Bahagian 2 (esok inshaAllah), kalau belum follow, korang boleh tekan follow button ok? Hahaha. Shameless betul 🤣

---

Isi masa lapang korang, baca juga bebenang CSIT aku yang lain di sini:

https://twitter.com/omarqe/status/1155346037013221377