SlideShare a Scribd company logo
1 of 65
Download to read offline
Rich Internet Applications:


                                                                     v3
 Adobe Flex & AIR   Microsoft Siverlight   Sun Java FX   Firefox 3




                    Flash & Flex
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
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
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
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
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
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
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
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
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
Travis Isaacs | travisisaacs.com   8
Drawing tools




Travis Isaacs | travisisaacs.com   9
Timeline




Travis Isaacs | travisisaacs.com              10
Stage



Travis Isaacs | travisisaacs.com           11
Library & components




Travis Isaacs | travisisaacs.com                          12
Actionscript
                                     editor




Travis Isaacs | travisisaacs.com                  13
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
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
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
FLEXBUILDER




Travis Isaacs | travisisaacs.com   17
ECLIPSE PLUGIN




Travis Isaacs | travisisaacs.com   18
Can Flex can be a companion to
                                   Q   your existing technology stack?




Travis Isaacs | travisisaacs.com                                         19
Probably.




Travis Isaacs | travisisaacs.com               20
EXAMPLE



                                                                                                   External
                                                            CLASS FILE                             Data Source




                                                        SWF



           Agent




                                                                                      Web Server
                                   FlexBuilder                                  IDE
                                                 IDE                    Eclipse
                                                       Java Developer



Travis Isaacs | travisisaacs.com                                                                             21
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
application
                                                             es for consumption by a Flex
           Server-side Java can be used to create web servic




Travis Isaacs | travisisaacs.com                                                                        23
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
“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/
Do we you any special technology
                                   Q   to run and deploy Flex apps?




Travis Isaacs | travisisaacs.com                                          27
Sorta.




Travis Isaacs | travisisaacs.com            28
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/
WebORB for Java
“WebORB for Java is server-side technology enabling connectivity between Flash Remoting and
AJAX clients and Java applications.”

$900/CPU
Do users need anything special to
                                   Q   run Flex applications?




Travis Isaacs | travisisaacs.com                                           32
Yes.




Travis Isaacs | travisisaacs.com          33
96% of PC’s have what they need to run
                                             a Flex application.




Travis Isaacs | travisisaacs.com                                            34
EASY INSTALL




Travis Isaacs | travisisaacs.com   35
Travis Isaacs | travisisaacs.com   36
Travis Isaacs | travisisaacs.com   37
Travis Isaacs | travisisaacs.com   38
Travis Isaacs | travisisaacs.com   39
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
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)
OPEN SOURCE
Source to ActionScript components
Flex SDK and components
Java source code for compilers, debugger, and core
Mozilla Public License (MPL)
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
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
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
Finetune Deskop



                                   }   Music streaming from
                                       Internet source



                                               +
                                   }   Music from my local
                                       iTunes library




Travis Isaacs | travisisaacs.com                              49
Pownce
Adobe Kuler
ebay Desktop




Travis Isaacs | travisisaacs.com   53
OS window          Custom window chrome
              }  controls          with alpha transparency




                                      }
Travis Isaacs | travisisaacs.com                             54
Multiple window support




Travis Isaacs | travisisaacs.com                             55
Live updating




Travis Isaacs | travisisaacs.com                   56
SalesForce SalesBuilder
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

More Related Content

Similar to Flash, Flex & AIR: A brief survey

Kann JavaScript elegant sein?
Kann JavaScript elegant sein?Kann JavaScript elegant sein?
Kann JavaScript elegant sein?jbandi
 
JavaFX vs AJAX vs Flex
JavaFX vs AJAX vs FlexJavaFX vs AJAX vs Flex
JavaFX vs AJAX vs FlexCraig Dickson
 
Beg, Borrow or Steal: The Art of Flashing Without Flashing
Beg, Borrow or Steal: The Art of Flashing Without FlashingBeg, Borrow or Steal: The Art of Flashing Without Flashing
Beg, Borrow or Steal: The Art of Flashing Without Flashingspjwebster
 
From Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holesFrom Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holesPatric Lanhed
 
RIA Platform Comparison
RIA Platform ComparisonRIA Platform Comparison
RIA Platform ComparisonOliver Steele
 
