Frontend development adalah aktivitas merancang dan mengembangkan website dan aplikasi web menggunakan teknologi web (seperti; HTML, CSS, dan JavaScript), khususnya untuk dijalankan pada Open Web Platform atau berperan sebagai library untuk platform selain website (seperti; react native).

Berikut adalah dasar-dasar dan beberapa prasyarat untuk memahami Frontend development:

1. Aplikasi atau website yang berjalan pada web browser.

2. Membangun aplikasi atau website yang dapat dilihat dan digunakan oleh pengguna secara interaktif

3. Memahami penggunaan HTML, CSS, dan JS

4. Dasar-dasar UI Design

• Patterns

• Interaction design

• User Experience design

• Usability
  
  

• HTML

• Semantic HTML

• Meminimalkan penggunaan div

• Meminimalkan nested tag (div di dalam div)

• CSS

• Basic layouting; flexbox, grid, container, breakpoint

• Basic styling; padding, margin, color, positioning, hover active state

• Typography; paragraph, form, image

• DOM

• Documents

• Elements

• HTML

• Form

• Nodes

• Node Lists

• JavaScript

• Manipulasi struktur JSON

• ECMAScript

• Standardization of JS syntax

• Features

• JSON

• Formatting

• Web APIs

• Node.js
  
  

Front-end development dengan Node.js

Node.js adalah runtime environment untuk JavaScript yang bersifat open-source dan cross-platform. Dengan Node.js kita dapat menjalankan kode JavaScript di mana pun, tidak hanya terbatas pada lingkungan browser.

Node.js menjalankan V8 JavaScript engine (yang juga merupakan inti dari Google Chrome) di luar browser. Ini memungkinkan Node.js memiliki performa yang tinggi.

Node.js juga menyediakan banyak library/module JavaScript yang membantu menyederhanakan pengembangan aplikasi web.

Berikut ini adalah beberapa fitur penting dari Node.js yang menjadikannya pilihan utama dalam pengembangan aplikasi:

Semua API dari Node.js bersifat asynchronous, artinya tidak memblokir proses lain sembari menunggu satu proses selesai. Server Node.js akan melanjutkan ke ke pemanggilan API berikutnya lalu memanfaatkan mekanisme event notification untuk mendapatkan respon dari panggilan API sebelumnya.

Eksekusi kode dengan Node.js sangat cepat karena berjalan pada V8 JavaScript Engine dari Google Chrome.

Node.js menggunakan model single thread dengan event looping. Mekanisme ini membantu server untuk merespon secara asynchronous dan menjadikan server lebih scalable dibandingkan server tradisional yang menggunakan banyak thread untuk menangani permintaan.

Kata Kunci;

• Code Linters

• Code Processing

• Module Bundlers

• Code Preprocessors
  
  

Tipe-tipe sebuah website dapat diklasifikasikan menjadi 2 kategori utama; performa dan perenderan;

Berdasarkan performa:

• Hydration; teknik di mana JavaScript mengubah HTML statis (dikembalikan dari Server) menjadi elemen dinamis dan interaktif di browser. Juga umumnya disebut sebagai hidrasi atau rehidrasi sisi klien. Saat menghidrasi, JavaScript (seperti event handler, listener, dll.) ditautkan ke HTML statis untuk membuatnya interaktif.

• Pre-rendering; teknik di mana HTML dirender pada waktu pembuatan. Pre-rendering sangat penting untuk halaman publik yang harus di crawl dan diberi peringkat oleh mesin pencari. Aplikasi sisi server dan sisi statis menggunakan teknik ini.

Berdasarkan perenderan;

• First Paint (FP) adalah langkah pertama selama rendering setelah pengguna menavigasi ke halaman. Ini adalah piksel pertama yang dilukis di layar dan di jendela browser — semua yang ada di jendela browser yang secara visual berbeda dari sebelum navigasi diproses di First Paint.

• First Contentful Paint (FCP) adalah pertama kali browser merender sesuatu ke DOM, seperti teks, gambar, atau SVG. Selama proses ini, browser akan memberi tahu pengguna bahwa "sesuatu sedang terjadi." 

• Time to Interactive (TTI). Browser telah merender seluruh konten situs web, pada titik ini, dan pengguna dapat berinteraksi dengan elemen pada halaman. Itu bisa berupa menekan tombol atau mengklik bidang teks yang memberikan umpan balik kepada pengguna.

Berdasarkan penggunaan;

• Restful API; Representational State Transfer, RESTful API adalah antarmuka yang digunakan dua sistem komputer untuk bertukar informasi secara aman melalui internet. Sebagian besar aplikasi bisnis harus berkomunikasi dengan aplikasi internal dan pihak ketiga lainnya untuk melakukan berbagai tugas. Misalnya, untuk menghasilkan slip gaji bulanan, sistem akun internal Anda harus berbagi data dengan sistem perbankan pelanggan Anda untuk mengotomatiskan faktur dan berkomunikasi dengan aplikasi absen internal. RESTful API mendukung pertukaran informasi ini karena mengikuti standar komunikasi perangkat lunak yang aman, andal, dan efisien.

