Roadmap (Alur) untuk Menjadi Front-End Developer

Menguasai HTML, CSS, dan JS adalah skill yang harus dikuasi oleh Front-End Developer, tetapi tidak untuk Modern Front-End Developer.

Sekarang ini, banyak perusahaan atau organisasi yang mencari Modern Front-End Developer. Jadi, disini kita perlu belajar tentang Tool baru yang lebih Modern. Terdapat berbagai macam Tool Modern dan mungkin agak sedikit sulit untuk memilih Tool yang tepat untuk dipelajari.

Maka dari itu, disini saya akan membantu kalian untuk mengetahui Tool yang dapat kalian pelajari dengan tepat secara berurutan.

Setiap hal besar pasti dimulai dengan langkah yang kecil. Untuk menguasai Front-End Development, kita harus mengenal dan mengetahui:

• Dasar-Dasar Front-End.
• CSS Framework.
• Package Manager.
• Build Tools.
• Front-End Framework.
• Testing.
• Progressive Web App (PWA).
• Performance.
• CSR.
• SSR.
• Static Site Generator.

Itulah beberapa hal yang sangat penting untuk dipelajari dalam menguasai Front-End. Sekarang, mari kita bahas masing-masing diantaranya.

Dasar-Dasar Front-End

Mempelajari HTML

Jangan pernah meremehkan HTML. Terdapat banyak hal pada HTML yang mungkin tidak pernah atau jarang digunakan oleh banyak orang.

Mempelajari CSS

Mungkin agak sedikit rumit dan menarik karena sangat berpengaruh pada tampilan halaman serta cara kerjanya terkadang agak mengejutkan.

Mempelajari JavaScript

JavaScript adalah satu-satunya hal yang membawa logika dan pemrograman ke dalam kehidupan Front-End Development.

HTML hanyalah bahasa Markup yang tidak akan pernah memberikan peringatan tentang kesalahan yang kita buat, begitupula dengan CSS. Tetapi tidak dengan JavaScript. Setelah kalian mempelajari dasar-dasar yang telah saya sebutkan diatas, mungkin kalian akan siap untuk lanjut ke bagian selanjutnya.

CSS Framework

Mungkin, suatu saat akan menjadi sangat penting bagi kita untuk mempelajari CSS Framework karena dapat membuat proses Development menjadi lebih mudah, cepat, dan kita tidak perlu menetapkan setiap Style satu per satu karena kita dapat menggunakan Style yang telah ditentukan dari CSS Framework. Jika kalian memiliki pemahaman yang baik tentang CSS, maka kalian dapat dengan mudah mengatur properti pada CSS dan menyesuaikan Style dari setiap halaman.

Contoh CSS Framework yang paling populer adalah Bulma, Bootstrap, Materialize, Semantic UI and Foundation. Itulah beberapa CSS Framework terpopuler dan mungkin kalian harus mempelajari salah satunya.

Jika kalian meminta saya untuk memberitahukan CSS Framework mana yang paling direkomendasikan, maka saya akan menyarankan kalian untuk menggunakan CSS Framework berikut:

• Bootstrap - Banyak Developer yang sudah mengenal dan mengusainya.
• Materialize - CSS Framework khusus Material Design.

Package Manager

Package Manager adalah Tool yang dapat melakukan proses Instalasi, Upgrade, dan Konfigurasi secara otomatis dan dapat mempermudah Project Environment untuk mengimpor Dependency eksternal.

Setelah mempelajari CSS Framework, mungkin kalian harus mempelajari JavaScript Framework tetapi pada akhirnya kalian harus mempelajari Package Manager. Berikut adalah Package Manager yang paling populer:

NPM

Merupakan Package Manager dari Node. Mungkin terdapat beberapa orang yang tidak menggunakan NPM, tetapi menggunakan Yarn.

Yarn

Merupkan Project umum yang dikembangkan oleh perusahaan seperti Facebook, Google, dll.

Agar kalian tidak bingung, saya sarankan agar kalian mempelajari NPM terlebih dahulu. Jika sudah menguasainya, kalian bisa mempelajari Yarn.

Catatan: Jika kalian baru mengenal Package Manager, janganlah langsung mempelajari Yarn.

CSS Prepocessor

