Este documento apresenta o framework Javascript MIRA para construção de interfaces adaptativas em aplicações REST. Ele descreve como o MIRA utiliza regras e modelos de dados para selecionar e adaptar interfaces abstratas em interfaces concretas utilizando widgets. Exemplos demonstram como o MIRA pode ser usado para interfaces baseadas na API do GitHub.
MIRA - Um framework Javascript para construção de interfaces adaptativas em aplicações REST
1. Um framework Javascript para construção de
interfaces adaptativas em aplicações REST
Apoio
W3C Brazil Office | NiC.br | Microsoft Brasil Open Source
http://mira.tecweb.inf.puc-rio.br/
2. Olá, eu sou Ezequiel Bertti
• MSc Engenharia de Software para Web
• Arquiteto de Sistema
• Desenvolvedor FullStack
• https://twitter.com/ebertti
• https://github.com/ebertti
• https://br.linkedin.com/in/ebertti
• ebertti@gmail.com
EBertti, Ezeq, .exe, Exec, Zeq ou Zequinha
9. Qual o esforço necessário para
desenvolver a interface de uma
aplicação?
Qual a proporção de tempo? De linhas de código? De testes?
E depois de “pronto”? Como é dar manutenção?
10. Podemos dizer que é quase a metade de tudo
Tipicamente, a interface gráfica, representa cerca de 48% do código
fonte, requer cerca de 45% do tempo de desenvolvimento e de 50% do
tempo de aplicação, e atinge 37% do tempo de manutenção [1]
[1] BRAD A. MYERS, M. B. R. Survey on user interface programming
37%
50%
45%
48%
0% 20% 40% 60% 80% 100%
Manutenção
Aplicação
Desenvolvimento
Código Fonte
Interface Outros
12. Mas e quando a
regra de negócio
muda?
Quando o modelo de dados muda?
Quando uma validação muda?
Quando um bug é encontrado?
Como fazer para dar manutenção a tantas interfaces?
16. Atualizando as visualizações de feed com
novas regras
• Destacar tipos de feed com css
• External → out
• Internal → in
• Tweet → twt
• Alguns feeds podem não ter link
• Alguns feeds podem ter imagem, e
conter link, caso o feed tenha link
<html><body><div id="feeds">
{% for feed in feeds %}
<div class="feed
{% if feed.type == 'external' %} out
{% elif feed.type == 'internal' %} in
{% elif feed.type == 'tweet' %} twt
{% endif %}">
{% if feed.image %}
{% if feed.link %}
<a href="{{ feed.link }}">
<img src="{{ feed.image }}"/>
</a>
{% else %}
<img src="{{ feed.image }}"/>
{% endif %}
{% endif %}
<h3>
{% if feed.link %}
<a href="{{ feed.link }}">{{ feed.title }}</a>
{% else %}
{{ feed.title }}
{% endif %}
</h3>
</div>
{% endfor %}
</div></body></html>
17. <div id="feeds">
<div ng-repeat="feed in feeds" ng-class="['feed',
{ out:feed.type == 'external',
in:feed.type == 'internal',
twt:feed.type == 'tweet' }]">
<a ng-if="feed.link && feed.image">
<img ng-src="feed.image"/>
</a>
<img ng-hide="feed.link" ng-show="feed.image“ ng-src="feed.image"/>
<h3>
<a ng-if="feed.link" ng-href="feed.link">
{{ feed.title }}
</a>
<span ng-hide="feed.link">
{{ feed.title }}
</span>
</h3>
</div>
</div>
E com um framework moderno, não muda
mui
20. Como o MIRA pode ajudar?
Model Interface for REST Aplications
21. Interface dirigida por modelos utilizando
regras para adaptar as interfaces
Modelo de
dados
Seleção de
interface
Interface
Abstrata
Interface
concreta
Widgets
Concretos
Projetista
(analista/arquiteto/engenheiro)
UX
(desenvolvedor/designer)
22. Estrutura de uma interface com MIRA
Dado Contexto Interface Exibição