Create native cross-platform mobile apps in Flex with ELIPS  Studio Guilhem Ensuque [email_address] Twitter: @gensuque_op ...
Who we are <ul><li>Founded 2002, as a VC-backed startup </li></ul><ul><li>Acquired by Alcatel-Lucent 2 weeks ago   </li><...
OpenPlug Products & Customers Copyright OpenPlug 2010
OpenPlug Products & Customers Copyright OpenPlug 2010 YOU
Copyright OpenPlug 2010 Create native cross-platform mobile apps in Flex with ELIPS  Studio …  what a mouthful … !  
Copyright OpenPlug 2010 “ Create”  – mobile specificities Design Code Test Publish <ul><li>UI controls </li></ul><ul><li>P...
Copyright OpenPlug 2010 “ native”  – what it’s NOT <ul><li>Compiled to VM byte code </li></ul><ul><li>Interpreted by a VM ...
Copyright OpenPlug 2010 “ native”  – what it IS <ul><li>Compiled to machine code  </li></ul><ul><li>Executed by the CPU di...
Copyright OpenPlug 2010 “ native”  – how it works Cross-compile to C++  Build to binary ELIPS COMPILER ELIPS PACKAGER Sele...
Copyright OpenPlug 2010 “ native”  – why ? #1 : Performance Grant Skinner’s AS3 bench (AS3 Functions, ArrayIterators, Scop...
Copyright OpenPlug 2010 “ native”  – why ? #1 : Performance Grant Skinner’s AS3 bench (AS3 Functions, ArrayIterators, Scop...
Copyright OpenPlug 2010 “ native”  – why ? #2: Get the native look & feel ... ... with no extra work. 1 code line <mob:Tab...
Copyright OpenPlug 2010 “ cross-platform”  – a mess iPhone iPod iPad BB OS 6  S60 5 th  Ed S60 3 th  Ed Win Mob 6 Win Mob ...
Copyright OpenPlug 2010 “ cross-platform”  – some data Smartphones:  62 millions shipped in Q2 8 per second Feature phones...
Copyright OpenPlug 2010 Global smartphone OS shipments – Q2 2010   Source: Gartner  http:// www.gartner.com/it/page.jsp?id...
Copyright OpenPlug 2010 (and it’s not just smartphones) “ Thief!” - Cards Game App on iPad
“ cross-platform”   in action Copyright OpenPlug 2010 Download our TweetMWC application from ANY App Store
“ Mobile Apps”   – big opportunity Amount of money paid by Apple to its App Developers last year Source:  I heard the figu...
#1 Paid App in Brazil Created by Baiao Games with  ELIPS  Studio (as of June 30 2010) Copyright OpenPlug 2010
#2 Free App in Belgium Created by Exuvis with  ELIPS  Studio (as of July 1 2010) Copyright OpenPlug 2010
Copyright OpenPlug 2010 “ Mobile Apps”  – monetisation …  Compliant with Apple’s App Store ToS …  Simplifying publishing t...
Copyright OpenPlug 2010 Demo time -  let’s create an app …
Download ELIPS |Studio <ul><ul><li>Setup Guide for each platform </li></ul></ul><ul><ul><li>Tutorials </li></ul></ul><ul><...
Getting started with ELIPS |Studio <ul><li>Mac and Windows versions available  </li></ul><ul><li>Pre-requisites </li></ul>...
Example app   – TweetMWC  <ul><li>App developed in Flex Buidler in 2w </li></ul><ul><li>Uses open source twitter AS3 libra...
Copyright OpenPlug 2010 Step 1 - Specification <ul><li>Define “what” your application does and looks like </li></ul><ul><u...
Copyright OpenPlug 2010 Step 2 - Design Design <ul><li>Internal object model (e.g. MVC pattern/framework) </li></ul><ul><l...
Copyright OpenPlug 2010 Step 3 - Code Code <ul><li>See our API reference  http://developer.openplug.com/code/api   </li></...
Copyright OpenPlug 2010 Step 4 – Build & Test Test <ul><li>Test your app with our Simulator (AIR-based)  </li></ul><ul><li...
Copyright OpenPlug 2010 Step 5 - Publish Publish <ul><li>Register to the App Stores you want (there are 79 and counting !)...
ELIPS Studio Get the best of both worlds Native User Experience + Web Age productivity Copyright OpenPlug 2010
Copyright OpenPlug 2010 Thank You - Q & As  Slides:  http:// slideshare.net/gensuque Web:  http://developer.openplug.com T...
Upcoming SlideShare
Loading in …5
×

FITC Mobile 2010 - Cross-Platform Native Apps with ELIPS Studio

1,425 views
1,376 views

Published on

