Yet another DSL for cross platforms mobile development

696 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
696
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Yet another DSL for cross platforms mobile development

  1. 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. 2. AAggeennddaa  Context of work  A survey of existing tools  Presentation of the XMOB solution  Questions? Olivier Le Goaer @ GlobalDSL 2013
  3. 3. CCoonntteexxtt ooff wwoorrkk
  4. 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. 5. HHeetteerrooggeenneeiittyy iiss bbaacckk !! « Desktop App » Development Olivier Le Goaer @ GlobalDSL 2013 « Mobile App » Development $$ $$$$$, augmented Time-to-Market
  6. 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. 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. 8. AA ssuurrvveeyy ooff eexxiissttiinngg ttoooollss
  9. 9. WWrriittee OOnnccee?? RRuunn eevveerryywwhheerree?? Olivier Le Goaer @ GlobalDSL 2013 HTML5,CSS3, JavaScript C++, Java, Ruby, Bridge Translation
  10. 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. 11. OOvveerrvviieeww ooff eexxiissttiinngg XXMMTTss Olivier Le Goaer @ GlobalDSL 2013
  12. 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. 13. PPrreesseennttaattiioonn ooff tthhee XXMMOOBB ssoolluuttiioonn
  14. 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. 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. 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. 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. 18. XXMMOOBB aabbssttrraacctt ssyynnttaaxx ((EEccoorree)) Olivier Le Goaer @ GlobalDSL 2013
  19. 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. 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. 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. 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 ●...
  23. 23. QQuueessttiioonnss??

×