Building a Real-World Application with Adobe Flex 2


Published on

Virtual Ubiquity is building the first real word processor for the web, and we're using Adobe Flex 2 and the Flash Player as the platform. Why did we choose that platform? What does it feel like to an old-school C++ developer? What happens when you try to use it for a real-world app? How do you work around the inevitable problems?

Published in: Business, Technology
  • Excellent demonstration. I have taken some of the framework graphics as well as adapted to my startup
    Are you sure you want to  Yes  No
    Your message goes here
  • Building real world application with adobe photo shop is very nice and interesting.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Building a Real-World Application with Adobe Flex 2

  1. 1. Building a Real-World Application With Flex 2 David Coletta Virtual Ubiquity, Inc. [email_address]
  2. 2. This talk is about <ul><li>What are we building? </li></ul><ul><li>What is Flex? </li></ul><ul><li>Why use it? </li></ul><ul><li>What happens when you try to use it for a real-world application? </li></ul><ul><li>How do you work around the inevitable problems? </li></ul>
  3. 3. Buzzword the first real word processor for the web <ul><li>No install: just surf and go </li></ul><ul><li>Ubiquitous access to your documents </li></ul><ul><li>Cross-browser, cross-platform </li></ul><ul><li>True WYSIWYG with page breaks, headers/footers, beautiful typography </li></ul><ul><li>Powerful collaboration features </li></ul>
  4. 4. Does the world need another word processor? <ul><li>Our big bets </li></ul><ul><li>People will trade functionality for ubiquity </li></ul><ul><li>People will trade functionality for fun </li></ul><ul><li>There’s room for innovation beyond the traditional WP user interface </li></ul><ul><li>Paper still matters </li></ul>
  5. 5. Target market: students <ul><li>They work from four different computers every day </li></ul><ul><li>Even if they own laptops, they don’t want to carry them around </li></ul><ul><li>They like trying new stuff </li></ul><ul><li>They haven’t bought Office yet </li></ul>
  6. 6. Demo
  7. 7. What we wanted in a platform <ul><li>Modern language </li></ul><ul><li>Great developer tools </li></ul>Rapid Development <ul><li>All the GUI building blocks </li></ul><ul><li>Rich media </li></ul><ul><li>Internet protocols </li></ul><ul><li>Interoperability with different back ends </li></ul>Functionality <ul><li>High-performance runtime </li></ul><ul><li>Small download footprint </li></ul>Performance <ul><li>High market penetration </li></ul><ul><li>Cross-browser, cross-platform </li></ul><ul><li>Runs well on locked-down machines </li></ul>Ubiquity
  8. 8. Why we chose Flex <ul><li>ActionScript 3 </li></ul><ul><li>Eclipse IDE </li></ul>Rapid Development <ul><li>Rich application framework </li></ul><ul><li>JPG, GIF, PNG, Video, embedded Flash movies </li></ul><ul><li>HTTP, SOAP, XML </li></ul>Functionality <ul><li>New VM for AS3 with 10x speed over Flash 8 </li></ul><ul><li>1 to 2 MB player download </li></ul>Performance <ul><li>Flash player has 98% penetration </li></ul><ul><li>Runs on Internet Explorer, Firefox, Safari, Windows, Mac OS X </li></ul>Ubiquity
  9. 9. Developer benefits of Flex <ul><li>Modern Eclipse-based IDE with plug-ins for extensibility </li></ul><ul><li>Great integration with source code control (CVS, Subversion) </li></ul><ul><li>ActionScript has very easy learning curve from C# or Java </li></ul><ul><li>Fast incremental compiler </li></ul>
  10. 10. “ Write once, run anywhere” candidate platforms <ul><li>Java </li></ul><ul><li>AJAX </li></ul><ul><li>.NET Framework (Windows-only) </li></ul><ul><li>Flex 2 and Flash </li></ul><ul><li>(WPF/E is coming) </li></ul>
  11. 11. It’s all about altitude <ul><li>All platforms are equivalent… </li></ul><ul><ul><li>Managed code </li></ul></ul><ul><ul><li>Performance </li></ul></ul><ul><ul><li>Security </li></ul></ul><ul><li>… once you download them! </li></ul><ul><li>Which platform is most nearly ubiquitous? </li></ul>
  12. 12. The Flash/Flex ecosystem Source: Wikipedia Flash 1, 2, 3 (1996-1998): Movie clips, browser integration, external standalone player Flash 4, 5, 6 (1999-2002): Scripting, ActionScript 1.0, XML, HTML text formatting Flash 7, 8 (2003-2005): ActionScript 2.0, Object-oriented programming, CSS support Flash 9 (2006): ActionScript 3.0, New virtual machine (AVM2), JIT compiler Flash Professional (authoring) Flex Builder (development) Captivate OpenLaszlo More…
  13. 13. Requirements for a real-world application  Tracing facility  Rich application framework  Unit test framework  Dynamically loaded code  Localizable external resources  IDE with debugger  Profiler ? Licensable third party libraries ? Community of developers ? Automated GUI testing
  14. 14. Flash Player limitations <ul><li>Very limited access to local file system </li></ul><ul><li>No native clipboard support </li></ul><ul><li>No drag and drop to OS </li></ul><ul><li>Hosted inside of browser </li></ul><ul><li>(We’re trying to make users forget they are in a browser!) </li></ul>
  15. 15. Major challenges of living in the browser <ul><li>Local file system access </li></ul><ul><ul><li>Upload via HTTP POST, then download </li></ul></ul><ul><ul><li>For debugging, use FileSystemObject (IE) and nsILocalFile (Firefox) </li></ul></ul><ul><li>Native clipboard support </li></ul><ul><ul><li>Use hidden browser design-mode control </li></ul></ul><ul><li>Hosted inside of browser </li></ul><ul><ul><li>Careful UI design </li></ul></ul><ul><ul><li>JavaScript to catch control keys and mousewheel events </li></ul></ul><ul><ul><li>Requires browser-specific JavaScript implementations </li></ul></ul>
  16. 16. Apollo is coming <ul><li>“ Apollo is the code name for a cross-operating system runtime being developed by Adobe that allows developers to leverage their existing web development skills (Flash, Flex, HTML, JavaScript, Ajax) to build and deploy Rich Internet Applications (RIAs) to the desktop.” </li></ul><ul><li>Alpha 1 shipped in March </li></ul>
  17. 17. Apollo
  18. 18. Problems Apollo solves <ul><li>Local file system access </li></ul><ul><li>System clipboard access </li></ul><ul><li>System drag-and-drop </li></ul><ul><li>Browser chrome </li></ul><ul><li>Lots of other desktop integration </li></ul>
  19. 19. Problems Apollo creates <ul><li>Increased complexity of install </li></ul><ul><li>Design challenge of offline model </li></ul><ul><li>Security </li></ul><ul><li>Second platform to support </li></ul><ul><li>(but it’s worth it!) </li></ul>
  20. 20. Minor hassles of Flex & AS3 <ul><li>Single-threaded execution model </li></ul><ul><ul><li>Code cannot block the UI, must always unwind </li></ul></ul><ul><ul><li>Use asynchronous event handling (completion functions) </li></ul></ul><ul><ul><li>There are benefits too: very few race conditions! </li></ul></ul><ul><li>No protected access for constructors </li></ul><ul><ul><li>Various alternatives for singletons </li></ul></ul><ul><li>Unreferenced code is always optimized away </li></ul><ul><ul><li>Make static variables or arrays with references </li></ul></ul><ul><li>Debugger </li></ul>
  21. 21. What does it feel like to work in Flex? <ul><li>Interpreted language vs. compiled language </li></ul><ul><li>Web application vs. standalone app </li></ul><ul><li>New platform </li></ul><ul><ul><li>few books </li></ul></ul><ul><ul><li>few tools </li></ul></ul><ul><ul><li>few third-party libraries </li></ul></ul><ul><ul><li>smaller community </li></ul></ul>
  22. 22. XML <ul><li>It’s not evil, just misunderstood </li></ul><ul><li>It’s everywhere in the Flex ecosystem </li></ul><ul><ul><li>MXML component definitions </li></ul></ul><ul><ul><li>Web services </li></ul></ul><ul><ul><li>E4X now part of AS3 language </li></ul></ul><ul><li>Embrace it to make best use of Flex </li></ul>
  23. 23. Choreography <ul><li>What is choreography? </li></ul><ul><li>Harder than just plopping stuff on the screen </li></ul><ul><li>Once you open the door, hard to turn back </li></ul><ul><li>Challenges: </li></ul><ul><ul><li>Algorithms for keeping track of where objects come from and where they go </li></ul></ul><ul><ul><li>Timing: how long to start, how long to play (different users have different tolerances) </li></ul></ul><ul><ul><li>Balance between usefulness, eye candy, distraction </li></ul></ul>
  24. 24. Testing techniques <ul><li>FlexUnit </li></ul><ul><li>Home-grown (“LiveTest”) </li></ul><ul><li>Mercury QuickTest Pro </li></ul>
  25. 25. Conclusion <ul><li>If you need </li></ul><ul><ul><li>rich media </li></ul></ul><ul><ul><li>best possible language performance </li></ul></ul><ul><ul><li>cross-browser, cross-platform support </li></ul></ul><ul><ul><li>trouble-free install </li></ul></ul><ul><li>and … you can live with the restrictions of Flash Player… </li></ul><ul><li>Then Flex has no equal </li></ul>
  26. 26. Additional resources <ul><li> </li></ul><ul><li>Christophe Coenraets: 30 Minute Flex Test-Drive for Developers </li></ul><ul><li>The Joy of Flex ( </li></ul>