Mobile Platform as a Service:Pengenalan Native framework

Arsitektur library komponen terpadu

Arsitektur AntUI dibangun dari bawah ke atas seperti susunan blok bangunan untuk membentuk sistem kontrol yang terpadu.

Tabel berikut menjelaskan lapisan arsitektur dari bawah ke atas.

Lapisan dasar

Lapisan dasar memodularisasi spesifikasi visual dan menjadi fondasi sistem AntUI. Lapisan ini mencakup sumber daya atomik, kontrol atomik, dan ikon Iconfont.

• Sumber daya atomik

  Mendefinisikan sumber daya atomik yang digunakan oleh kontrol, seperti warna, ukuran, dan jarak, untuk memastikan keunikannya. Contohnya meliputi warna seperti merah, kuning, dan biru, serta ukuran font seperti 12, 14, dan 16.

• Kontrol atomik

  Membungkus kontrol native dari framework platform guna membangun pustaka dasar kontrol atomik.

• Iconfont Icon

  Mengumpulkan ikon untuk skenario umum dan menyediakannya dalam format Iconfont sebagai pustaka ikon kontrol yang dapat digunakan.

Lapisan umum

Lapisan umum merupakan modul inti terpadu AntUI yang berisi kontrol paling sering digunakan, mencakup sumber daya umum, kontrol dasar, serta manajer gaya.

• Sumber daya umum

  Mendefinisikan ulang sumber daya atomik sesuai skenario penggunaan, seperti warna judul, warna konten, dan warna tautan.

• Kontrol dasar

  Lapisan ini mereproduksi secara visual kontrol yang didefinisikan dalam mockup desain secara satu-ke-satu, sekaligus menjaga konsistensi penamaan dan implementasi di platform Android dan iOS untuk menyederhanakan pengembangan client.

• Manajer gaya

  Mendefinisikan gaya secara abstrak dan mengelolanya secara terpusat, sehingga memungkinkan Anda mengalihkan kontrol tertentu di antara beberapa skin. Abstraksi gaya diimplementasikan menggunakan definisi inkremental, sehingga Anda hanya perlu fokus pada gaya elemen yang dibutuhkan oleh bisnis Anda.

Lapisan skenario

Lapisan skenario membangun kumpulan kontrol dengan fitur spesifik skenario, seperti kontrol untuk dana, merchant, dan jejaring sosial.

Lapisan aplikasi

Lapisan aplikasi menyediakan kemampuan seperti penanganan spesifik platform dan dukungan container H5, serta menyelesaikan konflik antara unifikasi dan kustomisasi platform.

Platform Android dan iOS memiliki spesifikasi visual yang berbeda. Sebagai contoh, AntUI menangani actionsheet secara berbeda di masing-masing platform:

• Di iOS, actionsheet muncul dari bagian bawah layar.

• Di Android, actionsheet ditampilkan sebagai daftar pop-up di tengah layar.

Konten H5 sering kali memerlukan penanganan berbeda untuk elemen seperti kotak dialog pop-up dan bilah judul. Untuk memastikan konten H5 memiliki tampilan dan nuansa native, library komponen terpadu mendefinisikan JavaScript Application Programming Interface (JSAPI) terpadu untuk container H5. API ini memudahkan pemanggilan kontrol platform yang sesuai, sehingga halaman H5 dapat ditangani secara berbeda di Android dan iOS.

Integrasi

Untuk mengurangi biaya komunikasi antara desainer dan pengembang serta menghindari pengembangan kontrol dan pekerjaan desain visual yang redundan, library komponen terpadu (AntUI) mengintegrasikan tugas pengembangan dan desain visual.

Desainer membuat spesifikasi, dan pengembang menginterpretasikan spesifikasi tersebut untuk membuat kontrol. Panduan pengembangan lengkap menyederhanakan implementasi dan membentuk sistem kontrol satu atap.

• Penamaan terpadu menciptakan pemahaman bersama antara pengembang dan desainer. Untuk informasi lebih lanjut tentang konvensi penamaan, lihat Spesifikasi dan prinsip komponen dalam topik ini.

• Papan desain membantu desainer memahami kontrol yang sudah ada, sehingga mereka dapat membangun struktur dasar halaman hanya dengan menyeret dan melepas elemen.

• Portal mengagregasi dokumen pengembangan dan spesifikasi visual, serta menyediakan unduhan demo agar Anda dapat langsung mengamati efek visual kontrol tersebut.

Spesifikasi dan prinsip komponen

• Gaya penamaan

  Kontrol jenis yang sama harus memiliki nama yang sama di platform Android dan iOS. Nama kontrol diberi awalan AU, sedangkan semua properti kontrol kustom menggunakan camel case.

  Penting

  Beberapa komponen mungkin memiliki perbedaan platform. Suatu komponen mungkin perlu diimplementasikan di satu platform tetapi tidak di platform lainnya.

• Pencocokan kontrol dasar dengan spesifikasi visual/interaksi

  • Kontrol yang tidak termasuk dalam spesifikasi tidak boleh ditambahkan ke kontrol standar.

  • Kontrol yang tidak ada dalam spesifikasi tetapi sudah digunakan di banyak tempat harus ditempatkan dalam koleksi kontrol kandidat.

  • Sebuah spesifikasi tidak harus diimplementasikan sebagai satu kontrol tunggal. Misalnya, spesifikasi bilah judul.

• Kebergunaan

  • Berbeda dengan commonui, hindari pembuatan wrapper sederhana untuk kontrol sistem (seperti APImageView dan APTextView). Saat memerlukan kontrol sistem, gunakan kontrol native.

  • Nama harus akurat dan tidak ambigu.

  • Fitur serupa harus konsisten di berbagai kontrol.

  • Ikuti konvensi pengguna.

• Ekstensibilitas

  • Hindari hardcoding untuk fitur kontrol. Misalnya, dukung perubahan dinamis jumlah tab yang dapat dialihkan.

  • Beberapa kontrol, seperti kotak dialog dan bilah navigasi, harus memungkinkan tata letaknya dimodifikasi dari luar.

• Kebaruan

  Anda dapat memanfaatkan fitur platform terbaru, seperti RecyclerView di Android.