Clever Geek Handbook

Bagaimana cara menjadi pengembang front-end? Panduan langkah demi langkah untuk dunia frontend





Salam untuk semua! Nama saya Anastasia Puchnina, saya adalah pengembang utama di DomClick, saya terlibat dalam tampilan etalase iklan. Hari ini saya ingin berbagi pendapat saya tentang apa yang penting untuk diketahui oleh front-end developer. Artikel ini akan berguna bagi mereka yang baru memulai pengembangannya, atau memiliki pengalaman pemrograman di area lain dan memutuskan untuk beralih ke sisi front-end.



Kandungan:



  1. Siapa frontend dan apa yang dia lakukan?
  2. Di mana memulainya dan apa yang harus dibaca? Daftar periksa pelatihan
  3. Kesulitan apa yang mungkin ada? Kesalahan di awal jalur
  4. Mempersiapkan Wawancara Pengembang Junior




Siapa frontend dan apa yang dia lakukan?



Misalnya Anda ingin menyewa apartemen: Anda memiliki komputer dengan akses Internet, Anda tahu alamat komputer lain yang lebih kuat yang menyimpan berbagai macam iklan. Jika Anda membayangkan bahwa situs yang sudah dikenal tidak ada dan Anda tidak dapat, misalnya, melihat iklan di peta, menyaring yang tidak perlu dengan mengisi formulir yang sesuai, Anda harus membuat permintaan jaringan sendiri dan mencari tahu bagaimana dan ke mana harus mengirim data.



Untungnya, para insinyur telah menemukan browser, dan teknologi web sedang berkembang, dan Anda hanya perlu menggunakan antarmuka yang nyaman yang disediakan oleh pengembang dari berbagai perusahaan. Tetap membuat beberapa klik, dan informasi yang diperlukan telah ditemukan.



Pengembang front-end adalah programmer yang bertanggung jawab untuk membuat situs web front-end semacam itu. Ini adalah sisi klien dari situs yang dengannya pengguna berinteraksi langsung di komputer atau teleponnya (klien).



Banyak orang tahu bahwa situs web menyertakan markup dan gaya yang diperlukan untuk menyediakan struktur dan desain halaman yang jelas, tetapi pengembangan front-end tidak berhenti di situ. Sebagian besar situs yang selalu kami gunakan adalah aplikasi web lengkap: surat, perbankan online, bioskop online, editor foto, catatan. Untuk membuat aplikasi tersebut berfungsi, pengembang front-end menambahkan kode yang berjalan di browser, mengimplementasikan fungsionalitas yang diinginkan dan, jika perlu, berinteraksi dengan server, secara dinamis menerima informasi yang diperlukan.





Pengembang front-end:



  • membuat antarmuka pengguna, menambahkan markup dan gaya halaman situs;
  • program logika yang berjalan pada perangkat klien, mengembangkan arsitektur aplikasi klien;
  • mengoptimalkan kinerja front-end sehingga proyek dimuat dengan cepat, mesin pencari menaikkan situs di SERP, dan pengguna tidak merasakan penundaan dalam navigasi dan interaksi dengan antarmuka;
  • menguji fungsionalitas yang dikembangkan dan menulis pengujian otomatis untuk memastikan kualitas tinggi dan menghindari kesalahan saat mengubah kode;
  • mengonfigurasi build proyek, yang memungkinkan Anda mengotomatiskan pemrosesan kode dan file tambahan sebelum memulai aplikasi;
  • melakukan penerapan aplikasi: mengunggahnya ke server sehingga aplikasi tersedia di jaringan dan pengguna dapat menggunakannya;
  • memantau kesalahan yang muncul menggunakan alat pemantauan dan menghilangkannya tepat waktu :)


