Anda di sini

Pemrograman

Mengapa Angular 2 + NativeScript = 100% Native Mobile Apps ?

Aditya Suranata - 24 Oktober 2016 20:26:37 0

Angular 2 ? NativeScript? Apa lagi ini? Mengapa ada banyak sekali tools dan platform yang menyatakan diri mereka mampu untuk melakukan transformasi dari satu platform ke platform lain? Apa bedanya mereka dengan platform lain yang sudah ada sebelumnya seperti Phonegap, Ionic, Xamarin dkk? Disisi mana mereka ini dapat membantu kita dalam mengembangkan software kita?

Angular 2 & NativeScript

Ide dasar dari dibangunnya kolaborasi antara dua platform ini: Angular 2 dan NativeScript, adalah untuk memungkinkan para developer aplikasi mobile tidak hanya dapat mengembangkan aplikasi mobile native tetapi juga aplikasi web. Ide besar dari NativeScript adalah untuk memanfaatkan arsitektur Angular yang bersifat platform agnostik untuk membangun aplikasi yang benar-benar powerful.

Gambaran besar bagaimana Angular bekerja secara internal.

Gambaran besar bagaimana NativeScript bekerja.

Para developer Angular mungkin telah paham bagaimana Angular bekerja secara internal, namun gambaran besarnya ketika kita membangun aplikasi menggunakan Angular & NativeScript adalah kita mulai membuat aplikasi dengan menulis kode untuk markupnya (menggunakan HTML pada NativeScript), lalu kita memiliki DOM adapter yang pada dasarnya mengambil dan mem-parse markup tadi ke node tree (Parse5 pada NativeScript), set-set node tree tadi kemudian dikompilasi oleh compiler menjadi Proto Views yang mana bisa kita bayangkan sebagai sekumpulan template.

Hingga tahap ini semuanya masih bersifat platform agnostik. Tahap selanjutnya dari tahap ini mungkin bisa berbentuk website, bisa jadi aplikasi mobile native, atau platform apa saja. Pada dasarnya tugas besar yang dikerjakan oleh NativeScript selanjutnya adalah NativeScript Renderer mengambil sekumpulan Proto Views tadi dan mengubahnya menjadi elemen Native Visual Tree baik pada Android maupun iOS. NativeScript Renderer ini juga berkomunikasi dua arah, seperti meneruskan perubahan properti dari Proto Views ke Native Visual Tree dan sebaliknya dari Native Visual Tree ke Proto Views.

Komponen Angular 2 terdiri dari dua bagian: visual template dan class.

Contoh kode dari bagian component dan class Angular 2.

Ini artinya kita dapat langsung mulai membuat component Angular 2 untuk digunakan pada NativeScript, yang pada dasarnya terdiri dari dua bagian. Bagian visual template yang mendefinikasn jenis-jenis input atau output yang kita perlukan, bentuk tampilan dan sebagainya. Juga bagian class yang berisi kode logika dari component tadi.

Deskripsi singkat dari NativeScript.

NativeScript pada dasarnya adalah sebuah cara bagaimana menggunakan JavaScript untuk membangun aplikasi mobile dengan UI Native. Lalu apakah NativeScript sama dengan Phonegap?

Perbandingan antara NativeScript dengan Phonegap, Ionic, Xamarin, React Native dan Appcelerator/Titanium.

NativeScript tidak seperti Phonegap atau Ionic karena dalam NativeScript tidak menggunakan browser dan maka dari itu otomatis tidak ada DOM (Data Object Model pada halaman web). Komponen antarmuka (UI Component) yang kita lihat jika aplikasi dibuat menggunakan NativeScript adalah asli yang artinya 100% native. Jika kita melihat sebuah tombol pada perangkat Android maka itu adalah tombol Android bukan elemen tiruan yang terlihat seperti itu.

Perbandingan selanjutnya adalah dengan Xamarin, dan NativeScript tidak seperti Xamarin karena NativeScript tidak melakukan cross compilation. JavaScript yang kita tulis langsung dieksekusi ketika runtime pada perangkat sehingga kodenya selalu berbentuk JavaScript. Terakhir jika kita bandingkan dengan React Native dan Appcelerator, keseluruhan idenya adalah NativeScript mendapatkan akses ke seluruh Native API yang ada pada perangkat, sehingga kita tidak perlu lagi menulis API Wrapper untuk mengakses API yang spesifik pada platform tertentu. Dengan menggunakan NativeScript maka semua Native API tersedia langsung ke JavaScript.

Mengapa menggunakan NativeScript.

Mengapa NativeScript? Pertama tentu saja kita dapat menggunakan skill Angular 2, JavaScript dan CSS yang telah kita miliki untuk membangun aplikasi Native yang powerful tanpa harus pusing-pusing lagi belajar Java pada Android atau Objective C pada iOS. Alasan selanjutnya adalah penggunaan kode-kode yang telah ada atau code reuse. Seperti misalnya modul-modul yang ada pada npm (node), dan bahkan seluruh pustaka kode native dari pihak ketiga yang dapat digunakan pada iOS dan Android. Misalnya untuk UI, Logika atau tujuan lainnya.

