After 6 years doing Flex, am I moving to HTML5?
by João Saleiro
Short answer: no. But I’m investing in HTML5.
(really) Long answer: see below.
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.
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 the lack of decent 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. :o) 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?
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?
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.
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.
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.
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?).
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 SASS. SASS 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.
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.
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.
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.
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…
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.
– 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.
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.
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…
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
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.
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).
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.
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.
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 …)