Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy & Grails eXchange 2009

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

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://fbﬂex.wordpress.com


Tomas Lin
• born in Taiwan
• grew up in Guatemala
• studied in the US
• Canadian citizen
• living in London


Some Projects in Flex
and Grails


Blue
Ember
Grills


http://www.blueembergrills.com

Suzuki.ca

http://www.suzuki.ca

Dan
Aykroyd
Wines

http://www.danaykroydwines.com

Agenda
• What is Flex?
• Why use Flex?
• Flex and Grails
• Fun + Exciting Demo
• Questions


Rich Internet
Application
• Marketing term by Macromedia
• Program that lives on the browser but
behaves like a desktop app.
• Rich client, web application, etc...


This is Flex.
Flex:

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.

UX / Graphic Designer
User Interface Designer

Flex / Front-End Developer Backend/Grails Developer

Tools & workﬂow
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 ﬂow,
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

Flex Components
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 ﬁnd on YUI and jQuery.

These components are data-driven and can be highly interactive and graphic.

Programming Languages
MXML HTML
ActionScript JavaScript
CSS CSS
FXG SVG
Flex Web
Developer Developer

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.

Runtimes
Code Flash

.swf

.air
AIR

SDK
.???

Slider

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 )

Data Services ( Choices )
• BlazeDS
• Adobe Livecycle DS
• GraniteDS
• SOAP, REST, XML, JSON
• RubyAMF, PhpAMF

PROTOCOLS
• AMF
• RTMP
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

Agenda

• What is Flex?
• Why use Flex?
• Flex and Grails
• Fun + Exciting Demo.
• Questions?


Hit a lot of screens

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.

Do Cool Stuff ( no ie6 )

http://ge.ecomagination.com/smartgrid/

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.

Multi-platform
development
tweetdeck

Balsamiq Mockup

Ebay Desktop
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 .

A lot of components

> TOUR DE FLEX

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.

Many Libraries

pixel bender
degrafa

box2d
There is a really healthy and big open source community for ﬂex / ﬂash. 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

flexMonkey
UI-testing

Selenium-Flex
FlexUnit

fxSpy
Firebug

De Monster Debugger

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.

Agenda

• What is Flex?
• Why use Flex?
• Flex and Grails
• Questions?

Grails + Flex = Voltron.

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 ﬁles


HTML Integration
Flex
HTML /gsp

Flex

Flex

HTML /gsp

Overcomes some of the limitations of pure ﬂex 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.

Graceful Degradation
<ak:wineSelector model=”${wineList}”/>

Flex html

Alt. Content

Data

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.

The Server Gap

• Flex ( BlazeDS )
• GraniteDS
• Flex Grails Scaffold
• Flash Player
• OpenLaszlo

• Searchable, Selenium RC, Build Test
Data, Datasources, Tomcat, etc...
Easy plugin integration - Convention over Conﬁguration. BlazeDS is ridiculously difﬁcult to set up properly.

Also provides good server side services not available to Flex -> Search, PDF generation, reports, data export, testing, etc.

Deployment Platform

• Google App Engine + Google Wave + waveas3

It’s an awesome deployment platform.

Google App Engine + Wave example. Gadget + Robot.

Agenda

• What is Flex?
• Why use Flex?
• Flex and Grails
• Questions?

Iʼve talked a bunch about Flex, letʼs look at how the workﬂow that I talked about before actually works in practice and build a simple application.

More Neat Stuff
• BlazeDS, AMF and Channel Pub/Sub
• Spring-Flex Integration
• Java Instrospection via BlazeDS
• Model Driven Development with Adobe
Fiber


Questions?


Muchas Gracias
• twitter: tomaslin
• tomaslin@gmail.com
• http://www.ﬂexongrails.com


Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy & Grails eXchange 2009

Recommended

Recommended

More Related Content

What's hot

What's hot (16)

Similar to Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy & Grails eXchange 2009

Similar to Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy & Grails eXchange 2009 (20)

More from Skills Matter

More from Skills Matter (20)

Recently uploaded

Recently uploaded (20)

Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy & Grails eXchange 2009