Introduction To J Boss Seam
Introduction To J Boss SeamIntroduction To J Boss Seam
Introduction To J Boss Seamashishkulkarni
 
[Challenge:Future] Chocoholic
[Challenge:Future] Chocoholic [Challenge:Future] Chocoholic
[Challenge:Future] Chocoholic Challenge:Future
 
jQuery Report
jQuery ReportjQuery Report
jQuery ReportPaul Ward
 
Building Asynchronous Applications
Building Asynchronous ApplicationsBuilding Asynchronous Applications
Building Asynchronous ApplicationsJohan Edstrom
 
AJAX Frameworks
AJAX FrameworksAJAX Frameworks
AJAX Frameworksshank
 
Difference between ajax and silverlight
Difference between ajax and silverlightDifference between ajax and silverlight
Difference between ajax and silverlightUmar Ali
 
An introduction to html5 by Devs
An introduction to html5 by DevsAn introduction to html5 by Devs
An introduction to html5 by DevsDebidatta Satapathy
 
Mozilla In Malaysia
Mozilla In MalaysiaMozilla In Malaysia
Mozilla In MalaysiaGen Kanai
 

Similar to Flash, Flex & AIR: A brief survey (20)

Kann JavaScript elegant sein?
Kann JavaScript elegant sein?Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
 
AJAX vs. Flex, 2007
AJAX vs. Flex, 2007AJAX vs. Flex, 2007
AJAX vs. Flex, 2007
 
JavaFX vs AJAX vs Flex
JavaFX vs AJAX vs FlexJavaFX vs AJAX vs Flex
JavaFX vs AJAX vs Flex
 
Beg, Borrow or Steal: The Art of Flashing Without Flashing
Beg, Borrow or Steal: The Art of Flashing Without FlashingBeg, Borrow or Steal: The Art of Flashing Without Flashing
Beg, Borrow or Steal: The Art of Flashing Without Flashing
 
From Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holesFrom Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holes
 
RIA Platform Comparison
RIA Platform ComparisonRIA Platform Comparison
RIA Platform Comparison
 
React js for beginners
React js for beginnersReact js for beginners
React js for beginners
 
Introduction To J Boss Seam
Introduction To J Boss SeamIntroduction To J Boss Seam
Introduction To J Boss Seam
 
[Challenge:Future] Chocoholic
[Challenge:Future] Chocoholic [Challenge:Future] Chocoholic
[Challenge:Future] Chocoholic
 
jQuery Report
jQuery ReportjQuery Report
jQuery Report
 
Building Asynchronous Applications
Building Asynchronous ApplicationsBuilding Asynchronous Applications
Building Asynchronous Applications
 
AJAX Frameworks
AJAX FrameworksAJAX Frameworks
AJAX Frameworks
 
Flex & Drupal Integration
Flex & Drupal IntegrationFlex & Drupal Integration
Flex & Drupal Integration
 
Flex and Java
Flex and JavaFlex and Java
Flex and Java
 
Difference between ajax and silverlight
Difference between ajax and silverlightDifference between ajax and silverlight
Difference between ajax and silverlight
 
Silver Light1.0
Silver Light1.0Silver Light1.0
Silver Light1.0
 
An introduction to html5 by Devs
An introduction to html5 by DevsAn introduction to html5 by Devs
An introduction to html5 by Devs
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
 
WTA-MODULE-4.pptx
WTA-MODULE-4.pptxWTA-MODULE-4.pptx
WTA-MODULE-4.pptx
 
Mozilla In Malaysia
Mozilla In MalaysiaMozilla In Malaysia
Mozilla In Malaysia
 

More from Travis Isaacs

Getting bad ideas out of the way with keynote
Getting bad ideas out of the way with keynoteGetting bad ideas out of the way with keynote
Getting bad ideas out of the way with keynoteTravis Isaacs
 
Keynote Kung-Fu: Streamlining Your Design Workflow With Keynote
Keynote Kung-Fu: Streamlining Your Design Workflow With KeynoteKeynote Kung-Fu: Streamlining Your Design Workflow With Keynote
Keynote Kung-Fu: Streamlining Your Design Workflow With KeynoteTravis Isaacs
 
Keynote Kung-Fu: Black Belt
Keynote Kung-Fu: Black BeltKeynote Kung-Fu: Black Belt
Keynote Kung-Fu: Black BeltTravis Isaacs
 
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninjaKeynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninjaTravis Isaacs
 
See What I Mean Pt. 2 (Case Studies)
See What I Mean Pt. 2 (Case Studies)See What I Mean Pt. 2 (Case Studies)
See What I Mean Pt. 2 (Case Studies)Travis Isaacs
 
Influencing change through presentations
Influencing change through presentationsInfluencing change through presentations
Influencing change through presentationsTravis Isaacs
 
Microformats, an overview
Microformats, an overviewMicroformats, an overview
Microformats, an overviewTravis Isaacs
 

More from Travis Isaacs (7)

Getting bad ideas out of the way with keynote
Getting bad ideas out of the way with keynoteGetting bad ideas out of the way with keynote
Getting bad ideas out of the way with keynote
 
Keynote Kung-Fu: Streamlining Your Design Workflow With Keynote
Keynote Kung-Fu: Streamlining Your Design Workflow With KeynoteKeynote Kung-Fu: Streamlining Your Design Workflow With Keynote
Keynote Kung-Fu: Streamlining Your Design Workflow With Keynote
 
Keynote Kung-Fu: Black Belt
Keynote Kung-Fu: Black BeltKeynote Kung-Fu: Black Belt
Keynote Kung-Fu: Black Belt
 
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninjaKeynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninja
 
See What I Mean Pt. 2 (Case Studies)
See What I Mean Pt. 2 (Case Studies)See What I Mean Pt. 2 (Case Studies)
See What I Mean Pt. 2 (Case Studies)
 
Influencing change through presentations
Influencing change through presentationsInfluencing change through presentations
Influencing change through presentations
 
Microformats, an overview
Microformats, an overviewMicroformats, an overview
Microformats, an overview
 

Recently uploaded

Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentMahmoud Rabie
 
Women in Automation 2024: Technical session - Get your career started in auto...
Women in Automation 2024: Technical session - Get your career started in auto...Women in Automation 2024: Technical session - Get your career started in auto...
Women in Automation 2024: Technical session - Get your career started in auto...DianaGray10
 
Attacking (and Defending) Apache Kafka | Kafka Summit London
Attacking (and Defending) Apache Kafka | Kafka Summit LondonAttacking (and Defending) Apache Kafka | Kafka Summit London
Attacking (and Defending) Apache Kafka | Kafka Summit LondonHostedbyConfluent
 
Data Contracts In Practice With Debezium and Apache Flink
Data Contracts In Practice With Debezium and Apache FlinkData Contracts In Practice With Debezium and Apache Flink
Data Contracts In Practice With Debezium and Apache FlinkHostedbyConfluent
 
How to Build an Event-based Control Center for the Electrical Grid
How to Build an Event-based Control Center for the Electrical GridHow to Build an Event-based Control Center for the Electrical Grid
How to Build an Event-based Control Center for the Electrical GridHostedbyConfluent
 
Data Contracts Management: Schema Registry and Beyond
Data Contracts Management: Schema Registry and BeyondData Contracts Management: Schema Registry and Beyond
Data Contracts Management: Schema Registry and BeyondHostedbyConfluent
 
AsyncAPI v3: What’s New? | Kafka Summit London
AsyncAPI v3: What’s New? | Kafka Summit LondonAsyncAPI v3: What’s New? | Kafka Summit London
AsyncAPI v3: What’s New? | Kafka Summit LondonHostedbyConfluent
 
How Do You Query a Stream? | Kafka Summit London
How Do You Query a Stream? | Kafka Summit LondonHow Do You Query a Stream? | Kafka Summit London
How Do You Query a Stream? | Kafka Summit LondonHostedbyConfluent
 
Error Handling with Kafka: From Patterns to Code
Error Handling with Kafka: From Patterns to CodeError Handling with Kafka: From Patterns to Code
Error Handling with Kafka: From Patterns to CodeHostedbyConfluent
 
