Bagaimana memulai mengembangkan aplikasi





Selamat siang teman!



Saya sangat tidak suka melakukan promosi diri, tetapi dalam situasi di mana tim terdiri dari satu orang, suka atau tidak, Anda harus mengembangkan dan mempromosikan produk sendiri.



Siapa pun yang mencari tempat untuk mulai mengembangkan aplikasi web sangat mengetahui HTML5 Boilerplate ( situs resmi , repositori). Menurut pengembangnya, ini adalah "Template front-end web paling populer". Anda tidak dapat berdebat dengan yang paling populer, tetapi Anda dapat melakukannya dengan modernitas (sesuai dengan realitas modern pengembangan web). Dan ini tidak mengherankan: proyek itu dibuat sekitar 6 tahun yang lalu. Banyak hal telah berubah selama 6 tahun terakhir. Pada saat yang sama, sejauh yang saya tahu, tidak ada perubahan mendasar yang dilakukan pada proyek (var digunakan untuk mendeklarasikan variabel, ada kemungkinan menambahkan plugin jQuery, dll.), Kecuali, mungkin, site.webmanifest, yang tidak berguna tanpa service worker (dan lebih baik menggunakan .json).



Saya mengusulkan semacam alternatif - template pemula HTML modern ( situs resmi , repositori ).



Proyek tersebut meliputi:



  • index.html dengan semua meta tag dan tautan yang diperlukan (umum, microsoft, facebook, twitter, apple (ios), android, data terstruktur: schema.org dan json-ld)
  • contoh penggunaan tag HTML5 dan properti CSS3
  • contoh penggunaan modul CSS dan JavaScript
  • pekerja layanan offline-first
  • manifest.json penuh
  • express.js server dengan semua kemungkinan header keamanan (berguna saat menerapkan aplikasi di heroku atau layanan serupa yang mendukung node.js)
  • file netlify.toml dengan header yang sama dan koneksi awal dari sumber daya yang digunakan oleh halaman (berguna saat menerapkan aplikasi ke netlify)
  • robots.txt sederhana
  • sitemap.xml sederhana
  • minimal browserconfig.xml
  • max .gitignore
  • laman kesalahan 404 kreatif
  • contoh membangun proyek menggunakan webpack
  • sebagai eksperimen - contoh proyek AMP (teknologi baru dari Google untuk situs yang memprioritaskan seluler)


Index.html dan server.js (netlify.toml) tentu saja merupakan nilai utama. File-file ini memiliki tautan ke dokumentasi resmi (sumber kebenaran). Pekerja layanan dan manifes membuat aplikasi menjadi progresif. Ini berarti bahwa aplikasi dapat diinstal di telepon dan komputer dan berperilaku seperti aslinya. Dengan menyimpan sumber daya yang digunakan oleh aplikasi ke dalam cache, ia bekerja secara offline (tanpa adanya koneksi jaringan).



Untuk meningkatkan pengalaman pengembangan, alat-alat berikut telah dikembangkan sebagai tambahan:





Berikut adalah hasil pengujiannya (kekurangannya karena penggunaan resource pihak ketiga, seperti google analytics dan Yandex metrics):



Lighthouse







WebPageTest







SecurityHeaders







AMP







Juga harap perhatikan aplikasi utama saya, yang saya kembangkan sebaik mungkin - Banyak JavaScript (mungkin namanya bukan cukup berhasil, tetapi sepenuhnya mencerminkan esensi aplikasi). Omong-omong, template yang ditentukan digunakan selama pengembangannya.



Segala bentuk masukan, baik di sini maupun di GitHub, akan diterima.



Terima kasih atas perhatiannya dan awal minggu kerja yang baik.



All Articles