Secondly, if you’re in or around the Dallas area, be sure to visit Greg Wilson and Jon Campos at the Flex User Group meeting on April 19, 2012. Details about the event can be found here!

Still not sure if your application requires the license? Well there is a way to find out with using a debug version of Flash Player. Starting with Flash Player 11.2 you will get a message that is rendered on top of your SWF if you require a license. Here is what it looks like:

Premium Features Watermark

And here is the code to force the watermark:

If you comment out "stage.stage3Ds[0].requestContext3D(); " or remove the domainMemory lines of code you will not see this watermark.

NOTE: If you get a context3D error you need to make sure you have swf-version=13 and wmode="direct" set up properly to run Stage3D content.

It's also important to note that the watermark doesn't show up until the features are used in your code. Take this code example:

The watermark will only show up once the domainMemory chunk of code is ran after clicking on the stage.

Here is another scenario, SWFMain.swf loads both SWFStage3DAPI.swf and SWFDomainMemory.swf, do you need a license? Yes you do, the water shows up and stays (even if you try and unload) after you have run API calls for Stage3D or ApplicationDomain.domainMemory regardless if they are from the main SWF or loaded SWFs. If you want to try it out yourself here is the source code:

SWFMain.as

Here is the SWFStage3DAPI.as

Here is the SWFDomainMemory.as

• View Original Presentation
• DateSpinner Documentation
• http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/DateSpinner.html">Date Spinner ASDocs

Here is a screenshot of it running in Chrome on my MacBook Pro:

Mark Rein form Epic Games talks about the latest Unreal demo at GDC.

At the Adobe GDC booth you can also see us show off Dungeon Defenders by Trendy which also uses the Unreal engine.

What does all this mean? Check out http://gaming.adobe.com for some more ideas of how AIR and Flash enable game developers to create great content.

Adobe is a sponsor and this year they provided live streaming as well as recordings of the sessions. So if you were not able to attend in person you can catch some of the latest topics around gaming with the Flash platform. There were two rooms with with session through the day so here they are separate by room:

Some take a ways for me after talking with people at the conference are there are still alot of students that are building Flash games. Although they say their teachers and schools could use some more love. If you have a large student base and doing senior gaming projects, and are thinking of using Flash as the platform feel free to reach out to me and I'll try and help as much as I can. Next thing I noticed is people are building a lot of Flash games, but people are still not quite using Stage3D in mainstream. This is for various reasons, dev cycles, Flash Player runtime releases, mobile AIR 3.2, etc... but uniformly people want to get their Flash games seen. So again if you have some great looking content, using the latest Flash Player features the better, send them my way and I'll take a look.

Good luck and on to a great future of Flash gaming. And if you are looking for some of the latest info check out Lee and Thibault session above. And the new http://gaming.adobe.com site to participate in the telling of the Flash for gaming story.

Notes

• View Original Presentation

• http://tricedesigns.com/portfolio/flex-stage3d/

• http://tricedesigns.com/portfolio/flex-stage3d/Flex-Stage3D.fxp

• http://away3d.com/download/
• https://github.com/away3d/away3d-core-fp11 (if you want the latest branch)

• basic geometric shapes
• simple 3D bubble charts
• “project awesome”

If you haven't taken the time to come up to speed on Flash Player's current useful gaming features and future features check out the stuff below.

Stage3D Desktop (Currently Available)
Stage3D Mobile (Coming Soon)
Epic Unreal demo running in browser through Flash Player
(Flash Player 11.2 Beta) Mouse Lock, Right, & Middle Click
Relaxing the drivers of GPU acceleration feature from 2009 to 2008 (maybe more in future releases)

There will be more information coming out over time, Flash Game Summit and GDC are a great place to come see what Adobe is doing. If you are a game developer and attending one of the conference be sure to come up to me and say hi.

But today, the Flex community is by far the strongest one on the RIA market and it’s not only due to Adobe. Flex is still the first-choice to build RIA because it’s consistent and because… it works. You should all read this fantastic article by Joao (RIA expert in Portugal). It’s also due to the fact that a lot of Flex developers were coming from various technical backgrounds: Java (mainly), PHP, AS3, .NET… And they tried to bring and translate their knowledge investing in areas not covered by Adobe’s engineers: data-visualization, backend integration, continuous integration, micro-architectures… As a tribute, I just wanted to summarize on one graph (inspired by Michell Zappa) some compelling projects developed by the community around Flex. All these projects are used by large organizations in strategic Enterprise applications. All these talents can now become official Flex contributors thanks to the Apache foundation. Flex is successful thanks to this constellation of talents, not thanks to Adobe.

Some projects are of course missing, I’m sorry for that, it’s not an exhaustive list; but this graph expresses all the efforts made by the community to make Flex a successful framework in a professional Enterprise environment. Just a few projects, such as BlazeDS, were initiated by Adobe on this map. Flex has been successful in the past thanks to the involvement of its vibrant community of talented developers… why would it change?  If you want to follow the Apache Flex project and get involved, check this page: http://incubator.apache.org/flex/

Thanks to all the folks who helped me build this list on Google Docs.

dpi
minResolution
aspectRatio