Selanjutnya seperti yang dijelaskan sebelumnya, kita dapat mengakses Native API dari perangkat tanpa perlu repot menulis API Wrapper, menggunakan UI Native dari perangkat dan terakhir tentu saja semua kemudahan ini dapat kita pakai secara gratis karena NativeScript bersifat Open Source.

Big Picture dari NativeScript.

Pada dasarnya kita dapat menyimpulkan bahwa NativeScript merupakan sebuah "jembatan" yang menghubungkan JavaScript dengan platform native. Jadi untuk membuat aplikasi native pada platform tertentu seperti Android atau iOS, kita tidak perlu report belajar Java untuk Android dan Objective C untuk iOS, kita cukup menggunakan skill JavaScript/Angular kita untuk membangun "aplikasi yang 100% native" pada kedua platform tersebut. Karena dibangun berbasis JavaScript, maka Aplikasi yang kita bangun nantinya juga tidak hanya dapat berjalan native pada perangkat tertentu, tetapi sebaliknya secara otomatis juga dapat berjalan pada platform web.

Contoh kode NativeScript untuk Android.

Pada contoh diatas terdapat android.text.format.Time(), ini pada dasarnya adalah sebuah namespace dan fungsi yang kita panggil pada JavaScript, dan ini ada secara langsung pada native paltform Android. Bedanya meskipun native kita dapat memanggilnya langsung dari JavaScript.

Contoh kode NativeScript untuk iOS.

Begitu juga dengan iOS, sebagai contohnya kita dapat membuat alert view secara native melalui JavaScript dengan memanggil langsung UIAlertView(), set beberapa properti, dan selanjutnya tinggal panggil dan viewnya pun langsung muncul.

Dokumentasi API dari NativeScript bisa dibaca langsung dari dokumentasi API Native.

Dan ketika kita tidak tahu apa yang harus kita panggil untuk melakukan sesuatu atau bagaimana cara memanggilnya maka caranya sangat mudah. Kita hanya perlu membuka halaman dokumentasi API nativenya, misalnya halaman dokumentasi Apple untuk iOS. Disana kita dapat melihat semua detil yang kita perlukan. Tentu saja dengan NativeScript kita tidak perlu report membuat API wrapper sendiri untuk mengakses Native API yang ada pada platform yang kita target. Karena apa yang ada di Native juga ada di JavaScript. Jadi bagaimana hal ini bisa dilakukan oleh NativeScript?

NativeScript menggunakan JavaScript Virtual Machine.

Semuanya berjalan pada JavaScript Virtual Machine. Ide dasarnya adalah semua kode kita berjalan dalam Virtual Machine dan kode apapun yang ditujukan khusus pada API Native dijalankan melalui beberapa tahapan yang terhubung melalui jembatan.

Contoh kode pemanggilan file object pada level Android API melalui JavaScript.

Jika kita mencoba untuk menginisiasi file object pada level Android API maka apa yang harus kita lakukan pada JavaScript hanya memanggil new java.io.File(path). Bagimana hal ini dilakukan umumnya dibagi menjadi tiga tahapan, yaitu type conversion service, metadata dan call dispatcher.

Type conversion service.

Cara kerjanya terdapat type conversion service yang mentranslasinya menjadi native string object atau type representasi native lainnya.

Metadata.

Kemudian kita punya metadata yang melakukan pencarian dan menghubungkan fungsi yang kita panggil di JavaScript dan fungsi yang ada pada native platform.

Call dispatcher

Dan terkahir kita punya call dispatcher yang meneruskan dua tahap sebelumnya untuk membuat pemanggilan sebenarnya ke native platform. Dengan demikian pada sisi Android kita memiliki file object native dan pada sisi JavaScript kita memiliki custom proxy object yang dasarnya terhubung dengan sisi native. Sehingga setiap kali kita melakukan pemanggilan ke custom proxy object maka pemanggilan itu akan didelegasikan ke object nativenya, dan begitu juga sebaliknya ketika terdapat output dari object nativenya juga akan diteruskan ke custom proxy object yang ada di JavaScript.

NativeScript modules: tulis satu kode untuk semua

Tentu saja kita semua tidak ingin membuat kode yang hanya dapat digunakan di Android atau hanya untuk iOS. Jika demikian sama saja tidak ada artinya. Maka dari itu dalam NativeScript juga disediakan fitur yang bernama NativeScript modules. NativeScript modules ini berfungsi sebagai API abstraction, sehingga memungkinkan kita untuk memanggil fungsi native dari platform berbeda melalui satu fungsi di JavaScript. NativeScript modules saat ini telah mendukung API abstraction pada platform Android, iOS dan pada akhir 2016 pada Windows Phone.

Contoh API abstraction dalam NativeScript modules

Sebagai contoh kita dapat menggunakan contoh sebelumnya yaitu file object. Pada gambar diatas dapat kita lihat, jika kita ingin membuat file object yang dapat berjalan pada platform Android dan iOS, kita cukup memanggil modul file-system dari NativeScript modules. Selanjutnya kode yang kita buat itu otomatis ditranslate ke kode native dari masing-masing platform.

