Framework Architecture Overview

ABOUT ME
• M.Sc. Martin Wittemann

• works at

• framework architect

• started in 2007 with

• @wittemann on

• won $18 in Atlantic City!

pure JavaScript

no HTML or CSS know-how for RIAs

no plugin needed

LGPL / EPL

JAVASCRIPT, REALLY?
c=document.body.children[0];h=t=150;L=w=c.width=800;u=D=50;H=
[];R=Math.random;for($ in C=c.getContext('2d'))C[$[J=X=Y=0]+
($[6]||'')]=C[$];setInterval("if(D)for(x=405,i=y=I=0;i<1e4;)L=H[i+
+]=i<9|L<w&R()<.3?w:R()*u+80|0;$=++t%99-u;$=$*$/8+20;y+=Y;x+=y-H
[(x+X)/u|0]>9?0:X;j=H[o=x/u|0];Y=y<j|Y<0?Y+1:(y=j,J?-10:0);with(C)
{A=function(c,x,y,r){r&&a(x,y,r,0,7,0);fillStyle=c.P?
c:'#'+'ceff99ff78f86eeaaffffd45333'.substr(c*3,3);f();ba()};for
(D=Z=0;Z<21;Z++){Z<7&&A(Z%6,w/2,235,Z?250-15*Z:w);i=o-5+Z;S=x-
i*u;B=S>9&S<41;ta(u-S,0);G=cL(0,T=H[i],0,T+9);T%6||(A
(2,25,T-7,5),y^j||B&&(H[i]-=.1,I++));G.P=G.addColorStop;G.P(0,i
%7?'#7e3':(i^o||y^T||(y=H[i]+=$/99),'#c7a'));G.P(1,'#ca6');i%4&&A
(6,t/2%200,9,i%2?27:33);m(-6,h);qt(-6,T,3,T);l(47,T);qt(56,T,
56,h);A(G);i%3?0:T<w?(A(G,33,T-15,10),fc(31,T-7,4,9)):(A(7,25,$,
9),A(G,25,$,5),fc(24,$,2,h),D=B&y>$-9?1:D);ta(S-u,0)}A
(6,u,y-9,11);A(5,M=u+X*.7,Q=y-9+Y/5,8);A(8,M,Q,5);fx(I+'¢',5,15)}
D=y>h?1:D",u);onkeydown=onkeyup=function(e){E=e.type[5]?
4:0;e=e.keyCode;J=e^38?J:E;X=e^37?e^39?X:E:-E}

http://js1k.com/2010-ﬁrst/demo/635

OBJECT ORIENTATION

qx.Class.define("Bicycle", {
extend : qx.core.Object,
members : {
__speed : 0,
speedUp : function(increment) {
this.__speed += increment;
}
}
});

OBJECT ORIENTATION

qx.Class.define("Bicycle", { class Bicycle {
extend : qx.core.Object, int speed = 0;
members : {
__speed : 0, void speedUp(int increment) {
speedUp : function(increment) { speed = speed + increment;
this.__speed += increment; }
} }
}
});

SPEED

http://www.macstories.net/news/new-chrome-beta-is-faster-includes-revamped-settings-ui/

SPEED

http://blogs.msdn.com/b/ie/archive/2010/11/17/html5-and-real-world-site-performance-seventh-ie9-platform-preview-available-for-developers.aspx

ARCHITECTURE

Widgets Layouts Theming
GUI
Toolkit
UI Core

Data Binding

I18n
HTML CSS
Low-Level Parts Animation
Rendering Selector

Browser Transport BOM DOM
Browser
Abstraction Events

Language
Core OO
Extension
Custom Events

LOW LEVEL FRAMEWORK

• Base for the Widget Toolkit

• Cross browser layer

• Works standalone

• Feature set like and more

VIRTUAL
• Suitable for huge data sets

• Does not render all data

SelectBox ComboBox List Tree Table

INLINE APPLICATION
plain
HTML

qo o
xdo
app o
lica
t io n

LAYOUTS

• Custom layout managers built in JavaScript

• No cross browser issues

• predeﬁned set of layouts

THEMING

• No CSS knowledge needed

• No cross browser code

Modern
Classic
Simple

DATA BINDING

Formating

Filtering
Sorting
Model View

Validation
Converting

IDEA
a :A b :A
<<binding>>
+ prop : 12 + prop :

IDEA
a :A b :A
<<binding>>
+ prop : 12 + prop : 12

IDEA
a :A b :A
<<binding>>
+ prop : 23 + prop : 23

IDEA
a :A b :A
<<binding>>
+ prop : 23 + prop : 30

a.bind("prop", b, "prop");

DATA BINDING

Data Store Model Controller View

DATA BINDING


JSON
ﬁle / service

DATA BINDING


load JSON,
convert to model

DATA BINDING


simple qooxdoo
object with
properties

DATA BINDING


keeps model and
view in sync

DATA BINDING


simple widget like
list, tree, form, ...

INTERNATIONALIZATION

• Built-in internationalization support

• Based on standardized ﬁles

• Easy to switch during runtime

INTERNATIONALIZATION
without translation

var button1 = new qx.ui.form.Button("First Button");
this.getRoot().add(button1);

with translation

var button1 = new qx.ui.form.Button(this.tr("First Button"));
this.getRoot().add(button1);

TOOLING
• Automatic dependency detection

• Packaging for development and deployment

• Optimization and miniﬁcation

TESTING
• Integrated unit test framework

• Integrated support for Selenium tests

• Continuous integration for the framework

INSPECTOR
• Special qooxdoo debugging tool

• Handy console for debugging

• Select widget by mouse

• Selenium integration

ARCHITECTURE

Widgets Layouts Theming

RIA Framework GUI
Toolkit
UI Core

Data Binding
{

I18n
HTML CSS
Low-Level Parts Animation
Rendering Selector

Low Level Framework
Browser Transport BOM DOM
Browser
Abstraction Events

Universal Framework
Language
Core OO
Extension
Custom Events

ARCHITECTURE
Mobile
Framework W!
NE
Widgets
Mobile
Layouts Theming

RIA Framework GUI
Toolkit
UI Core Widgets

Data Binding
{

I18n
HTML CSS
Low-Level Parts
Rendering Selector
Animation

Low Level Framework
Browser Transport
Browser
BOM DOM
Abstraction Events

Universal Framework Core OO
Language
Extension
Custom Events

Try it yourself!
http://qooxdoo.org/
http://playground.qooxdoo.org/

Framework Architecture Overview

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (12)

Andere mochten auch

Andere mochten auch (7)

Ähnlich wie Framework Architecture Overview

Ähnlich wie Framework Architecture Overview (20)

Mehr von Martin Wittemann

Mehr von Martin Wittemann (7)

Framework Architecture Overview