💐 👨🏻‍💻 🥔 Front-end toolkit: utilitas dan fitur yang berguna untuk mempercepat pengembangan 😍 👵🏼 👨🏿‍🔧

Lewat sudah hari-hari ketika cukup bagi fronttender untuk membuka Notepad, menulis beberapa baris kode, memeriksanya di browser dan mengunggahnya ke server melalui FTP. Pengembangan antarmuka pengguna modern telah menjadi jauh lebih rumit. Ekosistem JavaScript tumbuh dan berubah dengan sangat cepat sehingga mudah dikacaukan. Dalam posting ini saya akan memberi tahu Anda apa yang menggunakan tim front-end Parallels untuk mengoptimalkan kinerja.

Saya yakin bahwa saat ini, di suatu tempat di dunia, dua vendor front-end secara serius berdebat tentang kerangka mana yang lebih baik untuk digunakan untuk proyek tersebut. Dan yang ketiga terhubung ke mereka - lawan kuat dari frame. Dia mengklaim bahwa Anda perlu menulis dalam JavaScript vanilla, karena semua pribluds progresif ini hanya mengembang kode dengan dependensi yang tidak perlu dan umumnya dirancang untuk mereka yang tidak dapat memprogram. Diskusi mereka sepertinya tidak akan berakhir. Satu jam kemudian, semua orang diam-diam akan bubar ke pekerjaan. Setiap orang akan tetap menurut pendapat mereka sendiri dan akan bekerja seperti dulu.

Menurut pendapat saya, perselisihan seperti itu lebih buruk daripada perselisihan tentang apa yang muncul sebelumnya, ayam atau telur. Karena satu-satunya solusi yang efektif untuk pengembangan front-end bebas masalah tidak ada. Saya setuju bahwa semua fungsi dasar dapat dilakukan tanpa menggunakan Angular, React, Vue.js dan kerangka kerja serupa. Tetapi jika tujuannya adalah kerja sama dan Anda membuat aplikasi skala besar bukan hanya satu, tetapi sebagai sebuah tim, itu lebih mudah bagi mereka.

Tentu saja, Anda dapat melakukannya tanpa mereka, tetapi mereka memungkinkan untuk tidak membuang waktu membuat standar, mengatur struktur (Anda selalu tahu di mana itu), meringankan rutinitas dan mempercepat pengembangan. Jika kita menganggap bahwa bahasa adalah alfabet, maka kerangka kerja dapat dianggap sebagai ungkapan dengan dialog klise yang membuatnya mudah untuk membangun komunikasi.

Dalam posting ini, saya akan membagikan alat yang berguna yang saya dan tim gunakan saat membuat antarmuka pengguna. Mereka sangat menyederhanakan pengembangan bersama dan dukungan proyek lebih lanjut.

***
Saya pikir untuk awalnya, ada baiknya menceritakan sedikit tentang diri Anda. Saya memasuki dunia IT sembilan tahun lalu, pada tahun 2011. Dia mulai sebagai tumpukan penuh dalam satu organisasi kecil. Kemudian dia terlibat dalam aplikasi mobile hybrid, dia bertanggung jawab atas bagian dari logika yang ada di WebView. Dan beberapa tahun kemudian dia berakhir di Parallels. Di sini saya bekerja di tim Cloud, yang merupakan penyedia solusi web untuk semua produk perusahaan. Sebagian besar fitur bisnis mengharuskan saya untuk memikirkan dan mengimplementasikan tugas-tugas front-end. Sekarang fokus pada pengembangan portal Akun Saya.

Seperti yang mungkin sudah Anda pahami dari teks di atas, pembuatan antarmuka aplikasi web ini bukannya tanpa kerangka. Kami memilih Vue.js. Untuk membuatnya menyenangkan untuk bekerja dengannya, mereka juga menggunakan alat tambahan. Inilah yang membantu kami mengoptimalkan proses pengembangan sebanyak mungkin.

Vue CLI

Utilitas baris perintah ini mencakup banyak fitur berguna dan dirancang untuk pengembangan proyek cepat. Secara kasar, ini menciptakan kerangka kerja standar untuk peluncuran dan memungkinkan Anda untuk fokus membuat aplikasi tanpa berpikir pada tahap awal tentang alat dan konfigurasi perakitan. Mereka dapat disesuaikan dengan kebutuhan proyek nanti.

