A framework for programmatically
designing user interfaces in JavaScript
( Dimas Rizward H. Utomo
/ 1534010037 )
Purpose
– The purpose of this
paper is to investigate the feasibility of creating a declarative
user interface language suitable for rapid prototyping of mobile and
Web apps. Moreover, this paper presents a new framework for creating
responsive user interfaces using JavaScript.
– Very little existing
research has been done in JavaScript-specific declarative user
interface (UI) languages for mobile Web apps. This paper introduces a
new framework, along with several case studies that create modern
responsive designs programmatically.
– The fully
implemented prototype verifies the feasibility of a JavaScript-based
declarative user interface library. This paper demonstrates that
existing solutions are unwieldy and cumbersome to dynamically create
and adjust nodes within a visual syntax of program code.
– This paper presents
the Guix.js platform, a declarative UI library for rapid development
of Web-based mobile interfaces in JavaScript.
Declarative user interfaces have unique
advantages for the development of applications. Traditional
programming syntax and API development make it difficult to visualize
layouts, often leading to cumbersome and “shortest solution”
approaches to interfaces. Although, ideally, artists may design
interfaces, there are many situations where the interface is so
dynamic that the majority, if not all, of the application’s
interface must be created within program code.
The following four examples demonstrate the
shortest code approaches, in four different frameworks, to
programmatically create a HTML header 1 Document Object Model (DOM)
element (H1) and append it to a div element. In Algorithm 1, this is
done in pure JavaScript (with the included text variable
declaration). As can be seen, this example is overly lengthy and
difficult to read. In Algorithm 2, this is done using jQuery, a
popular library that simplifies some JavaScript actions. In Algorithm
3, a declarative user interface (UI) framework Nano.js is used. This
framework does simplify the code required when compared with
JavaScript, but it is still overly verbose. In Algorithm 4, the code
solution is shown using the JavaScript framework Guix.js, the
framework presented with this paper. As can be seen, its readability
is far more ideal than the previous examples, foregoing the need for
constructors, object parameters and named parameters within those
objects:
Algorithm
1. Using native JavaScript example
var
text = “Title Text”;
var
div = document.createElement(“div”);
var
h1 = document.createElement(h1);
h1.innerHTML
= text;
div.appendChild(h1);
Algorithm
2. Using jQuery example
$(“
< div/ > ”).append(“ < h1 > ”+text“ < /h1 >
”);
Algorithm
3. Using Nano.js example
new
nano({parent: nano.body(), tag: “div”})
.add({tag:
‘h1′, text: text});
Algorithm
4: Using this paper’s framework example
div(h1(text));
Developer-friendly
programming libraries and architectures appear to be the direction
for the fast-paced and high-user-requirement world of mobile
application development. Such frameworks require a modern look at the
requirements and expectations of user applications within
internationally pervasive and short runtime life cycle applications.
This
paper presents a framework for rapidly developing mobile Web
applications in JavaScript. It builds on existing principles from
declarative UI languages. However, it differs from other JavaScript
frameworks in that the user interface can be designed entirely from
JavaScript. Furthermore, the system features modern user interface
features such as multilingual support and being able to save and load
the state of any set of HTML components.
Framework untuk Pengembangan Tampilan
Antar-Muka dengan Javascript
( Dimas Rizward H. Utomo / 1534010037 )
Tujuan
– Makalah ini bertujuan untuk meneliti
kelayakan dari membuat sebuah bahasa pemrograman deklaratif untuk
pengembangan tampilan antar-muka untuk pengujian secara cepat untuk
aplikasi mobile dan berbasis web. Selain itu, makalah ini
memperkenalkan sebuah framework baru untuk membuat tampilan
responsive dengan menggunakan Javascript.
Desain/Metodologi/Pendekatan
– Sangat sedikit penelitian yang telah
dilakukan dalam
bahasa deklaratif untuk pengembangan tampilan antar-muka (UI) yang
dikhususkan dengan Javascript untuk aplikasi mobile maupun berbasis
web. Makalah ini memperkenalkan sebuah cara baru, dibekali dengan
beberapa studi kasus untuk membuat tampilan responsif yang modern
dalam konteks pemrograman.
Penemuan
– Rancangan awal yang
telah sepenuhnya telah diimplementasikan membuktikan kelayakan
library tampilan antar-muka dengan Javascript. Makalah ini
menunjukkan bahwa solusi yang ada terasa berat dan rumit untuk secara
dinamis membuat dan menyesuaikan simpul-simpul (nodes) dalam
visualisasi sintaks dari kode program
Keaslian/Nilai
– Makalah
ini mempersembahkan Guix.js, sebuah library untuk pengembangan
antar-muka secara deklaratif yang mempercepat pengembangan dari
tampilan antar-muka berbasis web dengan Javascript
Pengembangan tampilan
antar-muka dengan cara deklaratif (menyajikan logika komputasi tanpa
kontrol terhadap eksekusi program)
memiliki
keunggulan yang unik dalam pengembangan aplikasi. Sintaks pemrograman
tradisional dan pengembangan API membuat sulitnya menyajikan
visualisasi dari tata letak yang ada sehingga sering menimbulkan
kerumitan dan “solusi sederhana” terhadap tampilan antar-muka.
Meskipun idealnya perancang atau desainer yang melakukan desain
terhadap tampilan antar-muka, ada banyak situasi di mana tampilan
yang begitu dinamis yang mayoritas bagian-bagiannya harus dibuat
dengan cara pemrograman langsung.
Berikut ini terdapat
empat contoh yang menunjukkan pendekatan untuk cara paling sederhana
dalam empat framework yang berbeda, untuk membuat bagian atas
(header) dari halaman HTML dengan menggunakan elemen heading (H1) dan
menggabungkannya dengan sebuah elemen div pada pemrograman DOM
(Document Object Model) . Pada algoritma pertama, contoh yang
disajikan menggunakan sepenuhnya Javascript vanilla tanpa adanya
framework lain (yang mana disertai dengan deklarasi variabel dari
teks yang digunakan). Dari contoh ini, dapat dilihat bahwa kode yang
digunakan sangatlah panjang dan sulit untuk dibaca. Sedangkan pada
algoritma kedua, dengan menggunakan jQuery, library yang paling
banyak digunakan karena penyederhanaan terhadap sintaks yang ada pada
Javascript. Pada algoritma ketiga, sebuah tampilan antar-muka dengan
pemrograman deklaratif dengan menggunakan framework Nano.js.
Framework ini cukup menyederhanakan langkah-langkah yang dibutuhkan
jika dibandingkan dengan pure Javascript, tapi masih terlalu
bertele-tele. Pada algoritma keempat, solusi yang disajikan dengan
menggunakan framework Guix.js, framework yang disertai pada makalah
ini. Seperti yang dapat dilihat bahwa, kode yang ditulis lebih dapat
dibaca daripada contoh-contoh sebelumnya, yang membutuhkan adanya
konstruktor, parameter objek ataupun parameter-parameter didalam
masing-masing objek.
Algoritma
1. Contoh dengan pure Javascript
var
text = “Title Text”;
var
div = document.createElement(“div”);
var
h1 = document.createElement(h1);
h1.innerHTML
= text;
div.appendChild(h1);
Algoritma
2. Contoh dengan jQuery
$(“
< div/ > ”).append(“ < h1 > ”+text“ < /h1 >
”);
Algoritma
3. Contoh dengan Nano.js
new
nano({parent: nano.body(), tag: “div”})
.add({tag:
‘h1′, text: text});
Algorithm
4: Contoh dengan framework yang disertai pada makalah ini
div(h1(text));
Library untuk bahasa
pemograman dan arsitektur yang developer-friendly (sesuai atau cocok
dengan developer) tampak akan menjadi arah utama untuk pengembangan
yang membutuhkan kebutuhan yang tinggi dan cepat dalam
pengembangan aplikasi berbasis mobile. Framework sejenis ini
membutuhkan sebuah tampilan yang modern terhadap kebutuhan dan
ekspektasi dari pengguna aplikasi dalam lingkup yang meliputi secara
global dan runtime dengan siklus hidup yang pendek.
Makalah ini
mempersembahkan sebuah framework untuk pengembangan aplikasi berbasis
web maupun mobile secara cepat dengan Javascript. Dibuat berdasarkan
prinsip-prinsip yang ada dari bahasa UI deklaratif. Namun, framework
ini sangat berbeda dengan Javascript. Selain itu, fitur-fitur pada
tampilan antar muka yang modern mengutamakan adanya dukungan terhadap
multilingual dan dapat menyimpan dan membuat semua status dan keadaan
dari tiap-tiap komponen pada HTML .
Tidak ada komentar :
Posting Komentar