Halo, Learners! Bagaimana kabarnya? Semoga selalu semangat untuk terus belajar dan meng-upgrade skill ya! Learners pasti sudah tahu bahwa profesi web developer adalah profesi yang sangat menjanjikan di era industri 4.0 kan? Dan salah satu role vital seorang web developer adalah menjadi front end developer. Wah apa tuh front end developer?

Buat kamu yang belum tau, singkatnya seorang front end developer adalah orang yang bertugas untuk mengurus masalah tampilan (UI) sebuah web. Kamu pasti sudah sering berselancar di internet kan? Dan Ketika kamu mengklik sebuah link yang mengarah ke sebuah situs (seperti situs ini), maka tampilan situs yang kamu lihat itu adalah hasil karya seorang front end developer! Menarik bukan?

Nah sesuai judul artikel ini, bila Learners tertarik untuk menjadi seorang front end developer yang handal, namun belum tahu roadmap belajarnya, apa saja yang perlu dipelajari, yuk simak terus artikel ini sampai akhir!

HTML (Hyper-Text Markup Language)

HTML atau yang merupakan singkatan dari Hyper-Text Markup Language merupakan Bahasa markup standar untuk dokumen agar bisa ditampilkan pada sebuah web browser. Sederhananya, HTML merupakan Bahasa pemrograman yang bisa kita gunakan untuk membuat kerangka tampilan sebuah website. Meskipun, secara teknis HTML bukanlah Bahasa pemrograman sebagaimana Bahasa pemrograman lain yang sudah robust. Salah satu alasannya karena HTML tidak memiliki logika pemrograman di dalamnya, melainkan hanya aturan penulisan yang bisa kita gunakan untuk membuat struktur halaman website sebagaimana yang kita kehendaki. Yang perlu Learners garis bawahi adalah bahwa HTML saja hanya mampu untuk membentuk kerangka tampilan sebuah web saja tanpa dilengkapi dengan style apapun. Sehingga, bila hanya HTML saja yang Learners gunakan, maka itu belumlah cukup untuk dikatakan sebagai halaman website yang layak. Maka kita perlu melakukan styling terhadap kerangka tampilan website yang akan kita buat. Nah, disinilah CSS berperan!

CSS (Cascading Style Sheets)

CSS yang merupakan singkatan dari Cascading Style Sheets adalah Bahasa style sheets yang digunakan untuk mendeskripsikan tampilan seperti apa yang kita inginkan terhadap kerangka halaman website yang telah kita buat menggunakan HTML. Tampilan ini bisa berupa warna background, font, posisi elemen, dlsb. Kemungkinan styling menggunakan CSS sangatlah luas. Batasnya hanyalah imajinasi Learners dan tentunya berdasarkan aturan penulisan yang ditetapkan pada CSS. Adapun cara untuk men-style sebuah elemen HTML menggunakan CSS bisa dilakukan dengan mentarget id atau class pada tag elemen HTML tersebut. Lalu bisa kita definisikan style apa yang kita ingin terapkan pada elemen tersebut pada file CSS terpisah.

Cara lainnya, kita bisa langsung mendefinisikan style yang ingin kita terapkan langsung pada tag elemen HTML.  Namun, cara ini dianggap bukanlah best-practice untuk melakukan styling HTML menggunakan CSS.

HTML bersama dengan CSS bisa dibilang cukup untuk membuat sebuah tampilan halaman website yang menarik dan responsif. Namun, bila website yang akan kita buat memiliki fungsional yang dinamis terhadap input dan interaksi dari user, atau kita sebut sebagai website yang interaktif, maka HTML dan CSS saja tidaklah cukup. Kita memerlukan bantuan Bahasa pemrograman lain untuk bisa menghandle interaksi dari user. Pada bagian ini, Learners perlu berkenalan dengan javascript!

Javascript

Javascript merupakan Bahasa scripting yang bisa digunakan bersamaan dengan HTML dan CSS untuk membuat website yang interaktif. Javascript merupakan salah satu Bahasa pemrograman yang robust dan terus dikembangkan untuk teknologi web terkini. Banyak framework pengembangan web modern yang menggunakan javascript sebagai core-nya. Standar pengembangan javascript mengacu kepada standar ECMA Script.

