ASP.NET : Single Page Application Template | M Reza Faisal

reza

full-time(software-developer,lecturer); part-time(traveller, food-tester);

ASP.NET : Single Page Application Template

Mar 19, 2014 by     No Comments    Posted under: I am Software Developer

Pada aplikasi web yang sudah biasa kita temui biasanya kita dapat lihat terdapat perubahan pada address bar pada web browser.  Biasanya perubahan tersebut karena link/tombol yang diklik mengantarkan ke suaatu halaman yang lain atau mengirimkan suatu parameter.  Perubahan halaman atau parameter tentu saja akan membuat perubahan antarmuka yang kita lihat pada web browser.

Baik ASP.NET Web Form atau ASP.NET MVC biasanya mempunyai “prilaku” seperti itu, yaitu antarmuka atau halaman akan dapat berubah karena perubahan alamat pada address bar pada web browser.  Hal ini sesuai dengan life cycle yang terlihat pada gambar di bawah ini.

blog1

Nah pada perkembangannya terdapat istilah baru dalam teknologi yaitu Single Page Application (SPA). Apa bedanya antara aplikasi web yang telah disebutkan sebelumnya dengan SPA? Secara kasat mata atau apa yang dilihat oleh mata, maka perbedaannya terletak pada address bar pada browser dan antarmuka yang ditampilkan pada layar web browser. Sebagai ilustrasi maka bisa dilihat pada gambar di bawah ini :

blog2

Pada gambar di atas alamat pada address bar adalah http://localhost:2191 dengan antarmuka yang menampilkan form login. Kemudian jika diklik link Register maka akan ditampilkan halaman seperti berikut :

blog3

Dapat diperhatikan alamat pada address bar tetap sama, tapi antarmuka yang ditampilkan berbeda dengan sebelumnya. Dan berikut ini adalah tampilan setelah login.

blog4

Nah setelah melihat contoh di atas maka kita sudah mengetahui perbedaan secara kasat mata antara SPA dan aplikasi web sebelumnya. Pada SPA, dianggap terdapat 1 halaman saja (dilihat pada address bar) tetapi satu halaman tersebut bisa mempunyai banyak antarmuka sesuai dengan request yang dilakukan oleh user (sebagai contoh saat klik link register).

Perbedaan lain SPA dengan aplikasi web sebelumnya jika dilihat dari life cycle dapat digambarkan di bawah ini :

blog5

Bisa dilihat berbedaannya, jika pada aplikasi web sebelumnya yang dipertukarkan adalah kode HTML dari saat inisial request dan proses-proses selanjutnya. Sedangkan pada SPA, proses penerimaan kode HTML hanya terjadi diawal inisial request saja, dan selanjutnya cukup melakukan pertukaran data dalam bentuk JSON dengan bantuan AJAX. Untuk komunikasi antara HTML dan JSON, digunakan framework Javascript yang bermana Knockout.js.  Hal ini bisa dilihat pada gambar arsitektur SPA Template di bawah ini :

blog6

Pada posting selanjutkan akan di bahas lebih jaun mengenai SPA.

Got anything to say? Go ahead and leave a comment!

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Fotolia

Fotolia

ShutterStock


Fotolia
© 2013 eSevens
%d bloggers like this: