Adobe Flex is a Rich Internet Application framework that allows developers to build robust and powerful applications for the web and the desktop. In this talk, Tomas Lin discusses the major technologies and tools available within the Grails / Flex ecosystem and dive into building a simple and fun application using the Flex plugin, BlazeDS, Grails and Flash Builder 4.
Find the podcast of this talk here:
http://skillsmatter.com/podcast/java-jee/building-killer-rias-with-flex-and-grails/zx-489
Strategies for Landing an Oracle DBA Job as a Fresher
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy & Grails eXchange 2009
1. Building Killer
RIAs
with Flex & Grails
Tomas Lin
tomaslin@gmail.com
http://www.flexongrails.com
Groovy Grails Exchange, London 2009
London
Thursday, 10 December 2009
2. Tomas Lin
• 2 years experience w/ Flex, Air and Grails
• Senior Web Developer at fashion search portal
http://www.empora.com
• Twitter: tomaslin
• Email: tomaslin@gmail.com
• Blog : http://fbflex.wordpress.com
Thursday, 10 December 2009
3. Tomas Lin
• born in Taiwan
• grew up in Guatemala
• studied in the US
• Canadian citizen
• living in London
Thursday, 10 December 2009
7. Dan
Aykroyd
Wines
Thursday, 10 December 2009
http://www.danaykroydwines.com
8. Agenda
• What is Flex?
• Why use Flex?
• Flex and Grails
• Fun + Exciting Demo
• Questions
Thursday, 10 December 2009
9. Rich Internet
Application
• Marketing term by Macromedia
• Program that lives on the browser but
behaves like a desktop app.
• Rich client, web application, etc...
Thursday, 10 December 2009
10. This is Flex.
Flex:
Thursday, 10 December 2009
Flex is a product by Adobe. It is based on Flash platform technology.
Originally, it was intended to build Rich Internet Applications ---- programs that live on a web browser but behave like they do on a desktop.
But it has been extended beyond that.
11. UX / Graphic Designer
User Interface Designer
Flex / Front-End Developer Backend/Grails Developer
Tools & workflow
Thursday, 10 December 2009
Flex provides tools to marry the pretty pictures created by UX / Graphic designers with the services built by back end developers.
It sits between all the server side code and what an end user sees.
Tools it provides are branded under Flash - Flash Catalyst and Flash Builder.
In a typical flow,
the graphic designer builds a pretty picture,
the front end designer converts this pretty pictures into components via Flash Catalyst
the front end developer binds these components to backend data
12. Flex Components
Thursday, 10 December 2009
At the core, Flex is about developing programs in the form of interrelated components.
Flex core provides tables, layoutmanagers, datagrids and chart similar to what you would find on YUI and jQuery.
These components are data-driven and can be highly interactive and graphic.
13. Programming Languages
MXML HTML
ActionScript JavaScript
CSS CSS
FXG SVG
Flex Web
Developer Developer
Thursday, 10 December 2009
Despite the Flash branding, Flex is a lot closer to JavaScript and HTML than traditional Flash dev.
There is no Flash movie clips or timelines.
MXML / ActionScript are core languages.
FXG is a SVG-like language introduced in Flex 4 that letʼs you use the output of graphic programs as skins.
14. Runtimes
Code Flash
.swf
.air
AIR
SDK
.???
Slider
Thursday, 10 December 2009
The most powerful feature of Flex is that you can take the HTML/Javascript code you wrote and deploy it into multiple runtimes via the Flex SDK.
Flash ( Window Browser )
AIR ( Desktop )
Slider ( iPhone and Mobile - coming next year )
15. Data Services ( Choices )
• BlazeDS
• Adobe Livecycle DS
• GraniteDS
• SOAP, REST, XML, JSON
• RubyAMF, PhpAMF
PROTOCOLS
• AMF
• RTMP
Thursday, 10 December 2009
Flex provides ways to connect to different web services.
The key here is choice. For some deployments like GAE BlazeDS wonʼt work. Integration / Tooling.
• AMF
BlazeDS and LiveCycle are both from Adobe. It allows you to connect a J2EE stack. Remote procedure calls, messaging and now modelling.
GraniteDS is open source alternative. But also does SOAP, REST, etc.
2 Protocols by Adobe:
AMF - messaging and RPC format
RTMP - streaming and peer to peer
16. Agenda
• What is Flex?
• Why use Flex?
• Flex and Grails
• Fun + Exciting Demo.
• Questions?
Thursday, 10 December 2009
17. Hit a lot of screens
Thursday, 10 December 2009
In the corporate world, 50% of users are still on internet explorer 6.
Flex letʼs you build a user experience using similar technologies but runs like the JVM.
Piggibacks the popularity of Flash video streaming.
19. Do Cool Stuff ( no ie6 )
http://ge.ecomagination.com/smartgrid/
Thursday, 10 December 2009
Also allows access for more sophisticated graphics and device support.
Example is augmented reality -> using microphone and webcam.
More recently added multi-touch support and basic 3D.
20. Multi-platform
development
tweetdeck
Balsamiq Mockup
Ebay Desktop
Thursday, 10 December 2009
As mentioned before, you write your code once and can share these components across desktop, browser and mobile.
Some examples of desktop applications
With Air 2.0 beta, you can call native methods. There is a demo out there embedding tomcat into an air app. Instead of Grails.exe and Grails.app, you can write Grails.air and be done with .
21. A lot of components
> TOUR DE FLEX
Thursday, 10 December 2009
Because Flash has been around for so long, there is extensive support for itʼs components.
Flex can use and embed Flash components and communicate with it ( AS 2 / AS 3 ).
Somethings easier to do in Flash / Flex -> Google image swirl, Street view.
22. Many Libraries
pixel bender
degrafa
box2d
Thursday, 10 December 2009
There is a really healthy and big open source community for flex / flash. Itʼs used by the big media companies and digital agencies.
3D engines - papervision / away3d
physics engines - box2d
image - degrafa / pixel bender
mvc frameworks - mate / puremvc
DI - Swiz
23. flexMonkey
UI-testing
Selenium-Flex
FlexUnit
fxSpy
Firebug
De Monster Debugger
Thursday, 10 December 2009
There are also a large amount of open source tools including IDEs, profilers, Test Automation
tools and things like Selenium-Flex that let you integrate Flex.
Books, user groups, etc. There are 3 user groups in London for Flex, one for Grails.
It’s a very well known, viable technology that can be used to enrich any architecture and help
build high quality products quickly.
Free videos and books from Adobe. Adobe TV. Not a fringe technology. Used by many banks
and financial institutions.
24. Agenda
• What is Flex?
• Why use Flex?
• Flex and Grails
• Fun + Exciting Demo.
• Questions?
Thursday, 10 December 2009
Grails + Flex = Voltron.
25. Gaps in Flex
• What do we use for the server?
• Horrendous HTML support for Flash.
( Air embeds Webkit - HTML5 )
• Not SEO/iphone friendly.
• Crippled and complex security model.
• Gigantic files
Thursday, 10 December 2009
26. HTML Integration
Flex
HTML /gsp
Flex
Flex
HTML /gsp
Thursday, 10 December 2009
Overcomes some of the limitations of pure flex on the browser -
limited HTML renderer ( AIR has Webkit ) -> Grails and simple layouts / gsps makes it easy to embed and make into templates.
Also helps overcome many security issues via groovy proxy.
27. Graceful Degradation
<ak:wineSelector model=”${wineList}”/>
Flex html
Alt. Content
Data
Thursday, 10 December 2009
Letʼs you take components further.
Flex components can be visually stunning but functionally stunted. Grails can help aggregate web functionality into Flex applications.
Example here is SEO.
28. The Server Gap
• Flex ( BlazeDS )
• GraniteDS
• Flex Grails Scaffold
• Flash Player
• OpenLaszlo
• Searchable, Selenium RC, Build Test
Data, Datasources, Tomcat, etc...
Thursday, 10 December 2009
Easy plugin integration - Convention over Configuration. BlazeDS is ridiculously difficult to set up properly.
Also provides good server side services not available to Flex -> Search, PDF generation, reports, data export, testing, etc.
29. Deployment Platform
• Google App Engine + Google Wave + waveas3
Thursday, 10 December 2009
It’s an awesome deployment platform.
Google App Engine + Wave example. Gadget + Robot.
30. Agenda
• What is Flex?
• Why use Flex?
• Flex and Grails
• Fun + Exciting Demo.
• Questions?
Thursday, 10 December 2009
Iʼve talked a bunch about Flex, letʼs look at how the workflow that I talked about before actually works in practice and build a simple application.
32. More Neat Stuff
• BlazeDS, AMF and Channel Pub/Sub
• Spring-Flex Integration
• Java Instrospection via BlazeDS
• Model Driven Development with Adobe
Fiber
Thursday, 10 December 2009