Front End Developer merupakan salah satu pekerjaan yang kini cukup menjanjikan. Front End Developer sendiri berperan dalam mengembangkan tampilan situs web dengan menggunakan bahasa pemrograman. Lalu bagaimana alur menjadi Front End Developer?
Beginner
HTML
HTML merupakan singkatan dari HyperText Markup Language. Biasanya, HTML digunakan di oleh seorang Front-End dalam memberikan struktur ke halaman web yang dapat didesain menggunakan CSS dan membuatnya menjadi interaktif menggunakan JavaScript.
Semantic HTML adalah jenis elemen yang dapat digunakan untuk mendefinisikan berbagai bagian halaman dalam web seperti contohnya
Kemudian ada Form yang perlu diisikan dalam format yang harus benar. Form ini akan membantu memastikan data yang dikirimkan apakah sudah cocok dengan persyaratan yang ditetapkan atau tidak.
Dalam HTML juga mengenal dasar SEO atau Search Engine Optimization. SEO ini adalah sebuah teknik yang digunakan untuk mengoptimalkan sebuah situs web agar nantinya mendapat peringkat yang lebih baik di web browser.
CSS
CSS atau Cascading Style Sheets merupakan bahasa pemrograman yang dipakai untuk menata tampilan depan bagian situs web. CSS sendiri adalah teknologi landasan dari World Wide Web.
Dalam CSS juga harus mengenal layouts atau tampilan. Ada tampilan layouts Float, grid, flexbox, positioning, display dan box model yang menjadi dasar dalam penentuan layouts ini.
Kemudian juga ada Responsive design yang merupakan teknik untuk membuat halaman web Anda terlihat bagus di semua ukuran layar. Ada beberapa teknik yang bisa dipakai seperti misalnya Media Queries CSS, lebar persentase, tinggi lebar min atau maks, dan lainnya.
JavaScript
JavaScript memungkinkan Anda untuk menambahkan interaksi ke halaman web. Contoh umum yang biasa dipakai seperti penggeser, interaksi klik, dan sebagainya.
Document Object Model (DOM)
Pemrograman antarmuka yang dibuat untuk dokumen HTML dan XML.
Rest API
Merupakan teknik untuk frontend mengirim dan menerima data dari backend
Intermediate
Git
Git adalah suatu Version Control System yang bertugas untuk mencatat jika ada perubahan pada file yang dikerjakan. Saat ini Git menjadi tool yang popular untuk digunakan pada suatu project pengembangan website atau software.
Repositories Hosting Device menyediakan berbagai layanan hosting repositori dengan yang paling terkenal adalah GitHub, GitLab, dan BitBucket.
Framework
Merupakan kerangka kerja web dirancang untuk menulis aplikasi web. Framework adalah kumpulan perpustakaan yang membantu dalam pengembangan produk perangkat lunak atau situs web dengan variasi dan fitur yang beragam.
Untuk CSS terdapat framework seperti bootstrap, tailwind, material, dan lainnya. Lalu untuk javascript juga memiliki framework Vue.js, ReactJs, Angular dan masih banyak lagi.
Buildtools
Buildtools sendiri memiliki banyak tujuan, diantaranya adalah
- Minify yaitu spasi, comment dan line break pada suatu code akan dihapus dengan tujuan memperkecil ukuran file code itu sendiri.
- Tree Shaking yaitu agar visitor hanya mendownload yang diperlukan saja di dalam bundle, hal ini akan mempercapat load suatu website karena yang didownload adalah hal yang diperlukan visitor saja.
- Polyfills yaitu menerjamahkan fitur baru ke bentuk HTML, CSS, dan Javascript classic jadi browser dengan versi yang lama dapat membukan website.
CI / CD (Code Integration / Code Deployment
Melakukan unit test, build dan upload ke hosting server secara otomatis, lalu build dan upload ke registry (NPM / Packagist), update changelog, melakukan checking coding style dan membuat pull request secara otomatis jika ada yang tidak konsisten. Selain itu melakukan pengecekan pada library yang digunakan dan akan otomatis membuat pull request jika library yang digunakan memiliki celah keamanan.
Advance
Server Side Rendering (SSR)
SSR merupakan proses di mana sisi layanan akan menyelesaikan penyambungan pada struktur HTML lalu mengirimkannya ke browser, dan kemudian mengikat status agar menjadi halaman yang sepenuhnya interaktif.
Dalam hal ini, alurnya ada Vue.js yang menjadi Nuxt.js lalu React.js menjadi Next.js yang lebih kompleks.
Progressive Web Apps
Progressive Web Apps (PWA) merupakan situs web yang secara progresif dapat ditingkatkan dan berfungsi seperti aplikasi bawaan yang telah diinstal pada platform pendukung, sekaligus berfungsi seperti situs web biasa di browser lain.
Testing
Sebelum mengirimkan aplikasi Anda ke pengguna, Anda perlu melakukan testing untuk memastikan bahwa aplikasi Anda memenuhi persyaratan yang dirancangnya.
Dalam hal ini terdapat Jest, Jasmine, Cypress, dan Enzyme.
Type Checker
Type Checker akan membantu pengembang dalam menulis kode agar lebih sedikit bug dengan menambahkan tipe ke kode yang dibuat, mencoba menemukan kesalahan tipe dalam kode, lalu menghapusnya selama waktu kompilasi berlangsung.
Itu tadi tahapan atau alur untuk menjadi seorang Front End Developer. Kalian sudah sampai mana?
Baca Juga : Roadmap Frontend Developer
Artikel di atas adalah hasil kolaborasi bersama @anak.frontend. Enjoy!
Address
Jl. Taman Internasional B8 no. 33A, Citraland
Surabaya, Indonesia
Telephone
031-745 1133
