Front-End development pada penggunaannya melibatkan HTML, CSS, dan JavaScript untuk membangun aplikasi dari sisi pengguna. Warna, font, tombol, navigasi, animasi, dan lainnya adalah bagian visual aplikasi web dari sisi pengguna untuk membangun interaksi.

Yang termasuk ke dalam Front-End development adalah user interface dari sebuah aplikasi. Segala aktivitas yang mencakup interaksi ketika pengguna melakukan kunjungan website seperti melakukan login atau sign-up, mengakses homepage, mengakses halaman kontak merupakan bagian dari istilah Front-End development. 

Seorang Front-End development bertanggung jawab untuk membangun dan mengimplementasikan sebuah interface dari situs web ataupun aplikasi. Mereka membangun aplikasi dari sisi pengguna menggunakan teknologi web seperti HTML, CSS, dan JavaScript.

Di tahun 2022 sendiri para front-end developer tidak hanya memakai HTML, CSS, dan JavaScript saja, namun lebih dari itu. Untuk menjadi  front-end developer yang unggul ada banyak teknologi web yang harus kamu pelajari. 

Artikel ini akan membantumu mempersiapkan hal-hal apa saja yang kamu butuhkan untuk memulai front-end development pada tahun 2022.

Penggunaan Terminal Dasar (Command Line)

Terminal adalah interface (antarmuka) yang digunakan untuk mengeksekusi perintah teks dan memberikan akses ke dalam dasar dari sistem operasi. Penggunaan basic terminal usage (terminal dasar) adalah keterampilan yang dibutuhkan semua pengembang terlepas dari spesialisasi mereka. Command Line adalah komponen paling penting, sehingga kami menyarankan agar kamu mempelajari lebih lanjut mengenai tata cara penggunaannya. Semakin dirimu ahli menggunakan command line, semakin membuat dirimu efisien sebagai front-end developer. 

Git – Version Control

Git adalah sistem version control yang memungkinkan pengembang melacak perubahan dalam proyek mereka. Git juga membangu pengembang berkolaborasi sebagai sebuah tim. Git diperlukan diantara pengembang, untuk memastikan tidak ada konflik kode antar pengembang. 

Github

Github adalah platform hosting kode untuk pengembangan perangkat lunak. Github memungkinkan tim bekerjasama pada sebuah proyek yang juga membutuhkan version control di dalamnya. Misalnya, tim pengembangan ingin membangun aplikasi web dan semua orang diberikan tugas yang harus diperbarui setiap saat mengerjakan proyek, dalam hal ini, Github membantu mereka membangun repositori terpusat yang memungkinkan setiap anggota tim dapat melakukan pembaruan atau mengelola file kode atau repository.

Text Editor / IDE (Integrated Development Environment)

Text editor adalah tempat dimana kamu menuliskan kodemu. Memiliki editor teks yang tepat akan meningkatkan produktivitas. 

Ada banyak IDE yang bisa dipilih, beberapa diantaranya seperti:

1. Visual studio code

Visual studio code adalah salah satu alat terbaik untuk front-end development.  Visual studio code dapat bekerja di semua sistem operasi seperti mac OS, Windows, dan Linux. Visual studio code juga hadir dengan banyak eksistensi yang membantu dalam meningkatkan produktivitas front-end developer.

2. Sublime Text

Sublime text juga tersedia pada macOS, Windows, dan Linux. Penggunaan Sublime Text Terbilang cepat, mudah, dan fleksibel.

3. Atom

Atom adalah open-source code editor untuk macOS, Windows, dan Linux yang dikembangkan oleh Github dengan dukungan untuk plugin. 

Web Fundamentals

Sebelum kamu memahami cara kerja web akan lebih baik bila kamu mempelajari teknologi apa pun. Kamu harus mengerti hal-hal seperti; apa itu internet dan bagaimana cara kerjanya, apa itu HTTP/HTTPS, atau bagaimana cara kerja browser.

Mempelajari HTML

Hypertext Markup Language atau HTML adalah  bahasa markup yang digunakan untuk membangun halaman web, dan termasuk juga ke dalam blok bangunan web. HTML mudah dipahami dan dipelajari. Hanya dengan menggunakan HTML, kamu sudah bisa membangun situs web dasar.

Dasar HTML yang harus kamu pelajari, seperti:

1. HTML Headings

Adalah bagian yang kamu gunakan untuk menampilkan judul dan subjudul di halaman web-mu. Ini terdiri dari <1> yang menunjukkan heading paling penting dan heading yang paling tidak penting.

2. HTML Forms 

HTML Forms digunakan untuk mengoleksi input data seperti username, email, dan detail kontak.

3. HTML Elements