Dalam tim yang berbeda, pengembang front-end dapat menyelesaikan tugas yang sangat berbeda, misalnya:



  • Kembangkan ujung depan aplikasi web bisnis (apa yang dilihat pengguna akhir saat mereka menggunakan berbagai layanan online).
  • Kembangkan pustaka komponen antarmuka: blok individual yang digunakan pengembang lain dalam proyek mereka (misalnya, tombol, jendela munculan, bidang formulir, atau elemen untuk grafik). Ini bisa berupa pustaka sumber terbuka yang dihubungkan oleh pengembang di seluruh dunia, atau pustaka komponen internal perusahaan dengan desain tertentu.
  • . , , - -, . !


? -



Terlepas dari di bidang apa Anda ingin bekerja dan solusi apa yang harus dibuat, ada dasar tertentu yang, menurut pendapat saya, harus diketahui oleh setiap pengembang front-end.



Di awal perjalanan, ada yang terintimidasi oleh daftar teknologi, nama, dan singkatan di frontend. Ada banyak sekali. Tetapi bahkan pengembang berpengalaman pun tidak tahu, dan seharusnya tidak mengetahui sepenuhnya semua teknologi dan pustaka yang ada (ada rumor bahwa setiap detik pustaka baru dirilis di dunia frontend :)







Tiga paus pengembangan untuk peramban adalah HTML, CSS dan JavaScript, dengan yang layak untuk dimulai.



Jika Anda tidak memiliki pengalaman dalam pengembangan dan merasa sulit untuk belajar sendiri, itu akan menjadi solusi yang baik untuk mengambil kursus pengembang front-end dengan mentor di salah satu sekolah pemrograman terkenal. Ada juga kursus bagus tentang tata letak dan pengembangan front-end di Udemy dan Coursera. Namun, ini sama sekali tidak perlu, ada banyak materi dan sumber gratis di Internet tentang topik yang diperlukan.



Untuk membantu Anda menavigasi, saya telah menyusun daftar periksa langkah demi langkah untuk mendapatkan pengetahuan yang Anda perlukan untuk wawancara untuk pengembang front-end pemula. Juga terlampir tautan ke materi dan sumber dalam bahasa Rusia dan Inggris, yang mungkin berguna bagi Anda.



Simpan ke bookmark dan gunakan.



1. Bagaimana Web bekerja



Sebelum Anda mulai mengembangkan situs, Anda perlu memiliki pemahaman tentang apa yang terjadi saat Anda membuka situs di browser, cara kerja model klien-server, dan apa protokol HTTP itu.





2. Lingkungan pengembangan



Anda bahkan dapat menulis kode dan markup di notepad, tetapi akan lebih mudah untuk menggunakan editor khusus. Paling populer di kalangan pengembang frontend:



  • VSCode adalah editor cepat gratis dengan banyak add-on untuk pengembangan;
  • JetBrains WebStorm - IDE lengkap, ada masa percobaan dan kemampuan untuk mendapatkan akses di bawah lisensi siswa;
  • Jika Anda perlu mengirim kode kepada orang lain, periksa atau simpan kode tersebut secara online dengan cepat, Anda dapat menggunakan editor online seperti Codepen .


3. Dasar-dasar HTML



Pelajari struktur dokumen HTML, apa itu tag dan apa itu, tag meta, atribut, cara menambahkan gambar, membuat formulir. Semantik dan aksesibilitas adalah poin penting dalam tata letak.





4. CSS





Menambahkan gaya untuk elemen halaman. Kami mempelajari model blok, pemosisian, gaya bertingkat, spesifisitas selektor, elemen semu, tata letak adaptif (untuk komputer, tablet, dan ponsel). Belajar mengatur tata letak modern dengan Flexbox dan Grid.





5. Sistem kontrol versi Git



Git dapat membantu Anda membawa proses pengkodean Anda ke tingkat selanjutnya. Ini adalah alat yang sangat diperlukan untuk pengembang yang memungkinkan Anda menyimpan informasi langkah demi langkah tentang semua perubahan dalam kode, kembali ke keadaan yang berbeda, dan banyak lagi. Dianjurkan untuk mempelajari cara bekerja dengan Git di terminal, serta berlatih: buat repositori di Github atau Gitlab dan coba fitur dasar Git di repositori pengujian Anda.





Praktek. Praktek. Praktek!





