WEBVIEW

Mata Kuliah Hybrid Web Development (DT116)

Aditya Rizki Yudiantika, M.Eng.

Faculty of Computer Science Specialist Program

Department of Information Systems
Class : Regular, Transfer &
International
- Digital Business
- Financial Technology
- Creative Multimedia
*Specialist Criteria
 WEBVIEW
• Seperti yang telah didiskusikan sebelumnya, hybrid application sangat tergantung
dari komponen webview. Jika ada perubahan implementasi pada webview maka
hal ini akan berimbas ke hybrid application tersebut.
• Berikut ini mapping dari webview pada beberapa OS:
• Android based  webview  Uses Chrome  Uses the webkit engine
• iPhone based  webview  Uses Safari  Uses the webkit engine
• Windows phone based  webview  Uses IE  Uses the trident engine

Pada faktanya menjalankan web aplikasi pada default browser lebih cepat
dibandingkan menjalankan aplikasi hybrid di webview

Faculty of Computer Science

Hybrid Web Development Sem. Genap 2022/2023 | D3 TI
Department of Information Systems &
Bachelor Information Systems (International
 CARA KERJA WEBVIEW
 Pada HMAD kenapa menggunakan webview
dibandingkan dengan default browser? Karena
default browser membatasi komunikasi ke
device untuk alasan keamanan.
 Webview merupakan komponen native yang
ditawarkan oleh platform
 Webview dapat mengakses komponen
native & library pada device.
 Diagram di samping menunjukan cara
komunikasi webview ke komponen device

Faculty of Computer Science

Department of Information Systems &
Bachelor Information Systems (International
Class)
Hybrid Web Development Sem. Genap 2022/2023 | D3 TI
 Faculty of Computer Science
Hybrid Web Development Sem. Genap 2022/2023 | D3 TI Department of Information Systems &
Bachelor Information Systems (International
 MENGAPA BUTUH WEBVIEW?
• Memberikan kontrol yang lebih baik untuk antarmuka aplikasi
• Tidak perlu melakukan pembaruan (update) pada seluruh aplikasi
• Tidak bergantung pada aplikasi pihak ketiga untuk menampilkan konten
• Webview memungkinkan pengembangan lintas platform sehingga akan menghemat biaya
pengembangan
• Beberapa klien/entitas menginginkan kebutuhan aplikasi yang diturunkan dari versi
webapp yang sudah ada sehingga bisa didaftarkan ke Play Store/App Store

Faculty of Computer Science

Hybrid Web Development Sem. Genap 2022/2023 | D3 TI Department of Information Systems &
Bachelor Information Systems (International
 PERBANDINGAN PERFORMA NATIVE
vs HYBRID (1)
Point Native Hybrid Ket
Performance + - Performa native lebih baik dengan komponen yang
disediakan device sedangkan pada hybrid tergantung dari
penggunaan webview
Akses ke device + - Native dapat langsung mengakses device fitur
sedangkan hybrid membutuhkan plugin
UI + - Platform telah menyediakan komponen UI untuk native
sedangkan penyesuaian tampilan di hybrid tidaklah mudah.
Contoh: sel tabel di aplikasi asli iPhone sulit
untuk diganti dalam aplikasi hybrid.

Faculty of Computer Science

Hybrid Web Development Sem. Genap 2022/2023 | D3 TI Department of Information Systems &
Bachelor Information Systems (International
 PERBANDINGAN PERFORMA NATIVE
vs HYBRID (2)
Point Native Hybrid Ket
Komunikasi ke - + Hybrid dengan mudah dapat berkomunikasi dengan server
Server menggunakan XML-HTTP atau AJAX. Pada native
komunikasi ke server menggunakan protokol dan
pertimbangan keamanan
Local data security + - Hybrid membutuhkan plug-in untuk dapat menyimpan pada
local device
Touch delay + - Dimana hybrid menggunakan webkitview maka delay
pada touch sekitar 200ms

Faculty of Computer Science

Hybrid Web Development Sem. Genap 2022/2023 | D3 TI Department of Information Systems &
Bachelor Information Systems (International
 MOBILE APP TECHNOLOGY STACK

Faculty of Computer Science

Hybrid Web Development Sem. Genap 2022/2023 | D3 TI Department of Information Systems &
Bachelor Information Systems (International
 CONTOH WEB BROWSER vs WEBVIEW

Faculty of Computer Science

Hybrid Web Development Sem. Genap 2022/2023 | D3 TI Department of Information Systems &
Bachelor Information Systems (International
 REFERENSI
1. Mahesh Panhale, Beginning Hybrid Mobile Application Development, Apress[2016]
2. https://developer.android.com/reference/android/webkit/WebView

Faculty of Computer Science

Hybrid Web Development Sem. Genap 2022/2023 | D3 TI Department of Information Systems &
Bachelor Information Systems (International
Thank You

 Faculty of Computer Science
Hybrid Web Development Sem. Genap 2022/2023 | D3 TI Department of Information Systems &
Bachelor Information Systems (International
Class)