HTML Element menentukan bagaimana browser web akan memformat dan menampilkan konten. Konten dengan tag <i> akan ditampilkan miring, konten dengan tag <strong> akan ditampilan tebal.

4. HTML Attributes

HTML attributes menyediakan informasi tambahan terkait HTML elements. Seperti contohnya, tag pada HTML Elements digunakan untuk menyematkan gambar di halaman web, atribut src digunakan untuk menentukan jalur tempat gambar berada. 

5. HTML Layout

HTML layout menentukan berbagai cara situs web menampilkan konten. Sangat disarankan untuk menggunakan HTML elements semantik seperti <header><nav><section><article><footer>, dikarenakan elemen tersebut menjelaskan dengan jelas kepada browser dan developer.

Learn CSS

Cascading Style Sheet atau CSS adalah teknologi yang dipelajari setelah HTML. CSS digunakan untuk menata HTML. Seperti memberi ruang pada konten, warna, font, dan lain-lain. 

CSS dasar yang harus kamu pelajari meliputi:

1. CSS box model

CSS box model terdiri dari margin, border, padding, dan konten.

2. CSS Positioning

CSS Positioning membantumu memanipulasi sebuah elemen ke lokasi yang berbeda seperti tetap, relatif, absolut, statis, menempel, dll. 

3. CSS Grid

CSS Grid adalah sistem dua dimensi dengan baris dan kolom. Grid CSS memudahkan untuk menyusun halaman web tanpa harus menggunakan float.

4. CSS Flexbox

CSS Flexbox adalah sistem satu dimensi yang memungkinkan kita untuk memilih antara baris atau kolom sebagai tata letak atau struktur utama halaman web. CSS Flexbox juga membuat susunan halaman lebih fleksibel tanpa harus menggunakan float.

5. Responsive design and media queries
6. Responsive design adalah pendekatan bahwa aplikasi harus dibangun dan dirancang dengan mempertimbangkan pengguna terlepas dari perangkat yang digunakan. Sementara media queries berguna ketika pengembang ingin memodifikasi aplikasi agar sesuai dengan perangkat seperti desktop, tablet, atau ponsel. 

Mempelajari JavaScript

JavaScript adalah salah satu bahasa pemrograman paling populer di dunia. JavaScript adalah bahasa untuk web. Sebagai front-end developer, mempelajari JavaScript adalah kebutuhan. JavaScript memungkinkan penciptaan konten yang dinamis. Ketika kamu membuat struktur HTML dan gaya web pada CSS, maka JavaScript membuat situs web lebih dinamis dan hidup.

Beberapa hal dasar dari JavaScript yang harus kamu pelajari:

1. JavaScript Syntax

Setiap bahasa pemrograman memiliki aturan sendiri tentang bagaimana sebuah program ditulis. Sintaks JavaScript adalah seperangkat aturan yang menentukan bagaimana sebuah program ditulis oleh seorang programmer dan diinterpretasikan oleh browser.

2. DOM Manipulation

DOM atau Document Object Model menurut standar W3C (Word Wide Web Consortium), DOM adalah platform dan interface bahasa netral yang memungkinkan program dan skrip untuk memperbarui konten, struktur, dan gaya dokumen secara dinamis. DOM adalah representasi dari bagaimana konten halaman web terstruktur. JavaScript manipulasi DOM dengan memperbarui konten, gaya, menghapus serta menambah elemen. 

3. Fetch API

API atau Application Programming Interface adalah perantara yang memungkinkan dua aplikasi berkomunikasi satu sama lain. Sebagai front-end developer, saat membangun aplikasi web kemungkinan besar kamu harus bekerja dengan data eksternal seperti pihak ketiga API, Fetch API memungkinkan browser membuat permintaan HTTP ke server web.

JavaScript Frameworks/Libraries

Setelah mempelajari dasar dari JavaScript, kamu bisa memilih berbagai JavaScript Framework. Namun IDS School lebih merekomendasikan Vuejs yang lebih ramah kepada pemula.

1. React

Menurut dokumentasi, pustaka JavaScript untuk membangun user interface React memungkinkan kamu membuat komponen yang dapat digunakan kembali. 

2. Vue

Vuejs adalah kerangka kerja JavaScript yang mudah, serbaguna, dan berkinerja yang membantumu membuat basis kode yang dapat dipelihara dan diuji. Vuejs juga ramah digunakan pemula.

3. Angular

Angular adalah aplikasi design framework dan platform pengembangan untuk membuat aplikasi satu halaman yang efisien dan canggih.

4. Svelte

Svelte menyediakan metode berbeda untuk membangun aplikasi web. Sehingga developer dapat membangun halaman web yang cepat dan user interface yang menakjubkan.

5. Ember

