Flash, Flex & AIR: A brief survey


Published on

A brief technical survey of Rich Internet Application (RIA) platforms, focusing on Flash, Flex, and Air.

Published in: Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Flash, Flex & AIR: A brief survey

  1. Rich Internet Applications: v3 Adobe Flex & AIR Microsoft Siverlight Sun Java FX Firefox 3 Flash & Flex
  2. Brower-based Player-based Client-based Thin Flash, Flex, AIR, Windows, Rich HTML AJAX Client Siverlight JavaFX Mac Client XUL XUL (+XULRunner) Java/Swing or SWT XForms OpenLazlo Reduced maintenance Combined benefits Intuitive UI Location independence of thin and rich clients Immediate response
  3. FLEX “Adobe® Flex™ 2 is a complete, powerful application development solution for creating and delivering cross- platform rich Internet applications (RIAs) within the enterprise and across the web. It enables the creation of expressive and interactive web applications that can reach virtually anyone on any platform. ” Travis Isaacs | travisisaacs.com 3
  4. More succinctly: “Flex is a way to develop Flash applications by programming” http://www.artima.com/weblogs/viewpost.jsp?thread=193593 Travis Isaacs | travisisaacs.com 4
  5. How is Flex different from Flash? Flash Flex ActionScript Yes Yes MXML No Yes HTML/CSS Yes Yes Javascript Limited Yes Drawing Tools Yes No Library Yes No Layout Engine Yes Yes Animation Timeline Yes No Layers Yes No Travis Isaacs | travisisaacs.com 5
  6. How is Flex different from Flash? EMCA standardized, like Javascript, yet object- oriented like java Flash Flex ActionScript Yes Yes MXML No Yes HTML/CSS Yes Yes Javascript Limited Yes Drawing Tools Yes No Library Yes No Layout Engine Yes Yes Animation Timeline Yes No Layers Yes No Travis Isaacs | travisisaacs.com 5
  7. How is Flex different from Flash? EMCA standardized, like Javascript, yet object- oriented like java Flash Flex ActionScript Yes Yes MXML No Yes Declaritive XML HTML/CSS Yes - Yes LIke XUL Javascript Limited Yes Drawing Tools Yes No Library Yes No Layout Engine Yes Yes Animation Timeline Yes No Layers Yes No Travis Isaacs | travisisaacs.com 5
  8. How is Flex different from Flash? Flash Flex ActionScript Yes Yes MXML No Yes HTML/CSS Yes Yes Javascript Limited Yes Drawing Tools Yes No Library Yes No Layout Engine Yes Yes Animation Timeline Yes No Layers Yes No Travis Isaacs | travisisaacs.com 5
  9. ActionScript Timeline Layers Canvas Movie clips Stage Travis Isaacs | travisisaacs.com http://kanuwadhwa.wordpress.com/2007/10/03/flash-and-flex-can-hold-hands/ 6
  10. ActionScript Timeline Layers Flash documents (.FLA) are binary files created in the Adobe Flash authoring environment. Canvas Interface elements are “drawn”Movie and manipulated over a timeline using tweens,clips keyframes, and Stage layers (or programmatically). A .FLA file is compiled into a .SWF file and embedded into an HTML page. Travis Isaacs | travisisaacs.com http://kanuwadhwa.wordpress.com/2007/10/03/flash-and-flex-can-hold-hands/ 7
  11. Travis Isaacs | travisisaacs.com 8
  12. Drawing tools Travis Isaacs | travisisaacs.com 9
  13. Timeline Travis Isaacs | travisisaacs.com 10
  14. Stage Travis Isaacs | travisisaacs.com 11
  15. Library & components Travis Isaacs | travisisaacs.com 12
  16. Actionscript editor Travis Isaacs | travisisaacs.com 13
  17. ActionScript Data Tags services Source MXML View Html & Css Perspectives Travis Isaacs | travisisaacs.com http://kanuwadhwa.wordpress.com/2007/10/03/flash-and-flex-can-hold-hands/ 14
  18. ActionScript Data Tags services Source MXML View Flex documents (.MXML) are text files authored in Adobe FlexBuilder (based on Eclipse). Alternatively, & Html Eclipse RCP can be used with a free FlexBuilder plug-in. Css Perspectives In Flex, interface elements and components are created using declaritive XML-like tags. Travis Isaacs | travisisaacs.com http://kanuwadhwa.wordpress.com/2007/10/03/flash-and-flex-can-hold-hands/ 15
  19. private function requestPhotos():void{ photoService.cancel(); var params:Object = new Object(); params.format = 'rss_200_enc'; params.tags = searchTerms.text; photoService.send(params); } private function photoHandler(event:ResultEvent):void{ photoFeed = event.result.rss.channel.item as ArrayCollection; } ]]> </mx:Script> <mx:HTTPService id=quot;photoServicequot; url=quot;http://api.flickr.com/services/feeds/photos_public.gnequot; result=quot;photoHandler(event)quot;/> <mx:HBox width=quot;391quot;> <mx:TextInput id=quot;searchTermsquot; /> <mx:Button label=quot;Buttonquot; click=quot;requestPhotos()quot;/> </mx:HBox> <mx:TileList width=quot;100%quot; height=quot;100%quot; dataProvider=quot;{photoFeed}quot;> <mx:itemRenderer> <mx:Component> <mx:VBox width=quot;125quot; height=quot;125quot; paddingBottom=quot;5quot; paddingLeft=quot;5quot; paddingTop=quot;5quot; paddingRight=quot;5quot;> <mx:Image width=quot;75quot; height=quot;75quot; source=quot;{data.thumbnail.url}quot;/> <mx:Text text=quot;{data.credit}quot;/> </mx:VBox> </mx:Component> </mx:itemRenderer> </mx:TileList> </mx:WindowedApplication> Travis Isaacs | travisisaacs.com 16
  20. FLEXBUILDER Travis Isaacs | travisisaacs.com 17
  21. ECLIPSE PLUGIN Travis Isaacs | travisisaacs.com 18
  22. Can Flex can be a companion to Q your existing technology stack? Travis Isaacs | travisisaacs.com 19
  23. Probably. Travis Isaacs | travisisaacs.com 20
  24. EXAMPLE External CLASS FILE Data Source SWF Agent Web Server FlexBuilder IDE IDE Eclipse Java Developer Travis Isaacs | travisisaacs.com 21
  25. EXAMPLE Client Side Server Side Integration/ Integration/ Presentation Layer Presentation Layer Service Layer Service Layer HTTP Service Struts, Tapestry, Browser (HTML) Locator DAOs Velocity, ETC Spring, HiveMind, EJB, or Hibernate, Entity other integration/ Beans, etc. Flex AMF Delegate service layer Flex (Flash Player) Gateway Layer REMOTE OBJECT http://www.onjava.com/pub/a/onjava/2004/12/01/flexjava.html Travis Isaacs | travisisaacs.com 22
  26. application es for consumption by a Flex Server-side Java can be used to create web servic Travis Isaacs | travisisaacs.com 23
  27. Flex will work with nearly any HTTP or socket based server: • ASCII text (POST,GET,REST Headers Supported) • XML (POST,GET,REST Headers Supported) • Server side languages: .NET, RUBY, PYTHON, JAVA, PHP, PERL, XML, etc • SOAP direct to the server • Binary AMF (Optimized data serialization format for remoting, paging) • Real-time exchange using 2 way push over XML Socket and Binary Socket http://www.onflex.org/ted/2006/12/top-10-myths-about-adobe-flex-20.php Travis Isaacs | travisisaacs.com 24
  28. “Flex supports a compact binary object serialization protocol, called AMF3, which is extremely fast. There are numerous Open Source implementations using various backend technologies for AMF3, as well as a commercial / supported Adobe product, called Flex Data Services.” “If you control both sides of the wire in your application, then there is rarely a good reason to serialize and deserialize text. Objects are blazing fast as you can tell by this benchmark. AMF3 is also typically much more efficient across the wire (even without compression) and consumes much less client side memory. JIT compilation and binary object serialization are the primary reasons why Flex AMF3 is so fast, even in the test with the full 20,000 rows. And, it’s not just faster for loading - it also speeds client side sorting and filtering.” http://www.jamesward.org/census/ http://www.jamesward.org/census/
  29. Do we you any special technology Q to run and deploy Flex apps? Travis Isaacs | travisisaacs.com 27
  30. Sorta. Travis Isaacs | travisisaacs.com 28
  31. Flex Data Services 2 “A powerful solution for creating data-intensive rich applications” • Deployed as standard J2EE application • Real-time data push and pub/sub messaging • Allows for occasionally connected applications $15,000/CPU Read More: http://www.adobe.com/products/flex/dataservices/
  32. WebORB for Java “WebORB for Java is server-side technology enabling connectivity between Flash Remoting and AJAX clients and Java applications.” $900/CPU
  33. Do users need anything special to Q run Flex applications? Travis Isaacs | travisisaacs.com 32
  34. Yes. Travis Isaacs | travisisaacs.com 33
  35. 96% of PC’s have what they need to run a Flex application. Travis Isaacs | travisisaacs.com 34
  36. EASY INSTALL Travis Isaacs | travisisaacs.com 35
  37. Travis Isaacs | travisisaacs.com 36
  38. Travis Isaacs | travisisaacs.com 37
  39. Travis Isaacs | travisisaacs.com 38
  40. Travis Isaacs | travisisaacs.com 39
  41. ActionScript Data Tags services <mx:SWFLoader> Source MXML View Html & Because they are both compiled into a common format Css (.swf), Flash movies can be used in Flex applications. Perspectives Travis Isaacs | travisisaacs.com http://kanuwadhwa.wordpress.com/2007/10/03/flash-and-flex-can-hold-hands/ 40
  42. stylingn’ existing UI elements) (ability to ‘ski al c ntrol graphicarency, oadows, rounded corners) precise sp sh ng, alpha tran (font anti-aliasi w’ widgets UI Aesthetic . creation ofru‘ne mb) Considerations.. breadc (slider, tabbed atterns novel interaction p seatmap)D (radial menu, 3- creation of ‘new’ w idgets data visartsalizat) u ion , mapping (bar graphs, ch cs 3-D effeges,trotating objects) (perspective pa basic styling (ability to ‘skin’ existing UI elements)
  44. Source to ActionScript components Flex SDK and components Java source code for compilers, debugger, and core
  45. Mozilla Public License (MPL)
  46. So What? ‣ Extremely rich UI potential via Flash and scripting ‣ Client-side business logic (medium client) ‣ High penetration of runtime (96% on Windows PC’s) ‣ Complimentary to most technology stacks ‣ Leverage talents of existing developers and designers ‣ Free/cheap IDE tools ‣ Open Source What else? ‣ Flex inherits existing challenges of using Flash in the enterprise (gathering analytics, accessibility limitations) Travis Isaacs | travisisaacs.com 46
  47. AIR “Adobe® AIR™ lets developers use their existing web development skills in HTML, AJAX, Flash and Flex to build and deploy rich Internet applications to the desktop.” Travis Isaacs | travisisaacs.com 47
  48. Application.air ? Flash Content Web Content Flex Content Java Applet AIR RUNTIME WebKit Flash PDF SQLite Browser Player Support Database OS integration via: Windows 2000 File System I/O System Drag & Drop Native Menu API Windows XP Online/Offline Full Network Stack Right-click support Mac OSX Linux BETA Windowing Clipboard Sync Travis Isaacs | travisisaacs.com 48
  49. Finetune Deskop } Music streaming from Internet source + } Music from my local iTunes library Travis Isaacs | travisisaacs.com 49
  50. Pownce
  51. Adobe Kuler
  52. ebay Desktop Travis Isaacs | travisisaacs.com 53
  53. OS window Custom window chrome } controls with alpha transparency } Travis Isaacs | travisisaacs.com 54
  54. Multiple window support Travis Isaacs | travisisaacs.com 55
  55. Live updating Travis Isaacs | travisisaacs.com 56
  56. SalesForce SalesBuilder
  57. So What? ‣ Easy application delivery to the desktop with a lightweight runtime. ‣ Hybrid of thin & fat client model ‣ Online/offline capabilities via network API and local storage ‣ Integrates into the OS like a “real” application ‣ Rich windowing capabilities What else? ‣ Unproven in the enterprise ‣ Still in BETA Travis Isaacs | travisisaacs.com 62