Successfully reported this slideshow.
Model Driven
App Development
@peterfriese | @itemismobile
http://peterfriese.de | http://mobile.itemis.de
for iPhone
and A...
AWESOME
OUR GOAL
BEING
Great, so...
How to be Awesome?
How to be Awesome?
Time
to
Market
Happy
Users
Precision.Great
Ideas
How to be Awesome?
Time
to
Market
Happy
Users
Precision.Great
Ideas
Great
Ideas
How to be Awesome?
Time
to
Market
Happy
Users
Great
Ideas
Precision.
How to be Awesome?
Happy
Users
Precision.Great
Ideas
Time
to
Market
How to be Awesome?
Time
to
Market
Precision.Great
Ideas
Happy
Users
There Are 4 Things That Keep
Us From Being Awesome
Accidental
Complexity
Wrong Level
of
Abstraction
Ugly
Design
Boring
Code
There Are 4 Things That Keep
Us From Being Awesome
Accidental
Complexity
Wrong Level
of
Abstraction
Ugly
Design
Boring
Code
There Are 4 Things That Keep
Us From Being Awesome
Wrong Level
of
Abstraction
Ugly
Design
Boring
Code
Accidental
Complexity
There Are 4 Things That Keep
Us From Being Awesome
Ugly
Design
Boring
Code
Accidental
Complexity
Wrong Level
of
Abstraction
There Are 4 Things That Keep
Us From Being Awesome
Boring
Code
Accidental
Complexity
Wrong Level
of
Abstraction
Ugly
Design
Oh, did I mention
Oh, did I mention
Bugs
Redundancy
Multi-
Platform
Challenges vs. Threats
Time
to
Market
Happy
Users
Precision.Great
Ideas
Accidental
Complexity
Wrong Level
of
Abstraction
U...
Challenges vs. Threats
Time
to
Market
Happy
Users
Precision.Great
Ideas
Accidental
Complexity
Wrong Level
of
Abstraction
U...
Accidental
Complexity
Wrong Level
of
Abstraction
Boring
Code
Time
to
Market
Happy
Users
Precision.
Bugs
Redundancy
Multi-
...
Accidental
Complexity
Wrong Level
of
Abstraction
Boring
Code
Time
to
Market
Happy
Users
Precision.
Bugs
Redundancy
Multi-
...
YES, there is.
Why?
... is code so boring (at times)?
... is there so much accidental complexity?
... is there so much redundancy?
... is...
Wrong Level of Abstraction!
... is code so boring (at times)?
... is there so much accidental complexity?
... is there so ...
Software artifact
Anatomy of Modern Software
Libraries
Frameworksmanually written code
Anatomy of Modern Software
schematic code (manually written)
Libraries
Frameworks
manually written
code
Anatomy of Modern Software
RESTRICTIONS
GAIN VELOCITY
THROUGH
Text
Lists Details Custom
DOMAIN
ANALYZING
THE
http://www.flickr.com/photos/jakematesdesign/4689135843/
Anatomy
of Data-Driven
Apps
Cells
View
Navigation
Cells
View
Navigation
Name
Image
Speaker
Title
Location
Session
Entity
Data Provider
LANGUAGE
DOMAIN
SPECIFIC
BUILDING A
http://en.wikipedia.org/wiki/File:Rosetta_Stone.JPG
tabbarApplication itemisApp {
	 button {
	 	 title= "Tuesday"
	 	 icon= "calendar.png"
	 	 view= SessionList( SessionsByDa...
tabbarApplication itemisApp {
	 button {
	 	 title= "Tuesday"
	 	 icon= "calendar.png"
	 	 view= SessionList( SessionsByDa...
tabbarApplication itemisApp {
	 button {
	 	 title= "Tuesday"
	 	 icon= "calendar.png"
	 	 view= SessionList( SessionsByDa...
tabbarApplication itemisApp {
	 button {
	 	 title= "Tuesday"
	 	 icon= "calendar.png"
	 	 view= SessionList( SessionsByDa...
http://www.xtext.org
ENGINE
TEMPLATE
GENERATE
CODE
WITH A
«DEFINE moduleFile FOR Application»
«FILE filenameApplicationDelegateModule()»
#import "«filenameApplicationDelegateHeader...
«DEFINE moduleFile FOR Application»
«FILE filenameApplicationDelegateModule()»
#import "«filenameApplicationDelegateHeader...
«DEFINE moduleFile FOR Application»
«FILE filenameApplicationDelegateModule()»
#import "«filenameApplicationDelegateHeader...
«DEFINE barControllerInstance FOR TabbarButton»
	 «IF view.provider != null»
	 // controller for «this.title.expression(''...
INTEGRATION
TOOL
BUILDER
PROJECT
XCODE
INVOKE
DEMO
FUTURE
THE
SourceUI (Apple TV)
iPhone App
iPad App
Apple TV App
UI (iPad)
UI (iPhone)
@mschluepmann:
iPhone App
iPad App
TV App
@APPlauseDSL:
APPlause
DSL Program
APPlause
DSL
DEMO
code
Open source - EPL 1.0
code.google.com/p/applause/
‣ Showcase about conferences
‣ Tighter integration with Xcode
‣ Improved Android Generator
‣ Support for BlackBerry
‣ Supp...
@peterfriese | http://peterfriese.de
http://mobile.itemis.de
Model Driven App Development for iPhone and Android
Model Driven App Development for iPhone and Android
Model Driven App Development for iPhone and Android
Upcoming SlideShare
Loading in …5
×

Model Driven App Development for iPhone and Android

4,430 views

Published on

This presentation outlines how APPlause, an open source DSL for model-driven app development, works and how you can use it to create mobile apps in very little time.

Published in: Technology
  • Be the first to comment

Model Driven App Development for iPhone and Android

  1. 1. Model Driven App Development @peterfriese | @itemismobile http://peterfriese.de | http://mobile.itemis.de for iPhone and Android
  2. 2. AWESOME OUR GOAL BEING
  3. 3. Great, so...
  4. 4. How to be Awesome?
  5. 5. How to be Awesome? Time to Market Happy Users Precision.Great Ideas
  6. 6. How to be Awesome? Time to Market Happy Users Precision.Great Ideas Great Ideas
  7. 7. How to be Awesome? Time to Market Happy Users Great Ideas Precision.
  8. 8. How to be Awesome? Happy Users Precision.Great Ideas Time to Market
  9. 9. How to be Awesome? Time to Market Precision.Great Ideas Happy Users
  10. 10. There Are 4 Things That Keep Us From Being Awesome Accidental Complexity Wrong Level of Abstraction Ugly Design Boring Code
  11. 11. There Are 4 Things That Keep Us From Being Awesome Accidental Complexity Wrong Level of Abstraction Ugly Design Boring Code
  12. 12. There Are 4 Things That Keep Us From Being Awesome Wrong Level of Abstraction Ugly Design Boring Code Accidental Complexity
  13. 13. There Are 4 Things That Keep Us From Being Awesome Ugly Design Boring Code Accidental Complexity Wrong Level of Abstraction
  14. 14. There Are 4 Things That Keep Us From Being Awesome Boring Code Accidental Complexity Wrong Level of Abstraction Ugly Design
  15. 15. Oh, did I mention
  16. 16. Oh, did I mention Bugs Redundancy Multi- Platform
  17. 17. Challenges vs. Threats Time to Market Happy Users Precision.Great Ideas Accidental Complexity Wrong Level of Abstraction Ugly Design Boring Code
  18. 18. Challenges vs. Threats Time to Market Happy Users Precision.Great Ideas Accidental Complexity Wrong Level of Abstraction Ugly Design Boring Code not in this talk not in this talk
  19. 19. Accidental Complexity Wrong Level of Abstraction Boring Code Time to Market Happy Users Precision. Bugs Redundancy Multi- Platform
  20. 20. Accidental Complexity Wrong Level of Abstraction Boring Code Time to Market Happy Users Precision. Bugs Redundancy Multi- Platform Is there anything we can do about all this?
  21. 21. YES, there is.
  22. 22. Why? ... is code so boring (at times)? ... is there so much accidental complexity? ... is there so much redundancy? ... is our code so buggy?
  23. 23. Wrong Level of Abstraction! ... is code so boring (at times)? ... is there so much accidental complexity? ... is there so much redundancy? ... is our code so buggy?
  24. 24. Software artifact Anatomy of Modern Software
  25. 25. Libraries Frameworksmanually written code Anatomy of Modern Software
  26. 26. schematic code (manually written) Libraries Frameworks manually written code Anatomy of Modern Software
  27. 27. RESTRICTIONS GAIN VELOCITY THROUGH
  28. 28. Text
  29. 29. Lists Details Custom
  30. 30. DOMAIN ANALYZING THE http://www.flickr.com/photos/jakematesdesign/4689135843/
  31. 31. Anatomy of Data-Driven Apps
  32. 32. Cells View Navigation
  33. 33. Cells View Navigation Name Image Speaker Title Location Session Entity Data Provider
  34. 34. LANGUAGE DOMAIN SPECIFIC BUILDING A http://en.wikipedia.org/wiki/File:Rosetta_Stone.JPG
  35. 35. tabbarApplication itemisApp { button { title= "Tuesday" icon= "calendar.png" view= SessionList( SessionsByDay("0") ) } button { title= "Wednesday" icon= "calendar.png" view= SessionList( SessionsByDay("1") ) } button { title= "Thursday" icon= "calendar.png" view= SessionList( SessionsByDay("2") ) } button { title= "Speakers" icon= "person.png" view= SpeakersList( AllSpeakers() ) } }
  36. 36. tabbarApplication itemisApp { button { title= "Tuesday" icon= "calendar.png" view= SessionList( SessionsByDay("0") ) } button { title= "Wednesday" icon= "calendar.png" view= SessionList( SessionsByDay("1") ) } button { title= "Thursday" icon= "calendar.png" view= SessionList( SessionsByDay("2") ) } button { title= "Speakers" icon= "person.png" view= SpeakersList( AllSpeakers() ) } } -(UIViewController*)createController { ! itemisAppProviders *providers = [[[itemisAppProviders alloc] init] autorelease]; ! UITabBarController *result = [[UITabBarController alloc] init]; ! NSMutableArray *controllers = [NSMutableArray array]; ! ! UIViewController<IPUIView> *controller; ! UINavigationController *navController; ! IPContentProvider *contentProvider; ! // controller for @"Tuesday" ! contentProvider = [providers providerForSessionsByDay: @"0"]; ! ! controller = [[SessionListViewController alloc] init]; ! [controller setContentProvider: contentProvider]; ! controller.tabBarItem.title = @"Tuesday"; ! controller.tabBarItem.image = [UIImage imageNamed:@"calendar.png"]; ! navController = [[UINavigationController alloc] initWithRootViewController:controller]; ! [controllers addObject: navController]; ! [controller release]; ! [navController release]; ! ! // controller for @"Wednesday" ! contentProvider = [providers providerForSessionsByDay: @"1"]; ! ! controller = [[SessionListViewController alloc] init]; ! [controller setContentProvider: contentProvider]; ! controller.tabBarItem.title = @"Wednesday"; ! controller.tabBarItem.image = [UIImage imageNamed:@"calendar.png"]; ! navController = [[UINavigationController alloc] initWithRootViewController:controller]; ! [controllers addObject: navController]; ! [controller release]; ! [navController release]; ! ! // controller for @"Thursday" ! contentProvider = [providers providerForSessionsByDay: @"2"]; ! ! controller = [[SessionListViewController alloc] init]; ! [controller setContentProvider: contentProvider]; ! controller.tabBarItem.title = @"Thursday"; ! controller.tabBarItem.image = [UIImage imageNamed:@"calendar.png"]; ! navController = [[UINavigationController alloc] initWithRootViewController:controller]; ! [controllers addObject: navController]; ! [controller release]; ! [navController release]; ! ! // controller for @"Speakers" ! contentProvider = [providers providerForAllSpeakers]; ! ! controller = [[SpeakersListViewController alloc] init]; ! [controller setContentProvider: contentProvider]; ! controller.tabBarItem.title = @"Speakers"; ! controller.tabBarItem.image = [UIImage imageNamed:@"person.png"]; ! navController = [[UINavigationController alloc] initWithRootViewController:controller]; ! [controllers addObject: navController]; ! [controller release]; ! [navController release]; ! result.viewControllers = controllers; ! return result; }
  37. 37. tabbarApplication itemisApp { button { title= "Tuesday" icon= "calendar.png" view= SessionList( SessionsByDay("0") ) } button { title= "Wednesday" icon= "calendar.png" view= SessionList( SessionsByDay("1") ) } button { title= "Thursday" icon= "calendar.png" view= SessionList( SessionsByDay("2") ) } button { title= "Speakers" icon= "person.png" view= SpeakersList( AllSpeakers() ) } } -(UIViewController*)createController { ! itemisAppProviders *providers = [[[itemisAppProviders alloc] init] autorelease]; ! UITabBarController *result = [[UITabBarController alloc] init]; ! NSMutableArray *controllers = [NSMutableArray array]; ! ! UIViewController<IPUIView> *controller; ! UINavigationController *navController; ! IPContentProvider *contentProvider; ! // controller for @"Tuesday" ! contentProvider = [providers providerForSessionsByDay: @"0"]; ! ! controller = [[SessionListViewController alloc] init]; ! [controller setContentProvider: contentProvider]; ! controller.tabBarItem.title = @"Tuesday"; ! controller.tabBarItem.image = [UIImage imageNamed:@"calendar.png"]; ! navController = [[UINavigationController alloc] initWithRootViewController:controller]; ! [controllers addObject: navController]; ! [controller release]; ! [navController release]; ! ! // controller for @"Wednesday" ! contentProvider = [providers providerForSessionsByDay: @"1"]; ! ! controller = [[SessionListViewController alloc] init]; ! [controller setContentProvider: contentProvider]; ! controller.tabBarItem.title = @"Wednesday"; ! controller.tabBarItem.image = [UIImage imageNamed:@"calendar.png"]; ! navController = [[UINavigationController alloc] initWithRootViewController:controller]; ! [controllers addObject: navController]; ! [controller release]; ! [navController release]; ! ! // controller for @"Thursday" ! contentProvider = [providers providerForSessionsByDay: @"2"]; ! ! controller = [[SessionListViewController alloc] init]; ! [controller setContentProvider: contentProvider]; ! controller.tabBarItem.title = @"Thursday"; ! controller.tabBarItem.image = [UIImage imageNamed:@"calendar.png"]; ! navController = [[UINavigationController alloc] initWithRootViewController:controller]; ! [controllers addObject: navController]; ! [controller release]; ! [navController release]; ! ! // controller for @"Speakers" ! contentProvider = [providers providerForAllSpeakers]; ! ! controller = [[SpeakersListViewController alloc] init]; ! [controller setContentProvider: contentProvider]; ! controller.tabBarItem.title = @"Speakers"; ! controller.tabBarItem.image = [UIImage imageNamed:@"person.png"]; ! navController = [[UINavigationController alloc] initWithRootViewController:controller]; ! [controllers addObject: navController]; ! [controller release]; ! [navController release]; ! result.viewControllers = controllers; ! return result; }
  38. 38. tabbarApplication itemisApp { button { title= "Tuesday" icon= "calendar.png" view= SessionList( SessionsByDay("0") ) } button { title= "Wednesday" icon= "calendar.png" view= SessionList( SessionsByDay("1") ) } button { title= "Thursday" icon= "calendar.png" view= SessionList( SessionsByDay("2") ) } button { title= "Speakers" icon= "person.png" view= SpeakersList( AllSpeakers() ) } } -(UIViewController*)createController { ! itemisAppProviders *providers = [[[itemisAppProviders alloc] init] autorelease]; ! UITabBarController *result = [[UITabBarController alloc] init]; ! NSMutableArray *controllers = [NSMutableArray array]; ! ! UIViewController<IPUIView> *controller; ! UINavigationController *navController; ! IPContentProvider *contentProvider; ! // controller for @"Tuesday" ! contentProvider = [providers providerForSessionsByDay: @"0"]; ! ! controller = [[SessionListViewController alloc] init]; ! [controller setContentProvider: contentProvider]; ! controller.tabBarItem.title = @"Tuesday"; ! controller.tabBarItem.image = [UIImage imageNamed:@"calendar.png"]; ! navController = [[UINavigationController alloc] initWithRootViewController:controller]; ! [controllers addObject: navController]; ! [controller release]; ! [navController release]; ! ! // controller for @"Wednesday" ! contentProvider = [providers providerForSessionsByDay: @"1"]; ! ! controller = [[SessionListViewController alloc] init]; ! [controller setContentProvider: contentProvider]; ! controller.tabBarItem.title = @"Wednesday"; ! controller.tabBarItem.image = [UIImage imageNamed:@"calendar.png"]; ! navController = [[UINavigationController alloc] initWithRootViewController:controller]; ! [controllers addObject: navController]; ! [controller release]; ! [navController release]; ! ! // controller for @"Thursday" ! contentProvider = [providers providerForSessionsByDay: @"2"]; ! ! controller = [[SessionListViewController alloc] init]; ! [controller setContentProvider: contentProvider]; ! controller.tabBarItem.title = @"Thursday"; ! controller.tabBarItem.image = [UIImage imageNamed:@"calendar.png"]; ! navController = [[UINavigationController alloc] initWithRootViewController:controller]; ! [controllers addObject: navController]; ! [controller release]; ! [navController release]; ! ! // controller for @"Speakers" ! contentProvider = [providers providerForAllSpeakers]; ! ! controller = [[SpeakersListViewController alloc] init]; ! [controller setContentProvider: contentProvider]; ! controller.tabBarItem.title = @"Speakers"; ! controller.tabBarItem.image = [UIImage imageNamed:@"person.png"]; ! navController = [[UINavigationController alloc] initWithRootViewController:controller]; ! [controllers addObject: navController]; ! [controller release]; ! [navController release]; ! result.viewControllers = controllers; ! return result; } 135
  39. 39. http://www.xtext.org
  40. 40. ENGINE TEMPLATE GENERATE CODE WITH A
  41. 41. «DEFINE moduleFile FOR Application» «FILE filenameApplicationDelegateModule()» #import "«filenameApplicationDelegateHeader()»" #import "IPUIView.h" #import "«filenameCentralProvidersHeader()»" «EXPAND importStatements-» @implementation «applicationDelegateClassname()» @synthesize window, rootController; -(UIViewController*)createController { «centralProvidersClassName()» *providers = [[[«centralProvidersClassName()» alloc] init] autorelease]; UITabBarController *result = [[UITabBarController alloc] init]; NSMutableArray *controllers = [NSMutableArray array]; UIViewController<IPUIView> *controller; UINavigationController *navController; IPContentProvider *contentProvider; «EXPAND barControllerInstance FOREACH buttons» result.viewControllers = controllers; return result; } - (void)applicationDidFinishLaunching:(UIApplication *)application { self.rootController = [self createController]; [window addSubview: [self.rootController view]]; [window makeKeyAndVisible]; } - (void)dealloc { self.rootController = nil; [window release]; [super dealloc]; } @end «ENDFILE» «ENDDEFINE»
  42. 42. «DEFINE moduleFile FOR Application» «FILE filenameApplicationDelegateModule()» #import "«filenameApplicationDelegateHeader()»" #import "IPUIView.h" #import "«filenameCentralProvidersHeader()»" «EXPAND importStatements-» @implementation «applicationDelegateClassname()» @synthesize window, rootController; -(UIViewController*)createController { «centralProvidersClassName()» *providers = [[[«centralProvidersClassName()» alloc] init] autorelease]; UITabBarController *result = [[UITabBarController alloc] init]; NSMutableArray *controllers = [NSMutableArray array]; UIViewController<IPUIView> *controller; UINavigationController *navController; IPContentProvider *contentProvider; «EXPAND barControllerInstance FOREACH buttons» result.viewControllers = controllers; return result; } - (void)applicationDidFinishLaunching:(UIApplication *)application { self.rootController = [self createController]; [window addSubview: [self.rootController view]]; [window makeKeyAndVisible]; } - (void)dealloc { self.rootController = nil; [window release]; [super dealloc]; } @end «ENDFILE» «ENDDEFINE» tabbarApplication itemisApp { button { title= "Tuesday" icon= "calendar.png" view= SessionList( SessionsByDay("0") ) } button { title= "Wednesday" icon= "calendar.png" view= SessionList( SessionsByDay("1") ) } button { title= "Thursday" icon= "calendar.png" view= SessionList( SessionsByDay("2") ) } button { title= "Speakers" icon= "person.png" view= SpeakersList( AllSpeakers() ) } }
  43. 43. «DEFINE moduleFile FOR Application» «FILE filenameApplicationDelegateModule()» #import "«filenameApplicationDelegateHeader()»" #import "IPUIView.h" #import "«filenameCentralProvidersHeader()»" «EXPAND importStatements-» @implementation «applicationDelegateClassname()» @synthesize window, rootController; -(UIViewController*)createController { «centralProvidersClassName()» *providers = [[[«centralProvidersClassName()» alloc] init] autorelease]; UITabBarController *result = [[UITabBarController alloc] init]; NSMutableArray *controllers = [NSMutableArray array]; UIViewController<IPUIView> *controller; UINavigationController *navController; IPContentProvider *contentProvider; «EXPAND barControllerInstance FOREACH buttons» result.viewControllers = controllers; return result; } - (void)applicationDidFinishLaunching:(UIApplication *)application { self.rootController = [self createController]; [window addSubview: [self.rootController view]]; [window makeKeyAndVisible]; } - (void)dealloc { self.rootController = nil; [window release]; [super dealloc]; } @end «ENDFILE» «ENDDEFINE» tabbarApplication itemisApp { button { title= "Tuesday" icon= "calendar.png" view= SessionList( SessionsByDay("0") ) } button { title= "Wednesday" icon= "calendar.png" view= SessionList( SessionsByDay("1") ) } button { title= "Thursday" icon= "calendar.png" view= SessionList( SessionsByDay("2") ) } button { title= "Speakers" icon= "person.png" view= SpeakersList( AllSpeakers() ) } }
  44. 44. «DEFINE barControllerInstance FOR TabbarButton» «IF view.provider != null» // controller for «this.title.expression('', '')» contentProvider = «view.provider.contentProvider('providers', '', '')»; «ENDIF» controller = [[«view.view.className()» alloc] init]; [controller setContentProvider: contentProvider]; controller.tabBarItem.title = «title.expression('', '')»; controller.tabBarItem.image = [UIImage imageNamed:«this.icon.expression('','')»]; navController = [[UINavigationController alloc] initWithRootViewController:controller]; [controllers addObject: navController]; [controller release]; [navController release]; «ENDDEFINE» tabbarApplication itemisApp { button { title= "Tuesday" icon= "calendar.png" view= SessionList( SessionsByDay("0") ) } button { title= "Wednesday" icon= "calendar.png" view= SessionList( SessionsByDay("1") ) } button { title= "Thursday" icon= "calendar.png" view= SessionList( SessionsByDay("2") ) } button { title= "Speakers" icon= "person.png" view= SpeakersList( AllSpeakers() ) } }
  45. 45. INTEGRATION TOOL
  46. 46. BUILDER PROJECT
  47. 47. XCODE INVOKE
  48. 48. DEMO
  49. 49. FUTURE THE
  50. 50. SourceUI (Apple TV) iPhone App iPad App Apple TV App UI (iPad) UI (iPhone) @mschluepmann:
  51. 51. iPhone App iPad App TV App @APPlauseDSL: APPlause DSL Program APPlause DSL
  52. 52. DEMO
  53. 53. code Open source - EPL 1.0 code.google.com/p/applause/
  54. 54. ‣ Showcase about conferences ‣ Tighter integration with Xcode ‣ Improved Android Generator ‣ Support for BlackBerry ‣ Support for Windows Phone 7 ‣ Support for TV sets? APPlause - Roadmap
  55. 55. @peterfriese | http://peterfriese.de http://mobile.itemis.de

×