If you’ve done any work with Drupal and Flash you know that the Services module is a pretty key part of the integration. After talking to Greg Dunlap, the mastermind behind Services, it was pretty apparent to me that helping contribute to his effort would go the longest way towards making sure Drupal 7 works really well with Flash in addition to helping the wider Drupal community.
So I’m stoked about Drupal 7. I want to give a big thanks to Josh Kopel and Jared Stoneberg for making the initial introductions and being so helpful with my Drupal questions. The Seattle Drupal community is fantastic. And this wouldn’t be possible without the great folks at Palantir, especially Tiffany Ferriss who dealt with my delays and back and forths.
One of the things that I’ve found to be a bit of a pain is structuring data correctly so it’s easy to chart. Luckily there are some things you can do within the charting framework in Flex to make that a bit easier as well as some things you can do with the Zend Framework to send data in a way that’s easier to chart. I cover the basics in a new post on the Adobe Developer Center.
The official Flex team blog reminded me that Effortless Flex 4 Development is now available. It’s the perfect book for Flex and PHP developers and I got an inside look at it as I did the tech-reviewing for it. Larry is an awesome author who usually does a lot with PHP but recently started getting into Flex and in talking to him it sounds like he really enjoys it. So definitely go out and grab a copy. I think we’re going to try and buy some to give away as I go out and talk to PHP and Flex developers alike.
This is a fairly straightforward topic but I did a quick DZone article on charting with Flex and PHP using the data-centric design wizards in Flash Builder. The wizards make it very easy to at least get the basics down and start using data in charts, and I covered some basic ways to add animations and interactivity.
I’m working on a more in-depth article with Zend that will cover grouping/sorting/etc on both the client and server side. It will provide some info on how to structure your data and make it more flexible for manipulating when it’s in the chart.
One of the PHP demos that goes over pretty well is my Flex socket demo. It used to be that Flex/Flash was really the only way to take advantage of WebSockets but with browser vendors implementing bleeding edge support for HTML5, developers can now use the WebSocket API in JavaScript. I wanted to combine that with the Canvas API and try to recreate a basic example of my Flex socket demo in HTML5/JavaScript. It mostly works (demo embedded at the bottom).
Code
socket.html – HTML/JS file for connecting to the socket server
socket.php – PHP file that creates the socket server
Who Can Run This
It’s been kind of cool to see the browser vendors really move forward to implement support for various bits of HTML5 and CSS3 without a defined spec. That can be problematic because the spec is still changing, causing code to break in new versions of browsers, but in general it means that web developers can live on the cutting edge for most browsers. Currently, the WebSocket API (and this example) should work in the latest version of Chrome and the Firefox 4 beta.
Differences in WebSockets with Flash and HTML5
Overall the WebSocket API is pretty easy to use. I took my existing PHP socket server code that works in Flash and tried to use it for the HTML5 version but all I was getting was the “close” event. The problem was that I wasn’t thinking about the handshake. Flash uses a policy file to determine whether or not it can connect, but the WebSocket API uses a handshake. I was able to grab some example code, change my PHP server to add the handshake then everything basically worked. The only other small change I had to make was to add a character (chr 0 and chr 255) to either end of the message I was sending through the socket_write method. I’m still not entirely sure why this is, but my onmessage event wouldn’t fire until I added those.
Charting with Canvas
I’m very excited about the Canvas API in HTML5. If you’re a Flash developer who has been working with the Flash drawing API, you’re going to be able to do some very cool stuff. The APIs are fairly similar with some syntax changes that you have to be aware of. The biggest pain I found was that once something is on the canvas, it’s on the canvas. You can’t reference specific drawn elements like you can in ActionScript. That makes doing things like the hover effect on specific charting points basically impossible.
Partly because of that, and because I’m still getting used to JavaScript I went with a very scaled down version of the chart. All this chart does is draw some grid lines and then plot the points as it gets them from the socket server. When you get to the end, the points are drawn off the page. I also couldn’t really figure out how to add to a path in a function call so I just went with the points instead of making it an actual line graph. I’m fairly sure that most of these are due to my JavaScript incompetence and not a limitation of Canvas.
Conclusion
It was both a lot of fun and very painful to go back to JavaScript. It’s an incredibly powerful language but if you come from Flash, you’ll find yourself banging your head against the wall because of subtle differences. The one thing that keeps tripping me up is figuring out how the DOM works compared to Flash. Another sticking point is the tooling. We have very good tooling on the Flash side compared to JavaScript. Chrome’s developer tools and Firebug both help a lot, but there’s no tool out there that provides code completion for the Canvas drawing API. When you don’t know the API that well, it means a lot of Googling, and a lot of the examples are pretty basic. I think a tool with basic code completion for Canvas would make it a lot easier to start creating complex content in.
It’s definitely rough to go from Flash to JavaScript but hopefully I’ll be playing around with the new stuff in HTML5 more, especially as Dreamweaver gets more support baked in.
Last week I presented at the Front Range PHP User Group on getting started with Flex and PHP. It was a really awesome group and I had a great time presenting. Thanks guys for having me and for sticking around for drinks afterwards. If you were at the meeting (or just want to take a look) I just posted my slides as well as my demos from the event. The slides are embedded below and you can grab the demos from my DropBox account. There isn’t much documentation on the demos, but hopefully they’re semi-helpful.
I did an article for DZone on using Flex and PHP with Sockets that is now up. The socket server in PHP seems like something that isn’t used very often and I had a lot of fun checking it out. Hopefully I’ll get a chance to do more with it in the near future.
I’ve been blogging more recently about PHP, which may be confusing for people who know me and my ColdFusion background. But in looking at things, the PHP community has been incredibly vibrant and successful on a number of fronts. We’ve started adding more support for PHP developers through partnerships and support of things like Zend AMF, the PHP Data Wizards in Flex Builder, and encouraging community speakers at events like ZendCon. On the Adobe side, Mihai Corlan has done a fantastic job of creating resources for PHP developers who want to learn Flex. The team needed someone to take the lead here in North America and I asked to do it (Lee is busy with cool Flash stuff and going to Latin and South America). So now PHP developers have a go-to guy here in North America working to further the PHP agenda here at Adobe and helping more PHP developers be successful with Flex and Flash.
So why me, someone with little PHP experience? I’ve always felt like evangelism is about growing your developer community and developer relations is about helping the community you have. At Adobe we don’t really have a specific developer relations role (it’s basically Mike Chambers) so the evangelists end up doing both. Which is fun because our community is awesome. But I also wanted a challenge and to grow professionally as an evangelist. I thought the best way to do that would be to get out of my comfort zone, immerse myself in a new technology, and execute on ideas that could be applied to any technology by any evangelist.
Luckily we’re working with some great PHP people and the PHP community is a very welcoming and open place. There are a lot of places where PHP and Flash fit really well together so there are features like data visualization, collaboration, video, and data-heavy applications where I think PHP developers can use Flash in a helpful way. And in the process hopefully I’ll end up being a better evangelist and helping to grow the number of Flex developers.
If you’ve got ideas, or applications that show off Flash and PHP together, I’d love to hear them. You can always drop me an email at ryan@adobe.com or call/text me at (307) 438-9716. I think 2010 is going to be a huge year for PHP and Flash momentum.
Wade just blogged about a patch that was submitted by Mark Reidenbach to Zend AMF that provides a 10x performance boost over the old one. This isn’t a final release and everyone is still making sure the patch hasn’t introduced any new bugs so he’s encouraging everyone to download this one and make sure it works correctly. If you have issues, add it to the current open bug.
From Wade’s post:
Thanks so much Mark! I have also added a reference check optimization that uses SPL_object_hash to quickly see if an object has been seen before or not. Overall you should see a big performance increase. The test case I used was the James Ward’s census data from my ZendCon talk which consists of random people objects ranging from 1 – 100 duplicates totaling 5k total rows. Xdebug profiling analyzed by KCacheGrind showed roughly a 10X increase in performance!