Terdiri dari 2 pihak; client (front-end) dan server (back-end) yang terhubung melalui API.

Situs web yang di render oleh sisi klien melakukan segalanya "sendiri". Seperti mengambil data dari API, mengelola logika, dan merutekan antar halaman secara langsung di browser. Setiap halaman yang dikunjungi pengunjung dan URL masing-masing dibuat secara dinamis.

Aplikasi sisi klien biasanya memiliki FP dan FCP yang cepat. Mereka menggunakan hidrasi yang dapat menyebabkan Waktu Interaktif yang lambat karena browser perlu "mem-boot" kode JavaScript, rehidrasi, dan kemudian memuat kembali HTML ke jendela browser. Proses hidrasi dapat bervariasi dalam waktu tergantung pada seberapa banyak JavaScript yang terkandung dalam aplikasi Anda.

TTI (Time to Interactive) yang lambat tidak terlalu baik untuk Search Engine Optimization (SEO). Sebagian besar aplikasi sisi Klien yang memerlukan kontennya dirayapi dan dioptimalkan untuk SEO harus menerapkan pra-rendering agar berfungsi dengan baik.

Render sisi klien adalah default untuk aplikasi JavaScript. Kerangka Kerja Frontend Populer seperti React, Angular, dan Vue menggunakan tipe rendering ini.

Keuntungan:

• Memberikan umpan balik yang cepat kepada pengguna dan pengalaman pengguna yang lancar, misalnya, First Contentful Paint yang cepat.

• Beban server rendah karena semua konten diproses dan di render di klien/di browser pengguna.

• Biaya lebih rendah daripada aplikasi yang diberikan dari sisi server.

Kekurangan:

• Dapat menyebabkan pengalaman pengguna yang buruk. Berpotensi, biarkan pengguna menunggu konten sampai semuanya dimuat sepenuhnya ke dalam browser, sehingga pengguna meninggalkan situs sebagai gantinya.

• Aplikasi sisi klien mempersulit robot mesin telusur untuk melihat konten situs web, yang menyebabkan tidak ada atau buruknya pengindeksan.

• Halaman JavaScript tidak akan terlihat jika JavaScript dinonaktifkan di browser pengguna.

Render sisi server (SSR) terjadi sesuai permintaan, juga disebut Just in Time (JIT). Setiap kali klien membuat permintaan untuk halaman, server mengirimkan HTML untuk permintaan itu. HTML kemudian dikembalikan ke klien, yg sepenuhnya telah dirender dan siap untuk ditampilkan.

Render sisi server lebih lambat daripada rendering sisi Statis karena HTML dibuat seluruhnya pada setiap permintaan. Tetapi ini lebih cepat daripada aplikasi yang dirender sisi klien saat mengembalikan seluruh hasil kepada pengguna.

Kerangka kerja JavaScript seperti Vue dan React menggunakan hidrasi untuk menghasilkan kode interaktif yang dikirim dari Server.

Keuntungan:

• Sesuai untuk website yang berfokus pada SEO.

• Memberi pengalaman pengguna yang luar biasa dengan mengirimkan semua konten berdasarkan permintaan.

Kekurangan:

• Ini mungkin mahal. Memerlukan pengaturan dan pengelolaan server atau kode server selain kode frontend.

• Jika Server down, website juga down.

• Ini mungkin memerlukan pengembang backend/full stack selain pengembang frontend.

Perenderan Statis terjadi pada waktu build. Setiap halaman dikompilasi dan dirender sebagai file HTML statis Ahead Of Time (AOT). File yang dihasilkan AOT artinya kita akan menghasilkan file HTML dengan URL terpisah untuk setiap file. Apa yang sangat baik tentang situs web statis adalah mereka dapat diunggah ke CDN dan dengan mudah dipindahkan ke sumber lain saat dibutuhkan tanpa banyak pekerjaan.

Situs web yang di render secara statis memiliki beberapa keuntungan signifikan. Mereka cepat, memiliki keandalan yang lebih baik, dan meningkatkan SEO. Situs web yang dihasilkan secara statis memiliki FP, FCP, dan TTI yang cepat.

Pros:

• Sempurna untuk situs web yang berfokus pada SEO.

• Handal, performa luar biasa, aman, dan skalabel

• Biaya rendah; itu dapat "hidup" di Jaringan Pengiriman Konten (CDN)

• Mudah berpindah antar penyedia hosting

Cons:

• Anda bergantung pada penerapan seluruh situs web jika terjadi perubahan — seperti menambahkan artikel berita atau produk untuk toko e-commerce.