#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdf
#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdf#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdf
#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdfREFASHIOND
 
Fish Plays Pokemon | Kafka Summit London
Fish Plays Pokemon | Kafka Summit LondonFish Plays Pokemon | Kafka Summit London
Fish Plays Pokemon | Kafka Summit LondonHostedbyConfluent
 
Mastering Kafka Consumer Distribution: A Guide to Efficient Scaling and Resou...
Mastering Kafka Consumer Distribution: A Guide to Efficient Scaling and Resou...Mastering Kafka Consumer Distribution: A Guide to Efficient Scaling and Resou...
Mastering Kafka Consumer Distribution: A Guide to Efficient Scaling and Resou...HostedbyConfluent
 
CERN IoT Kafka Pipelines | Kafka Summit London
CERN IoT Kafka Pipelines | Kafka Summit LondonCERN IoT Kafka Pipelines | Kafka Summit London
CERN IoT Kafka Pipelines | Kafka Summit LondonHostedbyConfluent
 
Event-Driven Microservices: Back to the Basics
Event-Driven Microservices: Back to the BasicsEvent-Driven Microservices: Back to the Basics
Event-Driven Microservices: Back to the BasicsHostedbyConfluent
 
Automation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementAutomation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementDianaGray10
 
Leveraging Tiered Storage in Strimzi-Operated Kafka for Cost-Effective Stream...
Leveraging Tiered Storage in Strimzi-Operated Kafka for Cost-Effective Stream...Leveraging Tiered Storage in Strimzi-Operated Kafka for Cost-Effective Stream...
Leveraging Tiered Storage in Strimzi-Operated Kafka for Cost-Effective Stream...HostedbyConfluent
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfROWELL MARQUINA
 
Case Study: Implementing a Data Mesh at NORD/LB
Case Study: Implementing a Data Mesh at NORD/LBCase Study: Implementing a Data Mesh at NORD/LB
Case Study: Implementing a Data Mesh at NORD/LBHostedbyConfluent
 
Tecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureTecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureAntonio de Llamas
 
Beyond Tiered Storage: Serverless Kafka with No Local Disks
Beyond Tiered Storage: Serverless Kafka with No Local DisksBeyond Tiered Storage: Serverless Kafka with No Local Disks
Beyond Tiered Storage: Serverless Kafka with No Local DisksHostedbyConfluent
 

Recently uploaded (20)

Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career Development
 
Women in Automation 2024: Technical session - Get your career started in auto...
Women in Automation 2024: Technical session - Get your career started in auto...Women in Automation 2024: Technical session - Get your career started in auto...
Women in Automation 2024: Technical session - Get your career started in auto...
 
Attacking (and Defending) Apache Kafka | Kafka Summit London
Attacking (and Defending) Apache Kafka | Kafka Summit LondonAttacking (and Defending) Apache Kafka | Kafka Summit London
Attacking (and Defending) Apache Kafka | Kafka Summit London
 
Data Contracts In Practice With Debezium and Apache Flink
Data Contracts In Practice With Debezium and Apache FlinkData Contracts In Practice With Debezium and Apache Flink
Data Contracts In Practice With Debezium and Apache Flink
 
How to Build an Event-based Control Center for the Electrical Grid
How to Build an Event-based Control Center for the Electrical GridHow to Build an Event-based Control Center for the Electrical Grid
How to Build an Event-based Control Center for the Electrical Grid
 
Data Contracts Management: Schema Registry and Beyond
Data Contracts Management: Schema Registry and BeyondData Contracts Management: Schema Registry and Beyond
Data Contracts Management: Schema Registry and Beyond
 
AsyncAPI v3: What’s New? | Kafka Summit London
AsyncAPI v3: What’s New? | Kafka Summit LondonAsyncAPI v3: What’s New? | Kafka Summit London
AsyncAPI v3: What’s New? | Kafka Summit London
 
How Do You Query a Stream? | Kafka Summit London
How Do You Query a Stream? | Kafka Summit LondonHow Do You Query a Stream? | Kafka Summit London
How Do You Query a Stream? | Kafka Summit London
 
