Afik Gal @alphageeks: Flex Intro


Published on

Afik Gal talking at the alphageeks meetup on Flex, it's capabilities, pros and cons.

Check us out:

Published in: Technology, Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Lets have a look at how Flex works and fits into existing infrastructure. First is the application server, Flex uses the existing application server. If you don’t have one, Macromedia can provide one for you. On top of the application server, sits the Flex Presentation Server. Flex is broken down into two areas. A client-side Application Framework and the server-side Run-time services. The Application Framework consists of an XML declarative programming language for laying out and defining rich user experiences, which is code named MXML ActionScript which is the Flex programming language for procedural programming The class library, which consists of components like containers & controls and managers for commonly used services. These provide the building blocks for creating great user experiences Flex Run-time Services provide services for Flex Web Services proxy for interaction between the client and enterprise data sources Java object connectivity which allows you to invoke methods on local or remote objects Player detection which detects and locally deploys Flash client as necessary and performance optimizations like content caching and deferred instantiation. And Flex applications can be built using leading IDEs or text editors. We’re also working on a new technology, code named Brady, which is based on Dreamweaver MX 2004 and enables visual layout and code editing of Flex applications. Note to speaker: If you click on the “IDEs and text editor” box, that will take you a large screen shot of Flexstore code in Brady. If you click that image, it will take you back to this slide. If you click on the Brady box, it will take you to a large screenshot of Brady. And then if you click on that image it will take you back again.
  • Our goal with the Flex 2 pricing and packaging is to achieve rapid viral adoption of the Flex programming model and build a sustainable software licensing business that scales from departmental to the most complex data projects.     Key talking points: Getting started is free We expect the free SDK to be a driver for tools purchases We ’ ve optimized FDS pricing so that developers can try it out for nothing, departments can build a real application for around $20K, and pricing for large-scale applications can support a direct sales force.
  • Afik Gal @alphageeks: Flex Intro

    1. 1. Afik Gal [email_address] , 0524-601740 Flex
    2. 2. So Many Questions…. So Little Time… <ul><li>Rich Internet Applications? </li></ul><ul><li>What are my RIA technological options? </li></ul><ul><li>Is Flex like flash? (Enterprise development vs. Banner/Site building) </li></ul><ul><li>What do I get when using Flex? </li></ul><ul><li>How does it look like? </li></ul><ul><li>What can I do with it? </li></ul><ul><li>Is Flex robust/scalable/does it have enough track record? </li></ul>
    3. 3. RIA – It is All About User Experience (UX) <ul><li>Desirable – sexy (iPhone?) </li></ul><ul><li>Usable – easy to use / leads the user </li></ul><ul><li>Accessible – maximal 3 clicks for most options </li></ul><ul><li>Useful – does what the user needs </li></ul><ul><li>Adaptable – fits user’s methods of work </li></ul><ul><li>The UX makes the application engaging </li></ul>
    4. 4. RIA Technological Options <ul><li>Ajax – Asynchronous JavaScript and XML </li></ul><ul><li>Dojo, JQuery, Google’s GWT 1.7.0 </li></ul><ul><li>Sun’s JavaFX 1.2 </li></ul><ul><li>Microsoft’s Silverlight v.3 </li></ul><ul><li>Adobe’s Flex (v.4 in beta) </li></ul><ul><li>Options are not equivalent!!! </li></ul>
    5. 5. Flash Authoring <ul><li>Time and animation metaphor </li></ul><ul><li>Narratives to teach concepts, advertise products and services. </li></ul><ul><li>Inherent limits when developing complex applications </li></ul><ul><li>Lightweight </li></ul><ul><li>Wide community of developers (Different from Java/.Net developers) </li></ul><ul><li>Created using adobe CS4 – designer tools </li></ul>
    6. 6. Flex Authoring <ul><li>Screens and states metaphor (like other languages) </li></ul><ul><li>Timeline capabilities (Motion and effects) are used to improve user comprehension through feedback </li></ul><ul><li>Includes complex mechanisms to allow creation of enterprise grade applications </li></ul><ul><li>Heavier than flash ,slower to load </li></ul><ul><li>Not better than flash for simple tasks </li></ul><ul><li>Programmers are usually ‘converted” Java/.Net programmers </li></ul><ul><li>Created using Flex Builder (Eclipse plugin) </li></ul>
    7. 7. RIA – Important Considerations <ul><li>Logic (business/view) can run in the client-side, thus making the server smaller and more scalable </li></ul><ul><li>RIA technology is very easy to abuse, creating over-kill applications and annoying UI </li></ul><ul><li>Forgetting the speed constraint can lead to a non-desirable outcome </li></ul><ul><li>EVERYTHING is user centric (Optimizations, etc) </li></ul><ul><li>Choice of proper technology is important </li></ul>
    8. 8. Cross Browser/Cross Platform <ul><li>JavaScript code is not really cross browser… </li></ul><ul><li>Flex is 100% cross-browser.. Silverlight is aiming there </li></ul><ul><li>Flex is also almost 100% cross platform… </li></ul><ul><li>Flash player runs well on almost every browser and it is lightweight….Net CLR is heavy…. </li></ul>
    9. 9. Penetration <ul><li>The numbers for Java are similar to Flash , only 20% less </li></ul><ul><li>Some assumption say that all .Net together are ~ 58% or 34% or 6%.... </li></ul>Non-mobile devices!
    10. 10. Flex <ul><li>A work in progress…more than 6 years old </li></ul><ul><li>Latest version 4,Runs on Flash Player (v 9-10) </li></ul><ul><li>Eclipse Plugin (Netbeans,IntelliJ) </li></ul><ul><li>Implemented using ActionScript 3 & MXML(XML) </li></ul><ul><li>Allows creation of desktop applications (AIR) </li></ul><ul><li>Open source framework </li></ul><ul><li>Huge extendable SDK filled with goodies </li></ul><ul><li>Includes Optimization mechanisms for heavily graphical applications (Allow you to do everything) </li></ul>
    11. 11. Flex Demo sites <ul><li>1. Mercedes-Benz </li></ul><ul><li>2. FlauntR Online Photo Editor       http:// / </li></ul><ul><li>3. Volkswagen UK Used Car Locator       http:// </li></ul><ul><li>4. Toufee Online Flash Video Maker       http:// / </li></ul><ul><li>5. 24 Hour Fitness Member Services Online </li></ul>
    12. 12. <ul><li> </li></ul><ul><li> </li></ul><ul><li>http:// /app </li></ul><ul><li>http:// / </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul>Flex Demo sites
    13. 13. How Flex Works Compile Existing Applications & Infrastructure XML/HTTP REST/SOAP WS Flex Class Library Compiler+Debugger SOAP HTTP/S AMF/S RTMP/S Web Server Data Services Browser’s Cache Flash Player Flex Builder IDE MXML AS3
    14. 14. So What Do You Get…. <ul><li>A lot of ready made, extendable and styleable (CSS) component/capabilities </li></ul><ul><li>Asynchronous request / response model </li></ul><ul><li>Extensive data services capabilites: XML, SOAP, Binary data communication + Streaming </li></ul><ul><li>Client-side caching + Many Optimization mechanisms + Modularization mechanisms </li></ul><ul><li>Many impressive and open source components (community) including free data services </li></ul>
    15. 15. Ready made components
    16. 16. Flex Data Components <ul><li>Advanced DataGrid </li></ul><ul><li>Hierarchical data displays </li></ul><ul><li>Flexible grouping and sorting APIs </li></ul><ul><li>Custom cell/row/column formatting </li></ul><ul><li>Charting Enhancements </li></ul><ul><li>Data-oriented graphics API </li></ul><ul><li>Per-item labels and fills </li></ul><ul><li>Arbitrary number of display axes </li></ul><ul><li>Region selection </li></ul>
    17. 17. 3rd Party Charting Components
    18. 18. Flex 3 Pricing and Packaging Price Notes Adobe® Flex™ 3 SDK Open Source Free Adobe® Flex™ Builder™ 3 Standard edition Adobe® Flex™ Builder™ 3 Professional edition $249 $699 Standalone or plug-in Adds testing tools, charting, and advanced datagrid BlazeDS – Flex Remoting and Messaging Free Open Source – BlazeDS project
    19. 19. Desktop Applications –Adobe AIR <ul><li>Adobe Integrated Runtime (AIR) Cross-OS application engine that enables hybrid desktop-internet applications </li></ul><ul><li>Same language…same skills…same team </li></ul><ul><li>Ability to integrate Internet and desktop </li></ul><ul><li>Access to local Filesystem/Database </li></ul>
    20. 20. Flex 4 beta (FlashBuilder…) <ul><li>Support for RTL languages </li></ul><ul><li>Improved component model </li></ul><ul><li>Lots more effects/skinning/styling options </li></ul><ul><li>25% faster compiler… </li></ul><ul><li>Code Generation </li></ul><ul><li>Unit Testing built in support </li></ul><ul><li>Usage of Flash Player 10 – Better graphical performance + 3D. </li></ul><ul><li>Sophisticated text rendering </li></ul>
    21. 21. Disadvantages of Flex <ul><li>Using Flex is easy…. Using it correctly…NOT! </li></ul><ul><li>Flex application can have huge bottle necks and very poor performance…Proper usage of flex demands understanding of the work of the AVM (ActionScript Virtual Machine) and acquaintance with Flex’s MANY optimization mechanismsFlex is based on AS3…… </li></ul><ul><li>Despite the Open-Source SDK.. Flex is propriety </li></ul><ul><li>Flex builder is not cheap…. </li></ul><ul><li>Flex compiler is SLOW! </li></ul>
    22. 22. Anatomy of a Flex Application
    23. 23. A Whole Data Driven Program
    24. 24. Components <ul><li>Tour de flex </li></ul><ul><li>Components </li></ul>
    25. 25. Hands On Experience