Pada tahap ini, saya sarankan Anda lebih banyak berlatih dan membuat proyek kecil Anda sendiri untuk mengingat materi yang dibahas. Tidak perlu membuat desain situs web sendiri, Anda dapat mengambil tata letak yang sudah jadi. Buat halaman arahan atau, misalnya, buat situs portofolio, simpan kode di Github selama pengembangan, dan coba hosting situs di hosting gratis untuk situs statis - Halaman Github . Jika Anda tidak memiliki cukup latihan, coba perhatikan kode orang lain dan ulangi. Ada cukup banyak tutorial video tentang topik ini di YouTube (misalnya, untuk kueri "tata letak situs menggunakan tata letak figma")



Jika Anda sudah mendalami HTML dan CSS, maka setelah melewati paragraf sebelumnya Anda bisa menjadi desainer layout website. Tetapi untuk mempelajari cara menulis aplikasi web interaktif dan menjadi pengembang front-end profesional, Anda perlu melanjutkan perjalanan Anda di dunia front-end dan menyelami pemrograman .



6. Bahasa pemrograman JavaScript



Jangan bingung antara JavaScript dengan Java. Pelajari dasar-dasar bahasa: variabel, objek, tipe data, fungsi, konteks dan closure, kelas. Bandingkan perbedaan antara spesifikasi EcmaScript lama dan baru. Setelah memahami dasar-dasarnya, lanjutkan ke hal-hal yang lebih kompleks: seluk-beluk pemrograman asinkron (callback, promise, async-await) dan membuat permintaan ke server (XmlHttpRequest, Ajax, Fetch, Cookie).





7. DOM (Document Object Model)



DOM adalah Model Objek Dokumen, pohon yang dibuat browser untuk merender halaman Anda di layar. Setelah Anda belajar bekerja dengan DOM, Anda dapat menggunakan JavaScript untuk membuat atau memodifikasi elemen pada halaman, menanggapi klik pengguna, dan banyak lagi. Bagian terpisah dari LearnJavascript dikhususkan untuk bekerja dengan DOM dan acara di browser .



Topik DOM juga dibahas secara rinci dalam JavaScript Ekspresif oleh Marein Haverbeck.



8. Node.js, NPM



Berkat platform perangkat lunak Node.js, JavaScript hanya dapat digunakan di luar browser. Dengan alat ini, Anda dapat menulis program konsol atau aplikasi sisi server.



Cobalah untuk menulis server kecil Anda sendiri .



Anda dapat menggunakan modul yang ditulis oleh pengembang lain di program JavaScript Anda. Lihat repositori online untuk paket NPM .



9. Babel



Babel Js adalah kompiler kode JavaScript yang memungkinkan Anda menggunakan fitur terbaru dari bahasa, seperti fungsi panah, kelas, rangkaian opsional, tanpa menunggu dukungan browser lengkap mereka. Anda hanya perlu mengkonfigurasi Babel dengan benar untuk versi EcmaScript yang diinginkan atau daftar browser yang didukung, kode sumber akan diubah secara otomatis.



Coba gunakan kompiler kode online di situs resmi untuk melihat seperti apa konstruksi JavaScript modern. Siapkan kompilasi kode untuk aplikasi JavaScript kecil dengan menyertakan Babel sebagai paket NPM.



10. Pembuat modul, Webpack



Saat membuat aplikasi, pengembang membagi kode menjadi beberapa bagian (modul), menghubungkan penangan kode tambahan, dan mengonfigurasi aplikasi untuk lingkungan yang berbeda (pengembangan dan produksi). Untuk membuat ini mungkin, dan kami tidak harus menghubungkan modul secara manual dalam file HTML dalam urutan yang diperlukan dan memantau perubahan, aplikasi menggunakan pengumpul modul (bundler).



Bundler menghubungkan dan menggabungkan modul dan dependensinya menjadi satu atau lebih file dalam urutan yang benar, dan juga memungkinkan transformasi kode tambahan.