Ember memungkinkan pengembang untuk membangun aplikasi satu halaman yang scalable. Hal ini mencakup semua kebutuhanmu untuk membangun user interface yang mumpuni dan dapat berfungsi di perangkat apa pun.

6. PREACT

PREACT adalah alternatif dari REACT  namun hadir dengan kecepatan yang lebih dan samanya modern-nya dengan API.

Package Manager

Manajer paket adalah alat yang memungkinkan pengguna untuk menginstal, memperbarui, mengkonfigurasi, dan mengelola paket perangkat lunak dan dependensi produk. Contoh manajer paket adalah NPM dan Yarn. Sangat disarankan untuk kamu mempelajari hal dasar dari salah satunya.

Aksesibilitas

Aksesibilitas web adalah proses dari membuat halaman web-mu dapat digunakan oleh semua orang. Aksesibilitas web termasuk bagian penting bagi front-end development. Sebagai front-end developer kamu perlu membangun halaman web dengan mempertimbangkan aksesibilitas bagi siapapun, termasuk penyandang disabilitas, tunanetra, tunarungu dapat mengakses semua informasi di situs web tanpa adanya hambatan atau kesulitan.

Performa Web

Menurut MDN, Performa web adalah cara-cara yang digunakan untuk membuat situs web menjadi cepat, termasuk membuat proses yang lambat tampak cepat. Salah satu metrik yang harus dipenuhi oleh situs web/aplikasi web yang baik adalah rendering halaman yang cepat.

Performa web mengacu pada berapa lama waktu yang dibutuhkan aplikasi untuk di render di browser serta seberapa responsifnya aplikasi tersebut terhadap interaksi pengguna. Untuk pengalaman pengguna yang lebih baik, disarankan agar pengembang mengadopsi teknik pengoptimalan web yang berbeda. Hal ini termasuk menggunakan jaringan pengiriman konten (Content Delivery Network) yang merupakan server web yang didistribusikan secara strategis yang mengirimkan konten kepada pengguna berdasarkan lokasi. Pilihan lainnya adalah menggunakan alat kompresi gambar seperti imageOptim untuk mengurangi ukuran gambar tanpa mengurangi kualitasnya.

Metode lain untuk diadopsi meliputi:

1. Menggunakan cache – Penggunaan cache mengacu pada penyimpanan sementara data dan halaman web untuk meningkatkan kinerja halaman. Disarankan agar pengembang menerapkan cache dalam situasi terbaik untuk meningkatkan kinerja situs dan pengalaman pengguna secara keseluruhan. Data cache dapat disimpan di penyimpanan lokal dan diambil saat dibutuhkan. 
2. Minimalkan jumlah permintaan HTTP yang dibuat aplikasi Anda.
3. Muat file CSS dan JavaScript Anda secara asinkron. Hal ini akan mencegah browser menunggu elemen apa pun yang membutuhkan waktu ekstra untuk dimuat. Ini malah akan melanjutkan ke elemen lain.
4. Hapus kode sampah dan kode yang tidak diinginkan di file CSS dan JavaScript-mu.

Melakukan Uji Coba Aplikasimu

Melakukan pengujian melibatkan pemindaian perangkat lunak untuk kemungkinan bug selama pengembangan. Selama pengujian, penguji melakukan tindakan pada perangkat lunak sambil mengharapkan hasil tertentu. Hal-hal yang mungkin untuk diuji dalam suatu aplikasi antara lain meliputi keamanan, fungsionalitas, dan kemudahan penggunaan. Pengujian tidak menjamin bahwa suatu perangkat lunak akan berfungsi dengan baik dalam keadaan apa pun, tetapi, bagaimanapun, memberi kami informasi tentang bagaimana ia dapat berperilaku dalam kondisi tertentu. Contoh alat uji untuk dicoba dalam aplikasi Anda adalah Jest. Jest adalah kerangka kerja yang digunakan untuk membuat dan menjalankan tes JavaScript untuk aplikasi yang dibangun dengan React, Nodejs, Angular, TypeScript, Vue, dan banyak lagi. Hal ini semakin populer selama bertahun-tahun dan telah menjadi salah satu alat uji yang paling banyak digunakan.

Penerapan Situs Web

Setelah mendapatkan pengetahuan dari HTML, CSS, dan JavaScript kamu dapat membangun halaman web sederhana menggunakan teknologi tersebut. Setelah proses membangun situs web, proses tersebut tetap berada di komputer kita atau repo Github dan tidak mungkin orang dapat melihat apa yang kamu buat. Tetapi dengan penerapan web, kamu dapat meng-host aplikasi sederhanamu di internet. Hal ini sangat mudah dilakukan. Kamu dapat menggunakan alat seperti halaman GitHub, atau Netlify.