Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy & Grails eXchange 2009
6 likes775 views
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
Ad
More Related Content
What's hot (16)
Similar to Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy & Grails eXchange 2009 (20)
Ad
More from Skills Matter (20)
Ad
Recently uploaded (20)
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 [email protected] 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: [email protected] • 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
- 4. Some Projects in Flex and Grails Thursday, 10 December 2009
- 5. Blue Ember Grills Thursday, 10 December 2009 http://www.blueembergrills.com
- 6. Suzuki.ca Thursday, 10 December 2009 http://www.suzuki.ca
- 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.
- 18. Thursday, 10 December 2009
- 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.
- 31. Thursday, 10 December 2009
- 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
- 33. Questions? Thursday, 10 December 2009
- 34. Muchas Gracias • twitter: tomaslin • [email protected] • http://www.flexongrails.com Thursday, 10 December 2009