Webpack adalah salah satu pembuat modul paling populer. Ini adalah asisten pengembang, meskipun mungkin tampak menakutkan pada awalnya. Fleksibilitasnya memungkinkan Anda untuk menyesuaikan build menggunakan berbagai macam plugin dan loader (CSS dan HTML sebelum dan sesudah prosesor, Babel, dll.), Mengoptimalkan sumber daya, memuat perubahan dengan cepat selama pengembangan menggunakan penggantian modul panas, dan banyak lagi.





11. Praprosesor CSS



Praprosesor CSS adalah add-on untuk CSS yang menyediakan sintaks baru yang nyaman bagi pengembang, menambahkan fitur baru yang membuatnya lebih mudah dan lebih cepat untuk mengembangkan dan memelihara gaya.



Praprosesor paling populer:





Keuntungan utama menggunakan praprosesor CSS adalah:



  • Modularitas. Anda akan dapat membuat kode CSS di berbagai file dan mengimpor gaya sesuai kebutuhan.
  • Bersarang. Penyeleksi sarang di dalam satu sama lain untuk struktur kode yang kompak dan logis. Ini akan meningkatkan keterbacaan dan mengurangi duplikasi (sangat berguna jika Anda menggunakan metodologi BEM untuk menulis CSS).
  • Menggunakan variabel dan fungsi CSS (mixin).
  • Anda dapat memilih preprocessor dengan sintaks yang sesuai untuk Anda (misalnya, kode CSS tanpa tanda kurung kurawal dan titik koma).


Saya juga menyarankan pada tahap ini untuk membiasakan diri Anda dengan alat transformasi gaya PostCSS dan, khususnya, dengan plugin Autoprefixer. Plugin ini memungkinkan Anda menambahkan prefiks vendor secara otomatis untuk properti CSS pada kode Anda.



12. Praprosesor HTML (pembuatan template)



Praprosesor HTML memiliki manfaat yang sama dengan praprosesor CSS. Mereka memungkinkan Anda untuk menulis markup HTML dengan lebih efisien, membagi kode menjadi modul, dan juga menggunakan kondisi, loop, mixin, warisan.



Mesin template populer:





Sesuaikan proyek Anda dengan menambahkan loader ke konfigurasi webpack untuk praproses kode CSS dan HTML.



13. Gaya kode dan linter



Gaya kode adalah sekumpulan aturan yang memungkinkan Anda membuat kode Anda konsisten, semudah mungkin, dan dapat dibaca oleh Anda dan pengembang lain. Aturan tersebut menjelaskan di mana dan apa indentasi dan tanda kurung harus, panjang baris maksimum, nama variabel, memungkinkan Anda untuk menentukan kode yang terlalu membingungkan atau tidak perlu dan banyak aspek lainnya.



Beberapa perusahaan memiliki gaya pengkodean sendiri. Salah satu aturan front-end yang terkenal adalah standar Airbnb , yang saya sarankan untuk Anda baca untuk meningkatkan kualitas kode Anda.



Ada alat khusus yang dapat memeriksa kode Anda secara otomatis dan memudahkan untuk mempertahankan kode Anda dalam gaya tertentu dengan menyiapkan konfigurasi proyek Anda satu kali:





Lihat dokumentasi alat, coba sambungkan ke proyek dan IDE Anda, ikuti gaya kode tertentu dalam proyek Anda untuk membuat aplikasi lebih baik!



14. Mempelajari framework / pustaka UI



Bereaksi, Angular atau Vue? Untuk tahun 2020, perjuangan utama ada di antara perpustakaan-perpustakaan ini. Anda dapat memilih salah satunya. Jika Anda menyukai perusahaan tertentu tempat Anda ingin bekerja, Anda dapat memilih kerangka kerja yang mereka gunakan.



Saya akan menyarankan Anda untuk memulai dengan React - React sangat populer di kalangan pengembang dan perusahaan, terus berkembang, mudah dipahami untuk pengembang front-end pemula, banyak alat lain dan komunitas besar telah berkembang di sekitarnya.



