Keuntungan dan kerugian membangun aplikasi web satu halaman [ditutup]

52

Saya mendekati akhir fase prototipe / bukti konsep untuk proyek sampingan yang sedang saya kerjakan, dan mencoba untuk memutuskan beberapa keputusan desain aplikasi berskala lebih besar. Aplikasi ini adalah sistem manajemen proyek yang lebih disesuaikan dengan proses pengembangan tangkas. Salah satu keputusan yang perlu saya buat adalah apakah akan menggunakan aplikasi multi-halaman tradisional atau satu halaman.

Saat ini prototipe saya adalah pengaturan multi-halaman tradisional, namun saya telah mencari backbone.js untuk membersihkan dan menerapkan beberapa struktur pada kode Javascript (jQuery) saya. Sepertinya sementara backbone.js dapat digunakan dalam aplikasi multi-halaman, itu lebih bersinar dengan aplikasi satu halaman. Saya mencoba untuk membuat daftar kelebihan dan kekurangan menggunakan pendekatan desain aplikasi satu halaman. Sejauh ini saya punya:

Keuntungan

  • Semua data harus tersedia melalui semacam API - ini adalah keuntungan besar untuk kasus penggunaan saya karena saya ingin memiliki API untuk aplikasi saya. Saat ini sekitar 60-70% panggilan saya untuk mendapatkan / memperbarui data dilakukan melalui REST API. Melakukan aplikasi satu halaman akan memungkinkan saya menguji REST API saya dengan lebih baik karena aplikasi itu sendiri akan menggunakannya. Ini juga berarti bahwa seiring pertumbuhan aplikasi, API itu sendiri akan tumbuh karena itulah yang digunakan oleh aplikasi; tidak perlu mempertahankan API sebagai tambahan pada aplikasi.

  • Aplikasi yang lebih responsif - karena semua data yang dimuat setelah halaman awal dijaga agar tetap minimum dan dikirimkan dalam format yang ringkas (seperti JSON), permintaan data umumnya akan lebih cepat, dan server akan melakukan pemrosesan yang sedikit lebih sedikit.

Kekurangan

  • Duplikasi kode - misalnya, kode model. Saya harus membuat model di sisi server (PHP dalam hal ini) dan sisi klien dalam Javascript.
  • Logika bisnis dalam Javascript - Saya tidak bisa memberikan contoh konkret tentang mengapa ini akan buruk tetapi tidak terasa benar bagi saya memiliki logika bisnis dalam Javascript yang dapat dibaca siapa pun.
  • Kebocoran memori Javascript - karena halaman tidak pernah dimuat ulang, kebocoran memori Javascript dapat terjadi, dan saya bahkan tidak tahu harus mulai dari mana untuk debug.

Ada juga hal-hal lain yang seperti pedang bermata dua. Misalnya, dengan aplikasi satu halaman, data yang diproses untuk setiap permintaan bisa menjadi jauh lebih sedikit karena aplikasi akan meminta data minimum yang dibutuhkan untuk permintaan tertentu, namun itu juga berarti bahwa mungkin ada lebih banyak permintaan kecil untuk server. Saya tidak yakin apakah itu hal yang baik atau buruk.

Apa saja kelebihan dan kekurangan aplikasi web satu halaman yang harus saya ingat ketika memutuskan ke mana saya harus pergi untuk proyek saya?

ryanzec
sumber
Basecamp , versi baru dari basecamphq melakukan pekerjaan yang cukup baik dengan pengaturan satu halaman IMO.
Hakan Deryal
Anda dapat menemukan kebocoran memori dengan inspektur heap chrome: gent.ilcore.com/2011/08/finding-memory-leaks.html
Joeri Sebrechts
mandatory xkcd.com/1309
Pieter B

Jawaban:

17

Kerugian terbesar adalah bahwa klien harus mengaktifkan JavaScript dan cukup kuat untuk menjalankannya dalam jumlah yang wajar. Ini juga lebih sulit untuk memenuhi masalah aksesibilitas atau hal lain yang bergantung pada penguraian HTML statis (meskipun sesuatu yang mengetahui API spesifik Anda mungkin dapat melakukan lebih baik daripada pengikisan HTML). Akhirnya, lebih mudah untuk memiliki kebocoran memori yang signifikan.

Sejauh kode duplikat atau menempatkan logika bisnis pada klien - saya tidak yakin berapa banyak yang harus Anda lakukan. Jika model pada klien adalah View-Model (model yang cocok dengan dunia seperti UI melihatnya, bukan model bisnis) maka logika yang cocok dengan ViewModel hingga model bisnis dapat berada pada klien, server, atau sedikit keduanya. Itu tergantung pada bagaimana perasaan Anda tentang memiliki API berisi fasad khusus klien vs. meminta klien menerjemahkan input UI ke dalam panggilan API.

Anda mungkin juga ingin melihat di knockout.js. Saya tidak bisa mengatakan apakah itu lebih baik daripada backbone tetapi mungkin lebih cocok dengan proyek Anda.

