Teknologi pengembangan front-end yang mungkin tidak Anda perhatikan

"Jika kamu ingin hidup, bisa berputar." Ini tentang pekerjaan programmer front-end. Agar berhasil mengatasi tugas mereka, spesialis seperti itu harus menyelesaikan banyak masalah dan harus memiliki banyak kemampuan. Selain itu, sangat penting untuk tidak melupakan tujuan utama pengembangan situs web. Yakni, situs tersebut harus membantu orang untuk menyederhanakan tugas sehari-hari mereka.

Dalam posting ini, saya akan berbicara tentang berbagai aspek pengembangan web yang harus diketahui oleh setiap programmer dari profil yang relevan. Jika memungkinkan, saya akan memberikan tautan ke materi yang mendemonstrasikan contoh penggunaan kemampuan yang sesuai dan rekomendasi untuk penggunaan yang benar. Di sini saya akan fokus pada implementasi mekanisme tertentu di Angular, React dan Vue.

Antarmuka pengguna

▍ Tata Letak Halaman

Membangun aplikasi web dimulai dengan merancang tata letak yang menarik dan rapi yang akan menarik bagi pengguna dan membantu mereka menghabiskan banyak waktu di situs.



Ada banyak kerangka CSS di luar sana. Mungkin di antara mereka Anda akan menemukan yang paling cocok untuk Anda. Yang paling terkenal adalah Bootstrap dan, berkat fitur baru dari praprosesor CSS, Anda dapat menyesuaikan gaya kerangka kerja ini secara mendalam. Di sana Anda dapat menemukan berbagai komponen dan kontrol, yang penggunaannya secara konsisten memungkinkan Anda membuat situs yang dirancang secara konsisten.



Rilis alfa dari versi 5 dari Bootstrap saat ini keluar .



Jika Anda lebih suka membuat kumpulan gaya untuk proyek Anda sendiri (komponen, padding, container, dan sebagainya), Anda dapat mengalihkan perhatian Anda ke CSS Flexbox , menjadikan tata letak yang fleksibel dari elemen halaman web ini sebagai dasar kerangka CSS Anda sendiri.



CSS Grid mengambil pendekatan berbeda untuk mengatur konten halaman web dengan menempatkannya di dalam kotak.

▍Desain responsif

Daya tanggap adalah kemampuan situs untuk menyesuaikan kontennya dengan perangkat yang digunakan untuk melihatnya. Misalnya di smartphone dan di laptop, artikel ini akan terlihat berbeda.



Daya tanggap aplikasi web membantunya ditampilkan dengan benar di layar yang berbeda, meningkatkan keterbacaan konten, dan meningkatkan pengalaman pengguna.



Di MDN, Anda dapat mengetahui bahwa kueri media digunakan saat Anda perlu menerapkan gaya CSS yang berbeda untuk perangkat yang berbeda (misalnya, untuk printer atau monitor), serta mempertimbangkan karakteristik dan parameter perangkat tertentu (misalnya, untuk resolusi layar yang berbeda atau untuk lebar yang berbeda dari area pandang browser).



Kueri media CSS adalah alat yang ampuh untuk mendukung desain responsif.



Mereka dapat digunakan bersama dengan CSS Flexbox atau CSS Grid yang telah disebutkan. Jika Anda lebih suka menggunakan kerangka kerja CSS, kerangka kerja tersebut biasanya sudah mengimplementasikan kapabilitas yang sesuai. Dengan pendekatan ini, untuk membuat halaman responsif, cukup tambahkan kelas yang sesuai ke elemen.



Ketika kita berbicara tentang konsep daya tanggap yang diterapkan pada gambar , maka kita dapat memikirkan sebuah atribut srcset. Menggunakan atribut ini memungkinkan Anda untuk menampilkan gambar dengan ukuran berbeda tergantung pada karakteristik layar perangkat, yang membantu mengurangi jumlah data yang ditransfer dari server ke browser.

▍Komponen dan kontrol homogen