Error Handling with Kafka: From Patterns to Code
Error Handling with Kafka: From Patterns to CodeError Handling with Kafka: From Patterns to Code
Error Handling with Kafka: From Patterns to Code
 
#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdf
#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdf#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdf
#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdf
 
Fish Plays Pokemon | Kafka Summit London
Fish Plays Pokemon | Kafka Summit LondonFish Plays Pokemon | Kafka Summit London
Fish Plays Pokemon | Kafka Summit London
 
Mastering Kafka Consumer Distribution: A Guide to Efficient Scaling and Resou...
Mastering Kafka Consumer Distribution: A Guide to Efficient Scaling and Resou...Mastering Kafka Consumer Distribution: A Guide to Efficient Scaling and Resou...
Mastering Kafka Consumer Distribution: A Guide to Efficient Scaling and Resou...
 
CERN IoT Kafka Pipelines | Kafka Summit London
CERN IoT Kafka Pipelines | Kafka Summit LondonCERN IoT Kafka Pipelines | Kafka Summit London
CERN IoT Kafka Pipelines | Kafka Summit London
 
Event-Driven Microservices: Back to the Basics
Event-Driven Microservices: Back to the BasicsEvent-Driven Microservices: Back to the Basics
Event-Driven Microservices: Back to the Basics
 
Automation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementAutomation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions management
 
Leveraging Tiered Storage in Strimzi-Operated Kafka for Cost-Effective Stream...
Leveraging Tiered Storage in Strimzi-Operated Kafka for Cost-Effective Stream...Leveraging Tiered Storage in Strimzi-Operated Kafka for Cost-Effective Stream...
Leveraging Tiered Storage in Strimzi-Operated Kafka for Cost-Effective Stream...
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdf
 
Case Study: Implementing a Data Mesh at NORD/LB
Case Study: Implementing a Data Mesh at NORD/LBCase Study: Implementing a Data Mesh at NORD/LB
Case Study: Implementing a Data Mesh at NORD/LB
 
Tecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureTecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for Rotogravure
 
Beyond Tiered Storage: Serverless Kafka with No Local Disks
Beyond Tiered Storage: Serverless Kafka with No Local DisksBeyond Tiered Storage: Serverless Kafka with No Local Disks
Beyond Tiered Storage: Serverless Kafka with No Local Disks
 

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.
  • 29. “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/
  • 30. Do we you any special technology Q to run and deploy Flex apps? Travis Isaacs | travisisaacs.com 27
  • 31. Sorta. Travis Isaacs | travisisaacs.com 28
  • 32. 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/
  • 33. WebORB for Java “WebORB for Java is server-side technology enabling connectivity between Flash Remoting and AJAX clients and Java applications.” $900/CPU
  • 34.
  • 35. Do users need anything special to Q run Flex applications? Travis Isaacs | travisisaacs.com 32
  • 36. Yes. Travis Isaacs | travisisaacs.com 33
  • 37. 96% of PC’s have what they need to run a Flex application. Travis Isaacs | travisisaacs.com 34
  • 38. EASY INSTALL Travis Isaacs | travisisaacs.com 35
  • 39. Travis Isaacs | travisisaacs.com 36
  • 40. Travis Isaacs | travisisaacs.com 37
  • 41. Travis Isaacs | travisisaacs.com 38
  • 42. Travis Isaacs | travisisaacs.com 39
  • 43. 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
  • 44. 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)
  • 45.
  • 47. Source to ActionScript components Flex SDK and components Java source code for compilers, debugger, and core
  • 49. 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
  • 50. 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
  • 51. 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
  • 52. Finetune Deskop } Music streaming from Internet source + } Music from my local iTunes library Travis Isaacs | travisisaacs.com 49
  • 54.
  • 56. ebay Desktop Travis Isaacs | travisisaacs.com 53
  • 57. OS window Custom window chrome } controls with alpha transparency } Travis Isaacs | travisisaacs.com 54
  • 58. Multiple window support Travis Isaacs | travisisaacs.com 55
  • 59. Live updating Travis Isaacs | travisisaacs.com 56
  • 61.
  • 62.
  • 63.
  • 64.
  • 65. 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