Yet another DSL for cross platforms mobile development
0 likes1,154 views
This document presents the XMOB solution for cross-platform mobile development. XMOB is a domain-specific modeling language that allows developers to write mobile applications independently of platforms in a platform-independent model. The XMOB compiler then transforms the model into native code for different mobile platforms like Android and iOS. XMOB has sublanguages for defining user interfaces, data sources, and events. The compiler uses EMF and Xtext to parse XMOB models and Kermeta transformations to generate platform-specific UML models and native code. Examples of XMOB code show how to define screens, buttons, lists, data fetching, and event handling.
![XXMMOOBB ssnniippppeettss
#xmob-ui
@Launch
screen main {
#xmob-ui
@Launch
screen main {
l_welcome as label["Welcome to this app"]
b_next as button["Proceed to next screen"]
menu {
l_welcome as label["Welcome to this app"]
b_next as button["Proceed to next screen"]
menu {
item[image: "settings.png", destination:settings]
item[text:"Credits", destination:credits]
item[image: "settings.png", destination:settings]
item[text:"Credits", destination:credits]
}
}
}
screen next {
}
screen next {
label["Here is some data:"]
list_somedata as list
label["Here is some data:"]
list_somedata as list
}
screen credits {
}
screen credits {
label["Contributors:"]
label["Olivier le Goaer & Sacha Waltham"]
label["Contributors:"]
label["Olivier le Goaer & Sacha Waltham"]
}
screen settings {
}
screen settings {
label["music ?"]
switch_music as switch
label["music ?"]
switch_music as switch
}
}
Olivier Le Goaer @ GlobalDSL 2013
#xmob-data
somedata as datasource {
#xmob-data
somedata as datasource {
remote ["http://somewebsite.com/someservice?param=1"]
return [xml]
}
remote ["http://somewebsite.com/someservice?param=1"]
return [xml]
}
#xmob-event
on (pressed[main.b_next]) do { open[next] }
on (networkAvailable[SYSTEM]) do {
#xmob-event
on (pressed[main.b_next]) do { open[next] }
on (networkAvailable[SYSTEM]) do {
fetch[somedata] into[next.list_somedata]
}
on (switched[settings.switch_music]) do {
start[player:./music.mp3]
}
fetch[somedata] into[next.list_somedata]
}
on (switched[settings.switch_music]) do {
start[player:./music.mp3]
}](https://image.slidesharecdn.com/yetanotherdslforcross-platformsmobiledevelopment-140830095218-phpapp02/85/Yet-another-DSL-for-cross-platforms-mobile-development-21-320.jpg)
![XXMMOOBB ssnniippppeettss
#xmob-ui
@Launch
screen main {
#xmob-ui
@Launch
screen main {
l_welcome as label["Welcome to this app"]
b_next as button["Proceed to next screen"]
menu {
l_welcome as label["Welcome to this app"]
b_next as button["Proceed to next screen"]
menu {
item[image: "settings.png", destination:settings]
item[text:"Credits", destination:credits]
item[image: "settings.png", destination:settings]
item[text:"Credits", destination:credits]
}
}
}
screen next {
}
screen next {
label["Here is some data:"]
list_somedata as list
label["Here is some data:"]
list_somedata as list
}
screen credits {
}
screen credits {
label["Contributors:"]
label["Olivier le Goaer & Sacha Waltham"]
label["Contributors:"]
label["Olivier le Goaer & Sacha Waltham"]
}
screen settings {
}
screen settings {
label["music ?"]
switch_music as switch
label["music ?"]
switch_music as switch
}
}
Olivier Le Goaer @ GlobalDSL 2013
#xmob-data
somedata as datasource {
#xmob-data
somedata as datasource {
remote ["http://somewebsite.com/someservice?param=1"]
return [xml]
}
remote ["http://somewebsite.com/someservice?param=1"]
return [xml]
}
#xmob-event
on (pressed[main.b_next]) do { open[next] }
on (networkAvailable[SYSTEM]) do {
#xmob-event
on (pressed[main.b_next]) do { open[next] }
on (networkAvailable[SYSTEM]) do {
fetch[somedata] into[next.list_somedata]
}
on (switched[settings.switch_music]) do {
start[player:./music.mp3]
}
fetch[somedata] into[next.list_somedata]
}
on (switched[settings.switch_music]) do {
start[player:./music.mp3]
}
Android
● BroadcastReceiver
● AsyncTask
● Progress Dialog
● SAX Parser
● ArrayAdapter
●...](https://image.slidesharecdn.com/yetanotherdslforcross-platformsmobiledevelopment-140830095218-phpapp02/85/Yet-another-DSL-for-cross-platforms-mobile-development-22-320.jpg)
Yet another DSL for cross platforms mobile development
- 1. YYeett AAnnootthheerr DDSSLL ffoorr CCrroossss--ppllaattffoorrmmss MMoobbiillee DDeevveellooppmmeenntt Olivier Le Goaer and Sacha Waltham olivier.legoaer@univ-pau.fr GlobalDSL 2013 # Session 2 Montpellier, 2013
- 2. AAggeennddaa Context of work A survey of existing tools Presentation of the XMOB solution Questions? Olivier Le Goaer @ GlobalDSL 2013
- 4. DDeevveellooppmmeenntt sshhiifftt The new era of mobility People massively use apps on handheld devices (SmartPhones, Tablets) From Desktop application to mobile applications Lower ressources (battery, network latency, processor, etc.) Smaller screen and new navigation fashion (“Tap-able” not “clickable”) Increased platform heterogeneity Now steady, limited number of desktop OS Yet unsteady, high number of mobile OS Olivier Le Goaer @ GlobalDSL 2013
- 5. HHeetteerrooggeenneeiittyy iiss bbaacckk !! « Desktop App » Development Olivier Le Goaer @ GlobalDSL 2013 « Mobile App » Development $$ $$$$$, augmented Time-to-Market
- 6. MMoobbiillee aapppp:: nnaattiivvee oorr wweebb?? Two development approaches are competing Native: develop directly for the mobile device Web: develop for a browser installed in the mobile device, and tailored to be « mobile-friendly » Tame the development costs... Native: one app per platform Web: solely one app (assuming that nowadays the different browsers evenly process the code) ...but do not neglect the « user experience » Native: almost limitless capabilities Web: limited to the browser capabilities Olivier Le Goaer @ GlobalDSL 2013
- 7. IInn aa nnuuttsshheellll WebApps are the best way to reach the most possible people with the least effort WebApps are inherently cross-platforms but in the agnostic sense (the underlying OS specificities are ignored) The browser already partly solved the heterogeneity question NativeApps are the best way to create the best possible experience Native apps are specifically designed for their host, and hence require further solutions to achieve actual cross-platform Cross-platform Mobile development Tools (XMTs) have emerged This is where the scientific challenge lies Olivier Le Goaer @ GlobalDSL 2013
- 8. AA ssuurrvveeyy ooff eexxiissttiinngg ttoooollss
- 9. WWrriittee OOnnccee?? RRuunn eevveerryywwhheerree?? Olivier Le Goaer @ GlobalDSL 2013 HTML5,CSS3, JavaScript C++, Java, Ruby, Bridge Translation
- 10. RReeaappppeeaarraannccee ooff MMDDAA Such heterogeneity and lack of sustainability was already encountered in the past The mid-2000s was the age of « middlewar » The OMG brought its Model-Driven Architecture (MDA) vision When MDA meets the mobile challenge Capture knowledge into models Describe things independently of mobile platforms (PIM level) Platform details are woven subsequently (PSM level) OMG's contributions (UML2, MOF, QVT) are centre-stage, but domain-specific languages are encouraged A langage dedicated to the mobile domain rather than a general-purpose language Offers a basis for further stuff (tests, simulation and analysis, ...) Olivier Le Goaer @ GlobalDSL 2013
- 11. OOvveerrvviieeww ooff eexxiissttiinngg XXMMTTss Olivier Le Goaer @ GlobalDSL 2013
- 12. RRaattiioonnaalleess ooff tthhee XXMMOOBB ssoolluuttiioonn Domain-specific language Define a language which really fits your needs Decrease the efforts needed to write a (simple) mob app Obviously far away to be as complete as a general language Key idea : « Write less, generate more » Generation of full-native code Because this is the holy grail of mobile programming Model-driven Architecture Proved that « it works ». Separation PIM/PSM is useful. Reinventing the wheel? Several languages may be competing. Let us try... Olivier Le Goaer @ GlobalDSL 2013
- 13. PPrreesseennttaattiioonn ooff tthhee XXMMOOBB ssoolluuttiioonn
- 14. XXMMOOBB rrooaaddmmaapp Set the architecture of the XMOB crosscompiler Envision a MDA-compliant chain to produce native code Design the XMOB language Define both its abstract and concrete syntax Create UML profiles for each platform Write the associated transformation (M2M and M2T) Android initially, then move onto other platforms Deliver the XMOB solution as an Eclipse Plugin Built on top of EMF But the generated code ought to be reworked into specific IDE Olivier Le Goaer @ GlobalDSL 2013
- 15. XXMMOOBB CCrroossss--ccoommppiilleerr AArrcchhiitteeccttuurree crosscompiler PSM UML2 + iOS Profile Xmob Native … Code .NET program Olivier Le Goaer @ GlobalDSL 2013 PIM XMOB PIM XMOB PSM UML2 + iOS Profile PSM UML2 + PSM UML2 + Android Profile Android Profile PSM PSM … Profile UML2 + WP8 UML2 + WP8 Profile Native Code Objective-C program Native Code Java program M2M M2M M2M M2T M2T M2T
- 16. XXMMOOBB ssuubb--llaanngguuaaggeess Olivier Le Goaer @ GlobalDSL 2013 XXXXMMMMOOOOBBBB----UUUUIIII XXXXMMMMOOOOBBBB----eeeevvvveeeennnntttt XXXXMMMMOOOOBBBB----ddddaaaattttaaaa Deals with display (widgets) Deals with gluing together UI and data Deals with data sources (read only)
- 17. MMoobbiillee--ssppeecciiffiicc sshhaarreedd ccoonncceeppttss XMOB-UI UI is broken down into a succession of screens UI elements (widgets) are declared inside a screen UI elements will automatically be placed on the screen XMOB-data Datasources location: local or remote Datasources format: xml, json, recordset, raw text, ... XMOB-event Triggers actions on System-related or UI-related events Actions are based on verbs : open, close, fetch, start, ... Olivier Le Goaer @ GlobalDSL 2013
- 18. XXMMOOBB aabbssttrraacctt ssyynnttaaxx ((EEccoorree)) Olivier Le Goaer @ GlobalDSL 2013
- 19. XXMMOOBB ccoonnccrreettee ssyynnttaaxx ((XXtteexxtt)) XMOB has a textual syntax Better suited than graphical syntax, especially for data and events XMOB has multiple files Separated ui/event/data files but same extension « .xmob » Implies to manage properly cross-references and scoping No Type System nor Function definition Because XMOB is much more a description language than a programming language Because this is a tedious task: code for type-checking and calls must be added programmatically to the parser Olivier Le Goaer @ GlobalDSL 2013
- 20. EEMMFF TToooolliinngg ffoorr tthhee XXMMOOBB ssoolluuttiioonn XXppaanndd eemmiitttteerr UML uml2.ecore eennggiinnee metamodel Olivier Le Goaer @ GlobalDSL 2013 XMOB file XMOB grammar *.xmob Xtext Generator xmob.xtext AANNTTLLRR ppaarrsseerr ppaarrsseerr XMOB metamodel xmob.ecore XMOB model (in-memory) KKeerrmmeettaa XMOB2UML Transform. xmob2android.kmt xmob2ios.kmt ... XXppaanndd eemmiitttteerr eennggiinnee UML model + profile UML2Code Template OS-specific Source code project uml2ADT.xpand uml2X-code.xpand ...
- 21. XXMMOOBB ssnniippppeettss #xmob-ui @Launch screen main { #xmob-ui @Launch screen main { l_welcome as label["Welcome to this app"] b_next as button["Proceed to next screen"] menu { l_welcome as label["Welcome to this app"] b_next as button["Proceed to next screen"] menu { item[image: "settings.png", destination:settings] item[text:"Credits", destination:credits] item[image: "settings.png", destination:settings] item[text:"Credits", destination:credits] } } } screen next { } screen next { label["Here is some data:"] list_somedata as list label["Here is some data:"] list_somedata as list } screen credits { } screen credits { label["Contributors:"] label["Olivier le Goaer & Sacha Waltham"] label["Contributors:"] label["Olivier le Goaer & Sacha Waltham"] } screen settings { } screen settings { label["music ?"] switch_music as switch label["music ?"] switch_music as switch } } Olivier Le Goaer @ GlobalDSL 2013 #xmob-data somedata as datasource { #xmob-data somedata as datasource { remote ["http://somewebsite.com/someservice?param=1"] return [xml] } remote ["http://somewebsite.com/someservice?param=1"] return [xml] } #xmob-event on (pressed[main.b_next]) do { open[next] } on (networkAvailable[SYSTEM]) do { #xmob-event on (pressed[main.b_next]) do { open[next] } on (networkAvailable[SYSTEM]) do { fetch[somedata] into[next.list_somedata] } on (switched[settings.switch_music]) do { start[player:./music.mp3] } fetch[somedata] into[next.list_somedata] } on (switched[settings.switch_music]) do { start[player:./music.mp3] }
- 22. XXMMOOBB ssnniippppeettss #xmob-ui @Launch screen main { #xmob-ui @Launch screen main { l_welcome as label["Welcome to this app"] b_next as button["Proceed to next screen"] menu { l_welcome as label["Welcome to this app"] b_next as button["Proceed to next screen"] menu { item[image: "settings.png", destination:settings] item[text:"Credits", destination:credits] item[image: "settings.png", destination:settings] item[text:"Credits", destination:credits] } } } screen next { } screen next { label["Here is some data:"] list_somedata as list label["Here is some data:"] list_somedata as list } screen credits { } screen credits { label["Contributors:"] label["Olivier le Goaer & Sacha Waltham"] label["Contributors:"] label["Olivier le Goaer & Sacha Waltham"] } screen settings { } screen settings { label["music ?"] switch_music as switch label["music ?"] switch_music as switch } } Olivier Le Goaer @ GlobalDSL 2013 #xmob-data somedata as datasource { #xmob-data somedata as datasource { remote ["http://somewebsite.com/someservice?param=1"] return [xml] } remote ["http://somewebsite.com/someservice?param=1"] return [xml] } #xmob-event on (pressed[main.b_next]) do { open[next] } on (networkAvailable[SYSTEM]) do { #xmob-event on (pressed[main.b_next]) do { open[next] } on (networkAvailable[SYSTEM]) do { fetch[somedata] into[next.list_somedata] } on (switched[settings.switch_music]) do { start[player:./music.mp3] } fetch[somedata] into[next.list_somedata] } on (switched[settings.switch_music]) do { start[player:./music.mp3] } Android ● BroadcastReceiver ● AsyncTask ● Progress Dialog ● SAX Parser ● ArrayAdapter ●...