Pengguna akan senang bekerja dengan situs ini, yang komponen dan kontrolnya dirancang secara seragam, dengan gaya yang sama. Pendekatan desain ini memudahkan pengguna untuk menguasai fitur-fitur baru situs dan berfungsi sebagai kartu nama perusahaan.



Jika Anda ingin menggunakan framework dan library yang ada, Angular, React, atau Vue untuk mengembangkan proyek Anda, berikut beberapa contoh library gaya yang menerapkan prinsip Desain Material yang dirancang untuk alat ini:

• Angular. Pustaka Angular Material tempat Anda dapat menemukan komponen yang kuat dan CDK lengkap.
• Reaksi. Prinsip Desain Material diterapkan di komponen web Material UI .
• Vue. Di sini kami memiliki Vuetify , implementasi Desain Material untuk proyek Vue.

▍Form validasi dan penanganan error

Validasi data adalah tugas terpenting untuk proyek-proyek yang menerima sesuatu dari pengguna. Selain itu, tidak ada yang dapat mencegah aplikasi menerima data yang benar dari pengguna: baik masalah jaringan, maupun kesalahan pada server, maupun kesalahan yang dibuat oleh pengguna sendiri. Berikut adalah beberapa solusi validasi input pengguna yang dibuat untuk berbagai framework:

• Angular. Karena Angular adalah kerangka kerja lengkap, ia memberi kami API khusus untuk validasi formulir.
• Reaksi. Library React Hook Form mungkin adalah validator formulir yang paling umum digunakan dalam proyek React .
• Vue. Nama perpustakaan yang sesuai untuk Vue, vuelidate , dibangun di atas permainan kata yang menarik.

Pengalaman pengguna

▍Menggunakan mekanisme asynchronous

Memuat data ke dalam aplikasi atau menyimpan data dapat memakan waktu milidetik, detik, atau bahkan menit. Itulah mengapa penting untuk memberi tahu pengguna tentang operasi semacam itu menggunakan indikator yang sesuai dan tidak menghalangi pekerjaan pengguna dengan proyek tersebut.



Mesin JavaScript seperti promise dan API browser seperti Fetch dapat membantu kita melakukan tugas ini .

▍Dukungan untuk browser lama (polyfills)

Dunia pengembangan front-end berkembang sangat cepat. Hal yang sama bisa dikatakan untuk browser. Tetapi orang yang berbeda menggunakan browser yang berbeda dan versi yang berbeda pula. Oleh karena itu, untuk memastikan bahwa kodenya berfungsi dengan benar di semua platform yang digunakan, pengembang perlu menjaga kompatibilitas. Misalnya, versi lama IE tidak mendukung fitur JS dan CSS yang sama dengan versi terbaru Google Chrome. Polyfills



digunakan untuk memastikan bahwa proyek bekerja dengan benar di browser lama . Mereka dijelaskan dengan cukup baik dalam artikel ini : "Polyfill (polyfiller) adalah potongan kode (atau plug-in) yang menyediakan implementasi teknologi yang Anda, pengembang, harapkan akan temukan di antara kemampuan browser standar."



Untuk mengetahui apakah aturan CSS tertentu atau fungsi JS tertentu didukung dalam versi browser tertentu, lihat situs Can I Use .



Jika kita berbicara tentang menyelesaikan masalah dukungan browser di Angular, React dan Vue, maka situasinya seperti ini:

• Angular. Ada bagian khusus dalam dokumentasi Angular untuk dukungan browser.
• Reaksi. Proyek yang dibuat dengan dukungan Create React App , seperti ReactDOM , browser yang dimulai dengan IE 9. Dukungan ini didasarkan pada penggunaan polyfills.
• Vue. Detail dukungan untuk browser lama dijelaskan di sini dalam dokumentasi CLI.

▍Lokalisasi dan Internasionalisasi

Situs Anda dapat memiliki pengguna dari seluruh dunia. Mempertimbangkan fakta ini saat membuat proyek akan meningkatkan kegunaan situs bagi semua orang yang memutuskan untuk melihatnya.



