SlideShare a Scribd company logo
Web Abstractions 1
       data models, user interface templates, access control


                            Lecture 3



                                                   Course IN4308
       Eelco Visser
                                        Master Computer Science
  http://eelcovisser.org            Delft University of Technology
Wednesday, March 10, 2010
Application Model = Domain Model + Interaction Design




                                      System




                                Domain Model = State?
                            Interaction Design = Behaviour?
Wednesday, March 10, 2010
From high-level declarative model      Model



                  automatically generate



                      efficient & complete
                        implementation      System


Wednesday, March 10, 2010
How to model applications?




Wednesday, March 10, 2010
Wat makes a blog?




Wednesday, March 10, 2010
Wat makes a webshop?




Wednesday, March 10, 2010
Wat makes a chair?




Wednesday, March 10, 2010
Wat makes a chair?




Wednesday, March 10, 2010
Purpose
                              =>
                            Features
                               ?
Wednesday, March 10, 2010
Application Model = Collection of UML Diagrams




                            generate implementation from model
Wednesday, March 10, 2010
Details make the difference


               -      Consider
                      ★ interaction styles
                      ★ layout
                      ★ color schemes
                      ★ fonts
                      ★ personalization
                      ★ ...

               -      Parameters of the modeling language?
                      ★ generic, orthogonal definition?



Wednesday, March 10, 2010
UI programming is like assembly programming




                             concerned with screen components

                            not with interaction styles & concepts




                            want: declaration of user interaction

Wednesday, March 10, 2010
Problem: ‘UI tweaking’



          - code generation produces standardized/limited UI

                              Alternative: extra ‘hand coding’
                            e.g. UI templates not part of model


                                    Conclusion:
                 - modeling not adequate for interaction design
                    - user interface programming is low-level
Wednesday, March 10, 2010
instead of a general purpose solution (UML)

                        address specific class of software systems




Wednesday, March 10, 2010
Intermediate Goal for MDSD



                        develop better programming abstractions

                                    for horizontal domains

                              before tackling vertical domains




                            ‘let’s first make it easier to build web apps’
Wednesday, March 10, 2010
vertical (‘business’) domains




                     UI



                    DM



                    DB



                            accounting   horizontal (technical) domains
Wednesday, March 10, 2010
Properties of Domain-Specific Languages

               DSL design requires tradeoff between
               -      Expressivity
               -      Coverage
               -      Portability
               -      Interoperability
               -      Completeness
               -      Maintainability
               Extensive discussion in Quarter 4


Wednesday, March 10, 2010
The Web Domain


Wednesday, March 10, 2010
browser                         server              database




                                          app.war


                            a web application lives on the server
Wednesday, March 10, 2010
Concerns in Web Programming

               -      Persistent data
                      ★ data integrity
                      ★ search

               -      User interface
                      ★ data validation
                      ★ styling, layout
                      ★ navigation
                      ★ actions

               -      Workflow
                                               d mo re ...
               -      Access control         an
Wednesday, March 10, 2010
Problems in Web Programming



               -      Separate language for separate concerns
                      ★ (that’s good)

               -      Lack of integration
                      ★ no consistency checking
                      ★ different language styles

               -      Low-level configuration
                      ★ boilerplate code




Wednesday, March 10, 2010
WebDSL
          a domain-specific language for web applications




                  separation of concerns & linguistic integration


Wednesday, March 10, 2010
<screenshot webdsl.org>




Wednesday, March 10, 2010
<screenshot researchr>




Wednesday, March 10, 2010
<screenshot tweetview>




Wednesday, March 10, 2010
<screenshot yellowgrass>




Wednesday, March 10, 2010
<screenshot department>




Wednesday, March 10, 2010
Web Abstractions
                                     from a declarative point of view
                            (we’ll investigate underlying mechanisms later)

      Eelco Visser. WebDSL: A Case Study in Domain-Specific Language Engineering. GTTSE 2008: 291-373

Wednesday, March 10, 2010
Data Model Definition

   entity declaration
                                                   property




Wednesday, March 10, 2010
Data Model for Wiki

                                                  object identifier




                                          domain-specific type

Wednesday, March 10, 2010
Page Definition & Navigation


     page navigation (page call)




   page definiti
                            on
Wednesday, March 10, 2010
Displaying Data


                                              rendering values




     markup




Wednesday, March 10, 2010
Templates (Page Fragments)

         template definition




        template call
                                                         parameter




Wednesday, March 10, 2010
wiki.css