You can combine these attributes as well to get the best possible image selected. It’s very easy to implement, you simple create an MXML component based on the SplashScreenImage property and include as many SplashScreenImageSource objects to cover the number of situations needed. For example, in the following code I’m setting different images depending on both dpi and aspectRatio properties. Note that this example makes an assumption about tablets generally being 160 DPI (thus needing the bigger image), the 320 DPI being the iPhone 4 and above and most android phones at 240 and setting the image based on that. It also assumes that I want to use the landscape version of the image when the aspectRatio happens to be landscape on startup. You could also use the minResolution to further ensure that the 160 DPI is indeed a tablet etc and that will cause the the stage width and stage height to be compared on startup to find the largest number of the two. If it’s equal to or greater than your minResolution setting, it will select that image for the splash screen.

DynamicSplashScreen.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SplashScreenImage xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
	<s:SplashScreenImageSource dpi="160" aspectRatio="portrait" source="@Embed('assets/texas-768x1024.jpg')"/>
	<s:SplashScreenImageSource dpi="240" aspectRatio="portrait" source="@Embed('assets/texas-480x810.jpg')"/>
	<s:SplashScreenImageSource dpi="320" aspectRatio="portrait" source="@Embed('assets/texas-640x960.jpg')"/>
        <s:SplashScreenImageSource dpi="160" aspectRatio="landscape" source="@Embed('assets/texas-1024x768.jpg')"/>
	<s:SplashScreenImageSource dpi="240" aspectRatio="landscape" source="@Embed('assets/texas-810x480.jpg')"/>
	<s:SplashScreenImageSource dpi="320" aspectRatio="landscape" source="@Embed('assets/texas-960x640.jpg')"/>
>/s:SplashScreenImage>

Now in your main application root, you simply specify the name of your component defined above in the splashScreenImage property as follows:

<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
							xmlns:s="library://ns.adobe.com/flex/spark"
							firstView="views.FrontView"
							splashScreenImage="DynamicSplashScreen">
...
</s:ViewNavigatorApplication>

Adobe Flex to Apache Flex
Adobe Flex is now Apache Flex (in case you’ve been under a rock lately or perhaps just discovered Flex ). It’s been contributed to the Apache community and is in incubator status. Incubator status is a holding place for a new Apache project and basically a gateway to it becoming a full-fledged project after a release or two. It was great news that it was accepted recently and I have no doubt it will quickly move out of this stage into a full-fledged project. The project has an amazing amount of traction so far, and it’s awesome to see all the activity! If you want to stay on top of the latest, subscribe to the mailing list here, (note that your inbox will be flooded so you might want to use a separate email to track it, it’s a high traffic mailing list ). There are a bunch of extremely talented, well-known developers behind this project as well, which is huge and makes all the difference, in my opinion. The Open Spoon Foundation is also actively behind this project and if you aren’t aware of it, definitely make a point of checking it out. I attended the Flex Summit in December and learned a lot about the Apache process from Roy Fielding (Apache Co-Founder), with the biggest takeaway being that Apache projects are run as a meritocracy, so there is equal opportunity amongst all and that contributions of any kind, including code, bug fixes and documentation are welcome.

The State of Things…
So the big question everyone has been asking us, should we continue to build apps with Flex? I think the general consensus to be made is yes. There’s still a viable need for this technology and with the dedication and energy of the community so far I feel very positive about things. As I’ve stated before and will continue to state, as a developer you shouldn’t put all of your eggs in any one basket, and should be learning the latest technologies along with continuing your Flex development to ensure your relevance and development diversity, but Flex remains an excellent choice for the right type of application.

Here are some related links you should check out that I found very useful as a meter for what other great developers are thinking and doing:

Joseph Labrecque – Questioning the viability of Flex
Joao Saleiro – After 6 years doing Flex, am I moving to HTML5?
The Flex Show – Discussing the Future of Flex with Joseph Labrecque and Mark Ehlert

Hot Topics…
One big topic on the mailing list right now centers around a new logo for Apache Flex. The community held a contest (over 50 entries submitted!) and the submissions can be found here. The contest ended yesterday and now the voting process has begun. To vote you will need to start by subscribing to the mailing list. Once subscribed you can cast your votes with a point system defined in the mailing list. There are also some excellent summaries of what’s going on with the project being posted to this blog by Michael Schmalle (a current contributor). I would definitely make a point to skim those summaries to get a quick read on the status of things since it can be hard to keep up with the mailing list.

The following links are also useful to check out for more info:
The Flex Incubator Project
Contributors
JIRA Bug Tracking
Flex Incubator Status Page
The initial proposal from Adobe
Getting Involved

This Blog…
As far as me and my evangelism are concerned, I plan to continue to use Flex and blog about it as I have been. The 2012 Flex User Group Tour is about to start and my team will be visiting many locations over the next couple of months where we’ll discuss all the recent activity and announcements and talk about the latest 4.6 release. You can also plan on seeing some posts on other technologies as I’m exploring them myself. I will make a point of comparing them to Flex as I go along where possible. I’m also really looking forward to seeing what Adobe has in store this year to help utilize these other technologies like HTML5, JavaScript/jQuery etc and already excited by what I’ve heard! I will post information on these topics as I’m allowed .

Radio X-Track

UI considerations

Radio X-Track is a great project led by true music lovers. DJs, painters, actresses and sound designers work together to publish creative playlists of music, covering various styles and  stimulating your eyes with massive paintings. The web radio is also a place for networking with music lovers. Once logged-in with your Facebook account, you can start chatting directly on the website. This arty space is directed by X-Track, a famous sound design studio in France. You can visit the web radio here: http://radio.x-track.net/EN/