Lokalisasi (l10n, lokalisasi) adalah, sebagaimana didefinisikan oleh W3C, adaptasi konten produk, program atau dokumen ke bahasa, budaya, dan persyaratan lain dari pasar sasaran tertentu.



Internasionalisasi (i18n, internasionalisasi) didasarkan pada materi W3C, pembuatan dan pengembangan konten produk, program atau dokumentasi, memungkinkan pelokalan yang mudah untuk pasar sasaran yang berbeda dalam budaya, wilayah atau bahasa.



Kedua konsep ini saling terkait dan dapat diimplementasikan dengan cara yang berbeda. Ini termasuk, misalnya, teknik-teknik berikut:

• Gunakan daftar drop-down di situs dengan daftar bahasa yang didukung oleh proyek.
• Mengakses informasi tentang lokasi geografis pengguna (menggunakan API browser Geolocation ) dan mengadaptasi situs web sesuai dengan data yang diterima.
• Menentukan informasi bahasa di URL. Sebagai contoh, mungkin terlihat seperti ini: example.com?lang=enatau seperti ini: example.com/enatau bahkan jadi: en.example.com.

Sekarang untuk konsep ini di Angular, React, dan Vue.

• Angular. Angular, sekali lagi, adalah kerangka kerja yang lengkap, ini memberi pengembang solusi yang sudah jadi .
• Reaksi. Tugas internasionalisasi proyek dapat diselesaikan menggunakan pustaka react-i18next , yang populer di lingkungan React .
• Vue. vue-i18n.

▍

Aksesibilitas (a11y, aksesibilitas) adalah kemampuan situs untuk beradaptasi dengan kebutuhan pengguna penyandang disabilitas.



Aksesibilitas situs web sering diabaikan. Untuk membuat proyek dapat diakses oleh pengguna penyandang disabilitas, mungkin perlu untuk merevisi pendekatan pembentukan pengalaman pengguna yang digunakan di atasnya, yang terkadang membutuhkan desain ulang proyek yang mendalam. Bagaimanapun, penting untuk mempertimbangkan kebutuhan semua pengguna, terutama mengingat bahwa perubahan kecil dalam kode proyek dapat secara signifikan meningkatkan kegunaan situs bagi mereka yang merasa sulit untuk menggunakan situs biasa.



Berbagai teknik dapat diterapkan untuk membuat proyek web dapat diakses. Ini termasuk yang berikut:

• Menggunakan atribut gambar alt.
• Penggunaan atribut ARIA untuk mendesain deskripsi konten halaman situs.
• Dukungan untuk kemampuan mengubah ukuran teks.
• Mode kontras tinggi tersedia.
• Dukungan untuk navigasi situs menggunakan keyboard, khususnya tombol TABdan tombol panah.

Proyek a11yproject.com menerapkan gagasan untuk menstandarisasi konsep ini. Inisiatif ini patut dihormati! Framework dan library JS utama juga berupaya untuk mendukung pengembangan situs yang dapat diakses:

• Angular. Ada bagian khusus dalam dokumentasi untuk kerangka ini . Pengembangan proyek yang dapat diakses didukung di tingkat Angular CDK .
• Reaksi. Aksesibilitas juga dibahas dalam dokumentasi untuk perpustakaan React. Ada juga perpustakaan khusus - react-a11y . Tetapi pustaka ini tidak lagi didukung, jadi gunakan dengan hati-hati dan ingatlah bahwa pustaka ini direncanakan untuk diganti dengan pustaka react-ax .
• Vue. Plugin vue-a11y akan membantu Anda mengembangkan proyek yang dapat diakses di Vue . Pertimbangan aksesibilitas juga dipertimbangkan saat membuat perpustakaan vuetify .

▍Notifikasi

Untuk tetap berhubungan dengan pengunjung situs Anda, Anda dapat menggunakan Pemberitahuan API browser . Dengan bantuannya, Anda dapat memberi tahu pengguna bahwa sesuatu yang baru telah muncul di situs.