psr
sumber
Ya saya kira sebagian besar duplikasi kode akan ada validasi data yang baik-baik saja. Saya baik-baik saja dengan persyaratan javascript diaktifkan karena saya tidak peduli aksesibilitas untuk proyek ini (seperti pembaca layar dan apa yang tidak). Adapun masalah kebocoran memori javascript yang menjadi perhatian saya, dengan tautan yang disediakan di komentar pertanyaan saya, yang benar-benar meniadakan itu (chrome adalah browser pengembangan utama saya).
ryanzec
7

Kekurangan yang sering saya lihat dengan Aplikasi Web Halaman Tunggal:

  • Ketidakmampuan untuk menautkan ke bagian tertentu dari situs, seringkali hanya ada 1 titik masuk.
  • Tombol kembali dan maju yang tidak berfungsi.
  • Penggunaan tab terbatas atau tidak ada.

(terutama ponsel :)

  • Butuh waktu sangat lama untuk memuat.
  • Tidak berfungsi sama sekali.
  • Tidak dapat memuat ulang halaman, kehilangan jaringan yang tiba-tiba membawa Anda kembali ke awal situs.

Semua ini dapat dikerjakan, tetapi dari apa yang saya lihat, sebagian besar sitebuilder tidak.

Pieter B
sumber
9
1,2 dan 6 pada dasarnya hanya simfom dari masalah yang sama. Bahwa pembuat tidak menggunakan tautan API / hash riwayat.
Martin Hansen
11
Jawaban ini sudah usang, Sebagian besar kerangka kerja aplikasi satu halaman memiliki cara untuk mengatasi masalah di atas
Luis
@Luis selagi teknologinya ada, terlalu sering tidak digunakan.
Pieter B
5

Ada satu klien yang sangat penting yang tidak pernah menjalankan Javascript: Perayap Google (mulai 2012) . (Bing juga tidak menjalankan JS, saya kira.)

Anda harus memberikan versi non-AJAX yang wajar dari setiap halaman yang perlu diindeks, atau tautan ke halaman yang perlu diindeks.

Jika situs Anda kecil, Anda dapat memberikan versi yang sangat mendasar dari beberapa halaman hanya untuk mengindeks bot.

Jika sebagian besar konten situs hanya untuk pengguna terdaftar, atau tidak perlu diindeks karena alasan lain, Anda dapat membuat seluruh ruang yang tidak diindeks sebagai aplikasi satu halaman, dengan pencarian Anda sendiri, blackjack, dll.

Jika tidak satu pun dari ini, Anda mungkin lebih baik mengembangkan situs multi-halaman dari awal, dan hanya menyediakan pembaruan AJAX di mana ia tidak mengubah 'tujuan umum' halaman.

9000
sumber
4
Googlebot tidak membaca dan bahkan menjalankan beberapa Javascript sekarang. Lihat googlewebmastercentral.blogspot.com/2011/11/...
jfrankcarr
2
Untuk pertanyaan khusus ini, ini adalah aplikasi manajemen proyek. Mungkin bukan situs yang layak untuk SEO.
Jordan
SEO bukan masalah besar bagi sebagian besar halaman meskipun akan lebih baik untuk dapat mem-SEO isu-isu individual karena akan dapat dikonfigurasi untuk memungkinkan akses anonim ke dalamnya (sehingga jika pengguna mencari masalah yang mereka alami dengan produk, mereka dapat temukan masalah yang terkait dengannya di pelacak).
ryanzec
1
2015 update: Google tidak mengeksekusi JS
rinogo
3

-Duplikasi kode - Misalnya, kode model. Saya harus membuat model di sisi server (PHP dalam kasus ini) dan sisi server dalam javascript.

Anda berada di dunia PHP tetapi ada strategi pembuatan kode di dunia .NET untuk membuat proksi JavaScript WCF secara otomatis. Lihat di sini

Saya tidak tahu opsi apa yang mungkin tersedia untuk tidak harus membuat objek jarak jauh Anda sendiri di JavaScript dalam aplikasi PHP, tetapi ini adalah opsi untuk mereka yang menulis aplikasi satu halaman di .NET.

brian
sumber
0

Pilihannya tidak harus satu atau yang lain. JWt misalnya adalah toolkit web yang mengimplementasikan ilusi sempurna dari halaman web multi-halaman, namun itu adalah satu halaman. Selain itu, ia akan mengenali bot dan browser Google yang tidak memiliki javascript (coba), dan beralih ke model multi-halaman tradisional ketika mendeteksi mereka.

Pendeknya:

  • tidak perlu menulis API (tapi Anda masih bisa, jika mau)
  • aplikasi responsif: setiap klik pengguna membutuhkan paling banyak satu perjalanan pulang-pergi server (plus mengambil gambar)
  • tidak ada duplikasi kode
  • tidak ada sisi logika bisnis klien
  • kompleksitas sisi klien yang minimal
  • bot pencarian dapat mengindeksnya
pengguna52875
sumber
1
JWt adalah toolkit java. Pertanyaannya adalah tentang PHP.
Joeri Sebrechts