Wednesday, March 10, 2010
Modifying Data




     data
    binding

                   submit

                                             page
                                             flow
Wednesday, March 10, 2010
Core Wiki




                            navigate




        action
Wednesday, March 10, 2010
Core Wiki


                               navigate




        action
Wednesday, March 10, 2010
Creating Objects

                                         find/create object by id




Wednesday, March 10, 2010
Modifying Data




                                     pass string

Wednesday, March 10, 2010
Core Wiki


                               navigate creates page




        action
Wednesday, March 10, 2010
Page Index




Wednesday, March 10, 2010
Output Object = Navigation




Wednesday, March 10, 2010
Output Object = Navigation




  custom definition                                 default definition


Wednesday, March 10, 2010
Access Control

         Danny M. Groenewegen, Eelco Visser. Declarative Access Control for WebDSL:
         Combining Language Integration and Separation of Concerns. ICWE 2008: 175-188


Wednesday, March 10, 2010
Principal




                                  representation of principal




  turn on access control

Wednesday, March 10, 2010
Principal




                                  representation of principal




  turn on access control

Wednesday, March 10, 2010
Authentication




Wednesday, March 10, 2010
Authentication




Wednesday, March 10, 2010
Authentication




Wednesday, March 10, 2010
Registration




Wednesday, March 10, 2010
Access Control Rules

                                              ‘may access page f with
                                               argument x if boolean
                                                expression e is true’




Wednesday, March 10, 2010
Wiki Access Control Rules




                                                                     ‘anyone can view
                                                                    existing pages, only
                                                                    logged in users can
                                                                       create pages’


                            ‘only logged in users may edit pages’


Wednesday, March 10, 2010
Wiki Access Control Rules




Wednesday, March 10, 2010
Wiki Access Control Rules




Wednesday, March 10, 2010
Wiki Access Control Rules




Wednesday, March 10, 2010
Wiki Access Control Rules




Wednesday, March 10, 2010
More Web Abstractions

               -      Access control policies
                      ★ constraints over objects
                      ★ role-based AC, discretionary AC

               -      Data validation
                      ★ form validation
                      ★ data integrity

               -      Loading/accessing templates (partial pages)
                      ★ (AJAX)

               -      Search
               -      Workflow

Wednesday, March 10, 2010
The Future of Quarter 3

               -      Lecture 4
                      ★ More web abstractions

               -      Lecture 5
                      ★ What does WebDSL abstract from?
                      ★ Or: from DSL to Code

               -      Lecture 6
                      ★ Language workbenches
                      ★ Grammars

               -      Lecture 7
                      ★ Language modeling

Wednesday, March 10, 2010
Schedule
               Lab this week
                      ★ Finish & submit proposal Design 1
                      ★ Entity declarations
                      ★ Basic setup for user interface

               Cases
                      ★ Case 1: domain analysis in digital library domain
                      ★ Case 2: web abstractions

               Next
                      ★ Week 4 is ‘spring’ break; Week 5: lecture no, lab yes
                      ★ Week 6: access control policies, validation, search, ...

Wednesday, March 10, 2010

More Related Content

PPTX
Word Lesson 9 Creating Mass Mailing Documents
PPTX
Word Lesson 9 power point
PDF
Imagina Round Table MakeMyWorlds
PPTX
OpenID Foundation Update at RSA Conference
PDF
PDF
Building DSLs with the Spoofax Language Workbench
PDF
Code Generation
PDF
TI1220 Lecture 14: Domain-Specific Languages
Word Lesson 9 Creating Mass Mailing Documents
Word Lesson 9 power point
Imagina Round Table MakeMyWorlds
OpenID Foundation Update at RSA Conference
Building DSLs with the Spoofax Language Workbench
Code Generation
TI1220 Lecture 14: Domain-Specific Languages

Viewers also liked (11)

PDF
Model-Driven Software Development - Context-Sensitive Transformation
PDF
Type analysis
PDF
Composing Domain-Specific Languages
PDF
Model-Driven Software Development - Web Abstractions 2
PDF
Static Analysis
PDF
Dataflow Analysis
PDF
From Muddling to Modelling
PDF
Domain Analysis & Data Modeling
PDF
Dynamic Semantics
PDF
Software languages
PDF
Programming languages
Model-Driven Software Development - Context-Sensitive Transformation
Type analysis
Composing Domain-Specific Languages
Model-Driven Software Development - Web Abstractions 2
Static Analysis
Dataflow Analysis
From Muddling to Modelling
Domain Analysis & Data Modeling
Dynamic Semantics
Software languages
Programming languages
Ad