Memuat dan memproses data

▍Satu sumber data yang andal

Alat manajemen status aplikasi, yang mendapatkan popularitas pada tahun 2015, sekarang harus dimiliki oleh hampir semua proyek web. Meskipun bidang manajemen status aplikasi tidak langsung, menggunakan solusi khusus biasanya merupakan metode yang sederhana dan efektif untuk memusatkan data aplikasi. Semua alat manajemen status didasarkan pada pola Flux.





Implementasi NgRx dari pola Flux (source - ngrx.io )



Alat ini menggunakan nama yang berbeda untuk entitas yang sama. Misalnya, apa yang NgRx sebut selektor disebut getter di Vuex. Apa yang disebut Angular reduksi disebut mutasi di Vue.



Berikut adalah alat manajemen negara yang digunakan di Angular, React dan Vue:

• Angular. "Manajemen keadaan reaktif untuk Angular": NgRx .
• Reaksi. Di sini, tentu saja, Redux digunakan .
• Vue. Vuex digunakan untuk mengelola status aplikasi Vue .

▍Mendownload data

Ada berbagai cara untuk memuat data ke dalam aplikasi. Yang paling umum adalah menggunakan permintaan HTTP yang diarahkan ke API web. Browser memiliki Fetch API yang dirancang untuk mengatur pemuatan data, tetapi untuk framework dan pustaka utama, solusi mereka sendiri telah dikembangkan:

• Angular. Dokumentasi Angular merekomendasikan penggunaan rxjs dan pendekatan berbasis Observer (dapat diamati atau Subjek digunakan di sini).
• Reaksi. Dokumentasi React merekomendasikan penggunaan Fetch API untuk memuat data.
• Vue. Komunitas Vue lebih suka menggunakan perpustakaan Axios . Penerapan mekanisme pemuatan data ini didasarkan pada janji.

Ketika berbicara tentang mekanisme untuk memuat data ke dalam aplikasi web, GraphQL layak untuk disebutkan . Teknologi ini telah mengubah pendekatan yang digunakan saat memuat data di aplikasi front-end. Saat menerapkannya, "Klien menentukan apa yang dia butuhkan menggunakan bahasa kueri." Menggunakan GraphQL, kita bisa mendapatkan apa yang kita butuhkan dari sumber data jarak jauh dan tidak lebih.



Berikut adalah implementasi GraphQL untuk alat frontend yang kami minati:

• Angular. apollo-angular
• Reaksi. bereaksi-apollo
• Vue.js. vue-apollo

▍Penyimpanan data lokal

Penyimpanan data lokal adalah penyimpanan data di komputer pengguna. Data dapat disimpan menggunakan cookie , serta menggunakan Penyimpanan lokal dan sessionStorage.

▍Pekerja web

Pekerja web adalah teknologi yang diperkenalkan oleh API browser baru. Ini memungkinkan kode JavaScript untuk berjalan di latar belakang, mengurangi beban pada utas utama dan tidak mempengaruhi kinerja kode halaman web.



Pekerja web dapat diterapkan di Angular, React dan Vue:

• Angular. Ada bagian khusus dalam dokumentasi Angular untuk topik ini.
• Reaksi. Ada hook React khusus yang bisa ditemukan di sini .
• Vue. Dalam aplikasi Vue, pekerja web nyaman digunakan dengan perpustakaan vue-worker .

Jaringan dan kinerja

▍Ukuran bundel aplikasi

Pertumbuhan pasar ponsel cerdas telah merevolusi dunia pengembangan web. Sekarang, saat membuat situs web, pertama-tama kita perlu mempertimbangkan kebutuhan pengguna seluler. Semakin kecil jumlah data yang harus dimuat perangkat seluler saat bekerja dengan proyek web, semakin baik. Menurut grafik di bawah, penggunaan internet seluler melampaui penggunaan desktop pada tahun 2016.





Penggunaan Internet di Seluruh Dunia (sumber - broadbandsearch.net )



