Your SlideShare is downloading. ×
0
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Linguistic Abstraction for the Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Linguistic Abstraction for the Web

1,181

Published on

Slides used in TechTalk at Google Mountain View on June 8, 2011

Slides used in TechTalk at Google Mountain View on June 8, 2011

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
1,181
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Linguistic Abstraction for the Web Eelco Visser http://eelcovisser.org Mountain View June 8, 2011
  • 2. MessagesLinguistic abstraction as software engineering tool Web languages can be improved
  • 3. Software EngineeringProblem MachineDomain bridging the gap between problem domain and solution domain
  • 4. High-Level LanguagesProblem HLL MachineDomain "A programming language is low level when its programs require attention to the irrelevant." Alan J. Perlis (1982) HLLs reduce gap
  • 5. Domain-Specific LanguagesProblem DSL HLL MachineDomain domain-specific languages support more specialization
  • 6. Software Language Design & Engineeringenable software engineers toeffectively design, implement, and apply domain-specific software languages
  • 7. Research: Software Language Engineering Automatically derive efficient,scalable, incremental compiler + usable IDE from high-level, declarativelanguage definition
  • 8. The Spoofax Language Workbenchcreating full featured IDEs for domain-specific languages
  • 9. Research: Software Language Design Systematically design domain- specific software languages with optimal tradeoff between expressivity,completeness, portability, coverage, and maintainability
  • 10. Software Language Design Case Studies Mobl: client-side stateful web applicationsWebDSL: server-side restful web applications
  • 11. http://webdsl.orgEelco Visser, Danny Groenewegen, et al.
  • 12. Web Programmingbrowser server database web app
  • 13. Web Programmingbrowser server databaseHTML, Java SQLJS, CSS code runs on server, browser, and database
  • 14. Concerns in Web Programming❖ Persistent data ★ data integrity ★ search❖ User interface ★ data validation ★ styling, layout ★ navigation ★ actions❖ Access control
  • 15. Separation of Concerns in Web ProgrammingExample❖ Data modeling ★ Java classes with JPA annotations❖ User interface ★ Java ServerFaces XML templates ★ Seam Java classes❖ Access control ★ Acegi configuration/annotation
  • 16. Problems in Web Programming❖ Lack of integration ★ no cross language/concern consistency checking ★ leads to late (detection of) failures❖ Low-level encoding ★ leads to boilerplate code
  • 17. When Seam FailsWelcome #{user.name} Welcome #{user.nam}
  • 18. When Rails Fails@post = Post.new(params[:get]) @post = Post.new(params[:post])
  • 19. Late Failures in Web Applications Zef Hemel, Danny M. Groenewegen, Lennart C. L. Kats, Eelco Visser. Static consistency checking of web applications with WebDSL. Journal of Symbolic Computation, 46(2):150-182, 2011.
  • 20. Separation of Concerns+ Linguistic Integration
  • 21. WebDSL Example
  • 22. Model-View Pattern
  • 23. Model
  • 24. Modelentity Blog { key :: String (id) title :: String (name) posts -> Set<Post> (inverse=Post.blog)}entity Post { key :: String (id) title :: String (name, searchable) content :: WikiText (searchable) blog -> Blog created :: DateTime (default=now()) modified :: DateTime (default=now())}
  • 25. Automatic PersistenceData Entity DBModel Classes SchemaWebDSL Java DBObject Object Records
  • 26. Logicentity Blog { key :: String (id) title :: String (name) posts -> Set<Post> (inverse=Post.blog) function recentPosts(index: Int, n: Int): List<Post> { var i := max(1,index) - 1; return [p | p: Post in posts order by p.created desc limit n offset i*n].list(); } function newPost(): Post { var p := Post{ title := "No Title" blog := this }; p.key := p.id.toString(); return p; }}
  • 27. View
  • 28. Page Definitiondefine page blog(b: Blog, index: Int) { main(b){ for(p: Post in b.recentPosts(index,5)) { showPost(p) } }}define showPost(p: Post) { ... }define page post(p: Post) { ... }
  • 29. Template Definitiondefine page blog(b: Blog, index: Int) { ... }define showPost(p: Post) { section{ header{ navigate post(p) { output(p.title) } } par{ output(p.content) } par{ output(p.created.format("MMMM d, yyyy")) } }}define page post(p: Post) { ... } Navigate = Deferred Page Call
  • 30. Page Definitiondefine page blog(b: Blog, index: Int) { ... }define showPost(p: Post) { ... }define page post(p: Post) { main(p.blog){ showPost(p) navigate editpost(p) { "[Edit]" } }}
  • 31. Forms & Data Bindingdefine page post(p: Post) { ... }define page editpost(p: Post) { action save() { return post(p); } main(p.blog){ form{ formEntry("Title"){ input(p.title) } formEntry("Content") { input(p.content) } formEntry("Posted") { input(p.created) } submit save() { "Save" } } }} (Look Ma, No Controller!)
  • 32. Type-Directed Inputdefine page post(p: Post) { ... }define page editpost(p: Post) { action save() { return post(p); } main(p.blog){ form{ formEntry("Title"){ input(p.title) } formEntry("Content") { input(p.content) } formEntry("Posted") { input(p.created) } submit save() { "Save" } } }}
  • 33. View Compositiondefine sidebar(b: Blog) { list{ listitem{ navigate blog(b,1) { "Home" } } listitem{ submitlink action{ return editpost(b.newPost()); } { "[New Post]" } } } section{ header{"Recent Posts"} output(b.recentPosts(1,10)) }}
  • 34. Native Interfacedefine main(b: Blog) { includeCSS("style.css") <div id="outercontainer"> <div id="container"> <div id="sidebar">sidebar(b)</div> <div id="contents">elements</div> <div class="clear"> </div> </div> <div class="clear"> </div> </div>}
  • 35. Integrated Development Environment short demo: consistency checking
  • 36. WebDSL Languages Data Model Logic Templates (UI, Email, Service) Access Control Data Validation SearchCollaborative Filtering
  • 37. http://www.mobl-lang.orgZef Hemel
  • 38. Divergence in Mobile Platforms Objective-C Java J2ME/C++HTML/Javascript Java .NET Native Applications not Portable
  • 39. Convergence in Mobile PlatformWebkit browser Webkit browserWebkit browser Webkit browser
  • 40. The Universal Userinterface Engine
  • 41. Mobile Web Architecture
  • 42. Rich Applications Audio WebDatabases Full-screen supportLocation information (GPS) Offline support Canvas Accelerator support Multi-touch
  • 43. Native Applications Address book Camera Compass File IO Notifications
  • 44. Software Engineering with JavaScriptannotated HTML imperative Javascript MVC, No Integration, No Abstraction, Accidental Complexity
  • 45. typed declarativeintegrated concise
  • 46. Web Application with Touch
  • 47. Portable Applications
  • 48. Mobl Architecture
  • 49. tipcalculator.moblapplication tipcalculatorimport mobl::ui::genericscreen root() { var amount = 20 var percentage = 10 header("Tip calculator") group { item { numField(amount, label="amount") } item { numField(percentage, label="percentage") } item { "$" label(Math.round(amount * (1 + percentage/100))) } } nl()}
  • 50. Task Manager
  • 51. Data Modelentity Task { name : String (searchable) done : Bool due : DateTime category : Category (inverse: tasks) tags : Collection<Tag> (inverse: tasks)}entity Category { name : String tasks : Collection<Task> (inverse: category)}entity Tag { name : String tasks : Collection<Task> (inverse: tags)} HTML5 Data Persistence
  • 52. Logicentity Task { name : String (searchable) done : Bool due : DateTime category : Category (inverse: tasks) tags : Collection<Tag> (inverse: tasks) function postpone(days : Num) { this.due = DateTime.create( this.due.getFullYear(), this.due.getMonth(), this.due.getDate() + days); } function import(user : String, pw : String) { var tasksJSON = httpRequest("/export?user="+ user + "&pw=" + pw); foreach(t in tasksJSON) { add(Task.fromSelectJSON(t)); } }} statically typed: catch errors early
  • 53. Reactive User Interfacesscreen root() { var phrase = "" header("Tasks") { button("Add", onclick={ addTask(); }) } searchBox(phrase) group { list(t in Task.search(phrase) limit 20){ item { checkBox(t.done, label=t.name) } } }}
  • 54. Reactive User Interfacesscreen root() { var phrase = "" header("Tasks") { button("Add", onclick={ addTask(); }) } searchBox(phrase) group { list(t in Task.search(phrase) limit 20){ item { checkBox(t.done, label=t.name) } } }}
  • 55. Navigationscreen root() { var phrase = "" header("Tasks") { button("Add", onclick={ addTask(); }) } searchBox(phrase) group { list(t in Task.search(phrase) limit 20){ item { checkBox(t.done, label=t.name) } } }}
  • 56. Navigationscreen root() { { addTask() var phrase = "" t = Task() header("Add") { header("Tasks") { button("Done", onclick={ button("Add", onclick={ addTask(); }) } add(t); searchBox(phrase) screen return; group { }) } list(t in Task.search(phrase) limit 20){ textField(t.name) item { datePicker(t.due) checkBox(t.done, label=t.name)} } } }}
  • 57. Navigationscreen root() { var phrase = "" header("Tasks") { button("Add", onclick={ addTask(); }) } searchBox(phrase) group { list(t in Task.search(phrase) limit 20){ item { checkBox(t.done, label=t.name) } } }}
  • 58. Continuationsscreen root() { button("Ask", onclick={ alert("Hello " + prompt("First name") + " " + prompt("Last name")); })}screen prompt(question : String) : String { var answer = "" header(question) { button("Done", onclick={ screen return answer; }) } textField(answer)}
  • 59. User Interface Idiom: Tabcontrol tab1() { header("Tab 1") label("This is tab 1")}control tab2() { header("Tab 2") label("This is tab 2")}screen root() { tabSet([("One", tab1), ("Two", tab2)], defaultTab="One")}
  • 60. Tab Set: Higher-Order Controlcontrol tabSet(tabs : [(String,Control)], activeTab : String) { list((tabName, tabControl) in tabs) { block(onclick={ activeTab = tabName; }, style=activeTab==tabName ? activeTabButton : inactiveTabButton) { label(tabName) } } list((tabName, tabControl) in tabs) { block(activeTab==tabName ? visibleTab : invisibleTab) { tabControl() } }} increase coverage: developers can create abstractions
  • 61. User Interface Idiom: Master Detailcontrol taskItem(t : Task) { checkBox(t.done, label=t.name)}control taskDetail(t : Task) { textField(t.name) datePicker(t.due)}screen root() { header("Tasks") masterDetail(Task.all() order by due desc, taskItem, taskDetail)}
  • 62. User Interface Idiom: Master Detailcontrol taskItem(t : Task) { checkBox(t.done, label=t.name)}control taskDetail(t : Task) { textField(t.name) datePicker(t.due)}screen root() { header("Tasks") masterDetail(Task.all() order by due desc, taskItem, taskDetail)}
  • 63. Master Detail: Higher-Order Controlcontrol masterDetail(items : Collection<?>, masterItem : Control1<?>,detail : Control1<?>) { group { list(it in items) { item(onclick={ detailScreen(it,detail); }) { masterItem(it) } } }}screen detailScreen(it : ?, detail : Control1<?>) { header("Detail") { backButton() } detail(it)}
  • 64. Adaptive Layout
  • 65. Mobl IDEstatic cross-concern consistency checking
  • 66. DiscussionWebDSL vs Mobl crucial difference: navigation models why do we need both?
  • 67. Linguistic Abstraction for the Web Linguistic abstraction: capture software knowledge in domain-specific languages http://spoofax.orgseparation of concerns + linguistic integration http://mobl-lang.org cross concern consistency checking http://webdsl.org early detection failures http://researchr.org Language workbench: DSL design and http://eelcovisser.org implementation with less effort than traditional language engineering http://researchr.org/search/publication/mobl+spoofax+webdsl

×