Web Terminal
Wouter Gazendam & Dick Heijink
Small company (only 6 employees)
Founded by Wouter and Mathieu van Echtelt
Amsterdam Groningen 2005
Competence management ...
Agenda
Brief history
Architecture
Client side
Server side
Demo
Agenda
Brief history
Architecture
Client side
Server side
Demo
In the beginning…
Mainframe era
Client is text terminal
Pros:
◦ Centralized application management
Cons:
◦ Client is power...
The computer gets personal
PC era
Computing power for the masses
Pros:
◦ Application ‘freedom’
Cons:
◦ Decentralized appli...
The rise of the GUI
Window Icon Menu Pointer
Rich desktop applications
Pros:
◦ Adoption of Model-View-Controller
Cons:
◦ I...
Web applications mature
Rich Internet Applications
Client/server architecture is back
Pros:
◦ Centralized application mana...
Agenda
Brief history
Architecture
Client side
Server side
Demo
Client/server architecture
Modern browser
IE6+, Firefox2+, …
Javascript support
No Flash or other plugins
Behind firewall
...
Web Terminal
Render rich user-interface
Input field, image, button, …
Record user-interactions
Selections, text entry, …
R...
Delta protocol
Synchronize user-interface
Rich user-interface on client side
Virtual user-interface on server side
Communi...
Common GUI widgets
Non-interactive: Label, image, ruler, …
Buttons: Pushbutton, link button, image button
Input: Text inpu...
Agenda
Brief history
Architecture
Client side
Server side
Demo
Browser technologies
Javascript is only available option
Prototype library
◦ Classes and inheritance ($super)
◦ Added our ...
Browser issues
DOM manipulation can be very slow
◦ Only Internet Explorer, but …
◦ Rewrote rendering mechanism to avoid DO...
Agenda
Brief history
Architecture
Client side
Server side
Demo
Smalltalk applications
windowSpec
Widget
Application
Model
UI
Builder
listen to model changes
Web Terminal applications
pageSpec
WebWidget
Application
WebWidget
Builder
listen to model changes
Software stacks
Domain
Presentation
Synchronization
Presentation
Synchronization
delta protocol
Server side Client side
Ap...
Agenda
Brief history
Architecture
Client side
Server side
Demo
Chat application: UI design
Name: Simon
I am fine, thank you.Submit
anonymous says: Is there anybody chatting?
Simon says:...
Chat application: pageSpec (1/2)
(PanelSpec new)
beVertical;
addSpec:
((GridLayoutSpec new)
columnWidths: (Array with: 100...
Chat application: pageSpec (2/2)
specAt: 2 @ 2 put: ((TextAreaSpec new)
aspect: #text;
rows: 5;
yourself));
addSpec:
((Rep...
Agenda
Brief history
Architecture
Client side
Server side
Demo
Web terminal
Upcoming SlideShare
Loading in …5
×

Web terminal

683
-1

Published on

Web Terminal
Wouter Gazendam & Dick Heijink. ESUG 2008, Amsterdam

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
683
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web terminal

  1. 1. Web Terminal Wouter Gazendam & Dick Heijink
  2. 2. Small company (only 6 employees) Founded by Wouter and Mathieu van Echtelt Amsterdam Groningen 2005 Competence management for Fire Departments Automate administrative tasks Web application Visit us at http://cosmocows.com
  3. 3. Agenda Brief history Architecture Client side Server side Demo
  4. 4. Agenda Brief history Architecture Client side Server side Demo
  5. 5. In the beginning… Mainframe era Client is text terminal Pros: ◦ Centralized application management Cons: ◦ Client is powerless without server
  6. 6. The computer gets personal PC era Computing power for the masses Pros: ◦ Application ‘freedom’ Cons: ◦ Decentralized application management
  7. 7. The rise of the GUI Window Icon Menu Pointer Rich desktop applications Pros: ◦ Adoption of Model-View-Controller Cons: ◦ Increased complexity Multidisciplinary development teams
  8. 8. Web applications mature Rich Internet Applications Client/server architecture is back Pros: ◦ Centralized application management Cons: ◦ Even more complexity to deal with…
  9. 9. Agenda Brief history Architecture Client side Server side Demo
  10. 10. Client/server architecture Modern browser IE6+, Firefox2+, … Javascript support No Flash or other plugins Behind firewall Simple request/response No Comet for server push Only for dynamic content Apache for static resources Use MVC Separate presentation from domain objects Reuse existing domain logic Rebuild presentation logic Browser Web application HTTP(S)
  11. 11. Web Terminal Render rich user-interface Input field, image, button, … Record user-interactions Selections, text entry, … Report changes to server XMLHttpRequest Server responds with user- interface updates. Compute user-interface Maintain MVC objects Replay user-interactions Talk to controller objects Update user-interface Record view updates Report updates to terminal Terminal Web application delta protocol
  12. 12. Delta protocol Synchronize user-interface Rich user-interface on client side Virtual user-interface on server side Communicate significant changes Ignore mouse/keyboard events Use high-level UI components Not bitmaps like X Window System Terminal Web application delta protocol
  13. 13. Common GUI widgets Non-interactive: Label, image, ruler, … Buttons: Pushbutton, link button, image button Input: Text input, date input, checkbox, … Selection: Listbox, radio list, tab list, tree list, … Group: Panel, grid layout, widget table, … Holder: Groupbox, widget holder, page Special: Hyperlink, HTML container Sufficient for administrative applications…
  14. 14. Agenda Brief history Architecture Client side Server side Demo
  15. 15. Browser technologies Javascript is only available option Prototype library ◦ Classes and inheritance ($super) ◦ Added our own mixin implementation jQuery ◦ Date picker and other jQuery plugins Xinha ◦ Rich text editor
  16. 16. Browser issues DOM manipulation can be very slow ◦ Only Internet Explorer, but … ◦ Rewrote rendering mechanism to avoid DOM Annoying browser differences ◦ Poor CSS support in IE6 ◦ Event handling Missing or poor debugging support
  17. 17. Agenda Brief history Architecture Client side Server side Demo
  18. 18. Smalltalk applications windowSpec Widget Application Model UI Builder listen to model changes
  19. 19. Web Terminal applications pageSpec WebWidget Application WebWidget Builder listen to model changes
  20. 20. Software stacks Domain Presentation Synchronization Presentation Synchronization delta protocol Server side Client side Application is boundary between presentation and domain objects
  21. 21. Agenda Brief history Architecture Client side Server side Demo
  22. 22. Chat application: UI design Name: Simon I am fine, thank you.Submit anonymous says: Is there anybody chatting? Simon says:Yes, I am online. anonymous says: Hello Simon, how are you? Simon says: I am fine, thank you. Text input Text area Pushbutton Label Label Label Grid layout Panel (vertical)Panel (vertical)
  23. 23. Chat application: pageSpec (1/2) (PanelSpec new) beVertical; addSpec: ((GridLayoutSpec new) columnWidths: (Array with: 100 px with: 'auto'); rowHeights: #(#auto #auto); specAt: 1 @ 1 put: (LabelSpec label: 'Name:'); specAt: 2 @ 1 put: (TextInputSpec new aspect: #name); specAt: 1 @ 2 put: ((PushButtonSpec new) label: 'Submit'; aspect: #submit; acceleration: 'enter'; yourself);
  24. 24. Chat application: pageSpec (2/2) specAt: 2 @ 2 put: ((TextAreaSpec new) aspect: #text; rows: 5; yourself)); addSpec: ((RepeaterSpec new) collectionAspect: #messages; spec: ((FX.WebTerminal.LabelSpec new) labelAspect: #yourself; yourself); yourself); yourself
  25. 25. Agenda Brief history Architecture Client side Server side Demo
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×