Mulai pelajari React dengan dokumentasi resmi , ini cukup mendetail. Jika Anda merasa itu tidak mencukupi, Anda dapat menemukan kursus lengkap tentang Udemy (misalnya, Modern React dan Redux- dalam bahasa Inggris, dengan penjelasan yang sangat jelas dan terperinci untuk pemula, latihan praktis, dan semua materi yang diperlukan tentang React dan perpustakaan).



Perhatikan penjelasan jenis parameter input untuk komponen React ( pemeriksaan tipe dengan PropTypes ), serta tulis komentar sesuai dengan standar JSDoc ( rangkaian artikel tentang penggunaan JSDoc).



Seiring kemajuan Anda, Anda perlu mempelajari cara mengelola status aplikasi. Perpustakaan yang membantu ini: Redux dan Mobx. Saya sarankan memulai dengan Redux - ini adalah perpustakaan paling populer yang berhubungan dengan React. Lihat dokumentasi atau terjemahan resmi . Saya juga merekomendasikan kursus dari salah satu penulis perpustakaan (Memulai Redux oleh Dan Abramov).



Kemudian mulailah menjelajahi perpustakaan untuk melakukan tindakan asinkron dengan nyaman (misalnya, permintaan ke server). Pustaka termudah untuk memulai adalah Redux Thunk ( dokumentasi ).



15. Pengujian otomatis



Pengujian adalah proses mengevaluasi bahwa semua modul aplikasi berperilaku seperti yang diharapkan. Dengan pengujian, Anda dapat menghindari banyak kesalahan yang mungkin tidak Anda sadari. Pelajari apa itu pengujian dan apa jenisnya ( Pengujian untuk boneka ). Belajar menulis pengujian unit untuk kode Anda menggunakan salah satu pustaka pengujian seperti Jest .



16. Mendalam





Kesulitan apa yang mungkin ada? Kesalahan di awal jalur







Kerangka belajar bukan pengetahuan dasar



Terkadang sepertinya lebih baik mempelajari framework atau library populer segera. Ini adalah kesalahan yang cukup umum, terutama di front-end: orang mulai mempelajari React atau coding dengan Bootstrap dan Material UI tanpa memahami dasar-dasarnya dan tidak memiliki cukup pengetahuan tentang HTML, CSS, dan JavaScript. Anda dapat menggunakan pendekatan ini jika Anda "lari jarak pendek" dan perlu menyelesaikan proyek dengan cepat. Tetapi jika Anda berencana untuk menjadi seorang pengembang, itu tidak akan membawa hasil yang diinginkan.





Anda tidak perlu benar-benar mengetahui setiap properti atau metode CSS di JS, Anda dapat mencarinya jika lupa. Penting untuk memahami konsep dasar dan kerumitan: inilah yang akan menjadi fondasi kokoh Anda dalam pengembangan front-end.



Belajar adalah kerja keras, disiplin diri dan banyak latihan



Merupakan kesalahan untuk mengharapkan bahwa Anda akan menangani semua materi dalam seminggu atau belajar JS dalam satu hari. Jumlah waktu yang Anda butuhkan adalah masalah yang sangat individual, dan kemungkinan besar, prosesnya akan memakan waktu lebih dari satu bulan.



Jangan khawatir, pelajari langkah demi langkah dan secara bertahap, praktikkan lebih banyak - dengan cara ini Anda bisa maju dalam belajar lebih cepat. Setiap orang membutuhkan waktu untuk mempelajari hal-hal baru.



Putuskan mengapa dan mengapa Anda ingin menjadi pengembang front-end. Frontend adalah area di mana Anda dapat menerapkan solusi menarik dan mengerjakan proyek yang akan digunakan oleh banyak orang di seluruh dunia! Selain itu, semakin banyak pengetahuan dan pengalaman yang Anda peroleh, semakin tinggi gaji Anda.



Ingat saat-saat yang memotivasi Anda, ketika kode Anda tidak berfungsi, dan blok berikutnya tidak akan sesuai dengan yang Anda inginkan :) Jika Anda ingin melihat hasil pekerjaan Anda, pelajari materi melalui tugas-tugas praktis atau membuat proyek Anda sendiri, dengan cara ini Anda akan lebih cepat mendapatkan keuntungan.