The development of the mobile application was challenging as the web radio is a Flash application connected to FMS. Thanks to the recent updates of Adobe AIR, I’ve been able to use Flex to stream the playlists on smartphones and tablets. First, I’ve decided to use my adaptive layout technique to code one UI and target both mobile and tablet screens. Here is a video that explains the trick. I’m playing with two view navigators that dynamically adapt their dimensions and their coordinates at runtime, depending on the screen resolution and the screen orientation.

That’s why on Android, you have a very simple user experience. The first view is the list of DJs, the second view displays a scrollable picture, streams the playlist and displays the title of the song.

Here is the link to the Android application:

https://market.android.com/details?id=air.com.riagora.Xtrack

With Flex, you code one project and then can publish it on both Android and iOS. So I submitted this application to Apple.

The App Store reviewers rejected the initial application for UI reasons. They told me that displaying a list and then a view could be done in the browser, and that it doesn’t justify the development of an application. They wanted me to develop the application using HTML5… well… live audio… html5… I had to consider a new strategy and worked on a totally different UI. I started studying the UI patterns of approved radio application and ended up with a new user experience. I’ve also added some features such as a twitter feed and the biographies of the artists. The application has been directly approved by Apple and is now available for iPhone and iPad users.

Here is the link to the iOS application:

http://itunes.apple.com/fr/app/radio-x-track/id467964868?mt=8

Some technical tips to manage audio content

As the music is streamed by FMS, you can use the classic NetConnection and NetStream object of the Flash API. When the user wants to hear another playlist, I kill the current NetStream object and create a new one (I keep in memory the NetConnection instance). FMS fires a RTMP message every time a new song is streamed. The client catches the message and displays the title of the song on the screen. The main challenge was to mimic the behavior of the iPod. If you shutdown the screen of your iPhone, or if you switch to another application, the radio is still supposed to stream audio. AIR 3 introduced a new feature to enable this behavior. At the end of the application descriptor of your Flex mobile application, you have a dedicated section for iPhone settings. You can set iOS keys such as UIApplicationExistsOnSuspend. All the iOS settings for Adobe AIR are listed on this page. In this case, I’m setting the UIBackgroundModes key to audio.

Code block

<iPhone>
        <InfoAdditions><![CDATA[
			<key>UIDeviceFamily</key>
			<array>
				<string>1</string>
 
			</array>
			<key>UIBackgroundModes</key>
			<array>
				<string>audio</string>
			</array>
		]]></InfoAdditions>
        <requestedDisplayResolution>high</requestedDisplayResolution>
</iPhone>

Unfortunately, it won’t display the “play” icon in the status bar of iOS. I guess it would require the development of a native extension. Radio X-Track is a free application. Enjoy !

Mioozic

Mioozic is also a Flex mobile application available on both Android and iOS. You start by choosing a theme or a category, and it will start streaming music on your device. This Flex application has been developed by Christophe Keromen, the author of “Flex 4.5 for mobile devices” (in French). It’s a great example of a high-performance Flex application running on smartphones.

Mioozic on Android : https://market.android.com/details?id=air.netrix.air.mioozic

Mioozix on the app store: http://itunes.apple.com/fr/app/mioozic/id479503574?mt=8

What’s that track

This game developed by Orange Labs and Deezer is also a very cool Flex mobile application. It’s a quiz game. You can play alone or with friends. The goal is very basic: hear a song, tap the screen if you think that you know the artist, and select the correct artist in a list of four. It’s a very cool game with a nice 70s UI. It’s already a popular app on Android (only). Have fun.

What’s that track on Android: https://market.android.com/details?id=air.com.orange.labs.whatsthattrack&hl=fr

• Do you want to learn more about the future of Flex?
• Do you want to learn more about the Flex transition to the Apache Software Foundation?
• How can you contribute and help make Flex thrive?
• Do you have questions that you would like to voice to Adobe?