Similar to Model-Driven Software Development - Web Abstractions 1 (20)

PDF
Hands on puremvc
PDF
Mobile Development with uPortal and Infusion
KEY
Web Standards and Accessibility
PDF
App in a Browser
PPT
Trends in Programming Technology you might want to keep an eye on af Bent Tho...
PDF
Where User Experience And Software Engineering Meet
PDF
9.7 Things Every Programmer Should Know About User Experience
PPTX
HCI_Unit 5.pptxcxxsabc.sbc/,sabc,sajcsl/lkc bxsl/'ck
PDF
IUE Integrating UI Design Specs
PDF
06 View Controllers
PDF
Calloway introduction
PDF
Microsoft UX Platform and Tool Overview By Chris Bernard
PDF
Software Engineering In PHP
PDF
Tools For jQuery Application Architecture (Extended Slides)
PDF
Journey over Destination: creating an effective framework with UX tools
PPTX
How to Implement Domain Driven Design in Real Life SDLC
PDF
Linguistic Abstraction for the Web
PDF
Taming The View for Rubyconf India
PDF
HTML5: About Damn Time
PDF
TYPO3 5.0 The Business Case
Hands on puremvc
Mobile Development with uPortal and Infusion
Web Standards and Accessibility
App in a Browser
Trends in Programming Technology you might want to keep an eye on af Bent Tho...
Where User Experience And Software Engineering Meet
9.7 Things Every Programmer Should Know About User Experience
HCI_Unit 5.pptxcxxsabc.sbc/,sabc,sajcsl/lkc bxsl/'ck
IUE Integrating UI Design Specs
06 View Controllers
Calloway introduction
Microsoft UX Platform and Tool Overview By Chris Bernard
Software Engineering In PHP
Tools For jQuery Application Architecture (Extended Slides)
Journey over Destination: creating an effective framework with UX tools
How to Implement Domain Driven Design in Real Life SDLC
Linguistic Abstraction for the Web
Taming The View for Rubyconf India
HTML5: About Damn Time
TYPO3 5.0 The Business Case
Ad

More from Eelco Visser (20)

PDF
CS4200 2019 | Lecture 5 | Transformation by Term Rewriting
PDF
CS4200 2019 | Lecture 4 | Syntactic Services
PDF
CS4200 2019 | Lecture 3 | Parsing
PDF
CS4200 2019 | Lecture 2 | syntax-definition
PDF
CS4200 2019 Lecture 1: Introduction
PDF
A Direct Semantics of Declarative Disambiguation Rules
PDF
Declarative Type System Specification with Statix
PDF
Compiler Construction | Lecture 17 | Beyond Compiler Construction
PDF
Domain Specific Languages for Parallel Graph AnalytiX (PGX)
PDF
Compiler Construction | Lecture 15 | Memory Management
PDF
Compiler Construction | Lecture 14 | Interpreters
PDF
Compiler Construction | Lecture 13 | Code Generation
PDF
Compiler Construction | Lecture 12 | Virtual Machines
PDF
Compiler Construction | Lecture 11 | Monotone Frameworks
PDF
Compiler Construction | Lecture 10 | Data-Flow Analysis
PDF
Compiler Construction | Lecture 9 | Constraint Resolution
PDF
Compiler Construction | Lecture 8 | Type Constraints
PDF
Compiler Construction | Lecture 7 | Type Checking
PDF
Compiler Construction | Lecture 6 | Introduction to Static Analysis
PDF
Compiler Construction | Lecture 5 | Transformation by Term Rewriting
CS4200 2019 | Lecture 5 | Transformation by Term Rewriting
CS4200 2019 | Lecture 4 | Syntactic Services
CS4200 2019 | Lecture 3 | Parsing
CS4200 2019 | Lecture 2 | syntax-definition
CS4200 2019 Lecture 1: Introduction
A Direct Semantics of Declarative Disambiguation Rules
Declarative Type System Specification with Statix
Compiler Construction | Lecture 17 | Beyond Compiler Construction
Domain Specific Languages for Parallel Graph AnalytiX (PGX)
Compiler Construction | Lecture 15 | Memory Management
Compiler Construction | Lecture 14 | Interpreters
Compiler Construction | Lecture 13 | Code Generation
Compiler Construction | Lecture 12 | Virtual Machines
Compiler Construction | Lecture 11 | Monotone Frameworks
Compiler Construction | Lecture 10 | Data-Flow Analysis
Compiler Construction | Lecture 9 | Constraint Resolution
Compiler Construction | Lecture 8 | Type Constraints
Compiler Construction | Lecture 7 | Type Checking
Compiler Construction | Lecture 6 | Introduction to Static Analysis
Compiler Construction | Lecture 5 | Transformation by Term Rewriting