Menyalin kode orang lain



Jika Anda mengalami masalah dan kesalahan yang tidak dapat Anda selesaikan, jangan ragu untuk mencari bantuan di Google. Belajar menggunakan pencarian dan menemukan penyebab masalah, tetapi jangan menyalin kode orang lain secara membabi buta.



Pastikan untuk mencari tahu apa yang terjadi dalam solusi yang Anda temukan, dan mengapa demikian. Ini akan lebih lama dan lebih mahal, tetapi jika Anda tidak memahaminya, Anda cenderung menghadapi masalah serupa dan lagi-lagi tidak dapat menyelesaikannya sendiri, dan kode Anda akan berubah menjadi mie dengan gaya berbeda karena menyalin kode orang lain.



Jangan 100% mempercayai kode yang Anda temukan



Orang lain mungkin salah atau kurang pengalaman juga. Jika Anda menemukan tutorial video dari Master dalam JavaScript atau Layout, itu tidak selalu berarti bahwa apa yang Anda sajikan adalah solusi sempurna dan kode terbaik.



Lihatlah berbagai sumber dan bersikap kritis terhadap apa pun yang Anda temukan. Saat Anda mendapatkan pengalaman, Anda akan memahami kode dan pendekatan mana yang lebih baik, dan mana yang hanya mempersulit aplikasi Anda dan menambahkan kruk yang akan Anda temukan nanti.



Mempersiapkan Wawancara Pengembang Junior



Wawancara di berbagai perusahaan dapat dilakukan dengan cara yang sangat berbeda, saya ingin berbicara tentang pengetahuan yang diperlukan berdasarkan pengalaman saya.



Area yang paling sering diwawancarai untuk posisi developer front-end adalah tata letak, JavaScript, khususnya, asynchrony, dan pengetahuan tentang salah satu framework atau library front-end. Untuk posisi Junior, lebih banyak perhatian diberikan pada tata letak dan JavaScript.



Pertanyaan bisa bersifat teoritis dan praktis, untuk memecahkan masalah kecil.



Komunitas pengembang telah menyusun daftar sampel pertanyaan wawancara . Telusuri semua pertanyaan dan coba berikan jawaban. Jika Anda tidak bisa menjawab sesuatu, ini adalah sinyal untuk mengulang topik.



Situs masalah pemrograman dapat membantu Anda mempersiapkan diri untuk memecahkan masalah JavaScript, tempat Anda dapat berlatih online dan menguji keterampilan Anda (mulai dengan bagian masalah yang mudah). Tugas yang sangat populer adalah yang melibatkan penerapan metode untuk bekerja dengan array. Contoh tugas tersebut: memeriksa palindrome atau anagram.



Situs web dengan tugas pemrograman:





Saluran Telegram dengan tugas dan tes JavaScript (misalnya, @js_test) juga dapat membantu dalam memeriksa pengetahuan.



Tugas menerapkan algoritme yang sangat kompleks dan pengetahuan tentang struktur data seperti pohon dan grafik hampir tidak pernah diberikan dalam wawancara untuk developer front-end junior. Jadi jangan takut: walaupun wawancara tersebut tampak menakutkan bagi Anda, pada kenyataannya, jika Anda mampu menjawab semua pertanyaan di atas, kemungkinan besar Anda akan mendapatkan wawancara tersebut.



Sedikit tip: jika Anda tidak yakin dengan kemampuan Anda, tetap dapatkan wawancara dengan beberapa perusahaan. Dan bahkan jika Anda tidak mendapatkan tawaran, Anda akan memahami kelemahan Anda. Anda dapat mempersiapkan lebih baik untuk wawancara Anda berikutnya!





Terima kasih telah membaca sampai akhir. Saya harap artikel ini bermanfaat bagi Anda. Jika Anda tahu bahwa itu bisa bermanfaat bagi orang lain, maka bagikan.



Saya harap Anda beruntung dalam menaklukkan puncak baru!


More articles:


All Articles