My slides from the FITC Mobile 2010 conference.
More details here: http://developer.openplug.com/about/blog/262-fitc-mobile-2010

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,425
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Session Title: Create cross-platform native mobile apps in Flex with OpenPlug ELIPS Studio Session description: In this session you will learn how ELIPS Studio allows Flex developers to create native mobile applications in Flex for iPhone, Android, Windows Mobile and Symbian.
  • Show of hands: How many develop mobile apps ? How many target more than 1 platform ? How many have heard of Flex ? Do you want to see code or hear me make some insightful statements ?
  • 1 OpenPlug mobile Flex component -&gt; mapped to native UI control 2 different user experiences Physics / momentum List items grouping touch behavious Scrollbar behaviour Many, many small differences that make each platform “special” and are too difficult to handle in Flex code
  • Almanaque Anos 80 #1 paid app in Brazil tweetMWC -&gt; all app stores
  • Almanaque Anos 80 #1 paid app in Brazil tweetMWC -&gt; all app stores
  • FITC Mobile 2010 - Cross-Platform Native Apps with ELIPS Studio

    1. 1. Create native cross-platform mobile apps in Flex with ELIPS Studio Guilhem Ensuque [email_address] Twitter: @gensuque_op Hashtag: #ELIPS Slides: http://slideshare.net/gensuque
    2. 2. Who we are <ul><li>Founded 2002, as a VC-backed startup </li></ul><ul><li>Acquired by Alcatel-Lucent 2 weeks ago  </li></ul><ul><li>Software shipping in millions of devices </li></ul>Experts in mobile software development Copyright OpenPlug 2010 SonyEricsson Spiro W100
    3. 3. OpenPlug Products & Customers Copyright OpenPlug 2010
    4. 4. OpenPlug Products & Customers Copyright OpenPlug 2010 YOU
    5. 5. Copyright OpenPlug 2010 Create native cross-platform mobile apps in Flex with ELIPS Studio … what a mouthful … ! 
    6. 6. Copyright OpenPlug 2010 “ Create” – mobile specificities Design Code Test Publish <ul><li>UI controls </li></ul><ul><li>Platforms </li></ul><ul><li>Touch, GPS, Cam, ... </li></ul><ul><li>Content / HIG </li></ul><ul><li>Performance </li></ul><ul><li>Memory </li></ul><ul><li>Connectivity </li></ul><ul><li>Device APIs </li></ul><ul><li>Variants </li></ul><ul><li>Simulation </li></ul><ul><li>Device </li></ul><ul><li>Signing </li></ul><ul><li>Approval </li></ul>Spec
    7. 7. Copyright OpenPlug 2010 “ native” – what it’s NOT <ul><li>Compiled to VM byte code </li></ul><ul><li>Interpreted by a VM / runtime </li></ul><ul><li>Hiding host system features </li></ul><ul><li>Replacing host system UI </li></ul>
    8. 8. Copyright OpenPlug 2010 “ native” – what it IS <ul><li>Compiled to machine code </li></ul><ul><li>Executed by the CPU directly </li></ul><ul><li>Using host system features </li></ul><ul><li>Using host system UI controls </li></ul>
    9. 9. Copyright OpenPlug 2010 “ native” – how it works Cross-compile to C++ Build to binary ELIPS COMPILER ELIPS PACKAGER Select Devices Sign Packages ELIPS SDK Code your App in ActionScript 3 and MXML Publish your Native Apps
    10. 10. Copyright OpenPlug 2010 “ native” – why ? #1 : Performance Grant Skinner’s AS3 bench (AS3 Functions, ArrayIterators, Scope) HTC Desire Android 2.1 “Éclair” Cortex-A8 CPU 1 GHz v2515540 6 times faster
    11. 11. Copyright OpenPlug 2010 “ native” – why ? #1 : Performance Grant Skinner’s AS3 bench (AS3 Functions, ArrayIterators, Scope) iPhone 3GS iOS4.1 800MHz Samsung ARM CPU 18 times faster
    12. 12. Copyright OpenPlug 2010 “ native” – why ? #2: Get the native look & feel ... ... with no extra work. 1 code line <mob:TabNavigator/> 2 different User Experiences
    13. 13. Copyright OpenPlug 2010 “ cross-platform” – a mess iPhone iPod iPad BB OS 6 S60 5 th Ed S60 3 th Ed Win Mob 6 Win Mob 6.5 Win Phone 7 Symbian ^3 iPhone 3.1 iOS 4.0 iPad 3.x Android 1.6.x Android 2.1.x Android 2.2 Web OS Bada 1.0 Bada x.y Maemo 3 Maemo 4 Meego 1 JDE v4.x JDE v3.x
    14. 14. Copyright OpenPlug 2010 “ cross-platform” – some data Smartphones: 62 millions shipped in Q2 8 per second Feature phones: 263 millions shipped in Q2 33 per second Source: Gartner http:// www.gartner.com/it/page.jsp?id =1421013
    15. 15. Copyright OpenPlug 2010 Global smartphone OS shipments – Q2 2010 Source: Gartner http:// www.gartner.com/it/page.jsp?id =1421013 Platforms supported by ELIPS|Studio as of Sept 2010 – other platforms are expected in future releases “ cross-platform” – some data
    16. 16. Copyright OpenPlug 2010 (and it’s not just smartphones) “ Thief!” - Cards Game App on iPad
    17. 17. “ cross-platform” in action Copyright OpenPlug 2010 Download our TweetMWC application from ANY App Store
    18. 18. “ Mobile Apps” – big opportunity Amount of money paid by Apple to its App Developers last year Source: I heard the figure yesterday in @bradygilchrist excellent presentation Copyright OpenPlug 2010 $ 1,000,000,000 … But real value is that apps are a game-changer
    19. 19. #1 Paid App in Brazil Created by Baiao Games with ELIPS Studio (as of June 30 2010) Copyright OpenPlug 2010
    20. 20. #2 Free App in Belgium Created by Exuvis with ELIPS Studio (as of July 1 2010) Copyright OpenPlug 2010
    21. 21. Copyright OpenPlug 2010 “ Mobile Apps” – monetisation … Compliant with Apple’s App Store ToS … Simplifying publishing to all app Stores … and it is “less-than-free” ! ELIPS Studio is …
    22. 22. Copyright OpenPlug 2010 Demo time - let’s create an app …
    23. 23. Download ELIPS |Studio <ul><ul><li>Setup Guide for each platform </li></ul></ul><ul><ul><li>Tutorials </li></ul></ul><ul><ul><li>API reference </li></ul></ul><ul><ul><li>Samples & Videos </li></ul></ul><ul><ul><li>Support forum </li></ul></ul>Copyright OpenPlug 2010 http:// developer.openplug.com /download
    24. 24. Getting started with ELIPS |Studio <ul><li>Mac and Windows versions available </li></ul><ul><li>Pre-requisites </li></ul><ul><ul><li>Flex Builder 3 or Flash Builder 4 installed </li></ul></ul><ul><ul><li>For iPhone: you need a Mac + xCode / iPhone SDK </li></ul></ul><ul><ul><li>Register to each developer program </li></ul></ul><ul><ul><li>Get a device </li></ul></ul><ul><li>Don’t rush into coding </li></ul><ul><ul><li>Check the samples first (UICatalog) </li></ul></ul><ul><ul><li>Start from scratch with a simple app </li></ul></ul><ul><ul><li>Then (and only then) start creating your app </li></ul></ul>Copyright OpenPlug 2010
    25. 25. Example app – TweetMWC <ul><li>App developed in Flex Buidler in 2w </li></ul><ul><li>Uses open source twitter AS3 library </li></ul><ul><li>optimized assets for each screen size </li></ul><ul><li>Approved and distributed in 4 app stores </li></ul>1 Flex code base  4 platforms Copyright OpenPlug 2010 Available on Available on Available on
    26. 26. Copyright OpenPlug 2010 Step 1 - Specification <ul><li>Define “what” your application does and looks like </li></ul><ul><ul><li>Screen flows and UI controls (using our <mob:>) </li></ul></ul><ul><ul><li>Which devices will your app target (iPhone, Android …) </li></ul></ul><ul><ul><li>Which device features (GPS, Camera, Contacts, Tel …) </li></ul></ul><ul><ul><li>Interface with web services (HTTP requests) </li></ul></ul><ul><ul><li>App Store content guidelines (no b00bs, please !) </li></ul></ul>Spec
    27. 27. Copyright OpenPlug 2010 Step 2 - Design Design <ul><li>Internal object model (e.g. MVC pattern/framework) </li></ul><ul><li>Optimum CPU / Memory usage (see tips on our forum) </li></ul><ul><li>Data loading and persistence (XML files) </li></ul><ul><li>REST Interface with web services (XML, JSON) </li></ul><ul><li>Use of 3 rd -party AS3 libraries (e.g. opensource) </li></ul>List View Twitter lib cache HTTP Req / JSON loadHashTagSettings() loadCachedData()
    28. 28. Copyright OpenPlug 2010 Step 3 - Code Code <ul><li>See our API reference http://developer.openplug.com/code/api </li></ul><ul><li>Use our <mob: > namespace </li></ul><ul><li>Choose WindowedApplication or ScreenStackApplication </li></ul><ul><li>Pack your resources in variants folder </li></ul><ul><li>Use platform-specific conditional tests </li></ul>
    29. 29. Copyright OpenPlug 2010 Step 4 – Build & Test Test <ul><li>Test your app with our Simulator (AIR-based) </li></ul><ul><li>Test with a remote testing service like http://www.perfectomobile.com/ </li></ul><ul><li>Test on device ! (and test again, it is never enough  ) </li></ul>
    30. 30. Copyright OpenPlug 2010 Step 5 - Publish Publish <ul><li>Register to the App Stores you want (there are 79 and counting !) </li></ul><ul><li>Get the necessary stuff from the App Store (certificate, etc.) </li></ul><ul><li>Set the publishing settings for your app (icons, cert keys …) </li></ul><ul><li>Final build & Submit (and wait  ) </li></ul>
    31. 31. ELIPS Studio Get the best of both worlds Native User Experience + Web Age productivity Copyright OpenPlug 2010
    32. 32. Copyright OpenPlug 2010 Thank You - Q & As Slides: http:// slideshare.net/gensuque Web: http://developer.openplug.com Twitter: @elips3 + Grab a discount voucher NOW !

    ×