Hal ini memberi tahu kita secara pasti betapa pentingnya ukuran bundel proyek web saat ini. Ukuran file yang diunduh harus sekecil mungkin untuk menghemat sumber daya pengguna ponsel. Untungnya bagi kami, pengembang alat front-end utama dan add-on untuk mereka mempertimbangkan hal ini saat mengembangkan proyek mereka. Mengurangi ukuran bundel aplikasi juga berarti kinerja yang lebih baik.

• Angular. Bundel aplikasi angular mudah dan nyaman untuk diperiksa dengan webpack-bundle-analyzer . Selain itu, CLI Angular memberi kita opsi stats-jsonyang memungkinkan kita menghasilkan laporan setelah membuat bundel.
• React. Create React App , .
• Vue. Vue, Angular, report, .

▍- -

Pekerja layanan adalah skrip yang berjalan di browser web dan mengelola caching data aplikasi. Ini adalah salah satu mekanisme yang digunakan untuk mengubah situs web biasa menjadi Aplikasi Web Progresif (PWA). Anda dapat bekerja dengan PWA seperti situs web biasa menggunakan HTTPS, tetapi Aplikasi Web Progresif memiliki beberapa fitur khusus. Kemampuan tersebut mencakup, misalnya, menginstal aplikasi semacam itu pada perangkat seluler tanpa harus menerbitkannya di toko aplikasi khusus dan aplikasi pendukung tanpa akses ke Internet.



Anda dapat menggunakan pekerja layanan di Angular, React dan Vue:

• Angular. Angular menyediakan mekanisme untuk menggunakan pekerja layanan.
• Reaksi. Berikut adalah tutorial tentang cara mengembangkan PWA dengan Create React App.
• Vue. Kemampuan untuk membuat PWA di Vue didukung di tingkat CLI.

▍Server Rendering

Server-Side Rendering (SSR) adalah sekumpulan teknologi yang merevolusi pengembangan aplikasi berdasarkan Angular, React, dan Vue. Dengan SSR, HTML dibuat di server dan dikirim ke browser. Setelah itu, markup HTML statis dibawa ke status kerja, dan aplikasi web sepenuhnya siap untuk digunakan pada klien. Ada beberapa tujuan saat menggunakan rendering server:

• Meningkatkan situs SEO.
• Akselerasi rendering situs di browser.

Berikut adalah solusi SSR untuk alat frontend yang kami teliti:

• Angular. Di sana digunakan Angular Universal .
• Reaksi. Untuk rendering sisi server dari aplikasi React, Next.js digunakan .
• Vue. Rendering sisi server aplikasi Vue dilakukan dengan menggunakan kerangka kerja NuxtJS .

▍Generator Situs Statis

Dengan meningkatnya penggunaan Jamstack , Static Site Generators (SSGs) telah menjadi teknologi yang sangat dicari. Aplikasi Jamstack adalah jenis aplikasi web yang kontennya siap untuk browser dan pada dasarnya tidak memerlukan server web (materi ini dapat disajikan ke klien langsung dari CDN). Rincian tentang situs semacam itu dapat ditemukan dengan mengikuti tautan di atas. Di sini kami hanya mencantumkan kekuatan utama SSG:

• Kecepatan: Generator situs statis membuat halaman situs selama pembuatan proyek, bukan saat halaman ini diminta oleh klien.
• Keamanan: penggunaan SSG memungkinkan Anda meninggalkan sistem manajemen konten (CMS), yang sering menjadi sasaran serangan peretas.
• Sederhanakan Penskalaan: Proyek web menggunakan SSG adalah kumpulan file yang dapat ditransfer ke klien dari mana saja. Ini membuatnya lebih mudah untuk menyimpan file seperti itu di CDN. Hasilnya, ternyata skala situs statis sangat baik.
• Proses pengembangan yang disederhanakan: Proyek SSG tidak memerlukan backend dan database. Ini memudahkan pengembang.

