Declarative Prototyping with Data

Filip Kis

Media Technology and Interaction Design

KTH – Royal Institute of Technology

Stockholm, Sweden

Double degree

MSc in Computer Systems Engineering(2009)

MSc in Software Engineering(2010)

Started the PhD in 2011

Working in a team

Different level of

knowledge and expertise

High frequency of members

Not (too) technical

Sustainability?

<?php

$con = mysql_connect("localhost","peter","abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

mysql_select_db("my_db", $con);

$result = mysql_query("SELECT * FROM general_Employe_");

while($row = mysql_fetch_array($result))

{

echo $row['name'] . " " . $row['surname'];

echo "<br />";

}

mysql_close($con);

?>

<mak:list from="general.Employee e">

<mak:value expr="e.name"/>

<mak:value expr="e.surname"/>

<br/>

</mak:list>

Declarative?

UI modeling

Interaction prototypingLayout prototyping

UI template Query Annotation

Domain Model

Semantic Annotation

Example data

Graphic Transformations

Kis, F. and Bogdan, C. 2013. Proceedings of the 46th HICSS (IEEE Computer Society, Washington, DC, USA, 2013).

Lightweight Low-Level Query-Centric User Interface Modeling

Layout prototyping

Interaction Prototyping

Interpretation of modeled UI

MBUID: Model Based User Interface Development

Task Models

Cameleon Reference

Framework

Discourse Based Modeling

• Kis, F., Bogdan, C., Kaindl, H. and Falb, J. 2014. Towards Fully Declarative High-level Interaction Models: An Approach Facilitating Automated GUI Generation. Proceedings of the 47th HICSS (IEEE Computer Society, Washington, DC, USA, 2014)

• Kis. F. and Bogdan, C. Generating Modeler-Editable Interactive Prototypes from Query-Annotated Discourse Models (to be submitted)

50% PhD (year ago)

MBUID issues

Too much Software Engineering

Trying to generate everything

+ missing a context

Range Anxiety

UX trends (and tech challenges)

Responsivness

Real-time collaboration

Data from various sources

According to programmableweb.com

Tech trends

Web components

Declarative approaches

Reactive programming

JavaScript Libraries

<mak:list from="general.Employee e">

<mak:value expr="e.name"/>

<mak:value expr="e.surname"/>

<br/>

</mak:list>

Declarative!

<data from="geo.places gp1" where="gp1.text = query1">

<data from="geo.places gp2" where="gp2.text = query2">

<data from="weather.forecast wf1" where="wf1.woeid = gp1.place[0].woeid AND wf1.u = 'c'">

<data from="weather.forecast wf2" where="wf2.woeid = gp2.place[0].woeid AND wf2.u = 'c'">

{{query1}} high: {{wf1.channel.item.forecast[0].high}} <br>

{{query2}} high: {{wf2.channel.item.forecast[0].high}} <br>

The difference: {{wf1.channel.item.forecast[0].high -wf2.channel.item.forecast[0].high}}

</data>

</data>

<div ng-if="$pending">

Loading...

</div>

</data>

</data>

Remaining challenges

Understanding the data (APIs)

Learnability

Advanced interaction and new data

Evaluation in a context

Tech trends:Web components

Declarative approachesReactive programming

JavaScript Libraries

UX Trends:Responsivness Real-time collaborationData from various sources

Nomadic work

Fast and iterative processes

Bleeding edge tech

Strong community (meetups, incubators, etc.)

The context: Tech startups

Take away

Reflect on everything you do

Read & discuss other thesis

Do something you believe in