After returning from the Flex Summit, many people have contacted me asking what was going to happen with Flex and if I was going to “migrate” our projects (like http://airgile.com ) and services to HTML5. After plenty of exchanged emails and dozens of long talks, I decided to write down and share some notes of my first steps in the HTML5 world regarding the development of Enterprise RIAs (or not). These notes are not organized, they have typos and – as I said above – they are only my first steps so more experienced people might (and will) prove me wrong in some topics.

Background

I founded Webfuel in 2004 and since then we’ve specialized in building long-term (> 6 months) enterprise-grade RIAs that had to scale well and be prepared for constantly changing requirements with a low cost in maintainability, while simultaneously providing a top-notch user experience. We’ve managed to offer our services comfortably with a very limited number of resources and small development teams (3-5 persons per project), much thanks to the way we leveraged existing knowledge on Software Engineering and applied it to our platform of choice – Adobe Flex (now fortunately called Apache Flex).
Our decision was purely technical and we have never regretted our choice, until it got badly affected by the bad PR around the Flash platform.

Worse PR ever in November 2011

The Flash platform was already in bad shape, much thanks to one year of chaotic PR and there were already some inconsistent signs from Adobe hinting what was going to happen. While disappointed, I was not very surprised when all hell broke loose in November 2011 with Adobe destroying the very last credibility that Flash still had, directly affecting Flex, our businesses and careers. Long story short, Adobe wasn’t able to monetize the Flash Platform and the top managers who don’t really care or understand its power simply decided to put the money where their mouth was: HTML5. I happen to strongly agree with the move on investing in HTML5, but they could and should have done it without destroying (the perception of) Flash. Especially because in the meantime it had turned into the platform of choice for Enterprise Development.

In December ’11 Adobe has donated Flex to Apache. While this might end up in being the best thing that could happen to Flex, the initial reaction from the Enterprise was that Adobe was getting rid of Flex. Like someone said during the Flex Summit – “it seems to me that Adobe has built the best platform for creating enterprise-grade applications by accident”. Adobe understands design; creativity; marketing; publishing; Adobe doesn’t seem to understand Enterprise. Example #1: all corporate companies I worked with in the last 6 years complained about ZERO support from Adobe and they were willing to pay big money. Example #2: the pricing of LCDS.

Did Adobe kill Flex? No! A technology doesn’t have a heart attack and drops dead on the floor. Flex is still alive and the reasons why we chose it are still perfectly valid. Flex didn’t get worse suddenly – it’s still the same robust platform for enterprise RIA development.
What was destroyed was the perception of the Flash Platform. And the perception is what matters on business. You can have the best product of the world, but if people believe it’s bad they won’t buy it (and they’ll even be happy on telling everyone how much your product – that they never used – sucks). But if they think it’s good – even if it actually sucks – they’ll probably buy it (and complain later). Perception. That’s what sells. Perception.

Will the perception around Apache Flex ( http://incubator.apache.org/flex/ ) improve? Most likely, yes. In 9 days, there were more than 1.4 thousand emails exchanged on the Flex Mailing List ( http://incubator.apache.org/flex/mailing-lists.html ) ! It’s pretty impressive the number of people that are now involved in pushing Flex forward and this number will most likely keep rising. But Apache Flex still relies (or, at least for now) on the Flash Platform and I’m not seeing the bad perception on the Flash Player changing in a near future. Of course there’s still AIR, but what concerns me are browser applications.

We are desktop-developers-working-on-the-web

An important side note, is that I see Webfuel as a team of desktop developers working on the web. In other words, we use desktop development paradigms, best-practices and design patterns borrowed from the JAVA world and we’ve applied them to build applications that happen to run inside the browser. Our work consists normally in building at least two loosely coupled applications, connected by an RPC API: a client application (running inside the web-browser) and a server application that only exposes services and is not aware of the client application.

Most Flex developers out there think on themselves as web-developers, but in most cases the mindset of a Flex developer is closer to a desktop developer than to a web developer. IMHO, this is the single-most-important reason on why we, Flex developers, dislike so much the “normal” web development approaches.
We work with “views”, web developers work with “documents”. We do old-school MVC, DI, loosely coupled approaches, dependency management, RPC, code coverage, continuous integration [...], and when we’re forced to do web-development these are the first concepts that we try to investigate and replicate… before we get frustrated and enter in “denial”.
To be good at typical web-development, we have to change our mindset.

Is “HTML5″ ready?

According to Twitter, online magazines, blogs, Apple, Microsoft and even Adobe, HTML5 is the silver-bullet for everything. It can be used to build websites, webapps, games, software, mobile applications, doing laundry and cooking. The focus is all on HTML5 right now. Is it the right moment to use it?

From the point of view of a web-developer – of course it is!!! For a typical web-developer, HTML5 means more tools, more power and much better cross-browser compatibility than what they had before. If you’re working on the web, HTML5 and the storm of JS frameworks is simply the best thing that has happened to the web since…. humm… Flash. ) Bottom line, HTML5 is for sure a giant step forward.

From the point of view of a desktop-developer-working-on-the-web – hell no! WTF? We work on the enterprise and enterprise means stability. We can’t afford to have too many moving pieces all the time. We can’t afford to deal with un-structured languages. If you’ve used Flash or Flex for the last 5 years, you’ll feel that in HTML5 there’s nothing new or better than what you already have. Worse, you’ll feel that there still are hundreds of needed capabilities and tools missing. Exception to the rule, happens if you’re targeting the browser of Mobile devices, where HTML5 is king.
It’s quite understandable that a Flex developer feels frustrated. You feel you’re going backwards 4 or 5 years. It happens that, as Ted Patrick stated ( http://tedpatrick.com/2011/11/12/living-in-the-future/ ) , we were living in the future…

Ignore the PR shit storm. Ignore fanboys. Choose the right tools. Ask the right questions to the right developers

People like to take sides. If I like and use something, for sure it’s because it’s the best thing ever and all the rest sucks or is dead. That’s how it works for most fanboys.
Newsflash: if 10.000 persons say that something sucks, it doesn’t really mean that it really sucks. It means that they believe it sucks. It’s like believing in a religion – each follower defends his religion, but which one is the “right” religion (or, is there a “right” religion)? The irony is that developers should be pragmatic people but we often see them becoming fanatic about their technology choices. “Infidel, infidel”, they yell with their pitchforks in the air when you say the name of a “competitor” technology. WTF?

For me, technologies are just tools. Obviously I would like to have as many good tools as possible so I can be able to choose the right one for each task. Be it Flex, HTML5, Javascript, Actionscript, JAVA, PHP, whatever.

Bottom line: ignore the PR shit storm. Ignore fanboys. Choose your tools based on logic. You wouldn’t choose a hammer to cut wood, would you?

Last year, when I started digging seriously into Javascript, I had many questions. I took for granted that someone who defends a technology with so much conviction, probably understands it pretty well. So I placed several questions to these guys expecting to learn new stuff and understand their best practices. It happens that I haven’t learnt shit. It was like if me and they were from different planets, speaking different languages. Even similar words have different meanings (their MVC is not our MVC. their dependency management is not our dependency management… etc).

I’ve sent a couple of emails to mailing lists of HTML5 and JS development asking people what they were using for MVC, IoC, Unit Testing, Code Coverage, Compiling, Continuous Integration, etc, etc. The answers were like “WTF dude, IoC? What are you talking about?”. I now know that I was doing the wrong questions, as you’ll see below.

Since I couldn’t get (or understand) answers from the gurus of the JS world, I started trying to find people who were doing both large-scale Actionscript and Javascript. They would understand me. ) It happens that there aren’t many and most of them were more or less at the same point I was. The best single advice I got was: “accept web dev for what it is and don’t try to change it. Don’t do RIAs. Do simple web development. Then improve.”. Good advice!.

Redefining our focus

As I said above, technology-wise, Flex is still perfectly valid. But it’s perception is at its lowest level and clients are quite confused and started asking us to use HTML5 to build the same type of solutions we were building with Flex.

So we had to rethink our business, and considering our desktop-developers-working-on-the-web mindset, we’ve decided to:

1- return to our roots: desktop development. That’s what we’re good at and we can still keep using Flex to build AIR applications, either for the desktop or mobile. Since we can embed the AIR runtime, those applications will be future-proof to any other crazy-game-changing decisions made by Adobe.
2- increase our investment in developing (simple) HTML(5) webapps, while accepting the web for what it is: broken. In other words, we have to be humble about what we can provide on the web. It’s too hard and expensive to build the same type of applications we were building, so we’re starting with just simple webapps.

We won’t be accepting huge enterprise-grade projects if they’re meant to be built in HTML(5). This is actually the hardest problem to manage. There are expectations from clients. They’ve gotten used to our beautiful RIA applications, with almost no waiting times, with beautiful and pixel-perfect interactive user interfaces. And now they want the same, but in HTML5, because Flash is “dead” and HTML5 will also run on their Mobile devices (all of them), faster and without consuming battery. At least, it’s what they heard…. The solution for this problem is to say “No, we are not ready to develop it in HTML5″. We’ll be restricting our development to simpler web-apps, until we feel that we (and the web) are ready.

First steps in JS and HTML5

During 2011, I’ve read A LOT about JS frameworks, libraries, approaches, etc. Sometimes after finishing reading something, it was already outdated and a better library was available.

My first impression was that most docs were “meh”: in most cases you have an excellent “Getting Started” guide, but as soon you start getting your hands dirty in more complicated scenarios, things start falling apart and you’ll see none or outdated advanced documentation.

Another trend that I hated in my readings was the lack of objectivity: instead of the typical website and docs saying “this framework does A,B,C,D” , I saw a lot of “THIS IS THA MOTHA-FUCKA FRAMEWORK THAT WILL SAVE UR LIFE!”, “MEGA-HYPA-SHIZZLA-FRAMEWORK”. This type of communication felt weird and suspicious to me until I got used to it.

I’ve also seen several frameworks being dropped in favor of others, which was actually what scared me the most. I felt insecure choosing the “right” libs and frameworks, so most choices I did at start were the safe ones, as you’ll see below.

Another irony was that most of the JS frameworks exist to overcome the limitations of the web development (normally, the crossbrowser issues). Coming from an environment where a framework tries to abstract application concepts, it felt weird to me to use frameworks to abstract technical limitations. Today, I’ve learnt to enjoy and welcome these frameworks. Accept them for what they are, because the technical limitations actually exist and without those frameworks you’re screwed.

In October 2011, I decided to start a medium sized real-life HTML5 webapp with a partner company, so we could test the knowledge I gathered. (A medium-sized project in the point of view of a web-developer; as a desktop-developer I see it as simple stuff#notBeingHumble ). I’ve allocated two developers to the project – with myself being one of them. Below are the choices we made.

Knockout.js

Despite having read about Backbone, Spine and other more complex frameworks, I’ve decided to start small and simple with Knockout.JS . I just wanted simple data-binding to start with, so I could get some separation between the data model and the view. Later, when we were more experienced, I would re-evaluate the choice of the framework and choose between Backbone, Spine, or another.

My choice has proven to be worthy since Knockout is actually quite simple – but far more complicated and intrusive than the ultra-easy and powerful binding we’re used to in Flex.

The documentation of Knockout is quite good, with plenty of tutorials available. On Google you won’t find as many resources on Knockout as you would like, but fortunately the website covers most of the important topics. The mailing list is pretty good, despite not being as active as the MLs I’m used to in the Flex world with dozens or hundreds of experts. Anyway, in the Knockout ML, there were always one or two people kind enough to point you in the right direction, which is great.

jQuery

I had already a good impression on jQuery, but even still it turned up to be even better than what I expected. jQuery not only hides a lot of the crossbrowser issues – not all -, but also boosts up a lot your productivity with dozens of shortcut functions to most of the stuff people normally need to do on the web. Use it (can you live without it?).

SaaS

Managing CSS can easily turn into a pain especially if you need to do many changes to an existing stylesheet with hundreds of CSS declarations. When Googling for best practices, I met SaaS. SaaS is actually pretty simple: it lets you define CSS stylesheets with declaration hierarchy, variables and mathematic expressions, saving them on a scss file. Then you start a command line task that listens for changes in your scss file and converts it to a CSS file on the fly.

I haven’t looked at Less, so I don’t really know which one is better.

Lab.JS

I also discovered (the hard way) the pain that it can be to manage dependencies in Javascript. I was used to having all class definitions packaged for me in a single SWF and the Flash VM would take care of embedding and managing dependencies for me (pretty most like all bytecode VMs do). In the Javascript world, there’s nothing taking care of this for you. You start by setting in the HTML file the location of the scripts needed, but then you cannot control the order they are loaded and run. So you can be calling a function myFunction() in fileB.js that was defined in fileA.js that was not loaded yet – resulting in errors.

I’ve chosen Lab.JS to solve the issue of loading dependencies on the right order. I’m also making sure that any initialization code only runs AFTER all the needed files are loaded.

I’ve found a problem with Lab.JS: if your code throws exceptions, they will be swallowed by the library and nothing happens. My workaround (read: ugly hack) was to do a ” setTimeout(initialize, 1); ” after the scripts are loaded. This way exceptions are now caught by the browser, as you would expect.

IDEs

This was one of the biggest disappointments in the beginning. The biggest problem of JS is that due to its dynamic nature it’s hard to be tooled around. For building large scale complex systems, especially in a team environment, I needed good refactoring capabilities. It happens that refactoring doesn’t exist in the IDEs I tried.
Ok, there is something called “rename” in WebStorm but it works for very simple cases and I’ve seen it resulting in unexpected results (so I always use the “preview”).

Flash Builder is a complete beast (in a good sense). I’ve seen many people ranting on Flash Builder and even I had some disappointments a couple of years ago. But after FB 4 it just got awesome, with its serious refactoring capabilities, find usages, metadata completion, autocomplete, inline docs, content assist, etc. Most of the best tricks from the JAVA world are available on FB. If you expect to find those in JS editors, I have bad news for you.

I’ve started with Aptana. It’s free. It’s based on Eclipse, so I felt at home at least with the shortcuts and the structure of the IDE, but with a black editor (wtf? is this the “fashion-color” for supa-dupa-web-developers?). Anyway, after two months I got tired of it. I couldn’t do refactoring. I couldn’t jump properly to a function definition with CTRL+click (and this was REALLY annoying). It didn’t have decent auto-complete. I’ve tried making the debugging work but it only worked properly 15% of the time.

Then I’ve decided to give PHPStorm a try – which is the same as WebStorm, but also supports PHP. At first, I was lost: I couldn’t find half of the stuff I needed. After one day, I was pretty comfortable with it and now I feel it’s actually pretty well built. Ok, it’s NOT Eclipse, but even still it’s quite powerful. What those guys did was to implement really well the things you use most while developing and packaged all of them in a clean and objective interface. Kudos to JetBrains ( http://www.jetbrains.com/ )!
In PHPStorm, refactoring “sorta” works in simple scenarios. If you complicate too much (like when you try to mimic packaging for your objects), it won’t work. Click and jump to a function definition works. Debugging… works!! Autocomplete works a lot better than I expected. Actually, it works quite well. The catch: comparing to Aptana, it’s not free.
Coming from Flash Builder, will you be happy with PHPStorm? No. But currently it seems to me that it is probably the best IDE for Web development.

Debugging

I feel ashamed to say that I couldn’t debug properly during the first two to three weeks. Every tool I tried didn’t work as expected. It happens I was using the wrong tools, browsers and approaches.
I ended up using the debugging capabilities of both Firebug (in Firefox!) and PHPStorm. Firebug is also pretty helpful to inspect the DOM of the document, something you’ll be doing every 5 minutes. Both Firebug and PHPStorm allow you to place a breakpoint in JS code and then run your code step by step, as expected. PHPStorm looks more comfortable to me, also because it’s where I’m writing my code.
Bottom line: If your debugging is not working, don’t blame JS: you’re simply using the wrong tools.

Javascript

This was probably my biggest pain point. I’ll start with the conclusions: accept Javascript for what it is and don’t try to mimic your common OOP techniques and classes. There.are.no.real.classes.in.javascript.
Of course, you can try to mimic them – I’ve read half of a book teaching how to do that. But I’ve come to the conclusion that the complexity that you’re adding to get you closer to your comfort zone ends up not being comfortable at all…
You have objects in Javascript. Some might argue that they’re not “real objects”, but wtf, they are what they are and bitching around all the time won’t turn them into real objects. They are objects. It’s the definition of “real” that is subjective )

The problems with JS:

- Silent errors. They happen. Get ready for them.
- Hard coupling everywhere. It’s pretty hard to do loosely coupled architectures. It’s quite easy to end up with a web of dependencies between different objects. I’ve read there are techniques to avoid hard-coupling, but I haven’t had time to dig up more, so this might be my fault.
- Ugliness. I’m used to a HUGE-ULTRA-CLEAN separation between classes, libraries, modules, components and applications. In the webdev world, get ready to see PHP spitting HTML that has JS code spitting more HTML… Or function a() that creates another function in object b, that knows about object c and changes how c behaves. Things like that. In many known js libraries.
- It’s not built for team work. At Webfuel we normally don’t need to talk much with each other about development. Half a dozen guys can be working together for half a year on the same project, committing code every 5 minutes to the same SVN, without breaking the code of others. This was quite easy to achieve much thanks to the structured nature of Actionscript, on top of some very simple practices borrowed from the JAVA world. Enter Javascript and you’ll see your code breaking the code of someone else. While developing JS in a team, it’s normal that developers need to talk a lot about what each one is doing, warning the other to be careful about X or Y, or asking the other “where did you put the code for…”. Actionscript makes teamwork a joy almost since moment zero – there’s no rocket science for a healthy teamwork environment, especially if you’re using a micro-framework. In Javascript, the trick is to put people working in very different unrelated parts of the projects and use techniques to encapsulate their code – I have yet to learn them, but I will soon. I’ve asked some JS developers about this but the ones I know are all lone-wolves so they didn’t understand what I was talking about (apart from the reaction “SVN?? WTF?? Use GIT!”.. hum… that wasn’t my question…)
- Unpredictable. In AS3, the “this” refers to the instance where the method is defined. In JS, “this” can mean pretty much anything (remember AS2?). This was one of my biggest pain-points at first. Another problem is guessing by looking at the code the properties and functions of an Object. You can’t. A function in an object can be defined pretty most anywhere. It’s up to you (and your team; and your partners; and your library-providers) to make sure that you keep your house clean with everything organized in the right place.
- Code practices. These are completely different from everything you know. I taught everyone here at Webfuel to not be afraid of writing many lines of code. I want them to write self-explanatory code, like if they were writing English. Enter Javascript. And cry. By some weird reason, people like to write as much code as possible in a single line, making it not only very hard to read, but also very hard to maintain. I’ve got used to seeing the #(‘huge’).line({of: code, that: function() { looks() }).like(‘a’).train(); . And this practice is everywhere, pretty most in all examples, libraries and worse: in books! One of the books I read had one line that took me around 5 minutes to understand! The fun part is that I had the book with me in San Francisco on the Flex Summit and I showed that line of code to several people just to scare the shit out of them. It worked!

Bottom line: if you’re an OOP purist, with many years of experience on software engineering on Flex and/or JAVA, you’re going to be scared. The mindset is different. The problems are different. The solutions are different. Even the slang is different. The good part: no compiling times. Which is actually a very good part…

There’s so many people betting in JS, shouldn’t it be good?

This is actually the question that confuses me the most. I simply don’t have an answer… Some people seem to be able to pretty much do anything they need but that doesn’t mean their needs are the same as mine. At the same time the language certainly has its fundamental problems that can frighten anyone who has a one-year-project ahead.
One thing is certain: it’s being pushed forward and you can’t deny that.

CoffeeScript

I haven’t tried yet CoffeeScript. After reading a bit about CoffeeScript, I’ve learnt that you still need to be comfortable with Javascript to use CoffeeScript properly. And that’s what I’m doing. On the next project I might give CS (or other language that cross-compiles to JS) a try.

Layouting and the DOM

This was actually my biggest disappointment. Flex (>4) is amazingly simple and powerful concerning pixel perfect skinning and layouting. You have pretty much no constraints in Flex regarding layouting, giving you immense freedom in creating perfectionist user-experiences. You don’t think “how am I going to implement this?” because there’s not much to know about Spark skinning: it’s really powerful and simple.
The HTML world is different. You have to be aware of the constraints before creating the design and setting the user experience. I wasn’t aware of these constraints so we had to change the designs of the product we’re building a couple of times on the middle of the project to turn them into something possible/easier to achieve in HTML. I really hate constraints that end up affecting the user experience, but that’s how it is.

You have also to be prepared to accept small (and big) cross-browser rendering differences. They will happen. A lot. But that’s another topic…

Optimizations/Preloading content

Coming from the Flash world I was used to have to build one single application (the SWF) that has all (static) assets embedded. This results in pretty small files (yes, a SWF is smaller than it’s HTML+JS+CSS+Assets equivalent, even after minimization and gzip, and etc), only one request to the server (which ends up in a very low load on the server) and the assumption that all the content you need is available at runtime since moment 0. If you want to achieve a similar result in JS, you have to do it by hand – there’s nothing taking care of that for you. You have to join and minify Javascript and CSS files and resort to image sprites to reduce the number of requests to the server and the user perceived speed.

An image sprite is simply one PNG file with all the images and icons you use in your webapp. Then you simply apply that image as the background image of your UI component, using CSS to set a translation so it shows the icon/image you need. It’s quite simple, but make sure you load this image before your content appears on screen. The same applies to other content, in case you don’t want the user to see “glitches” on the layout while things load.

During loading I am hiding most divs (display: none) in the DOM, showing a preloader and after all content is ready (JS files through Lab.JS, Image Sprite, etc), I’m using jQuery to show stuff. It’s quite simple, actually, but of course, Flex did take care of all that for you… BTW, I saw this today, but I haven’t tried it yet: https://github.com/thinkpixellab/PxLoader

I’ve started today looking for a Javascript minifier. I need something that can automatically watch a folder with several JS files and merge them in a single minified file. If possible, assigning a revision number to the generated file. I haven’t yet found anything, but I’ll update this post if I have positive results.

HTML(5), JS and Mobile

If you think you’re going to build something in HTML(5)+JS that will work seamlessly and without problems in desktop AND mobile browsers, think again. Document based websites usually work without problems on both types of environments. But if you’re doing a more or less advanced user experience that relies in some CSS and JS magic, then be prepared to be disappointed when you open your content in your Mobile device. Not that the mobile browsers are bad – they’re actually pretty good. The problem is that the Mobile experience needs to be thought from the start – people will be using their huge clumsy fingers to interact, the screen will be smaller and the hardware resources are more limited. So at the end, you have to implement at least two different user experiences and switch between them according to the device capabilities using Media Queries. I haven’t yet tried Media Queries, so there’s not much I can say about this. I just mentioned this topic because I’ve seen several people getting frustrated after migrating their Flash applications to HTML expecting them to work right away on iOS. When in most cases it’s probably cheaper to keep the Flash version on the desktop and build a dedicated version for iOS.

UI Components

DateChooser, NumericStepper, TextInput, DropDownList, RadioButton, Panels, Accordions, HGroup, Charts, Lists with Renderers, DataGrid, etc, etc, etc, almost all types of components you can imagine are available in Flex. And they are extendable and completely skinnable. You have great control in your hands. In the HTML world, either you go with the limited browser components – that are not extendable and are hard to skin but they integrate with the browser and the device -, or you have to choose a component library like jQuery UI, ExtJS or zkoss, among other – that are more or less powerful, but don’t integrate with the browser or device.

After exploring dozens of options, all of them with their cons and cons, I felt unsecure on choosing one option, spending time and money learning it and teaching it to my team, to later conclude that I might have chosen the wrong one. So I’ve decided NOT to try any component library – apart from the limited jQuery UI -, simply because there are too many things changing right now and it’s very hard to predict which libraries will succeed and which ones will not. I’m going to be lazy (also because I can’t study thousands of stuff at the same time) and wait to see what other Flex developers will choose. In the meantime, as I said above I won’t be using HTML(5) to build RIAs, but only simple webapps. And for that, jQuery UI is up to the task (with some quirks here and there).

Crossbrowser issues

Heck, this is my biggest nightmare. I tremble everytime someone says the word “web browser”. Ok, I’m exaggerating a bit. Crossbrowser issues exist, they are a PITA and they will consume at least 30% of your time in a project (consider that when budgeting). But to be honest, at first I was expecting it would be a lot worse. Don’t take me wrong here, crossbrowser issues are a nightmare. Simply, they’re not as scary as I thought. If you follow me on twitter ( https://twitter.com/#!/joaosaleiro ) you’ve probably seen me cursing some web-browsers (hint: has two letters, starts with an I, ends with an E). Get ready to having to test something in several browsers and to change plans in the middle of the project because your approach doesn’t work as expected in one or two major browsers – especially if you’re building edge-cases and using HTML5 stuff.

You can’t miss this article: http://www.joelonsoftware.com/items/2008/03/17.html

We had one crossbrowser issue this week that almost killed our current project. We needed to override the browser URL while the user was navigating the application and we couldn’t rely in simple URL hashes. We were hoping that history.pushState was up the task, but it happens that it is not. Erratic behavior in Safari, doesn’t work in IE, worked in Android until 2.3.3 and stopped working in 3.0 and 4.0 (WTF?)… Fortunately, we’ve found History.js which was built exactly to fix our problem and reduce (not fix) the cross-browser issues. See, the good thing is that crossbrowser issues happen to everyone, so there’s a high chance you’ll find a workaround on the web.

If you’re doing HTML5 you probably know about http://caniuse.com/ . If you don’t, go there.

Productivity

Our productivity is pretty bad right now (but we are getting better!). We’ve spent 11 weeks of two resources to build something in HTML(5)+JS that we would have built in 3 weeks with the same resources in Flex, without any stress at all. Of course, I take a big part of the guilt here: we’re still learning and during the first weeks there were a lot of readings, plan changes, tests and bumps on the road.
The real issue is how tight the relation between productivity and your experience with the tech is: the bumps on the road are there, they happen to everyone and you won’t be able to predict them. So the only solution to be productive is to be experienced and be aware of those issues. They will simply happen, you’ll curse them, search the internet for hours, fix/hack them and the next time you’ll meet them, THEN, you’ll be prepared and productive.
You’ll end up implementing workarounds and hacks (on top of other hacks) constantly. Coming from the Flex world, you’ll feel ashamed of your hack – don’t be. It’s normal. Most of the times, you won’t have another choice but to accept the hack and move on.
Coming from a rapid development environment as Flex, productivity in JS and HTML can be quite frustrating until you get used to the bumps on the road. After you’re experienced, it will get better, but I don’t expect it to come any close to the productivity of Flex development in a near future.

Conclusions

The first conclusion is that we’ll keep using Flex in long-term enterprise RIAs projects, especially targeting installable desktop and mobile applications. Neither the open-standards nor us are ready to build the same type of experiences that our clients expect us to.

At the same time, we’ll be accepting smaller webapps. At this point, after three months, we’re already pretty comfortable building web experiences, so it’s a matter of raising the bar slowly, webapp after webapp. But I don’t think we’ll be able to do the same type of RIAs we were doing with Flex at least not in the next two years. Also, maintainability and its cost scare the shit out of me. And all the moving parts of HTML5 – new libraries appearing, others disappearing, browsers adding or dropping support of features, etc. There are lots of “ands”, “ifs” and “nots”.

I know I’ve missed half a dozen important topics and I know I’ll have dozens of other to write about in a couple of months. Actually, there are no real conclusions here – only open subjects. There’s much to be investigated and learned. I’m sure I’m not completely right in some of the above topics and I would love to get your feedback, pointing me in the right directions where I got it wrong. I can only hope that most of the stuff I pointed above won’t look as bad in a couple of months as it looks now. Or that browser vendors shake hands and decide to stop fragmenting the web. Maybe they could all be friends and adopt the same rendering engine and VM ( giggles ). For example, Google Dart. ( yeah, right …)

[Link to this post: https://plus.google.com/109047477151984864676/posts/CVGJKLMMehs]