Vue CLI menyediakan dukungan untuk teknologi pengembangan web inti. Di luar kotak adalah alat-alat seperti Webpack, Babel, TypeScript, ESLint, Sass. Selain itu, ada dukungan bawaan untuk pengujian unit dan end-to-end menggunakan Mocha dan Nightwatch.

Vue devtools

Ekstensi untuk peramban yang memungkinkan Anda untuk men-debug aplikasi secara real time. Ini memiliki akses ke properti dan metode komponen, daftar semua peristiwa. Anda dapat sepenuhnya mengontrol keadaan aplikasi melalui halaman web dan tidak menunggu partisi untuk melihat hasilnya.

Bekerja di Chrome dan Firefox. Tidak ada ekstensi resmi untuk peramban lain, tetapi Anda dapat menjalankan Vue Devtools melalui aplikasi Electron. Maka alat akan tersedia di lingkungan apa pun.

Zeplin

Layanan ini membuat transfer tata letak ke pengembangan menjadi nyaman. Seperti di perusahaan besar mana pun, kami memiliki satu set komponen UI. Sebelumnya, itu ada di file PSD, dan karena itu, aksesnya sangat kacau. Dan di Zeplin ada hal seperti itu, yang disebut panduan gaya global.

Di dalamnya Anda bisa mengumpulkan semua aturan untuk membangun antarmuka perusahaan. Untuk setiap komponen UI, kode CSS dihasilkan secara otomatis - warna, ukuran, indentasi dan properti lainnya dari setiap blok yang membentuk elemen ditunjukkan. Artinya, gaya tidak perlu lagi diimplementasikan setiap kali dari awal, yang sangat mempercepat pekerjaan. Era PSD berakhir.

Plus, ada riwayat semua perubahan. Anda dapat dengan mudah melacak bagaimana itu pada tahap awal dan apa yang terjadi pada akhirnya.

Git url sebagai ketergantungan

Ini adalah fitur npm yang kami gunakan. Kami perlu berbagi satu set komponen UI sehingga kolega di dalam perusahaan memiliki akses ke sana dan dapat menggunakannya untuk kebutuhan mereka. Solusi paling jelas untuk masalah ini adalah paket npm. Tapi kami tidak menginginkannya di registri publik, server npm lokal bukan ide yang baik, jadi kami menggunakan bundel git + npm.

Dengan demikian, setiap karyawan Parallels memiliki akses ke basis kode UI, dan karena itu git, masalah versi juga diselesaikan. Tidak akan ada masalah karena pembaruan, tidak ada yang akan rusak.

Penjaga

Untuk mengumpulkan kesalahan dan log yang terjadi di sisi klien, tanpa menunggu keluhan, kami menghubungkan Sentry . Alat ini melacak eksekusi kode di browser khusus.

Jika bug keluar, permintaan secara otomatis dikirimkan kepada kami dengan laporan lengkap yang mencerminkan esensi insiden dan daftar tindakan yang mendahuluinya. Berdasarkan data ini, sangat mudah untuk menemukan alasan dan memperbaiki semuanya.

Itu juga memungkinkan kami sedikit menurunkan dukungan teknis kami, menyelamatkan kolega kami dari panggilan dan panggilan yang tidak perlu.

Tentang bahaya kecanduan

Akhirnya, sedikit saran. Cobalah untuk menulis utilitas sendiri. Baru-baru ini perpustakaan dengan solusi siap pakai telah menjadi sangat populer. Datang ke titik bahwa tender front-end mengambil dependensi bahkan untuk fungsi "single-line" yang mereka dapat menulis dengan mata tertutup. Apa yang mengancam ini? Sebuah kegagalan.

Sebuah kisah instruktif terjadi empat tahun lalu. Satu orang menghapus paket 11-line-nya dari registry npm dan dengan demikian memecah sekitar seribu proyek. Pengembang di seluruh dunia mulai menerima pesan kesalahan ketika mencoba untuk menyebarkan aplikasi mereka karena kurangnya modul kecil yang disebut "pad-kiri".

Jadi jangan malas, jangan ganti kode dengan banyak dependensi. Andalkan diri Anda dan tulis utilitas kecil sendiri, dan gunakan solusi perpustakaan yang sudah jadi hanya untuk fungsi kompleks - di mana mereka benar-benar membantu untuk tidak menemukan kembali roda.