Dalam penggunaannya bersama dengan HTML dan CSS, Javascript bisa membuat sebuah website kaya akan fitur dan interaksi. Contoh sederhana, ketika suatu tombol pada web diklik oleh user, maka web bisa menampilkan popup pesan tertentu. Ini bisa dilakukan dengan perintah alert pada javascript. Untuk studi kasus yang lebih advance, seperti website dengan fungsi login dan registrasi, javascript bisa digunakan untuk menghandle fungsi-fungsi tersebut dan melakukan validasi input dari user. Bahkan, dengan interface DOM (Document Object Model), Learners bisa memanipulasi suatu elemen HTML tanpa perlu merubah apapun pada file HTML-nya. Hal ini dapat dilakukan dengan mentarget id atau class dari elemen HTML seperti pada CSS. Lalu Javascript melalui DOM akan mengubah elemen HTML yang ditarget pada code javascript yang kita kehendaki. Keren bukan?

Untuk menjadi seorang front end developer handal di era saat ini, HTML, CSS, dan Javascript merupakan skill minimum yang diperlukan untuk membuat website yang menarik dan kaya akan fungsional. Namun, tentunya agar skill kita benar-benar applicable sebagai seorang front end developer handal, maka ada beberapa hal lain yang Learners perlu juga kuasai. Yuk lanjut baca artikel ini.

Version Control System (GIT, SVN, Mercurial, etc.)

Pernahkah Learners terpikirkan ketika seorang front end developer mengembangkan websitenya, lalu pada satu titik tertentu ketika websitenya sudah jadi dan sudah live serta memiliki banyak user tiap harinya, ada fitur baru yang cukup signifikan yang perlu ditambahkan ke website. Apakah seorang front end developer akan mengerjakan coding untuk fitur baru tersebut pada codebase utama website yang sudah jadi dan memiliki banyak pengunjung setiap harinya?

Jawabannya sangat jelas ya Learners. Tentu saja seorang front end developer atau developer secara umum tidak akan mengerjakan fitur tambahan atau bahkan major update untuk aplikasi mereka pada codebase utama yang sudah “aman”. Bila mereka melakukan demikian, tentu itu akan “membahayakan” operasional website bila terjadi error atau muncul bug pada fitur baru yang ditambahkan. Maka, prosedur yang tepat adalah seorang developer berksperimen dahulu untuk pengerjaan fitur baru di luar environtment atau codebase yang sudah “aman” dan live serta diakses oleh user.

Hal ini sangat dimungkinkan dengan software version control system, contohnya seperti Git. Mungkin Learners sudah sering mendengar Github. Tapi, Learners perlu bedakan dahulu Git dengan Github ya. Simpelnya, Git bekerja secara lokal. Dan ini adalah software version control system yang kita maksud. Sedangkan Github adalah platform di mana kita bisa menyimpan source code kita di remote repository. Git dan Github tentu bisa diintegrasikan.

Bagaimana cara kerja Git? Begini penjelasannya Learners. Git akan melakukan “snapshot” setiap developer melakukan “commit” / update pada codebase-nya. Dengan kata lain, bila suatu codebase dirasa sudah aman dan tak ada bug, maka developer bisa melakukan commit dan bisa melanjutkan pengerjaan fitur selanjutnya. Nah, Ketika melakukan pengerjaan fitur baru ini, katakanlah terjadi fatal error terhadap keseluruhan fungsional codebase yang developer kerjakan. Maka dengan software version control system ini, developer bisa memerintahkan codebase untuk kembali ke kondisi terakhir di mana belum terjadi error. Atau bisa dikatakan kembali ke “snapshot” terakhir. Maka semua akan kembali normal ke kondisi “aman”. Tentu software version control ini sangat esensial untuk pekerjaan developer ya Learners.

Sebagai seorang front end developer yang handal, memahami cara kerja software version control system sangatlah penting. Lewat software version control juga kita bisa berkolaborasi dengan mengintegrasikan pekerjaan kita dengan developer lain. Learners bisa mulai dengan mempelajari Git sebagai software version control yang umum digunakan saat ini.

CSS Frameworks (Bootstrap, Materialize, Bulma, etc.)

Kalau di awal Learners sudah mempelajari CSS murni agar bisa melakukan styling elemen HTML, maka sekarang waktunya Learners berkenalan dengan CSS Frameworks seperti Bootstrap, Materialize, Bulma, dll. Salah satu CSS Framework yang cukup terkenal adalah Bootstrap yang saat ini sudah mencapai versi 5.

