Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Yet another DSL for cross platforms mobile development

758 views

Published on

Published in: Mobile
  • Be the first to comment

  • Be the first to like this

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??

×