Anda mungkin sudah mengetahui cara belajar pemrograman, memilih sumber belajar, dan memutuskan untuk fokus menjadi seorang developer. Namun, jika Anda memilih untuk menjadi junior full stack web developer, Anda perlu mengetahui beberapa hal. Berikut adalah roadmap untuk menjadi junior full stack web developer menurut Chris Blakely.
Yang Harus Anda Diketahui
Ada beberapa hal yang perlu diketahui setiap developer, yaitu:
- Git/Source control – Setiap pengembang yang baik perlu mengetahui cara menggunakan Git, terutama jika bekerja dalam tim. Anda perlu mempelajari cara mengkloning repo, membuat commits, membuat branches, dan menggabungkan kode.
- Debugging – Frontend atau backend, pasti akan muncul bug. Kenali alat debugging untuk IDE Anda.
- IDE (Integrated Development Environment)- Ada banyak IDE yang dapat Anda gunakan, Anda bisa memilih satu dan mempelajarinya. Anda bisa menggunakan Visual Studio Code sebagai IDE Anda.
- Metodologi (Agile / SCRUM / Kanban) – Saat Anda bekerja dalam tim, kemungkinan Anda akan menggunakan metodologi dalam mengembangkan produk, jadi Anda perlu mempelajari cara kerja metodologi yang digunakan.
Front-end
Menjadi front-end developer, ada beberapa tugas yang bisa dilakukan, di antaranya:
- Mengimplementasikan desain menggunakan HTML atau CSS
- Berinteraksi dengan DOM menggunakan JavaScript
- Berinteraksi dengan API menggunakan FETCH API atau hal yang serupa
HTML atau CSS
Ini adalah sepasang bahasa yang ada di front-end development. HTML digunakan untuk memposisikan dan menempatkan elemen pada halaman web, sementara CSS digunakan untuk menata elemen-elemen tersebut.
Junior full stack web developer diharapkan untuk mengetahui hal-hal dasar penggunaan HTML untuk membuat halaman web dan styling element menggunakan CSS. Setelah Anda mengetahui dasar-dasarnya, Anda bisa mempelajari fitur-fitur yang lebih canggih, yaitu:
- CSS Grid & Flexbox untuk tata letak dan pemosisian elemen yang lebih mudah
- SCSS untuk membuat CSS normal lebih mudah dikelola melalui penggunaan variabel
Anda bisa mempelajarinya di css-tricks.com untuk panduan komprehensif tentang CSS. Latih kemampuan Anda HTML dan CSS ada dengan membuat beberapa proyek.
Frameworks
Tahap selanjutnya adalah membiasakan diri dengan frameworks CSS. Sebagian besar perusahaan menggunakan ini karena dapat menghemat waktu developer. Ada banyak jenis frameworks, dan Anda bisa memilih satu dan membiasakan diri dengan framework tersebut.
Salah satu framework yang populer dan digunakan oleh banyak perusahaan adalah Bootstrap. Meskipun sudah ada framework yang memudahkan Anda, Anda perlu mempelajari dasar-dasar CSS sebelumnya. Karena tidak menutup kemungkinan Anda akan dihadapkan dengan penyesuaian hal-hal dari waktu ke waktu berdasarkan proyek tim Anda.
Desain Responsif
Banyaknya jenis perangkat seluler saat ini, hal ini menjadi pertimbangan penting saat membuat desain front-end. Namun, dengan menggunakan framework seperti Bootstrap, CSS Grid, Flexbox, dan lain-lain, Anda dapat membuat desain responsif dengan sangat mudah.
- Media Queries. Selain mengetahui cara menggunakan CSS untuk membuat desain responsif, Anda perlu memahami cara menggunakan media queries untuk menentukan bagaimana elemen harus mencari ukuran layar yang berbeda.
- Hindari penggunaan pixel untuk satuan ukuran. Anda bisa menggunakan satuan unit rem daripada px (pixel). Gambar dengan lebar 100px, akan selalu memiliki lebar 100px terlepas dari ukuran layar. Anda bisa coba menggunakan unit seperti rem, vh, dan vw, untuk desain responsif.
Anda bisa fokus pada perangkat seluler terlebih dahulu saat membuat desain, dan tambahkan media queries untuk layar yang lebih besar setelahnya.
JavaScript
Jika Anda ingin menjadi front-end developer yang sukses, Anda perlu tahu JavaScript. Anda perlu mempelajarinya dari dasar sebelum masuk ke framework. Hal ini akan membuat Anda menjadi developer yang lebih baik dalam jangka panjang.
Sebagai junior developer, setidaknya Anda harus tahu tentang:
- Objek, fungsi, kondisional, loop dan operator
- Modul
- Array (termasuk cara memanipulasi mereka)
- Mengambil data dari API menggunakan API FETCH
- Memanipulasi DOM dan menggunakan Events
- Async / Await
- JSON
- ES6+
- Testing (Jest, Enzyme, Chai, dan lain-lain)
Jika Anda benar-benar ingin menjadi ahli dalam JavaScript, berikut ada beberapa sumber yang bagus untuk mempelajari topik JavaScript yang lebih maju, yaitu:
- eloquentjavascript.net
- freeCodeCamp.org
- github.com/getify/You-Dont-Know-JS
Anda bisa melatih kemampuan Javascript Anda dengan membuat beberapa proyek, seperti membuat dasbor yang menunjukkan beberapa statistik yang ditarik dari API. misalnya dasbor Twitter atau apa pun yang Anda suka. Anda akan belajar tentang bagaimana bekerja dengan API dan JSON.
JS Framework
Anda bisa memilih salah satu JS framework. Yang populer saat ini adalah Angular.js, React.js, dan Vue.js. Jika Anda telah mempelajari dasar-dasar JavaScript dan memiliki dasar yang kuat, apa pun kerangka yang Anda pilih, pastikan Anda mengetahuinya dengan baik.
React.js adalah salah satu JS framework yang mendapat dukungan besar dari Facebook dan merupakan yang paling populer di industri saat ini.
Jika Anda memilih React.js, Anda perlu memiliki pegangan pada konsep inti React, yaitu:
- Pahami bahwa React didasarkan pada komponen dan bagaimana komponen tersebut bekerja
- Menggunakan State & Props dalam komponen Anda
- JSX dan cara menggunakannya untuk merender elemen HTML pada halaman web
- Bagaimana dan kapan komponen-komponen dirender ulang
- Menggunakan React hooks
- NPM, Webpack, dan Babel
Sebagai junior developer, Anda tidak akan diharapkan tahu React.js secara luar dalam. Anda bisa belajar dan mempraktikkan keterampilan yang diuraikan di atas dengan membuat beberapa proyek. Salah satunya, Anda bisa membuat aplikasi kalkulator, dengan mempraktikkan state management, karena banyak tindakan pengguna perlu memperbarui status. Coba gunakan React Hooks untuk membuat aplikasi tersebut.
State Management (misalnya Redux)
Setelah Anda memiliki konsep inti dari React, langkah selanjutnya adalah memahami Redux. Redux pada dasarnya adalah state management framework, sebagai database front-end yang menyimpan keadaan aplikasi web Anda dalam satu tempat yang mudah dikelola.
Ada sejumlah alat yang tersedia untuk membantu Anda dengan debugging React atau Redux, yaitu React Dev Tools dan Redux Dev Tools.
Web Browser
Sebagai front-end developer, penting untuk mengetahui dan memiliki dasar tentang web browser, di antaranya yaitu:
- Alat debugging, misalnya Chrome Developer Tools
- Bekerja dengan metode penyimpanan, baik penyimpanan lokal, penyimpanan sesi, cookies.
- Fitur browser, Anda bisa menggunakan website whatwebcando.today untuk memastikan kode Anda mendukung browser yang diperlukan.
Deployment & Hosting
Front-end developer harus tahu cara deployment dan hosting. Anda bisa menggunakan layanan terkelola seperti:
- GitHub Pages
- Heruko
- Netlify
- Digital Ocean
- AWS
- Firebase
Back-end
Pengertian back-end secara singkatnya, ini adalah tempat data dari front-end disimpan. Misalnya, ketika pengguna membuat Tweet, hal itu melewati server, dan disimpan dalam database.
Back-end developer biasanya dapat melakukan tugas-tugas berikut:
- Buat API yang akan digunakan front-end
- Tulis business logic dan validation logic
- Integrasi dengan API pihak ke-3
- Menyimpan dan membaca data dari database
Bahasa pemrograman
Ada banyak bahasa pemrograman yang bisa Anda pilih. Anda bisa memilih diantaranya adalah:
- Java
- C #
- Python
- Node.js
- Go
- PHP
Jika Anda sudah berada dalam pola pikir belajar JavaScript, Anda bisa menggunakan Node.js. Node.js memudahkan JavaScript untuk membuat REST API, yang merupakan salah satu tugas utama yang harus dilakukan junior developer.
Bahasa apa pun yang Anda pilih, pastikan Anda mengetahui beberapa hal berikut:
- Membuat API
- Dasar-dasar bahasa, seperti membuat fungsi, menggunakan kondisional, operator, variabel, dan sebagainya
- Cara terhubung ke database
- Bagaimana cara query database
- Package management
- Tes menulis kode
Jika Anda memutuskan untuk belajar Node.js, banyak dari ini akan familier bagi Anda. Sebagai pemula, Anda jangan mencoba dan mempelajari semuanya. Pilih bahasa yang paling sesuai dengan tujuan Anda dan fokus padanya, pelajari dengan baik. Namun, jika Anda ingin tahu tentang bahasa lain, maka jangan ragu untuk memuaskan rasa ingin tahu Anda dan mencobanya.
REST API & JSON
Membuat REST API yang baik adalah salah satu pekerjaan utama bagi back-end developer. Anda perlu tahu tentang:
- Perbedaan kata kerja dan untuk apa mereka digunakan
- Cara membuat respons yang baik
- Cara menangani request
- Mengautentikasi request
- Cara mendokumentasikan API Anda
REST API adalah jembatan antara pengembangan back-end dan front-end, jadi pastikan Anda memahami cara kerjanya.
JSON adalah bahasa utama yang digunakan untuk mentransfer data melalui REST API. Data direpresentasikan sebagai Objek dan Array. Jika Anda telah mempelajari JavaScript atau front-end development, Anda akan akrab dengan langkah-langkah yang diuraikan tentang ini.
Databases & DevOps
Ada banyak sisi infrastruktur dari pengembangan web. Sebagai pemula, Anda tidak perlu mendalami semuanya. Jika Anda benar-benar ingin masuk ke bidang DevOps, ada beberapa area luas yang perlu Anda ketahui, yaitu:
- Bagaimana mengelola database
- Berbagai platform untuk hosting, seperti AWS, Azure, Google, dan lain-lain
- CICD dan alat-alat seperti Jenkins, GitLab dan lainnya
- Logging dan monitoring
Hal ini bergantung pada tim atau perusahaan Anda, mungkin ada tim atau orang lain yang mengelola bagian ini.
Jika Anda tertarik untuk belajar tentang pemrograman website atau ingin menjadi web developer, Anda bisa mendaftarkan diri Anda di magang atau kerja Techarea.
Reference
Blakely, Chris. 2019. The 10-minute roadmap to becoming a Junior full stack web developer. [Online] Available at :https://medium.freecodecamp.org/the-10-minute-roadmap-to-becoming-a-junior-full-stack-web-developer-1131d4ffc48 [Accessed March 29, 2019]