Dengan CSS Framework seperti Bootstrap, Learners dapat melakukan pekerjaan styling dengan jauh lebih mudah dan cepat! Kalau dengan CSS murni kita perlu mendefinisikan sendiri tiap style yang ingin kita terapkan pada tiap elemen HTML kita, maka dengan CSS Framework Learners hanya perlu menambahkan class styling pada elemen HTML yang ditarget. Adapun definisi style-nya sudah disediakan oleh CSS framework yang Learners pilih. Yang perlu kita lakukan hanyalah merujuk ke dokumentasi framework tersebut untuk melihat library berbagai contoh penerapan style pada berbagai elemen HTML.

Dengan kata lain, Learners tak lagi perlu menulis styling sendiri untuk project styling website-nya. Yang perlu Learners lakukan hanyalah menambahkan class sesuai dengan style yang ingin diterapkan dengan merujuk pada library CSS framework yang sobat gunakan. Untuk memulai, Learners bisa mempelajari bootstrap yang sudah cukup banyak digunakan dan memiliki dokumentasi yang rapi.

Modern & Advanced Javascript (ES6+)

Javascript tak bisa dipungkiri sudah menjelma menjadi Bahasa pemrograman web yang sangat canggih dan menjadi landasan berbagai macam framework modern yang digunakan di industri saat ini. Seiring dengan pengembangan javascript yang terus dilakukan dengan mengacu kepada standar ECMA Script, konsep-konsep javascript advance dan modern menjadi suatu hal yang wajib kita pelajari bila kita ingin menjadi front end developer yang handal. Untuk javascript modern, Learners bisa mulai mempelajari lebih jauh tentang Javascript ES6/ES2015, di mana pada update javascript versi ini banyak terdapat konsep modern yang menjadi dasar berbagai macam front end framework saat ini.

Di antara topik Javascript modern yang bisa Learners gali lebih jauh lagi adalah standar baru penamaan variabel dari ‘var’ menjadi ‘let’ dan ‘const’, arrow function, spread operator, berbagai macam array methods, template string, promises, dan lain-lain.

Tentu masih banyak topik Javascript modern yang tidak disebutkan di atas. Learners bisa menggalinya lebih jauh baik mengacu kepada dokumentasi resmi atau sumber-sumber belajar lain. Yang perlu digaris bawahi adalah bahwa Javascript modern menjadi dasar berbagai macam framework front end yang banyak digunakan saat ini, sehingga menguasai Javascript modern dapat membantu pekerjaan Learners selanjutnya sebelum menyelami berbagai macam framework front end yang ada.

Front end Frameworks (React.JS, Angular.JS, Vue.JS, etc.)

Learners mungkin sudah sering mendengar React, Angular, atau Vue. Tapi tahukah apa ketiganya itu? Secara umum ketiganya disebut sebagai framework front end , meskipun ada pengecualian untuk React yang lebih tepat disebut sebagai library. Adapun fungsi dari framework front end adalah teknologi atau kerangka kerja yang bisa kita gunakan untuk mempermudah pekerjaan kita di bidang front end . Tujuan dari diciptakannya framework adalah untuk performance, maintainability, dan scalability sistem.

Learners bisa membayangkan website e-commerce sebesar Tokopedia dari sisi front end-nya. Bila pengerjaannya menggunakan HTML, CSS, Javascript biasa, tentu pengelolaannya akan sangat rumit. Untuk website yang besar jumlah pengunjungnya, tentu hal semacam itu tidaklah best practice. Maka terciptalah framework. Agar website yang ada lebih mudah untuk di-maintain, lebih baik dari segi performance, serta bisa discale-up.

Untuk lebih detailnya tentu Learners bisa mempelajari tentang masing-masing framework ini dari berbagai macam sumber, sesuai kebutuhan penggunaan aplikasi yang akan dibuat. Di platform codingstudio.id sendiri, Learners bisa belajar membuat website sederhana terlebih dahulu maupun website modern dengan menggunakan react.js. Klik link tersebut untuk informasi jelasnya.

Nah, tidak terasa kita sudah berada di akhir artikel ini. Bagaimana? Apakah cukup membantu Learners sekalian yang sedang cari referensi soal apa saja yang harus dipelajari untuk menjadi seorang front end developer yang handal? Meskipun begitu, list yang ada bukanlah list yang final ya sobat. Tentu akan banyak hal lain dan akan terus ada teknologi terbaru yang bisa dipelajari untuk menjadi seorang front end developer yang handal. Tetap semangat belajar dan mengupgrade skill ya sobat. Salam, Kodio.