Sencha Touch - Arsitektur

Lapisan bawah untuk aplikasi seluler apa pun adalah OS, di atas itu semua atau semuanya dibuat. Kemudian kami memiliki browser tempat kami akan menjalankan aplikasi. Bisa Chrome, Safari, IE apa saja. Lapisan atas adalah standar W3, yang umum untuk semua. Sencha Touch berdiri atau dibangun di atas standar W3, yang tidak lain adalah HTML5, yang membuat satu aplikasi kompatibel dengan browser yang berbeda dari perangkat yang berbeda.

Sencha Touch adalah kombinasi dari tiga kerangka kerja - ExtJs, JqTouch, dan Raphael (gambar vektor). Ini mengikuti arsitektur MVC. MVC memisahkan kode menjadi potongan yang lebih mudah diatur.

Meskipun arsitektur tidak wajib untuk program, namun, praktik terbaiknya adalah mengikuti struktur ini agar kode Anda dapat dipelihara dan diatur dengan baik.

Struktur Proyek Dengan Aplikasi Sencha Touch

----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML files

Folder aplikasi Sencha Touch akan berada di folder JavaScript proyek Anda.

Aplikasi akan berisi file controller, view, model, store, dan utility dengan app.js.

app.js- File utama dari mana aliran program akan dimulai. Ini harus dimasukkan dalam file HTML utama menggunakan tag <script>. Aplikasi memanggil pengontrol aplikasi untuk fungsi lainnya.

Controller.js- Ini adalah file pengontrol arsitektur Sencha Touch MVC. Ini berisi semua kontrol aplikasi, event listener, dan sebagian besar fungsionalitas kode. Itu melakukan tugas-tugas berikut: perutean, perantara antara tampilan dan model, dan menjalankan acara.

View.js- Berisi bagian antarmuka dari aplikasi, yang ditampilkan kepada pengguna. Sencha Touch menggunakan berbagai tampilan kaya UI, yang dapat diperpanjang dan disesuaikan sesuai kebutuhan.

Store.js- Ini berisi data yang di-cache secara lokal, yang akan ditampilkan dengan bantuan objek model. Store mengambil data menggunakan proxy, yang memiliki jalur yang ditentukan untuk layanan guna mengambil data backend.

Model.js- Berisi objek yang mengikat data penyimpanan untuk dilihat. Ini adalah representasi dari objek dunia nyata, yang pada dasarnya berhubungan dengan database.

Utils.js- Ini tidak termasuk dalam arsitektur MVC tetapi merupakan praktik terbaik untuk menggunakannya agar kode menjadi bersih, tidak rumit, dan lebih mudah dibaca. Kita dapat menulis metode dalam file ini dan memanggilnya di controller atau view renderer jika diperlukan. Ini juga berguna untuk tujuan penggunaan kembali kode.