CSS Prepocessor adalah program yang dapat kita gunakan untuk membuat Syntax CSS dari Prepocessor itu sendiri. Terdapat banyak CSS Prepocessor yang dapat kita pelajari, tetapi terdapat beberapa CSS Prepocessor yang menambahkan beberapa fitur tambahan yang tidak ada pada Pure CSS, seperti Mixin, Nesting Selector, Inheritance Selector, dsb.

Fitur tersebut dapat membuat struktur dari CSS lebih mudah untuk dibaca dan diedit. Berikut adalah beberapa CSS Prepocessor yang paling populer:

• LESS
• SASS
• Stylus
• PostCSS

Build Tools

Mempelajari Task Runner

Task Runner dapat kita gunakan untuk menjalankan semua proses yang berulang secara otomatis. Task Runner Tool yang paling populer adalah Grunt.

Mempelajari Modular Builder

Modular Builder berfungsi untuk menggabungkan Web Package dan Dependency yang berbeda-beda termasuk File CSS dan gambar, kemudian membuat modul misalnya seperti Webpack.

Mempelajari Linter

Code Linting adalah salah satu hal penting yang mungkin harus dimasukkan ke dalam Project yang sedang kita buat karena dapat berfungsi untuk meningkatkan kualitas kode.

Mempelajari Formatter

Formatter berfungsi untuk mengubah atau memperbaiki Source Code yang kita buat sesuai dengan konfigurasi yang sudah ditetapkan sebelumnya.

Front-End Framework

Berikut adalah beberapa Front-End Framework yang paling populer:

Angular

Angular dikembangkan oleh Google dan merupakan salah satu Front-End Frameword yang terbaik untuk pengembangan aplikasi.

React

React dikembangkan oleh Facebook dan paling banyak digunakan di antara semua Framework.

Vue

Vue berkembang secara eksponensial dan memiliki potensi yang sangat besar sehingga mungkin suatu saat akan menjadi yang paling populer.

Testing

Dalam proses ini, kita dapat melakukan pengujian UI karena setiap kode yang dibuat akan berbeda pada setiap perangkat. Jadi, disini kita memiliki tiga jenis Testing:

Unit testing

Unit testing adalah jenis pengujian untuk memeriksa apakah kode yang dibuat itu dapat bekerja atau tidak.

Integration Testing

Integration Testing adalah jenis pengujian untuk memeriksa apakah bagian yang berbeda dari setiap modul itu dapat bekerja bersama atau tidak.

Functional Testing

Functional Testing adalah jenis pengujian Software di mana suatu sistem diuji terhadap persyaratan/spesifikasi fungsional.

PWA (Progressive Web App)

Sebagai contoh dari PWA, mari kita lihat aplikasi Whatsapp yang ada di Smartphone kita. Ketika tidak ada jaringan, mungkin kita masih dapat membuka aplikasi, melihat atau memeriksa pesan-pesan sebelumnya, bahkan membalas pesan dari seseorang. Ketika kita sudah mendapatkan koneksi internet, pesan-pesan tersebut akan secara otomatis terkirim pada Background Process. Berikut adalah beberapa hal yang harus dipelajari tentang PWA:

• Service Worker
• Notification
• Location
• Device Orientation
• Storage

Performace

Disini, kita perlu mengetahui cara mengoptimalkan performa dari suatu Website. Terdapat berbagai Tool untuk menguji performa Website dan yang paling populer antara lain:

• Lighthouse
• DevTool
• Speed Test

Tool tersebut dapat membantu kita dalam mengetahui apa saja yang harus kita tingkatkan pada Website yang sedang kita kembangkan.

SSR (Server Side Rendering)

Jika kita menonaktifkan JavaScript kemudian membuka SPA (Single Page Application), contohnya seperti React dan Vue, mungkin kita tidak dapat melihat apa pun selain pesan Error yang menyuruh kita untuk mengaktifkan JavaScript.

Itulah alasan mengapa SPA tidak dapat bekerja tanpa JavaScript. Website yang di Render dari Server-Side adalah Website yang dilengkapi dengan HTML dan CSS sehingga HTML dan CSS tidak bergantung pada JavaScript.

Static Site Generator

Static Site Generator berfungsi untuk membuat Website Statis yang berarti kita dapat menjalankan Website tanpa terhubung ke Database dan hanya berupa HTML, CSS, dan JavaScript.

Mungkin ini saja yang bisa saya bagikan tentang Roadmap untuk Menjadi Front-End Developer. Terima kasih sudah membaca, saya berharap kalian menyukainya.