HTTP module: mudahnya membuat webservice baik dari web maupun native.

Mungkin kamu akan mengalami, ketika menulis kode JavaScript terlintas dipikiran bagaimana kita mengimplementasikan webservice, apakah dengan AJAX? Tentu tidak, karena kita sedang berada di Android dan AJAX hanya ada di web, tidak di Android atau iOS. Di lingkungan native kita otomatis juga harus menggunakan komponen native yang melakukan tugas itu. Oleh karena itu, NativeScript modules juga membangun satu modul untuk menangani masalah ini, yaitu HTTP module. Cara menggunakan modul ini untuk memanggil webservice terlihat seperti gambar diatas. Kode tersebut selanjutnya ditranslate secara otomatis ke kode native dari masing-masing platform.

Gambaran besar dari implementasi HTTP module

Secara garis besar kamu dapat menggunakan modul ini pada lapisan paling atas abstraksi, kemudian lapisan implementasi kodenya secara otomatis ditranslasikan ke masing-masing platform, dan terkahir aplikasi spesifiknya dapat langsung dijalankan pada target platform.

Gambaran yang lebih besar lagi dari implementasi HTTP module + Angular

Bahkan dalam gambaran yang lebih besar lagi, kamu dapat menambahkan Angular diatas semuanya. Sehingga ketika kita membangun aplikasi mobile native kita dapat memilih jalur kiri (XMLHTTPRequest - NS Module), atau jika kita membangun aplikasi web kita memilih jalur kanan (XMLHTTPRequest - Angular/Browser) yang pada lapisan implementasi masuk ke AJAX yang berjalan pada aplikasi web kita. Inilah kemampuan yang kita harapkan, kemampuan dari satu kode untuk digunakan baik pada aplikasi mobile yang benar-benar native (tanpa webview seperti Phonegap) maupun aplikasi berjenis website.

Satu syntax untuk semua

Intinya, sesuai dengan harapan kita semua. Semua yang dapat Angular tawarkan pada mu, dapat kamu gunakan dengan NativeScript.

Perbedaannya ada pada UI

Satu hal yang harus selalu diingat, Web UI tidak sama dengan Mobile UI. Hal ini bukan hanya karena tidak ada DIV pada Mobile UI, tetapi juga karena keduanya merupakan dua platform yang berbeda. Maka dari itu ketika kita akan membangun aplikasi dengan satu pendekatan kode, kita harus memikirkan bagaimana tampilannya akan terlihat pada keduanya.

Contoh jenis-jenis layout pada aplikasi Native

Sebagai contoh seperti yang dijelaskan sebelumnya, tidak ada DIV pada perangkat mobile, tapi ada layout-layout lain seperti Absolute layout, Grid, Stack, Wrap dan sebagainya.

Kesimpulan

Angular 2 dan NativeScript memungkinkan para developer aplikasi mobile tidak hanya dapat mengembangkan aplikasi mobile native tetapi juga aplikasi web. Ide besar dari NativeScript adalah untuk memanfaatkan arsitektur Angular yang bersifat platform agnostik untuk membangun aplikasi yang benar-benar poweful. NativeScript merupakan sebuah "jembatan" yang menghubungkan JavaScript dengan platform native seperti Android dan iOS.

NativeScript juga menyediakan API Abstraction yang berbentuk NativeScript modules, alih-alih menggunakan API Native ketika membangun aplikasi untuk platform tertentu, kita dapat menggunakan NativeScript modules sebagai lapisan abstraksi untuk menjangkau API Native dari platform yang berbeda hanya dari satu kode JavaScript. Selain itu, dengan NativeScript kita juga dapat menggunakan semua library dari pihak ketiga, baik dalam bentuk JavaScript atau library Native yang ada pada Android/iOS pada aplikasi kita.

Alasan utama kenapa kita menggunakan NativeScript adalah skill reuse (Angular2, JavaScript & CSS), code reuse (npm modules, 3rd-party iOS & Android "native" libraries), memudahkan kita karena dapat langsung menggunakan native API (tanpa perlu wrapper untuk mengakses native API, dan dapat menggunakan elemen-elemen native UI), dan terakhir NativeScript bersifat Open source.

Reference: https://www.youtube.com/watch?v=4SbiiyRSIwo

1.166
Image

Aditya Suranata

Aditya suka menulis, bukan hanya sekedar hobi, menulis menjadi medianya untuk mencurahkan pikiran dan perasaan. Di TutorKeren.com kebanyakan menyumbang tulisan sesuai dengan minat dan keahliannya yaitu pada kategori pemrograman dan elektronika. Selain itu juga gemar menulis mengenai hal-hal umum, seperti ilmu alam, sosial dan beberapa pengalamannya yang mungkin bisa berguna untuk orang lain.

Artikel Menarik Lainnya
Mari Gabung

Halo Emo 51 , Ada yang ingin disampaikan? Jangan sungkan untuk gabung diskusi ini. Silahkan Login dulu atau Daftar baru.