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.

Create Cross-Platform Native Mobile Apps in Flex with ELIPS Studio


Published on

In this FITC SF 2010 session, Guilhem explains what makes development of mobile applications development so special compared to Rich Internet Applications. You will learn what it means to be "native", why it matters for performance and user experience, and how OpenPlug's ELIPS Studio turns your Flex code into a native app. You'll also hear about the bewildering diversity in mobile operating systems and how ELIPS Studio helps keeping fragmentation at bay. Taking examples from popular apps created by ELIPS Studio users and some hands-on code examples, Guilhem will take you through the entire journey of specifying, designing, developing, testing and publishing an app created in Flex with ELIPS Studio on popular devices.

Published in: Technology

Create Cross-Platform Native Mobile Apps in Flex with ELIPS Studio

  1. 1. Create native cross-platform mobile apps in Flex with ELIPS |Studio Guilhem Ensuque [email_address] Twitter: @gensuque_op #elips3 San Francisco 17 August 2010
  2. 2. Who we are <ul><li>Founded 2002, VC-backed </li></ul><ul><li>30 people, France and Taiwan </li></ul><ul><li>Focus on mobile device software and tools </li></ul><ul><li>Software shipping in millions of devices </li></ul>Experts in mobile software development Copyright OpenPlug 2010
  3. 3. OpenPlug Products & Customers 3G Telephony Stack for Linux devices Cross-platform Mobile Application Development Tool Software platform for mass-market mobile phones Copyright OpenPlug 2010
  4. 4. Copyright OpenPlug 2010 Create native cross-platform mobile apps in Flex with ELIPS |Studio … what a mouthful … ! 
  5. 5. Copyright OpenPlug 2010 “ Create” – mobile IS different 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>New 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
  6. 6. 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>
  7. 7. 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>
  8. 8. Copyright OpenPlug 2010 “ native” – how it works with ELIPS |Studio 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
  9. 9. 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 ! (and we can do better)
  10. 10. Copyright OpenPlug 2010 “ native” – why ? 1 code line <mob: GroupList > 2 different UX #2: Get the native look & feel ... ... with no extra work.
  11. 11. 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
  12. 12. Copyright OpenPlug 2010 “ cross-platform” – some data Smartphones: 54 millions shipped in Q1 Feature phones: 260 millions shipped in Q1
  13. 13. Copyright OpenPlug 2010 “ cross-platform” – some data Smartphone OSes Q1 2010 shipments Source: Gartner
  14. 14. Copyright OpenPlug 2010 “ cross-platform” – some data Smartphone OSes Q1 2010 shipments Source: Gartner
  15. 15. “ cross-platform” in action Copyright OpenPlug 2010 Download our TweetMWC application from ANY App Store
  16. 16. 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
  17. 17. “ Mobile Apps” – big opportunity Source: Mobile Applications & Apps Stores, Juniper Research, 2009 Mobile Apps Downloads (in millions) Copyright OpenPlug 2010
  18. 18. Copyright OpenPlug 2010 “ Mobile Apps” – monetise easily with ELIPS |Studio Compliant with Apple’s App Store ToS Simplified publishing to all app Stores Increased revenue with mobile ads
  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 Demo time - let’s create an app …
  22. 22. Download ELIPS |Studio <ul><li>Join the OpenPlug Developer Zone </li></ul><ul><li>http:// </li></ul><ul><li>Download ELIPS|Studio Free </li></ul><ul><li>All materials available </li></ul><ul><ul><li>Installation Guide </li></ul></ul><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
  23. 23. Getting started with ELIPS |Studio <ul><li>Mac and Windows installers 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
  24. 24. 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
  25. 25. 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()
  26. 26. Copyright OpenPlug 2010 Step 3 - Code Code <ul><li>See our API reference </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>
  27. 27. 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 </li></ul><ul><li>Test on device ! (and test again, it is never enough  ) </li></ul>
  28. 28. 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>
  29. 29. ELIPS |Studio – Key Takeaway You are a Flex developer ? Now you are a mobile expert ! Copyright OpenPlug 2010
  30. 30. Copyright OpenPlug 2010 Thank You - Q & As Follow us on Twitter: @elips3 Guilhem Ensuque [email_address] Twitter: @gensuque_op #elips3 San Francisco 17 August 2010