Ada solusi SSG untuk Angular, React dan Vue:

• Angular. Scully .
• Reaksi. Gatsby (Bereaksi GraphQL +), Next.js .
• Vue. Menjengkelkan , Nuxt .

Proyek SSG lainnya adalah sebagai berikut: 11ty , Hugo , Jekyll .

Analytics

▍Pemantauan perilaku pengguna dan pengujian A / B

Mengamati perilaku pengguna di situs adalah opsional, tetapi kepemilikan data semacam itu memberikan kontribusi yang signifikan untuk meningkatkan proyek web. Ada kelas alat khusus yang dirancang untuk mengumpulkan informasi tentang bagaimana pengguna berinteraksi dengan situs. Alat ini memungkinkan pengembang situs untuk lebih mempertimbangkan kebutuhan pengguna dan, melalui pengujian A / B, membantu memilih alternatif yang paling sesuai. Kami berbicara tentang kemampuan situs, tentang pola perilaku pengguna yang mereka dukung, tentang desain.



Berikut beberapa solusi untuk memantau perilaku pengguna dan pengujian A / B:

• Google Analytics (GA). Ada panduan untuk menggunakan GA di Angular , React, dan Vue .
• Kameleoon. — A/B- -.

▍ -

Sulit untuk mengembangkan aplikasi web berkinerja tinggi dalam sekali jalan. Namun, misalnya, aplikasi yang telah dioptimalkan untuk mempercepat pemuatannya akan menghasilkan lebih banyak emosi positif dari pengguna daripada versi yang lebih lambat. Ada berbagai proyek yang menganalisis situs dan memberikan rekomendasi untuk perbaikannya. Misalnya - Wawasan PageSpeed dari Google.



Di antara alat pengembang Google Chrome, Anda dapat menemukan alat yang sangat berharga untuk menganalisis kinerja situs - Lighthouse . Ini mengevaluasi situs pada lima kriteria (kinerja, aksesibilitas, praktik terbaik, SEO, PWA) menggunakan skala 100 poin. Setelah analisis, laporan dibuat dengan rekomendasi untuk meningkatkan situs.





Menganalisis Situs dengan Lighthouse



Penganalisis kinerja lain yang dapat Anda temukan di antara alat pengembang Chrome adalah panel Cakupan , yang memungkinkan Anda mencari kode JS dan CSS yang tidak digunakan. Dengan mengecualikan kode tersebut dari proyek, Anda dapat mengurangi ukuran bundelnya. Ini akan mempercepat pemuatan situs, yang akan terlihat terutama di perangkat seluler.

▍SEO

SEO, pengoptimalan mesin pencari, adalah hal yang perlu Anda lakukan untuk meningkatkan peringkat situs di mesin pencari, seperti Google, Bing, DuckDuckGo, dan banyak lainnya. Situs yang dioptimalkan dengan baik menjadi lebih terlihat. Padahal, saking pentingnya dalam dunia web development bahkan ada posisi khusus: “SEO Specialist”.



Jika kita berbicara tentang SEO di Angular, React dan Vue, maka kita mendapatkan yang berikut:

• Angular. , Angular- Angular Universal-.
• React. SEO React-. — React-.
• Vue. Vue-.

Saya setuju bahwa pengembangan front-end adalah bidang keahlian yang luas dan selalu berubah. Faktanya, jika seseorang mencoba menjadi pengembang universal, yang tahu segalanya dan bisa, akan sangat sulit baginya untuk mencapai ini, dan itu akan memakan waktu yang sangat lama. Selain itu, setiap proyek web memiliki kebutuhan dan prioritasnya masing-masing. Itulah mengapa perlu untuk memutuskan yang paling penting di awal pekerjaan pada suatu proyek. Ini akan memungkinkan Anda untuk tidak terpencar, memilih dan mempelajari hanya yang paling diperlukan, dan merencanakan arsitektur proyek sehingga sesuai dengan tujuannya.



Teknologi pengembangan front-end baru apa yang menurut Anda paling menjanjikan?