My Blog Has Moved
Author: Thomas GonzalezWell all, the time has come to move over to a blog tool that provides a little more customization, aka: Word Press. I am sure these are not the words Google/Blogger want to hear, but alas it is so. I have been very happy with my Blogger experience, but I need more control over my templates and the domain in general to provide a more unique blogging experience for myself and the few of you out there who actually read this stuff.
So without further ado: www.twgonzalez.com/blog/
I will see you there.
- Tom
p.s. I have moved all the posts and comments from this blog over to the new one.
0 Comment
iTunes Genius, Tricky like a Fox
Author: Thomas Gonzalez
Well, thus far the iTunes "Genius" has quickly allowed me to fill some gaps in my music collection by finding some obscure tracks that I did not know existed without me having to lift a finger. It was a win-win for me and Apple, I got to listen to some new cool music, and Apple got to take even more of my $$$.
But alas, the Genius ain't so smart. On three separate occasions I have now purchased tracks that the Genius said I was missing, only to realize I actually owned the song. It is a little hard to keep track of the thousands of songs I own in my head, and I have mistakenly trusted the Genius when it says I am missing those tracks.
The biggest benefit I see to Genius is that it is a time-saver and reduces the friction for me to find music that interests me and at the same time reduces the friction between my bank account and Apples ;). But, if I have to go validate each Genius recommendation by doing a manual search (on the same song title) each time, it completely undermines the benefit and REALLY makes it for an annoying experience.
Now I am stuck in the unenviable position of having to go figure out where I purchased music I already own and then struggle with the abysmal "refund" UX in iTunes to get my money back. So far, I have purchased about $30 of music via iTunes Genius, of which about $10 was music I already owned. The cost for me to get my $10 back will easily be $100 of my time. So not only did Apple abscond with my $10, they make the friction to get it back very high.
Way to go Apple, excellent customer experience.
360 Flex Feedback - Thanks Community
Author: Thomas Gonzalez
I just got feedback from my 360 Flex session, and I must say it was very pleased to see how many people found the session valuable. It is always very hard when preparing to present technical information to guess what people already know and what they want to learn.
I spent quite a bit of time polishing code and generating some new stuff that I could share with the community, and the reality is that if this were a billable engagement (the work required to prepare for my preso) it would have been a good size project. So I was very gratified to see such positive feedback from the community.
I have not done a lot of public speaking, and as such it is something I am trying to learn how to enjoy more and become more effective at. One of the real challenges I find is how to be engaging and dynamic when discussing detailed technical information. I tend to be more about "here are the facts" and less about "here I am to entertain you." I think there is a happy medium somewhere in the middle that a speaker finds over time, this is something I am striving for.
I look forward to MAX, and even more so the next 360 Flex to have an opportunity to create even more engaging and valuable presentations that I can share with the community.
A Few Processing Sketches
Author: Thomas Gonzalez
Here are a couple of sketches I was playing with today that were derivatives of the Fireworks subsystem (okay lets be honest, the subsystem is less than 100 lines of code)
Which Data Visualization works Best?
Author: Thomas Gonzalez
1) Heat Index Grid (click for full view)
2) Micro Histogram (click for interactive version)
3) Punch Card Grid
Recently I was asked by Universal Mind if I would be interested in consulting for them on the User Experience and Data Visualization aspects of their ground-breaking geo-spatial product SpatialKey. I felt it was a great compliment and privilege to have such a well recognized and respected company in the RIA world ask for my input, and I was excited by the prospect of working with such people as Mike Connor (VP Business Development), Tom Link (CTO) and Doug McCune (Flex Rockstar) and the many other talented people at UM.
Whiile many of you in the Flex community probably have already heard about SpatialKey, for those of you who have not, definitely go check out their technology preview. Basically, SpatialKey represents some really innovative work on showing high volume data sets as they relate to geo-coded data with visual interpolation techniques that far eclipse the standard pin-based metaphor found on most geo-spatial visualization tools.
In that vein one of the tactical areas I was asked to look at is the effectiveness of certain types of visualizations for specific types of analysis. One of those areas was trying to plot crime incident data data by hour and day of week for a given 7 day period. From this discussion we came up with three alternative ways to visualize this data... one existed currrently within the system, one I created based on the visualization problem as i saw it, and one was found by surfing the web. One of the challenges in doing Data Viz work, is the more work you do in the field the more unique visualizations you create the stronger your preference for certain visual patterns becomes, thus creating a bias in what seems most effective for you.
While I believe I have scientific reasons to explain why I think one of the visualizations above is more effective than others, it comes down to what casual users find most intuitive. To that end, I would be greatly appreciative for any readers to vote on the visualization they feel is most compelling to solve the analysis problem of spotting trends and subtle differences in numeric counts (arrests) as plotted hour-by-hour for a seven day period. While we are interviewing real users in the SpatialKey target market, getting feedback from the Flex community is just as valuable. Just use the comments section to vote for 1 (heat index grid), 2 (micro histogram), or 3 (punch card). (Pics 1 & 2 show the same data, Pic 3 is a different data set, which I realize make the comparison a little harder, but hopefully still valid.)
Processing - A Fireworks Show
Author: Thomas Gonzalez
With Processing you can very rapidly iterate and experiment with sketches, this version is about my 5th iteration, after experimenting with some Handel (Classical) I settled on Radiohead (my favorite band.) Each iteration had its own unique appeal, and some things happened quite by accident. For instance the circles that form and shoot off were a result of tweaking one number by .01. I continue to be impressed with the power of processing, and I will probably see if something similar can be done in Flash.
I am also using this work to serve as partial inspiration for what I am doing within Degrafa and with the Flash Player.
You will need the java runtime installed and the appropriate security permissions to view this, also please be patient when it launches as it is loading up a 4mb song. Click here to view.
Chart Slicer Component Released
Author: Thomas Gonzalez
I had several requests for the source code for my Google Finance sample, but regretfully the code is embarrassingly sloppy, and I am not sure when I will be getting back to cleaning it up. One of the components within that example is this chart slicer control, which I have now created a simple example for, with source code included.
This control can target any Flex cartesian chart, although I have only tested it with a few, so I am sure people will find edge cases (or perhaps not so edge cases) that break the component. It is easy enough to change the display in the control from an area chart to any of the MicroCharts included with a little customization.
This component has a liberal use of Degrafa to make all the magic work, from custom skins on the sliders, to the microcharts used to represent the data, to the tick marks within the slider track the reference the positioning of the items in the target chart. You will also notice some extra logic that has the sliders snap into alignment with the actual item renderers of the target chart. With larger data sets this is less noticeable, but with small ones it is very effective.
Many thanks to Doug McCune for his HSlider control, and the efforts put forth by Brandon Meutzner.
You can see the example and download the code here. As usual all code is released under an MIT license.
Processing is Amazing
Author: Thomas Gonzalez
I recently discovered Processing, and I am still in awe of what can be created with it. For those of you not familiar with Processing, it is a c syntax (pretty much java) language created at MIT's multi-media center designed to be used by artists and non-programmers to create visual/animated/physical works of art. The primer written by two of Processing's creators walks a person with no prior programming experience through learning to program.
As someone who has been programming since I was 10 years old and close to 30 years now, I found their approach so simple, powerful, and very approachable. Probably even more valuable to me was the plethora of examples that come with the simple IDE. Full particle and physics systems encompassed in less than 100 lines of code! OpenGL support, texture, uvt mapping, typography, and the list goes on.
I see some of what has been accomplished with Processing as the inspiration of what I think will be possible with Degrafa, and I look forward to seeing how far I can push the boundaries of what is possible in Flex/Flash by adopting similar constructs within Degrafa. The interesting twist Degrafa will bring is that we may be able to step away from procedural abstracts and work directly with declarative ones. Degrafa repeaters is one example of how this might manifest.
The animation at the top of this entry was created by Glenn Marshall, who just started working with Processing, but obviously has an incredible amount of artistic talent. What I find just mind blowing is that the animation he created is all done procedurally using sin/cos, looping, recursion and math. There was no use of After Effects, 3DS, or any other tool that translates analog inputs (hand drawing) into something digital, this is purely abstract programming - which just adds a sublime level of beauty to the finished work.
Note: Watch the video in its entirety it gets better, and better, and better ....
360 Flex Data Visualization Code Examples
Author: Thomas Gonzalez
This is a pretty short post that I wanted to get out to the community. Below are the links and source code (view source) for the presentation I gave today at 360 Flex in San Jose.
GoogleFinance Example: (view source coming soon, still needs some refactoring and clean up.)
http://www.brightpointinc.com/flexdemos/googlefinance.html
DataSet Example:
DataSet Example:
Gauge Component - New Features - v04
Author: Thomas Gonzalez
First a thanks to everyone who has commented and used the previous versions of the gauge component seen here.
A few weeks ago a publicly traded company (that has asked to remain anonymous) hired me to make some improvements to the gauge to meet some of their specific needs. Some of the improvements are things that other people had asked for, so I offered to give them a discounted rate if we could keep the improvements under the original open source license. It was more important to me that I be able to share the enhancements with the community than the additional revenue I would have generated to lock up the intellectual property.
So here is a list of the latest enhancements.
1. Bounce Effect can now be set on/off by a boolean useBounceEffect. (code changes in control.)
2. Tick Mark Alignment Fixed - Tick marks for the gauge skin now use a best fit algorithm to align exactly with the min/max angles (before they sometimes would not cover the full range. (code changes in skin)
3. A X-Offset style has been provided for the value label placement (code changes in skin and control)
4. Alert Levels: A popular request was the addition of alert levels, something that I had in the original gauge I built. The gauge now supports contiguous alert levels by passing it an array of alertValues, alertColors, and alertAlphas. The control expects that the alertColors and alertAlphas will have one element less than the alertValues, since the alertValues contains the additional min or max boundary element, and the colors/alphas apply to the range within the boundary described by the alertValue array. (code changes in skin and control)
5. Log AND Linear scale: This was by far the most complex enhancement. The gauge now supports movement through a log scale as well as the original linear scale, and since my math skills seem to be stuck somewhere between 8th grade trig and 9th grade algebra it took me a while to figure out the algorithm to support not only programatic value assignments, but also when a user clicks along the and sets the value directly - yes now I remember that, Math.pow(10,value) is the inverse of Math.log(value)/Math.LN10 :) This log scale also gets applied with the alert ranges, and the skin leverages the now public caclulateAngleFromValue() function exposed by the control itself - which takes into account the min/max value range, the min/max angle range, AND the linear or log scale. (code changes in control)
I have tried my best to run it through a bunch of tests and ferret out any bugs, but if anyone finds something I missed please post and comment, and I will try my best to fix or point you in the right direction. Once again this code is posted under the every friendly MIT license.
Check out the sample here, with full source code.
Note: This gauge uses the latest version of Degrafa Beta 3, please reference the included .swc - as older versions of degrafa will cause conflicts.
Apple Numbers - More than a spreadsheet
Author: Thomas Gonzalez
For any designers or UX people out there, I don't know about you, but I have yet to find a wire-framing tool/software that beats a whiteboard or sketch-pad, but I think I have found something that comes pretty close.
Making wireframes is an essential part of the design process (at least for me) that allows me to quickly brainstorm layouts and different configurations for an overall application or dashboard UI. Most illustration tools that I am familar with (like Illustrator or Flash Pro) are just too cumbersome and have way too many settings/details that are completely irrelevant to the wireframing process. Tools like Visio (which I just can't stand) and SmartDraw come a little closer, but they have all sorts of awkward UI issues that at best, slow down the creative process and in some cases completely hinder it due to the way they expect you to create content.
Well, after many years, I think I have found a very good tool to make my wire frames in, and ironically the software was never explicitly designed to make drawings. What I am referring to is Apple's Numbers - the supposed Excel replacement. Well, as a replacement for Excel it doesn't even come close - for doing any type of semi-sophisticated numeric modeling it just doesn't cut it.
But, as a very easy to use, quick and easy, creative wireframe tool it is superb. It has all the basic shapes I could ask for, sans all the detailed property controls that make things tedious in most other tools. The inspector panel allows me to create sophisticated gradients, fills, strokes and best of all, it has auto-align/snapping capabilities built right into its WYSIWYG interface. Most of my wire-frames are some form of nested rectangles, and this tool just lends itself to the task beautifully. Because of the way they designed numbers, it is a layout tool first, and and a spreadsheet second. So you don't even need to have a worksheet at all, you can just have a blank canvas and start dropping images, shapes, text, etc. Add the fact that you have an automatic export to PDF and it makes it ideal for delivering to clients and end-users.
For me it has been very liberating, and one of the first times I felt a software tool actually accelerated my productivity for doing this type of work, versus just being a tedious step I needed to do to translate my whiteboard/paper sketches.
Anyone running on OS X and doing any type of wire-framing work should give it a try, I would be curious what other designers think.
I will be speaking at MAX 2008
Author: Thomas Gonzalez
Well, it looks like it is official. I will be speaking at MAX 2008 this year on Data Visualization with Flex. I am still working out the final details of the presentation. When I spoke on the same topic in 2006, I did a detailed walkthrough of building a dashboard. This year, I think I will change it up a bit and more do some highlights of what is possible with little code tidbits and how-to's. I think this might appeal to a wider audience (and potentially shorter attention spans since my session is going to be at 3:30 on Wednesday November 19th, the last day.)
I would love to get some feedback from the community as to what level to target the session. Should I stick with beginner level material (i.e. here are all the available components and what they do, or go to a more intermediate advanced level?) Any comments very welcomed, as I still have a couple of weeks to flush out the preso.
Flash Player Bug - Stroking a Corner
Author: Thomas Gonzalez
It appears there is a known bug in the Flash Player that creates rendering artifacts and uneven results when trying to apply strokes to a corner radius. Let me outline the situation by having you look at the attached image with three separate rectangles and the associated code for each.
So for the left rectangle we used the code below, and one would expect a nice pretty red rectangle with a smooth black stroke and 6 pixel corner radius, but what we get is a rectangle with 4 uneven corner and these weird rendering artifacts which extend beyond the boundary of the shape.
//Left Rectangle
graphics.lineStyle(1,0,1,false);
graphics.beginFill(0xFF0000,1);
graphics.drawRoundRectComplex(10,10,100,30,6,6,6,6);
For the middle rectangle we set the "pixelHinting" property of the lineStyle to true, and this seems to remove the funky artifacts, but still leaves the different radius on the corners.
//Middle Rectangle
graphics.lineStyle(1,0,1,true);
graphics.drawRoundRectComplex(150,10,100,30,6,6,6,6);
graphics.endFill();
For the right most rectangle it appears we have it drawn correctly, but we were only able to do this by NOT using any line style at all, and instead having to create two rectangles with one nested inside the other.
//Right Rectangle Outer
graphics.lineStyle(0,0,0,false);
graphics.beginFill(0,1);
graphics.drawRoundRectComplex(300,10,100,30,6,6,6,6);
graphics.endFill();
//Right Rectangle Inner
graphics.beginFill(0xFFFFFF,1);
graphics.drawRoundRectComplex(301,11,98,28,5,5,5,5);
graphics.endFill();
So it is obvious to me that the Player is capable of rending this correctly, but it does NOT. I am not sure if the cause is in some type of sub-pixel interpolation algorithm, or it lies within the "curveTo" code for line strokes where the player might be using some type of cubicBezier algorithm and the control points are too close together to get an accurate curve.
It appears that the Flex team is aware of this issue and thus renders all of its "cornerRadius" borders by applying the same technique I am using above by doing two separate compexRectangle fills.
So apparently Adobe is well aware of this issue, and from what I understand, through unnamed sources, this isn't even on the radar for the next major release (Flash Player 10.) I think is a real shame since I believe it really undermines the quality of what can be produced with Flash when you want a high level of detail and your are forced to take a bunch of unnecessary hacks to work around it.
What is wrong with the Business Intelligence Industry?
Author: Thomas GonzalezI just returned from a great summit meeting for BI hosted by Dashboard Insight, where I sat on a panel with other industry experts. It was a small group of about a dozen of us, and it was a great two day meeting. It was fantastic to have an opportunity to talk with other people who work with the same issues I face every day while working on BI stuff.
I was a bit concerned attending the event that I would not see eye-to-eye with some of these other experts, since I hold a relatively contrarian view when it comes to designing dashboard solutions. I believe that ALL business intelligence systems need to be designed from the top (user) down, versus the bottom (data) up. Pretty much all big BI vendors and industry experts have been preaching the bottom-up mantra for the past 20 years.
On the flight back from the summit I wrote an article that (hopefully) more clearly articulates my position and the logic behind it. You can read it here. In a nutshell I basically state that Big BI and current industry experts have a strong financial interest in not rocking the status quo, and are in fact hindering the efficacy of the very solutions they purport to be advancing.
By any objective measure, BI is long way away from reaching its potential, especially in the eyes of business users and organizations who have implemented seven figure BI solutions. My thesis is that because BI has its history rooted in the collection, transformation, aggregation and dissemination of data that the lions share of focus on any BI project revolves around the data and the not the end user. Reports and dashboards end up being after-thoughts at the end of big BI initiatives.
The BI industry has created its wealth through the selling of these solutions and expertise and insist they are needed to provide an effective BI solution. In my experience this is absolutely NOT the case. You can create a very effective dashboard solution with a very minimal BI infrastructure, although in some cases having a robust BI back end is definitely going to make things easier. As I mention in my article the BI leaders have painted themselves into a corner because even if they recognize the back end is not the place to start, they would end up undermining their primary revenue streams (not to mention customer confidence) if they openly acknowledged this state of affairs.
What I suppose will begin happening, is that more and more start up companies will start to address this schism and we will see a slow movement to more user-centric BI solutions that focus on business and user requirements with online tools that allow integration of distributed and heterogenous data. At the same time I still see a very valid place for traditional BI, as there are still thousands of companies with vast stores of transactional data that needs to be collected, processed, and aggregated into common structures that can be used to help feed the user-centric BI solutions.
New Degrafa Repeaters
Author: Thomas Gonzalez
One of the first areas of Degrafa I started working on was a revamp of the current Repeater objects. Jason had some cool ideas on what we could do to make repeaters more concise, flexible, and powerful. After a couple of IM chats I had a reasonably good idea of what we wanted to accomplish and I rolled up my sleeves to see what I could do. You can see the most current rev in our Dev branch at Google Code, although I suspect we will end up cleaning up some of the name spacing and move the new GeometryRepeater class somewhere else.
One of the challenges the current Degrafa Beta 2 suffers from is that we have a myriad of specific geometry repeater classes like Line, Circle, Rectangle, etc... Not only does this clutter up our core class libraries, but it is also much less flexible than it can be.
The new architecture we are developing takes a different approach, instead of creating gemoetry specific repeater classes we wanted to create an abstract repeater engine. This is accomplished through our GeometryRepeater class which inherits from Geometry and implements the IRepeaterModifier interface via its modifiers array. Okay, so what does this all mean?
1. You define the geometry you want repeated with any number of Degrafa geometry objects, which can be separate objects or complex compositions. You are no longer limited to the current repeater classes, but can easily repeat ANY Degrafa geometry you create.
2. You define HOW the geometry repeats via one or more IRepeaterModifiers. Initially we have created a PropertyModifier that allows you to target one or more geometry objects within your GeometryRepeater and an associated property you want to modify. You can have as many RepeaterModifiers as you want to create composited repetitions. Over time we may add additional core modifiers, or you can create your own by implementing the IRepeaterModifier interface.
Below you can see how one might implement a Circle repeater that repeats along a horizontal Axis:
<GeometryRepeater>
<Circle radius="30" centerX="10" centerY="10)"/>
<modifiers>
<PropertyModifier property="centerX" offset="10" offsetOperator="add"/>
</modifiers>
</GeometryRepeater>
For a more complex example you can check out this demo that has view source enabled.
When you look at the demo you will see a simple circle geometry that is being repeated 30 times with multiple property modifiers being applied to it. If you look at the code there are some interesting things to note here about the PropertyModifier class.
1. We support targeting common properties across multiple targets via just one repeater like are doing here with the myCircle and myRect in the targets properties. We also support not only direct object properties, but also descendent properties via a dot notation (look at the property="fill.alpha") setting for example:
<PropertyModifier targets="{[myCircle,myRect]}" property="fill.alpha" offset=".01" offsetOperator="add"/>
2. We support built in static operators as well as offset functions.
Not only can you provide static offset amounts (as in the example above) with fixed operators like add, subtract, or none you can also provide offsets as an array that will behave like a modulo function against the iteration number as in the radius modifier below. Additionally you can also provide offsets as dynamic functions as in the fill.color modifier that uses the custom colorOffset function found in the sample source files.
<PropertyModifier targets="{[myCircle]}" property="radius" offset="[5,4,3,2,-2,-3,-4,-5]" offsetOperator="add"/>
<PropertyModifier targets="{[myCircle,myRect]}" property="fill.color" offset="{colorOffset}" offsetOperator="add"/>
There are many more advanced features, but I will wait until we have pinned down the exact functionality for our Beta 3 release before delving into it further. Please check out the sample, and use view source to get an idea of what is possible.
Officially Working on Degrafa Team
Author: Thomas Gonzalez
Over the past couple of months I have become more deeply involved in the open source Degrafa project that was started by Juan Sanchez and Jason Hawryluk over 1 year ago. Today the Degrafa team has grown quite substantially and I represent the 8th official team member.
There were three primary motivations for me joining the Degrafa team.
Reason 1. Degrafa just plain ROCKS!
What I love most about Degrafa is that it represents an extremely expressive, yet compact markup syntax to produce amazing graphical assets. Basically it allows me to do some really cool things with very little code.
Degrafa leverages the low level flash drawing API's to implement sophisticated vector and raster rendering via MXML markup. What does this mean to your average Flex developer? It means that you no longer have to resort to working in Flash or other vector based tools to create complex vector assets, and you no longer have to struggle with using procedural API's to manually draw your graphics. Degrafa piggy-backs off of the same metaphors that most XML based markup syntax does, in that the nested XML structures you use to define your page layout create a visual corollary to the actual physical layout of the code. With XML markup you can easily see the primary relationships between objects due to their nesting structures.
When you combine XML Markup with Flash/Flex's powerful binding mechanism you get a very expressive, compact, and intuitive way to code graphical assets. One example of this effect in action can be seen in some of the GeometryRepeater code I have been working on for Degrafa (to be covered in a later blog post.) I was able to take a couple very simple base classes and in less than 15 lines of MXML and 10 lines of AS create a completely dynamic single series Column/Area/Point/Line chart. That is 25 lines of total code, that is what I call powerful!
Reason 2. I wanted to give back.
When I started working with Flex in late 2005, I had never been directly exposed to the open source community and always regarded the open source movement with a detached fascination and certain level of disbelief that so many developers would volunteer their time for an apparently non-commercial effort. Over the past couple of years, my eyes have been opened to the many advantages to open source on commercial, personal, and social level. In learning Flex and watching the growth of the community I have repeatedly reaped the benefits of others efforts in many areas ranging from free (and excellent) components, blogs, and sharing of ideas.
I think an individual can only "take" for so long before starting to feel an indebtedness and desire to give back to the community. Probably most of all is the great level of personal satisfaction I receive when I contribute something to the community that others find great value in. I probably receive more satisfaction from releasing a component I spent time working on and seeing many people positively respond to it in my blog than I do from landing a large consulting contract.
Reason 3. Team Culture.
Both Jason and Juan (the two founders of degrafa) are so genuinely enthusiastic about the project and immanently accessible. When I dove into Degrafa for the first time a couple of months back for work on my Gauge component I started trading e-mails with Juan, which quickly led to multiple chat sessions per day. Juan was always available to answer questions and point me in the right direction, and then he connected me with Jason, who was equally accessible and helpful. Once I started working with Jason and he showed me the guts of Degrafa I realized "wow, these are some truly bright people, creating a really amazing framework." I was hooked.
Moving forward my role at Degrafa will probably have many facets, but I will most likely be focusing as a direct contributor to the core engine as well as helping to provide some organizational support for Degrafa as an entity and open source project.
3G iPhone appears to be thicker not thinner.
Author: Thomas GonzalezIs it me, or Apple? The recently (a few hours ago) announced 3G iPhone was stated to be thinner version of the current model. But a close look at the tech specs on the Apple store site indicate that it is actually .48 inches (12.3mm) thick while the previous version was only .46 (11.6mm) thick.
The difference in the new iPhone design is that the edges appear to be more sculpted like a Mac Book Air, thus the phone probably "feels" thinner, when in reality it is thicker.
Flex is MORE than just a pretty front-end
Author: Thomas Gonzalez
One of the most powerful aspects of using Flex is not necessarily the language or IDE itself, but the design patterns that the combination of Flex and the Flash Player allow you as an software architect to implement. For developers who are used to building large scale web applications, the traditional approach is to use some version of an n-tier architecture where your platform consists of a data persistence layer (fault tolerant DB's), web application layer such as .Net, Java, ColdFusion, etc (to maintain session state for stateless HTTP and enforce business logic), and your presentation layer (HTML, Javascript, Flash, etc..)
This is a topic that I have been thinking about quite a bit over the last couple of years since I started using flex, and the more I work with Flex the more I stand behind the conviction that packages like Flex/Flash offer us a new paradigm for web application development. I realize this is a long post, but my hope is that others out there in reading this post will start to think about web application development in a new light and realize there is potentially a more powerful (and enjoyable) way to design web applications.
The traditional n-tier approach, while tried and true (and an architecture that I have implemented in more solutions than I care to remember) has several shortcomings that are primarily related to the limitations of web technologies at the time the n-tier approach came into vogue almost 10 years ago. Below I list four fundamental shortcomings with this approach, although I am sure there are several more.
Shortcoming 1 - Multiple Languages/Environments:
Taking this layered approach to building applications, requires the developer to code in several languages across several tiers and IDE's. Even in the most simplistic web application, the developer is going to have to be writing and debugging some type of SQL via one IDE, then working on some application tier code with something like Java or .NET, and finally writing their presentation layer with some HTML/Javascript or Ajax Library. All said, the developer is going to have to be pretty efficient at knowing at least 3-4 completely different languages as well as their associated tooling, or even worse, have to distribute that work across multiple team members. Then, when it comes time to debug the application, even in the most integrated of environments, the developer will be debugging through several different debuggers, trying to track data structures and logic as they pass through each layer, all of which takes time and not a particularly efficient way to troubleshoot an application.
Shortcoming 2 - Brittleness:
I don't care how "loosely" coupled or abstracted you have designed each layer, by its nature this approach tends to create brittle designs where each layer is written in its own language and has unique implementation details. In my experience, no amount of planning for future functionality and abstraction fully covers you in your design, and more times than not, an innocuous feature request like "Gee, it would be nice if we can capture the users surname on our registration form" has the developer modifying the presentation layer, business/app layer, and data layer to accommodate a relatively simple request that ends up rippling through every layer of abstraction in unavoidable ways.
Shortcoming 3 - Maintaining Client State on the Server:
HTTP by its very nature is a stateless protocol, each time that browser loads a new page, all state is lost (cookies aside), sorry folks, but that is the way it was designed. For that reason, web application architects find themselves jumping through all sorts of hoops to maintain state on behalf of the client within their centralized web servers. This problem becomes further exacerbated when we are designing a scalable web application with many web application servers. You now have to deal with load balancing IP requests across multiple web servers and dynamic client IP pools. This makes the architecture required to build out a web farm a much more complex issue for your application design, testing, scaling and debugging.
Shortcoming 4 - Browser/Desktop Compatibility:
This is so obvious I don't need to hammer it further, but needless to say writing web applications (or even desktop ones) that behave nicely on a wide variety of clients and environments requires writing LOTS of code that deal with compatibility issues and adds zero additional functional value to your application.
So how does a technology like Flex address these issues? To me, it wasn't immediately apparent, as I when I started using Flex I just thought of it as an easier way to build a more attractive and interactive presentation layer, but the more I used it and the more I saw how powerful the Flash Player, was I started to realize that there was a real opportunity to do things differently. It was at about this time (a couple of years ago) that I was starting the initial architecture for our on-demand BI dashboard offering, which was the flagship product of the startup I had co-founded.
When evaluating architectures and design patterns I wanted an approach that was going to maximize developer productivity while giving us a consistent and maintainable code base. I looked at frameworks like Cairngorm (which largely borrow from established Java design patterns) and ultimately with the help of my VP of Engineering ended up designing a custom framework and architecture over the course of about 6 weeks. This framework allowed us to successfully go from a written spec to commercial product with two live Fortune 500 clients in just under 6 months with a team of three developers including myself who was only working on the product part time. All in all, I was very proud of our effort and what we were able to accomplish in such a short amount of time, and outside of having a very dedicated team who worked extremely hard, I attribute that success to being able to leverage a completely new paradigm for web application development.
So what did we do that was all that different, what was our secret? Well, obviously Flex was a big part of it, but more so it was what Flex allowed us to do from an architectural perspecitve. Fundamentally we still had all the basic pieces of an n-tier architecture in place with a DB on the back end, a web service bridging the client to the DB, and our client code within Flex. But what was different was WHERE we put the code for those layers. When you looked at the composition of our code which was spread across SQL in the form of creation scripts and stored procs, .NET for our C# web service and Flex for our client, 98% of our code was all written in Flex. We had less than 3000 lines of code within SQL, less than 1000 lines of code in .NET and the rest was all Flex!
How did we do this? Why did we do this? Well, we essentially condensed all of our abstractions layers into one platform and language - Flex/ActionScript. We still had a "presentation, business, data" layer but it all existed within our Flex classes via a MVC framework approach. Our model classes would serialize themselves into XML which would then call our web service which primarily served as a secure pass through to our DB, and then the DB would digest the XML via associated stored procedures and update or retrieve data in the appropriate tables. This meant when we had changes to the spec and had to add that a new data field we simply updated our Flex UI and underlying model class and the appropriate stored proc on the DB. The separation of layers worked beautifully, all the UI code and underlying model code was in one environment and IDE, while all the code to maintain referential integrity of the persistence layer sat in the DB where it belonged. The primary motivation for me to adopt this approach was to focus as much of our development energy on directly enhancing functionality versus working on plumbing and repetitive coding tasks that did not directly add to the feature set.
This approach afforded us huge advantages in our development. The single biggest advantage was the speed of development, once our data tier and pass through web service were stabilized (with less than 4k lines of code total, that did not take too long) we could debug all of our code in one environment. The whole architecture of the platform sat in one place, Flex, and while our .Net web service exposed some utility functions for us (like SMTP access, and some server side file manipulation) we rarely had to leave the Flex debugger for troubleshooting. The second big advantage that we had was how we could scale our application on the web tier. Since all of our complex client state existed within Flash (and thus on the client) the only load our web servers received was for the stateless pass through requests to/from the DB and for some utility work. Thus, we did not have to maintain any session state on our servers and scaling out the web farm was simply a matter of adding more web servers behind a load balancer. The back end DB still required clustering for fault tolerance and scalability, but we had a relatively simple DB schema that made this easy enough to achieve.
All in all, had we taken a more traditional approach to designing our application I can confidently say it would have taken us at least 50% longer to build with half of the interactivity and robustness that our application released with on version 1.
This approach worked for one primary reason, and that is the ubiquity and the power of the Flash Player in combination with the abstraction of ActionScript 3. Yes, everyone knows that Flash has something like a 98% penetration rate, and that a .swf file is going to act pretty much the same regardless of the browser or OS it plays within. But, when Adobe released Flash Player 9, it left the leagues of a neat way to show cool animated effects, and offered a true platform to deploy robust applications against. The performance of the Flash Virtual machine is pretty amazing when you consider how compact it is. For instance I can manually filter row by row through thousands of database records using powerful regular expression match patterns within mili-seconds ON the client. Flash is not without its warts, but all-in-all a very compact, and powerful platform to write code to. I encourage other web application architects to look closely at the Flex/Flash combination for their next project and consider how they might benefit from this approach.
Steve Jobs would cringe - Apple Wireless Keyboard Add-On
Author: Thomas GonzalezWhen I purchased my Mac Pro, I had an option of which keyboard I wanted, I ordered the wireless keyboard, knowing how small it was, and thinking it would be next to useless for coding, but perfect for a family Mac-Mini. Well, I actually kind of like the keyboard, the key-throw is good, I can type fast and it is really light/elegant. BUT, it is pretty diminutive, and so light that when I use it in my regular seated position (feet elevated on desk, very reclined in my chair) with the keyboard on my lap, it kept slipping down. I found myself unconsciously holding it in place with my left thumb so it wouldn't slide down. Typically with large keyboards, the pad of my palm would rest against the bottom keeping it in place.
So I devised a super high-tech holder custom designed for the Apple Wireless Keyboard. It is very lightweight fits perfectly and made from bio-degradable earth friendly materials. See the photos below. It works perfectly, the keyboard is now secure in my lap and very comfortable. Perhaps when this one wears out I will create one out of a nice piece of lucite :)
Update:
My v1 keyboard holder ended up becoming a little "floppy" after 2 weeks of use, so I created a new one out of PVC/Sheet. Other than a slight mishap with the router in my haste to replace the more organic version, it worked out fine. A little hook-and-loop tape allows me to mount and remove the keyboard with ease. The size is perfect for typing in my lap.
Should Apple purchase Adobe?
Author: Thomas Gonzalez
I am sure I am not the only one who has posed this question, I know there was lots of conjecture about this a couple of years ago. But I think the argument is even stronger today. It appears that Apple is really trying to take advantage of the fiasco that is Windows Vista and is pushing new PC buyers to make the jump to Apple (hey it worked on me) But, Apple is going to have a tougher going with the developer crowd and the corporate culture. If Apple ever hopes to jump the chasm and become an integral part of the enterprise they are going to have offer compelling reasons for developers to jump ship as well and write software for Apple. Right now the only compelling reason for developers to make the switch and write software for Apple is because they become so enthralled with the Apple experience that they want to be part of it (once again, I am guilty as charged) or they are specifically targeting OS X or the iPhone for their offering.
But, as motivated as I am to develop the next great iPhone/OS X app, each and every time I put forth an earnest effort to do so I am struck by how antiquated the development tools, languages, and platforms feel to me. For a corporate developer who just needs to get the job done and could care less about how sexy something looks/feels they will have even less impetus to make the jump. One thing that Microsoft did extremely well, although not so much any more, was to practically spoon feed developers with their technologies. It was SOOO easy to pick up a MS technology, not necessarily because they were the best technologies, but because MS invested heavily in providing training materials, live events, practically giving away their software via MSDN, etc. Now, I see the open source movements doing a better job of this with the robust communities and communication infrastructures that have developed as a result of the internet.
So here I sit at a cross-roads, do I invest the time to develop an application that is specific to Apple either via Objective-C/XCode or via proprietary AJAX for Safari extended WebKit? Well, either choice seem like several steps backwards from where I am right now. Currently I develop in Adobe Flex, and while the tooling can stand room for improvement, it is still far ahead of XCode. But where Flex really shines is the combination of the language and the design patterns it easily supports in combination with the power and ubiquity of the Flash player. Having to go back and write AJAX code and deal with browser compatibility issues and the lack of robust profiling/tracing tools is just painful. Once you know how much better it can be, having to go back and use tooling/languages that you were using 8 years ago just hurts. The XCode/Objective-C road does not appear any better. Damn Flex and Adobe, if I never went down this path I wouldn't know any better, and I would be happily struggling with AJAX, HTML5, and excited that I now have a Canvas HTML element that has a graphics context I could draw to.
Okay, back to my original theme for this post, why should Apple purchase Adobe? If for nothing else, Flash and Flex. If Apple controlled Flash they could easily put it on the iPhone and still force their lock-in for flash-enabled iPhone apps having to be distributed via their AppStore. With ActionScript, Flash, and AIR in their back pocket, what they have is universal development platform that would open the doors to a much wider developer audience. Because a developer knows when they are targeting Flash/AIR they are not only targeting Apple but pretty much any OS/Client. In the words of Bob Warfield, the friction is greatly reduced. It would also put Apple on practically EVERY desktop because Flash sits on every desktop. Similar to the logic I used in purchasing a Mac Pro, where I knew worse case I could run Windows natively (but have yet to do so) I would be able to develop for the iPhone/Apple knowing that my application would also work anywhere elese. Even better, instead of having to learn the ins-and-outs of a new language based on an old development paradigm I would either leverage the knowledge I already have (if I knew Flex) or be investing my time in learning something new, but more powerful and more efficient.
But, wait, there is more to this argument outside of my myopic developer/engineer perspective. Apple is really pushing to deliver software to creative folks, albeit more at the hobby level, but nonetheless what company has the best and most established creative software? Adobe!!! If Apple wants to position themselves as the company that creates the hardware, software and distribution channels for creative content (music, video, multi-media, etc.) why not also control and offer the tools to create such content... it would go a long way to reducing the friction in some of these marketplaces, where the creative authors can seamlessly distribute their works via the Apple channel. This would allow them to target all strata of their verticals that they want to sell into, and these offerings create a self-reinforcing viral effect. This said, I am not sure how comfortable I am with a company like Apple holding such a dominant position in the market based on their historically closed nature.
And this is where I come to why I think it might not work, and that is due to cultural issues between the two companies. Adobe has been making GREAT strides to become a much more transparent and open company, they are investing heavily in contributing open source code and really seem to be figuring out how to be a good corporate citizen while still turning a profit. Apple, not so much. They seem to still cling the old-school closed source mindset, where everything is shrouded in secrecy and tightly controlled. This does have its advantages, but long term I don't think it will benefit them. So what happens when a company like Apple acquires a company like Adobe with the differences in their respective cultures? I don't think it would be a very pretty picture and could have the potential to destroy Adobe and the value they bring to the table. But from a purely mercenary/capitalistic view I think it would still be in Apple's best interest to do so.
From looking at the Yahoo finance stats today, here are some metrics for both companies. It would seem with Apple's cash on hand they have enough resources to make something like this happen (they have almost as much cash on hand as Microsoft) if they were motivated to do so.
Apple:
Market Cap: $148B
Annual Sales (2007): $24B
Total Cash: $18B
Adobe:
Market Cap: $19B
Annual Sales (2007): $3.1B
Total Cash: $1.57B