Recently uploaded (20)

PPTX
PPH.pptx obstetrics and gynecology in nursing
PDF
102 student loan defaulters named and shamed – Is someone you know on the list?
PPTX
master seminar digital applications in india
PPTX
GDM (1) (1).pptx small presentation for students
PDF
2.FourierTransform-ShortQuestionswithAnswers.pdf
PPTX
IMMUNITY IMMUNITY refers to protection against infection, and the immune syst...
PPTX
human mycosis Human fungal infections are called human mycosis..pptx
PPTX
Lesson notes of climatology university.
PPTX
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
PPTX
Cell Structure & Organelles in detailed.
PPTX
Cell Types and Its function , kingdom of life
PDF
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
PPTX
Pharma ospi slides which help in ospi learning
PPTX
Institutional Correction lecture only . . .
PDF
Abdominal Access Techniques with Prof. Dr. R K Mishra
PDF
Sports Quiz easy sports quiz sports quiz
PDF
FourierSeries-QuestionsWithAnswers(Part-A).pdf
PPTX
Renaissance Architecture: A Journey from Faith to Humanism
PDF
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
PPTX
Pharmacology of Heart Failure /Pharmacotherapy of CHF
PPH.pptx obstetrics and gynecology in nursing
102 student loan defaulters named and shamed – Is someone you know on the list?
master seminar digital applications in india
GDM (1) (1).pptx small presentation for students
2.FourierTransform-ShortQuestionswithAnswers.pdf
IMMUNITY IMMUNITY refers to protection against infection, and the immune syst...
human mycosis Human fungal infections are called human mycosis..pptx
Lesson notes of climatology university.
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
Cell Structure & Organelles in detailed.
Cell Types and Its function , kingdom of life
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
Pharma ospi slides which help in ospi learning
Institutional Correction lecture only . . .
Abdominal Access Techniques with Prof. Dr. R K Mishra
Sports Quiz easy sports quiz sports quiz
FourierSeries-QuestionsWithAnswers(Part-A).pdf
Renaissance Architecture: A Journey from Faith to Humanism
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
Pharmacology of Heart Failure /Pharmacotherapy of CHF

