Selamat datang di WebRocketX©. Kembangkan aplikasi web satu halaman (SPA) 10 kali lebih efisien dengan sistem pengiriman konten super ringan dan super cepat ini. WebRocketX sangat intuitif dan efektif sehingga siapa pun yang menggunakannya akan langsung bertanya-tanya di mana injeksi HTML bersembunyi selama ini.
Apa itu WebRocketX?
WebRocketX adalah API javascript sisi browser tempat semua panggilan asinkron ke server dilakukan. Mekanisme utama memperbarui halaman adalah melalui penyisipan cuplikan HTML DOM menggunakan properti innerHTML. Dengan memiliki satu titik interaksi dengan server, pengembang memiliki fungsi berikut yang disediakan oleh API.
- Menyediakan front end Aplikasi Halaman Tunggal (SPA) untuk teknologi apa pun yang mengirimkan HTML dari backend, seperti Springboot, PHP, Laravel, Django, Rails, dll.
- Kontrol sisi browser atas interaksi pengguna selama panggilan asinkron
- Penanganan kesalahan sisi browser dari pengecualian sisi server
- Caching tampilan samping browser ~ Dengan mudah membuat tombol kembali berfungsi dengan sempurna.
- Navigasi tampilan samping browser
Untuk penjelasan lebih rinci tentang manfaat menggunakan WebRocketX SPA, buka di sini Manfaat Menggunakan WebRocketX SPA
Mengapa X? WebRocketX adalah hibrida. Ini adalah solusi setengah jalan antara dunia lama situs penyegaran halaman penuh dan solusi JSON JSMVC terbaru, seperti Angular.
- Seperti arsitektur halaman penuh, WebRocketX mengharapkan tata letak yang berasal dari server untuk menyertakan data. Ini berbeda dengan arsitektur JSMVC di mana data dikirimkan secara terpisah dari tata letak di objek JSON. Namun, WebRocketX mendukung JSON bila diperlukan, tetapi bukan paradigma yang berpusat pada JSON.
- Seperti arsitektur JSMVC, WebRocketX adalah Aplikasi web Satu Halaman (SPA) dan mengandalkan panggilan AJAX untuk mengirimkan data dan menghadirkan tampilan baru.
Hal hebat lainnya tentang WebRocketX Tertulis
seluruhnya dalam javascript , menggunakan Jquery sebagai API untuk browser, ini akan berjalan di semua browser utama dan bahkan di perangkat seluler.
Memungkinkan pengembang aplikasi web dengan mudah menciptakan pengalaman pengguna yang kaya menggunakan
HTML standar dan javascript, serupa dengan pengalaman menggunakan sistem operasi desktop besar seperti Apple atau Windows. Namun, ini sangat luar biasa
ringan mengeksekusi sejumlah kecil kode, dan menyimpan sebagian besar status pengguna di browser
meminimalkan kebutuhan untuk berkomunikasi dengan servernya.
Memberi pengembang aplikasi web a
platform terstruktur di mana untuk mengirimkan dan mengelola konten dalam browser. Namun, meskipun terstruktur, pengembang tetap bebas memanfaatkan kekuatan dan kenyamanan HTML standar dan style sheet, serta menggunakan pustaka widget pihak ketiga.
Aman secara inheren karena paradigma rendering html sisi server menyimpan otorisasi pengguna dalam sesi server yang sulit diutak-atik oleh pengguna. Selain itu, karena tampilan yang tidak terpakai dan tidak sah tidak di-cache di sisi klien, aktor jahat tidak akan mendapat permukaan serangan. Kerangka kerja seperti Vue, Angular, dan React memberikan semua pengguna permukaan serangan akun administrator secara default, sebagai tampilan cache, kecuali aplikasi web administrator diunduh dan dikelola sebagai aplikasi terpisah.
Apa yang bukan WebRocketX Bukan solusi sisi server , karena komponen front end (browser) tidak digabungkan dengan komponen memori back end (server). Satu-satunya hubungan antara apa yang dikirimkan dari server dan kerangka WebRocketX adalah beberapa konvensi sederhana untuk pengiriman HTML ke browser. Arsitektur terpisah ini membuat pengembang bebas menggunakan kerangka backend apa pun yang mereka inginkan seperti Django, Ruby on Rails, Spring MVC, Php, Asp, Struts, dll. Konten dikirim dari server sebagai HTML dan dikirim dari WebRocketX sebagai parameter formulir. Sesederhana itu.
Bukan solusi CSS atau tata letak . Ini adalah cache konten dan API pengiriman yang dirancang untuk dengan mudah membuat aplikasi web dinamis Anda menjadi SPA. Pengembang bebas mengatur tata letak aplikasi webnya sesuai keinginannya. Tampilan dan nuansa situs web informasi ini tidak menunjukkan tampilan situs web Anda saat menggunakan WRX.
Tidak sesuai SEO untuk situs web statis . Penggunaan WRX untuk situs web statis pada dasarnya hanyalah penggunaan konsep dan sayangnya mesin pencari belum siap untuk mengindeks situs web SPA. Tidak ada satu pun kerangka halaman seperti React, Angular, atau Vue yang mematuhi SEO, selain halaman arahannya. Di sisi lain, WRX sangat cocok untuk aplikasi web dinamis, terutama situs yang mengharuskan pengguna login untuk mengelola akun atau bisnis apa pun.
Jika Anda menyukai WebRocketX. Beri kami bintang di sini di Github. Terima kasih!
Pemasangan Aplikasi Halaman Tunggal Anda
Buat halaman arahan/selamat datang seperti yang ditunjukkan di bawah ini dan sertakan perpustakaan berikut di dalamnya. Halaman arahan biasanya paling baik ditempatkan di belakang halaman login formulir Anda. Dengan kata lain Anda meneruskan pengguna ke sana setelah mereka login. Semuanya kecuali perpustakaan jquery tersedia di folder kode sumber root WebRocketX yang ditemukan di atas.
jquery[latest version].js including the draggable library from jquery UI
domUtil.js
desktopContext.js
webapi.js
webRocketXStyles.css
Contoh HTML Sederhana Untuk Aplikasi Web Satu Halaman Dinamis (SPA)
Contoh templat yang dapat dijalankan untuk PHP dan Django dapat ditemukan di folder templat di kode sumber.
Halaman Arahan/Selamat Datang
Halaman selamat datang adalah halaman arahan aplikasi web Anda, biasanya di belakang halaman login Anda. Halaman selamat datang adalah tempat SPA Anda dimulai. Bagian utamanya adalah perpustakaan yang mencakup pengaturan variabel kerangka kerja, target awal, dan peringatan kesalahan komunikasi.
<!DOCTYPE html >
< html >
< head >
< title > Welcome </ title >
<!-- The jquery UI library should include draggable if you want to implement draggable modals-->
< script language =" javascript " type =" text/javascript " src =" javascripts/jquery/jquery-ui-1.11.4.custom/external/jquery/jquery-1.12.4.min.js " > </ script >
< script language =" javascript " type =" text/javascript " charset =" iso-8859-1 " src =" javascripts/webRocketX/v1_10_1/domUtil.js " > </ script >
< script language =" javascript " type =" text/javascript " charset =" iso-8859-1 " src =" javascripts/webRocketX/v1_10_1/desktopContext.js " > </ script >
< script language =" javascript " type =" text/javascript " charset =" iso-8859-1 " src =" javascripts/webRocketX/v1_10_1/webapi.js " > </ script >
< link rel =" stylesheet " type =" text/css " href =" javascripts/webRocketX/v1_10_1/webRocketXStyles.css " >
< script type =" text/javascript " >
var asyncDebugMode = true ;
var signInPageURI = "" ;
var pageLoadTimeStamp = "" ;
var modalTargetSpacing = 10 ;
var staticPage = false ;
var disableNavigation = false ;
</ script >
< link rel =" stylesheet " type =" text/css " href =" styles/demo/styles.css " >
< link rel =" stylesheet " type =" text/css " href =" styles/demo/menu.css " >
< meta name =" viewport " content =" width=device-width " >
</ head >
< body >
<!-- header -->
< table class =" bodytext " >
< tr >
< td width =" 20 " > </ td >
< td >
My Header
</ td >
< td width =" 20 " > </ td >
</ tr >
< tr >
< td width =" 20 " > </ td >
< td class =" menuBar " >
< div id =" menu " > </ div >
</ td >
< td width =" 20 " > </ td >
</ tr >
</ table >
< div id =" errorSpan " style =" color:red;text-align:center; " > </ div >
< div id =" winMain " class =" startingTarget bodytext " >
<!-- Unused or default capsule attributes do not need to be included. They are just included here for teaching purposes. -->
< div id =" welcome " class =" metaCapsule " capsuleType =" inline " targetId =" winMain " jsOnload ="" reloadPage =" false " saveOriginalRequest =" false " saveResponse =" false " trackPage =" true " windowTitle =" welcome " errorPage =" false " >
Hello World
< br /> < br />
< a href =" # " onclick =" test1();return false; " > Test1 </ a >
</ div >
</ div >
<!-- footer -->
< table class =" bodytext " >
< tr >
< td width =" 20 " > </ td >
< td class =" menuBar " style =" padding: 10px 10px 10px 10px; " >
Powered By < a target =" _blank " href =" http://www.webrocketx.com " style =" text-decoration: none; " > < span style =" color:black;background-color:white;font-weight:bold; " > WebRocket </ span > < span style =" color:red;background-color:white;font-weight:bold; " > X </ span > </ a >
</ td >
< td width =" 20 " > </ td >
</ tr >
</ table >
< div id =" communicationErrorAlertWrapper " style =" display:none; " >
< div id =" communicationErrorAlert " class =" metaCapsule " capsuleType =" modal " >
< div id =" dialogLayer " class =" BDT_Dialog_Layer " >
< div class =" BDT_Dialog_Center " >
< div class =" BDT_Dialog_Decoration " >
< table class =" expand " >
< tr >
< td >
< div id =" communicationErrorMessage " > </ div >
< br /> < br />
< a href =" # " onclick =" $('#communicationErrorAlertWrapper').hide(); return false; " > Ok </ a >
</ td >
</ tr >
</ table >
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html > Contoh Halaman yang Disuntikkan
Halaman ini akan menggantikan konten utama. Kami akan memasukkannya ke dalam file bernama test1.html. Konten dibungkus dalam kapsul (tag div) yang dikonfigurasi dengan atribut XML meta data. Meta data adalah jenis pemrograman deklaratif yang digunakan oleh kerangka kerja untuk memutuskan apa yang harus dilakukan dengan konten Anda.
< div id =" test1 " class =" metaCapsule " capsuleType =" inline " targetId =" winMain " windowTitle =" Test 1 " >
Hello World Test 1.
</ div > Contoh Fungsi Javascript
Panggilan ini akan menggantikan konten di winMain. Hal yang sangat keren adalah tombol kembali di browser akan menavigasi kembali ke halaman sebelumnya dengan sempurna tetapi Anda akan tetap berada di satu halaman SPA sepanjang waktu. Hal ini berlaku untuk navigasi apa pun dalam kerangka kerja dan Anda memiliki kontrol yang lengkap dan sederhana jika Anda memutuskan bahwa Anda ingin halaman selalu disegarkan dari server saat Anda menavigasi kembali ke sana, bukan berasal dari cache browser. Menandai kapsul halaman dengan atribut reloadPage sama dengan "true" akan mengirimkan ulang halaman ke server dengan semua parameter yang sama dengan yang diminta dan bahkan memanggil callback yang sama yang awalnya ditetapkan padanya, dalam cakupan penutupan aslinya.
function test1 ( ) {
var successfulCallback = function ( innerHTMLObject ) {
alert ( "this my callback" ) ;
}
var webapi = new Webapi ( ) ;
webapi . setSuccessCallbackReference ( successfulCallback ) ;
webapi . setUrl ( "test1.html" ) ;
webapi . submitAsync ( ) ;
} Bisakah ini menjadi lebih sederhana?
Daftar Lengkap Atribut Kapsul yang Tersedia Dalam Mode Aplikasi Web Dinamis
Arsitektur kapsul WebRocketX memungkinkan pengembang mengontrol sebagian besar perilaku tampilan secara deklaratif.
Di bawah ini adalah semua kemungkinan atribut kapsul. Ini akan memberi Anda gambaran tentang sebagian besar fungsi kerangka kerja, dan bagaimana kerangka tersebut mencakup sebagian besar kasus penggunaan navigasi pengguna.
Atribut yang tidak disertakan dalam kapsul akan disetel ke nilai defaultnya. Atribut yang diperlukan ditandai dengan tanda bintang*.
- id* - Digunakan untuk melacak halaman dalam kerangka WebRocketX. Disampaikan melalui parameter CapsuleId dalam contoh templat. Tidak diperlukan penggunaan template.
- class* - Harus disetel ke nilai "metaCapsule". Digunakan oleh kerangka kerja untuk menemukan div kapsul.
- CapsuleType* - Dapat diatur ke empat nilai berikut, yang menentukan bagaimana dan apakah kapsul akan disuntikkan.
- inline - Konten akan dimasukkan ke dalam div yang ditentukan oleh atribut targetId.
- modal - Konten akan dimasukkan ke dalam lapisan modal mengambang.
- data - Konten tidak akan dilacak untuk navigasi oleh kerangka kerja. Pengembang dapat memutuskan apakah akan menentukan targetId atau menempatkan kontennya sendiri, atau bahkan menggunakan konten tanpa menempatkannya di halaman. Konten akan dikembalikan ke pengembang dalam panggilan balik, sebagai parameter pertama, dalam bentuk objek DOM kapsul dan konten yang disertakan. Ini adalah jenis kapsul yang ideal untuk digunakan pada bagian halaman kecil yang dapat disegarkan dan tidak dinavigasi sebagai halaman keseluruhan. Misalnya, hasil pencarian, ticker, dll.
- json - Cukup render teks json ke sisi server kapsul dan itu akan dikirimkan dalam panggilan balik sisi browser yang sudah berubah menjadi objek json. Pengiriman parameter json ke server dapat dilakukan dengan mengatur nilai parameter menjadi string json menggunakan objek AsyncParametersList.
- targetId (*diperlukan jika tipe kapsul adalah inline) - Menentukan lokasi di mana html masuk akan disuntikkan, ketika tipe kapsul adalah "inline".
- jsOnload - Menentukan metode javascript yang akan dipanggil ketika injeksi selesai. Sangat berguna untuk mendaftarkan pelengkapan otomatis, komponen jquery ui, dan segala jenis operasi jenis pemuatan halaman lainnya. Pegangan pada kapsul tempat fungsi jsOnload dideklarasikan selalu dikirim sebagai parameter tunggal ke fungsi js Anda.
- jsReturn - Menentukan metode javascript yang akan dipanggil ketika halaman ini dikembalikan tetapi tidak dimuat ulang. Kembali ke halaman dapat dipicu dengan menggunakan tombol kembali atau memanggil dtSetCapsuleById. Mekanisme ini berguna ketika pengembang menginginkan bagian tampilan disegarkan, atau kode lain dijalankan, pada tampilan baik secara kondisional maupun tanpa syarat. Karena aplikasi berjalan dalam satu halaman, kondisi dapat diteruskan antar halaman sebagai variabel global. Pegangan pada kapsul tempat fungsi jsReturn dideklarasikan selalu dikirim sebagai parameter tunggal ke fungsi js Anda.
- reloadPage (default: false) - Jika ini benar, menavigasi ke halaman ini di tumpukan browser akan menghasilkan versi baru konten ini yang diambil dari server. Permintaan asli akan dikirim ulang, dengan semua parameter aslinya, dan metode panggilan balik asli akan dipanggil.
- skipReloadPageOnPrevious (default: false) - Jika ini benar, navigasi dari halaman ini ke halaman di tumpukan browser yang ditandai dengan memuat ulang akan memblokir halaman tujuan tersebut agar tidak dimuat ulang. Hal ini sangat berguna dalam memungkinkan pengembang untuk mengontrol apakah aliran balik yang berbeda ke halaman yang dimuat ulang akan menyebabkannya dimuat ulang atau tidak. Misalnya, sering kali hal ini tidak diinginkan saat menavigasi kembali ke halaman latar belakang dari modal untuk memuat ulang halaman latar belakang tersebut. Namun, halaman latar belakang yang sama mungkin masih diinginkan untuk dimuat ulang ketika dinavigasi kembali dari halaman yang menggantikannya.
- saveOriginalRequest (default: false) - Jika disetel ke true, permintaan asli akan disimpan meskipun ini bukan pemuatan ulang.
- saveResponse (default: false) - Jika disetel ke true, objek respons disimpan dalam div kapsul yang disuntikkan. Ini nantinya dapat digunakan untuk memulihkan konten yang disuntikkan ke keadaan semula setelah diedit oleh pengguna, dengan memanggil restoreAsyncResponse(id). Kasus paling umum dimana kemampuan ini diinginkan adalah ketika halaman memiliki tombol batal.
- trackPage (default: true) - Defaultnya adalah true yang menetapkan bahwa halaman ini ditempatkan di back-stack untuk referensi lebih lanjut. Pengaturan ini tidak relevan untuk tipe data kapsul dan json karena tipe tersebut tidak dapat dinavigasi sejak awal. Pengembang dapat menentukan bahwa halaman ini tidak boleh ditempatkan di back-stack dengan mengatur atribut ini ke false. Menyetel trackPage ke false adalah solusi ideal untuk halaman yang Anda tidak ingin pengguna kembali lagi dan kemudian mengirimkannya kembali, seperti halaman "buat". Saat pengguna kembali ke halaman yang tidak terlacak, mereka akan melewati halaman tersebut dan mendarat di halaman terlacak sebelumnya.
- windowTitle - Menentukan judul yang akan ditetapkan di bagian atas browser. Diperlukan karena kami tidak pernah mengubah halaman dan oleh karena itu tidak pernah memperbarui tag judul di header html.
- errorPage - Menandai halaman ini sebagai pengecualian yang diketik yang akan mengakibatkan panggilan balik sukses yang ditentukan pengembang dilewati dan panggilan balik kegagalan yang ditentukan pengembang dipanggil.
Keuntungan membuat Aplikasi Django Single Page (SPA)
Meskipun SPA umumnya disamakan dengan kerangka javascript sisi klien berat yang dikombinasikan dengan layanan json, masih sangat mungkin untuk mendapatkan manfaat SPA sambil tetap merender sisi server HTML, dengan kerangka SPA javascript ringan kami.
- Keuntungan Permintaan Mikro Dalam Pemeliharaan Status UI - Menyegarkan sebagian halaman saja berarti seluruh halaman tidak harus ditarik setiap saat. Hanya cuplikan html atau objek json yang perlu diambil dari server. Hal ini membuat pekerjaan pengembang UI jauh lebih mudah karena mereka tidak perlu melakukan hal-hal seperti membuat template header, menu, dan footer ke setiap halaman atau khawatir tentang keadaan data lain pada bagian halaman di luar area penyegaran. Bahkan input pengguna yang belum dikomit ke server tetap aman selama berada di luar area yang disegarkan. Sebagian besar kesulitan dalam pengembangan UI hilang dengan permintaan mikro.
- Keuntungan Permintaan Mikro dalam Layanan - Karena hanya bagian halaman tertentu yang diambil, data yang dibutuhkan di tempat ini menjadi lebih spesifik. Hal ini mengurangi logika bisnis yang diperlukan dalam layanan, yang juga menyederhanakan pengambilan dari aplikasi eksternal seperti database dan layanan cloud.
- Menyimpan Lebih Banyak Status di Peramban - Kombinasi tampilan caching dan menyegarkan sebagian halaman saja menghasilkan lebih banyak status yang dipertahankan di browser. Oleh karena itu, pengembang tidak perlu melakukan banyak perjalanan ke server untuk mendapatkan keadaan yang sudah ada ini. Ini merupakan keuntungan besar bahkan pada hal-hal sederhana seperti pengiriman formulir, karena ketika server menolak masukan pengguna yang dikirimkan, halaman dengan formulir akan tetap ada di sisi klien dengan semua masukan penggunanya masih ada. Kami tidak pernah kehilangan halamannya. Di sisi lain, formulir yang ditolak pada penyegaran satu halaman penuh akan kehilangan semua input pengguna, karena browser sedang dalam proses menampilkan halaman berikutnya dan halaman formulir tersebut hilang. Jadi dalam penyegaran halaman penuh pengiriman formulir yang ditolak, masukan harus dikirim ke server dan ditampilkan ulang, merender ulang seluruh formulir dan memulihkan masukan pengguna yang tidak ada. Parameter formulir akan dipulihkan dari permintaan tetapi tidak dari database karena pengiriman tidak valid sehingga data tidak sampai sejauh itu. Jika Anda tidak peduli dengan pengguna Anda, Anda dapat menampilkan pesan kesalahan kepada mereka dan membuat mereka mengetik semuanya lagi, yang terkadang dilakukan dan sangat tidak ramah. Dalam kasus aplikasi Django satu halaman, menggunakan permintaan mikro, halaman tidak pernah ditinggalkan sejak awal, dan kita bebas mengirimkan kembali pesan kesalahan sebagai dialog modal mengambang.
- Navigasi Tampilan Terstruktur - Tampilan yang dirender sebelumnya dapat dinavigasi menggunakan pengidentifikasi tampilannya. Dengan menggunakan atribut kapsul, tampilan dapat ditentukan sebagai dapat di-cache atau dimuat ulang secara paksa (sehingga tidak menjadi basi).
- Kontrol Interaksi Pengguna - Pernahkah Anda mengalami masalah saat pengguna menekan tombol dua kali? Masalah semacam itu tidak akan terjadi lagi karena WebRocketX menempatkan lapisan transparan di atas UI selama perjalanan bolak-balik ke server yang mencegah interaksi pengguna. Kerangka kerja ini juga menampilkan kursor jam pasir yang bagus untuk memberi tahu pengguna bahwa ada sesuatu yang sedang terjadi.
- Penanganan Kesalahan Terstruktur - Kesalahan sisi server dan batas waktu sesi bisa sangat merepotkan ketika pengembang mengharapkan tata letak atau data berasal dari panggilan balik asinkron. WebRocketX menstandarkan penanganan kesalahan dan perilaku batas waktu sesi sehingga tidak terjadi hal yang tidak terduga. Semua tanggapan disaring terlebih dahulu sebelum panggilan balik dikirim ke panggilan balik pengembang untuk menangani masalah apa pun. Kait juga disediakan untuk memungkinkan pengembang menentukan perilaku khusus untuk kegagalan panggilan balik.
Kunjungi Website Kami Untuk Detail dan Dokumentasi Lebih Lanjut
Kunjungi WebRocketX