Model-Driven Software Development - Web Abstractions 1

  • 1. Web Abstractions 1 data models, user interface templates, access control Lecture 3 Course IN4308 Eelco Visser Master Computer Science http://eelcovisser.org Delft University of Technology Wednesday, March 10, 2010
  • 2. Application Model = Domain Model + Interaction Design System Domain Model = State? Interaction Design = Behaviour? Wednesday, March 10, 2010
  • 3. From high-level declarative model Model automatically generate efficient & complete implementation System Wednesday, March 10, 2010
  • 4. How to model applications? Wednesday, March 10, 2010
  • 5. Wat makes a blog? Wednesday, March 10, 2010
  • 6. Wat makes a webshop? Wednesday, March 10, 2010
  • 7. Wat makes a chair? Wednesday, March 10, 2010
  • 8. Wat makes a chair? Wednesday, March 10, 2010
  • 9. Purpose => Features ? Wednesday, March 10, 2010
  • 10. Application Model = Collection of UML Diagrams generate implementation from model Wednesday, March 10, 2010
  • 11. Details make the difference - Consider ★ interaction styles ★ layout ★ color schemes ★ fonts ★ personalization ★ ... - Parameters of the modeling language? ★ generic, orthogonal definition? Wednesday, March 10, 2010
  • 12. UI programming is like assembly programming concerned with screen components not with interaction styles & concepts want: declaration of user interaction Wednesday, March 10, 2010
  • 13. Problem: ‘UI tweaking’ - code generation produces standardized/limited UI Alternative: extra ‘hand coding’ e.g. UI templates not part of model Conclusion: - modeling not adequate for interaction design - user interface programming is low-level Wednesday, March 10, 2010
  • 14. instead of a general purpose solution (UML) address specific class of software systems Wednesday, March 10, 2010
  • 15. Intermediate Goal for MDSD develop better programming abstractions for horizontal domains before tackling vertical domains ‘let’s first make it easier to build web apps’ Wednesday, March 10, 2010
  • 16. vertical (‘business’) domains UI DM DB accounting horizontal (technical) domains Wednesday, March 10, 2010
  • 17. Properties of Domain-Specific Languages DSL design requires tradeoff between - Expressivity - Coverage - Portability - Interoperability - Completeness - Maintainability Extensive discussion in Quarter 4 Wednesday, March 10, 2010
  • 18. The Web Domain Wednesday, March 10, 2010
  • 19. browser server database app.war a web application lives on the server Wednesday, March 10, 2010
  • 20. Concerns in Web Programming - Persistent data ★ data integrity ★ search - User interface ★ data validation ★ styling, layout ★ navigation ★ actions - Workflow d mo re ... - Access control an Wednesday, March 10, 2010
  • 21. Problems in Web Programming - Separate language for separate concerns ★ (that’s good) - Lack of integration ★ no consistency checking ★ different language styles - Low-level configuration ★ boilerplate code Wednesday, March 10, 2010
  • 22. WebDSL a domain-specific language for web applications separation of concerns & linguistic integration Wednesday, March 10, 2010
  • 28. Web Abstractions from a declarative point of view (we’ll investigate underlying mechanisms later) Eelco Visser. WebDSL: A Case Study in Domain-Specific Language Engineering. GTTSE 2008: 291-373 Wednesday, March 10, 2010
  • 29. Data Model Definition entity declaration property Wednesday, March 10, 2010
  • 30. Data Model for Wiki object identifier domain-specific type Wednesday, March 10, 2010
  • 31. Page Definition & Navigation page navigation (page call) page definiti on Wednesday, March 10, 2010
  • 32. Displaying Data rendering values markup Wednesday, March 10, 2010
  • 33. Templates (Page Fragments) template definition template call parameter Wednesday, March 10, 2010
  • 35. Modifying Data data binding submit page flow Wednesday, March 10, 2010
  • 36. Core Wiki navigate action Wednesday, March 10, 2010
  • 37. Core Wiki navigate action Wednesday, March 10, 2010
  • 38. Creating Objects find/create object by id Wednesday, March 10, 2010
  • 39. Modifying Data pass string Wednesday, March 10, 2010
  • 40. Core Wiki navigate creates page action Wednesday, March 10, 2010
  • 42. Output Object = Navigation Wednesday, March 10, 2010
  • 43. Output Object = Navigation custom definition default definition Wednesday, March 10, 2010
  • 44. Access Control Danny M. Groenewegen, Eelco Visser. Declarative Access Control for WebDSL: Combining Language Integration and Separation of Concerns. ICWE 2008: 175-188 Wednesday, March 10, 2010
  • 45. Principal representation of principal turn on access control Wednesday, March 10, 2010
  • 46. Principal representation of principal turn on access control Wednesday, March 10, 2010
  • 51. Access Control Rules ‘may access page f with argument x if boolean expression e is true’ Wednesday, March 10, 2010
  • 52. Wiki Access Control Rules ‘anyone can view existing pages, only logged in users can create pages’ ‘only logged in users may edit pages’ Wednesday, March 10, 2010
  • 53. Wiki Access Control Rules Wednesday, March 10, 2010
  • 54. Wiki Access Control Rules Wednesday, March 10, 2010
  • 55. Wiki Access Control Rules Wednesday, March 10, 2010
  • 56. Wiki Access Control Rules Wednesday, March 10, 2010
  • 57. More Web Abstractions - Access control policies ★ constraints over objects ★ role-based AC, discretionary AC - Data validation ★ form validation ★ data integrity - Loading/accessing templates (partial pages) ★ (AJAX) - Search - Workflow Wednesday, March 10, 2010
  • 58. The Future of Quarter 3 - Lecture 4 ★ More web abstractions - Lecture 5 ★ What does WebDSL abstract from? ★ Or: from DSL to Code - Lecture 6 ★ Language workbenches ★ Grammars - Lecture 7 ★ Language modeling Wednesday, March 10, 2010
  • 59. Schedule Lab this week ★ Finish & submit proposal Design 1 ★ Entity declarations ★ Basic setup for user interface Cases ★ Case 1: domain analysis in digital library domain ★ Case 2: web abstractions Next ★ Week 4 is ‘spring’ break; Week 5: lecture no, lab yes ★ Week 6: access control policies, validation, search, ... Wednesday, March 10, 2010