I won’t cover whether money can buy you happiness or not. All I’ll say is that for some people it does, and others it does not.

Many of the financial and tax nomenclature below applies to the USA, but the types of work are the same regardless of country.

Introduction

Early on my consulting career, I found the maximum amount of money I could charge per hour was $100/hr. I had just assumed it was a simple linear graph: the more time that goes, the more experienced & marketable I get, thus the more money I can make per hour. This wasn’t the main metric I used to measure my success, but it’s certainly how a lot of people, at least in America, do. “How much money do you make?”

As time went on, and I actually did get more experienced, I learned it’s not a linear line. A variety of things can happen, or not, to affect it’s elevation. Examples include not working for a couple months, whether intentionally or not. There are a variety of stages you can possibly go through, at least in software development, and I’m still learning all the possible vs. desirable ones.

The basics are starting out in an internship or job, then breaking away to do freelance, and finally starting a company.

Below are the 3 things that don’t work.

W2 – Salaried Employee

Salaried employees are those who work for a company, called a “job”, and that company takes out your State and Federal taxes for you. They pay a salary, a flat amount of money per 1 days worth of work, whether you actually work 1 hour or 12 doesn’t matter. They also offer “compensation packages” such as 401k matching, 20 or more vacation days, and 5 or more sick days. People put their own arbitrary dollar amounts on these which helps companies offset their lowered salaries.

The problem with W2 is that you eventually max out. I’ve yet to see a salaried programmer make more than $175,000, although most are $120,000. That’s gross, not net. That’s still only about $90 an hour if you take out vacation days and holidays. You’re replaceable, and there is only so much code you can produce in a given time on your own. Although there are skill trees for development, getting better doesn’t lead to making more money. You basically have to go into management, leadership, or sales to sometimes fully utilize all those software skills you know. There are SOME options for hybrid roles such as Enterprise Architects, people who dictate how to build things but don’t actually build the things. Sales Engineers are another. You travel with a Sales person and get their back when the clients ask highly technical questions. Sometimes you get to code, but they’re often just simple prototypes, not real projects.

Finally, W2 is perceived as a form of “stability”; something long term, something earned and deserved. Unfortunately, that’s how things were back in the 1940’s, not anymore. Regardless, the prophecy is self-fulfilling for some people, so they believe it to be true, and thus it is true even if it’s not.

Unless you actually want to get out of programming, W2 isn’t an option.

1099 – Freelance

Freelancers usually charge by the hour or project (obviously they like the former). They are synonymous with contractors: someone who works for the company but is their own business. Your own business can just be 1 person: you. You are ultimately responsible for all of your finances and taxes, thus you file a form for the IRS called a 1099. The common rule is when you get a paycheck, you immediately take 33%, round up, and shove into savings so you can pay once a month, 4 times a year, or once if you’re a slacker the taxes you owe the State you live in and the IRS. None of that includes your operating expenses like buying your own computer, contributing to your retirement, and paying your own medical insurance.

The key here, though, is you can pay those first, THEN get taxed on what you have left over using “pre-tax” money whereas in W2, you’re taxed twice: first on your paycheck and then whatever you buy with it, the IRS still assumes you made X per year. For example, lets say you make $100,000 per year. You then buy $50,000 worth of hardware, software, and office space. You then only owe $16,500 in taxes vs. $33,000 like you would as a W2. This desire to spend your pre-tax money, whether on stuff, services, or even contributing to retirement accounts like SEP IRA’s is yet another to balance in your time that has nothing to do with programming. W2’s don’t have to worry about any of this crap.

This amount of work is not to be understated. This is how many companies go out of business. It’s also a lot of work for 1 person to handle just 1 persons business finances, let alone all the time spent hustling to get clients. More importantly, though, companies bear this “burden” when hiring W2’s. This is why a lot more companies are going the 1099 route or hiring contractors for set projects, not providing benefits, nor the “free” tax services like Amazon and others are doing in the UK and in the states.

There are a variety of reasons programmers go freelance. There is no growth potential at their W2 job. They don’t like the clients they’re working with and want to choose their own. They have short attention spans and want smaller projects. They hate the large code base they’re working on that’s messed up and they didn’t create, and want the opportunity to create their own. They want to utilize a completely different technology stack and there is no opportunity to do so at their current job.

Whatever the reason, the POTENTIAL exists for making more money than W2. Sometimes, you’ll make less. The reasons for those are also numerous. While you may get many high paying gigs, you may actually have many weeks or months with no work. While W2 has a steady paycheck, 1099 does not. Additionally, there is a cost of doing business that you now incur. Time spent on the phone, writing emails, going to meetings and conferences, writing books, blog entries, curating relationships with your content and others on social media; all of that takes a lot of time that no one is paying you for. Some of that could lead to getting a client to hire you to build something. Sometimes that client just wants free consulting, or is asking you and 9 other contractors to bid on a project and they just want you to do the quote for them with zero intention of actually hiring you.

The reasons are vast. The theory, though, is that you’re using a technology with either a local market (where you live) that has a need for your skills, a remote market (meaning you telecommute with clients you’ll never meet face to face), or both. Sometimes you’ll get many concurrent projects. While one project has slow communication and is long term, and other is more clear, and shorter. While you’d prefer to have both side by side, the companies hiring you, and their clients, usually dictate the schedule, and they don’t care that you haven’t had any work all June and July, and now 3 companies want to start work immediately in August all at the same time. Sometimes that can work; other times it can sacrifice your code quality so you can only get one.

Bottom line, this is where most programmers get stuck. If they do manage to break the $100/hr barrier, it’s because they got a fixed bid contract and just did it in a shorter time. Meaning you produce the work for this amount of money, no more. If you work 4 hours or 40, you still get paid the lump sum. So, if you can do 40 hours worth of work for less than 40, then great, you just made more than $100/hr. Sadly, this is just 1 week out of the year. It also doesn’t factor in the cost of doing business to actually get that contract signed.

1099 is a mindset. You either like the freedom, the “harder I work, the more I get paid”, or just the lifestyle of having your clients… even if those clients are just like a W2, only with none of the benefits. Worse, many large companies cannot do work directly with 1099’s, and want to do W9. While that’s fine, it’s usually assumed those W9’s are a preferred vendor, or have workman’s comp and a lot of other bs that isn’t needed and doesn’t matter. If you get the W9, great, but if you’re not a preferred vendor and you haven’t convinced the company to go through the process, you’ll simply have some company you’ve never heard of take $10 to $30 an hour off your paycheck. Horrible.

Independent Contractor programmers, someone who owns a company strictly as a tax shelter and is a single person, aren’t usually paid more than $100/hr outside of California, New York, or Boston. So 1099 is usually a no go (exceptions below).

Recruiters

Recruiters are a waste of your time, and theirs.

Many companies lack the resources to “find you”. Even if you make yourself easy to find on the internets, they often won’t look. Swimming through mountains of programmer social media is less savory than paying a fee to someone to “find me someone with these skills”. While smaller companies who recognize the value of good talent DO use Github, LinkedIn, and Google to search for people such as yourself, they aren’t going to dump bling into your lap.

Thus, recruiters are often the gateway to jobs nowadays. Many in large companies like recruiters because it’s not their money being spent, and a litany of resumes arrive in their email with them not having to do anything but ask HR to send a list of requirements of what they need. As such, most job sites nowadays such as Monster, Dice, LinkedIn, etc. are owned by recruiters. I say owned because finding a job posting that ISN’T a recruiter is rare. If it’s not, the likelihood of someone with your skills getting past the often horrible interview web applications or HR wall (“Yes, mam, as I’ve told you, MVP is just like MVC, and Ember and Backbone share many characteristics, so if you know one, you can easily learn the other and be prod… mam? Hello?”)… all for W2 position we’ve already talked about is a no go.

They’ve seen their business explode since the information age started back in the 80’s and 90’s. We have some of the worst unemployment, underemployment, and those giving up and leaving the workforce since 1979. This means a few things.

First, it’s just “normal” nowadays that mid-size and large companies use them. You may not like the game, so you can either get played by it, play it, or make your own rules.

Second, a lot of them are NOT there by choice. We have a swath of college educated youngsters with degrees not in the Art disciplines who just can’t find jobs that their degrees implied. Many went to recruiting because they had no other choice.

Therefore, you shoulder never be rude to them for the above reasons. Yes, I troll them every chance I get, but that’s in good fun. You should never be rude; you never know when you have zero choice but to go through a recruiter for a job. We’re extremely lucky in software, and history shows it will not last.

Keep in mind larger consulting firms like Accenture, Deloitte, IBM, Randstad, etc. are hybrid. They sometimes act like staffing companies, but often have internal divisions that do consulting. Meaning, although they recruit you, can you get above $100/hr rates with them which often includes lots of travel, but is still longer term projects. Still, better to err on the side of caution; bring up money first to save yourself time.

That said, again, recruiters are a waste of your time, and theirs. I made $80,000 at one large company, and another $140,000. We went through the same recruiting firm for the same position. When I once was hiring for my client, the recruiting firm was charging $200/hr and paying him $80/hr. Finally, recruiter rates are beholden to the location in which they are hiring. You won’t get New York city rates in Nashville even if the recruiting firm is national; companies, even for telecommuters, often pay the local rate.

5 Solutions

So if “a job” caps out at or below $100/hr, freelance has no growth potential with maintenance pain, and recruiters are worthless, what to do? You have 5 options that I’ve seen work. I’m sure there are more, I’m just basing the below on what’s worked for me, others I know, and what I’ve seen work from past clients who’ve done it.

1. Build a Personal Brand
2. Score a large client
3. Find a Closer
4. Find a network and form a firm
5. Start a business

Build a Personal Brand

I’ve written about Personal Branding 7 years ago. I even talked in depth about Personal Branding in my video series about becoming a successful freelancer. Make no mistake; the level of effort is inversely proportional to how bad ass you are. This includes either your talent & technical prowess at programming, your charisma, or both. The less awesome you are, the harder you have to work. That’s called life.

Worse, if you cultivate a rock star status, whether on purpose or by accident, fame is fleeting. Trends in software occur just like they do in the music industry. A library you wrote, a blog post that became popular, or an app that scored you money and fame… is only temporary and you can only milk it so long. A personal brand is something that is cultivated often, like a garden. The decisions you make in the beginning help guide it and create expectations amongst those in the industry.

Writing blog posts, contributing to open source, releasing helpful code, speaking at conferences, and writing books are all staples of building a personal brand for yourself. Additionally, networking and PARTICIPATING in the industry, even if it’s just your small niche, are important. You want people to like you, you want them to want to work with you, and most importantly, THEY should be selling the client on you, not you selling the client on you. You don’t have a resume.

Those who have cultivated their epics skills/personality/brand are rife. Martha Stewart, Rachel Ray, Dr. Oz, Oprah, Craig Ferguson, Conan O’Brien, etc. In our industry, Grant Skinner, Bruce Eckel, Linus Torvalds, John Resig, Paul Irish, Joel Hooks, Alex Russell, Joshua Davis, Joa Ebert, and Ricardo Cabello (Mr Doob).

You may not know some of them, which is fine, but also potentially brings up a good point. Some of them spend more time using their talents, and the fame is just a byproduct of that, whilst others get the marketing angle, and help accentuate their work. People like me are 90% big mouth, 10% contribution. Any combination works. The point is, it’s hard work, but less so if you’re talented. And you can’t stop, you have to keep marketing yourself, either through continually producing awesome, or continually producing just enough awesome, and marketing like crazy.

If you’re famous, you can easily charge more than $100/hr for freelance work even for work that’d normally go for $80/hr. Just depends on the clientele.

Con? It’s a lot of work. All the time. Sometimes you have to start at square one if the tech changes. It can be done and repeated and is easier in a objective discipline like programming vs. the entertainment industry.

Score A Large Client

I’ve seen many large agencies and software firms sprout up like this. You’re 1 dudette/dude, 2 friends, or maybe you just know a lot of people you could sub-contract for design and other back-end/front end development if you could only get a large client. What happens is, the contractor gets a large client, can’t handle the size of the project alone, hires people, and voila: a company.

The money comes into play from 2 places. First, the job is obviously larger, thus requires more money to pay more people for more time working.

Second, those more people do not get the same amount you do. There are a variety of factors that dictate how much a designer gets, a front end developer gets, a back-end developer, manager, project manager, qa, etc. The more you make is inversely proportional to how much you pay your sub-contractors/employees. The less you pay, the more you make. Except it’s not you, it’s the company… or are you just paying yourself? That gets into running a business which I won’t cover here. Obviously if they’re an idiot contractor who’s good at coding but sucks at math, you can’t pay them less than living expenses, else they’ll lose their house/apartment/flat in the middle of the project, and that’s no good. Yes, you’ll get people like this.

You then bill those people out at a higher rate. This is how it works with big clients. Large company hires large firm. Large firm hires smaller firm. Smaller firm hires you as a 1099 contractor. The pay goes like this: Large company pays Large firm $300/hr. Large firm pays Smaller firm $150/hr. Smaller firm pays you $80/hr. Now that you’re the Small firm, you now get the $150/hr… and you’re sub-contractors get the $80/hr. Make sense?

The more sub-contractors you get, the longer the project is, or both results in more money in your pocket; well over $100/hr.

How does one score such a Large client? One way, you can become a preferred vendor/consultant/provider of your favorite technology stack. Whether it’s the company that makes it, or those who have a vested interest in it, one things for sure: those who make technology are not consulting firms. They focus on making tech, not forcing a bunch of people to travel to some random location to build something for random business for a bunch of dough. YOU and yours are the ones who actually represent that company and do the actual work. Obviously they have small arms in the sales team that do this, but they usually don’t scale that side of the business.

Another way is networking with past clients. One way to utilize a network you’ve created is to contact past clients’ clients directly if your non-compete is up. For example, lets say you worked for a company as a 1099 that worked on a project for Nike. You did a great job, and had a good relationship with the company, and even had the opportunity to work with some people at Nike directly. Most smart companies will ensure you never talk to them for this very reason. 1 year+ later (or whatever your non-compete states), you reach out to them and ask if they have any work. If you kicked ass, they’ll remember you. Suddenly, that cut in pay is gone since you can form a direct relationship with them either as W9 (corp to corp), and possibly become a preferred vendor for that company: 1 of many companies who gets first dibs on projects they outsource.

Other times, you just get lucky as a Freelancer, and you portray yourself as a “company” with 6 people (who are really part time sub-contractors). Thus, larger companies will come asking you to deliver something quite large. It’s not dishonest at all if you truly can deliver. I’m making the assumption here you’ve worked on multi-person projects and can actually do what you say you can do. It’s all about how sell yourself. Example: jessewarden.com vs. webappsolution.com.

Don’t be afraid to write contracts that are too large for you to handle. If they were, you wouldn’t have the cajones to actually move forward with it, and finding resources for a project that’s too big for you is a good problem to have. It’s already assumed at this point that you know a bunch of freelancers, and might have even put them in a spreadsheet to list their name, contact info, last known rate, and area of speciality. BUILD UP THAT NETWORK and then USE IT.

Find A Closer

All closers are salesman, but not all salesman are closers. Many companies spring out from a talented closer who scores that big client, whether from a cold call or networking. It’s like the previous “Score A Large Client”, except there’s no work on your part: you just unleash the closer and wait for her/him to catch you a big fish.

I’ve seen some successful firms/companies who are basically run by these closers. Many are partnerships where a talented programmer partnered with a talented closer and together they built a company.

Actually FINDING one is where I can’t help you. Most either formed the company on their own or the technical person had a childhood/college/previous company relationship beforehand.

Commissions don’t help, either. “Dude, I know 9% is the norm, but I’ll give you 20%.”

“Oh yeah? How much y’all pulling in a year?”

“Uh… I guess $1 million.”

“My current company gives me 9%, but they rake in 30 million. Thanks for the free beer, though!”

Find a Network and Form a Firm

You can form a firm in 2 ways. Basically, you do #1 where you’ve either established a name for yourself, and find like minded people who want to do the type of work you want to do with the types of clients you like to work with.

The other option is just like her majesty’s life advice: surround yourself with those better than you. You basically find a group of people, at least 1 but hopefully more, who think like you do. You all agree to find work, share work if you’re too busy, or help each other out on projects WITHOUT a premium; meaning you don’t take a cut of the rate from each other. This makes some freelance gigs a lot easier because you can borrow people for helping you out on some projects. Since they make you a priority, and there is no worry about rate negotiations, it’s a no brainer. THAT has some serious value to clients that you should up-sell. Most clients who know what they are doing recognize that already when dealing with companies that have more than 1 person vs. an independent contractor… sometimes.

More importantly, though, is the hope that they already have the preexisting network contacts described above. Even better, you can combine networks. It actually goes over quite well when you describe to the client that you’ve left the previous firm to found your own since that client wants you anyway. They’ll often assume you formed it to work with like minded individuals and you’re still in the idealistic and prove yourself/your company phase.

This is basically what I did when one of the firms I was working with exploded on itself. Preferred vendor, existing client base to get opportunities from, and 3 guys who all have different strengths that compensate my weaknesses, specifically 2 of them doing back-end Java (I’m 100% front end). The bigger clients want Web App Solution, not Jesse Warden.

This is the opposite if your brand is really powerful, though. For example, some strong personal brands form a company, and larger companies will hire them strictly because they want that one person’s expertise/clout/reputation.

$101-$119/hr is no mans land. Once you have a company that consists of individuals, not just a bunch of subs, $120 on up gets tons more likely… because the sum is greater than its individual parts. That has a lot of value to companies who need you to scale, be used to scaling quickly, and have a network of your own to acquire certain resources for certain types of projects (UX, design, business analysts, etc). That and it’s easier for the CPA and lawyers to swallow since you’re a more legit entity to do W9 work with for tax and legal purposes.

Keep in mind, while it’s obviously nice to have a track record that you can show to existing clients of your firm helping companies build awesome, often it’s just as accurate to use past clients as that track record. For example, all of your past freelancing clients you can include in your company’s repertoire of past clientele.

If your partners, or even just sub-contractors don’t have a network, you better have one… else you’re just fishing for the big client with extra lines in the water.

Start A Business

Everything I’ve talked about up to this point has been B2B: Business to Business. Some company hires your company. However, that’s not where the real money is for software development. The real money is in products. Now, granted, you can create products for a certain set of businesses, thus making you a B2B, vs. targeting consumers as a B2C, but the point here is you are NOT a services company: You’re a product company.

If a clients software project fails, your company doesn’t fail. If your a product company, and your product fails, your company fails. Huge difference.

Products also have the nice ability to sometimes make passive income. That means, while you sleep they make money. Some products require companies around them to build and support them, hence the current state of Silicon Valley. The amount of effort gets less every day, as does the cost of entry.

While there is more risk, having hundreds or even thousands of people pay $10/a month for your software is a lot more appealing then hustling multiple times a year to get a client to pay for the next few months. You can flip that around, too; a few dozen customers paying you $250 a month.

While there are a bunch of great articles and books on the subject, here’s the general idea:

1. Find a problem you think you can solve with software, and if it has competition, you think you can solve it better.
2. Build a prototype in less than a week.
3. Show it a potential customer and ask them if they’d pay for it.
4. Iterate weekly/bi-weekly until they do.
5. Get more customers.

Eventually you’ll reach what Paul Graham calls Ramen Profitable. It’s a way longer ramp up time, but has a potentially greater reward. It’s also assumed you’ll fail multiple times getting there which is hard for some people to swallow in a culture that’s all about winning and “the thought of losing… is HATEFUL to Americans.” — Patton.

If you ain’t failin’, you ain’t trying hard enough, sucka!

Dangers

There are a few potential dangers you need to be aware of going the above route.

First, you need to be flexible. Are you willing to accept work at or below $120/hr? If not, can you survive on savings until you find a client? The “I deserve” or entitlement mentality is dangerous. You don’t get what you deserve, you get what you negotiate. Some companies just don’t have that kind of money.

Second, it’s hard to go back to salaried positions once you’ve gone the Firm or Freelance route. The startup route is a lot easier, and the freelance somewhat easier. Often, if the company doesn’t know your brand, it doesn’t matter. You need to be careful how you pitch your “long term consulting” or “short term freelance”.

If you ran a company, you suddenly know a lot about the game, and companies get nervous when you want to quit that and go back to W2. Sometimes that’s uber valuable to them, but as a front line software developer, it’s sometimes hard for them to see that value. Others get nervous if they see a lot of short term gigs on your LinkedIn and/or resume and you suddenly apply for a long term position. If you talk to a business owner, it’s an easier conversation; they get it. Other times this can backfire; “If you’re running a business, why come work for me? What about your competing interests?”. If you talk to an HR, manager, or senior developer, they might not understand at all. Remember, the truth of your history is written by you; modify your social media and resume to match the position you’re going for.

Also, be aware it’s a new world. Going back to the old one can be hard. You can sometimes forget what it’s like to NOT speak about business and software in the same sentence… vs. just software. This is reflected in your resume, social media, and conversations with people.

Conclusions

If you want to break the $100/hr barrier, getting a salaried position, being a single freelancer, or wasting your time with recruiters won’t get you there. There are a few exceptions with freelancing, especially on the back-end. Many Ruby/Python/Scala etc. guys can charge $200/hr to $300/hr in the Bay Area. The key, though, isn’t getting a project for that much money, it’s getting a career where that’s the norm.

Whether building a strongly recognizable personal brand, scoring a large client which is a catalyst for creation and growth, finding a closer, forming your own firm, or even creating a product that itself validates the company around are just 5 ways in which you can break that barrier. I’m sure there are more.

Even not being successful, you still learn a ton, and if you’re a long time software developer, constantly learning and re-learning is probably something you already do anyway. So it’s ok to try some of the things above and fail, especially the last one. I’ve had a lot of failures. I even once refused work for 6 months in an attempt to learn how to double my rate. I failed but I learned a ton.

I also posted a companion video to this post, embedded below, that you can watch.

Introduction

The JavaScript web development community has a significant amount of application development frameworks, specifically around creating scalable applications using MVC/MVP/MVVM/MVPM/MVPV/MVSC, etc. Flash & Flex have the same, although not as many, nor as many library dependencies.

Backbone in particular has some longevity amongst the many frameworks available and has been used in some high profile applications (notably Pivotal Tracker). Since I’ve recently been fixing a web application project with a varied history, I’m diving head first into Backbone, and taking a break from diving into Angular.

In this article, I’ll go over what Backbone is, how its features compare to frameworks Flash & Flex Developers are used to, and some implementation details that will help you compare how JavaScript MVC apps compare to Flash and Flex ones.

Also, while I’ll have a lot of future articles on web development, rather than reading 20 billion novels, if you’re just looking to get immersed in as much web dev as possible to get a 30,000ft view of where things stand, this is a better post to read even if dated. I’m still learning the web stack, so I’ll update this post with any inaccuracies pointed out. Just comment or send me an email/tweet.

What Is Backbone?

Backbone is basically an MVC framework for writing JavaScript web applications. If you’ve ever messed with Cairngorm, PureMVC, Robotlegs, Swiz, or Parsley, you’ll instantly see a lot you recognize. Like a lot of JavaScript MVC frameworks, it is a collection of JavaScript libraries.

Also, it like others has the intentional ability to easily integrate with other toolsets and libraries. Examples include UI component frameworks like jQuery or Sencha Touch, HTML template engines like Handlebars, and it assumes you’ll either hand code your CSS or use something like SASS/LESS if you need to make your CSS more manageable on larger projects.

While Cairngorm and PureMVC were self contained, Robotlegs depended on SwiftSuspenders for the Dependency Injection functionality… however it is known that you just used Robotlegs without really caring, nor knowing buried in the robotlegs.swc file, there was a Swift Suspenders dependency.

Dependency management is tons harder in JavaScript, but I’ll briefly cover that plus more on Underscore in a bit. The same holds true for Backbone. It utilizes a library called Underscore to basically fix JavaScript to a certain standard of usability, add many OOP and Array features functional server-side devs love, and to abstract away the browser incompatibilities for the 1st and 2nd.

It also utilizes Douglas Crockford’s json.js, the man behind the book “JavaScript: The Good Parts” and a promoter of using closure based OOP vs. Object.prototype. His json library does the same, allowing the JSON format to work seamlessly in JavaScript regardless of browser; for older browsers it parses, for newer ones it uses the built in parser. You should be using json2 since it doesn’t mess with the prototype (omg, purism). You’ll notice, too, just about every article on JavaScript nowadays assumes this part is “handled”; you’ll see a magic “JSON” in the code. It’s implied it comes form this library, is native, or both. In a development environment, you just include all the libraries mentioned at the bottom if your index.html body tag (so all the GUI and CSS dependencies load first) in script tags.

Why Backbone?

If you’re a Flex Developer, you already know why: it’s an MVC framework. Sold. Feel free to skip this section or just skim 4 & 5.

I was thinking of deleting this section, but then read Smashing Magazine’s Journey Through The JavaScript MVC Jungle, and decided more details were needed for those who are questioning why they even need an MVC framework.

For those that don’t, MVC frameworks help separate out your visual, data, application, and business logic in distinct areas in your code. This allows you to have multiple developers work on the code, the code to more easily scale for larger applications, and to make it more testable. Putting logic in your DOM, aka your JavaScript mashed into your HTML and CSS on a “page”, makes things unmaintable, hard to find bugs, and unreadable. …for larger applications. Just like Flash, there is fine line that’s blurred as all get out. Whether you use an MVC framework or not depends on:

1. your business
2. your team
3. size of your application
4. multi-device
5. server-side vs. client side
6. website vs. app

Your Business

For those who have non-negotiable deadlines, any OOP, design patterns, and frameworks usually get in the way. Paying off technical debt never happens much, so spit and duct tape applications are fine. On the other hand if your business is creating code that will have to live for years and/or is a product for consumers or other businesses, using OOP, design patterns, and a framework is a good idea. Usually. Sometimes you need to just launch and get funding. Also, there is always the risk that a “Prototype” suddenly becomes “The Product”. Starting out with even a few parts in a framework will prevent a lot of pain down the line.

Your Team

If you’re a 1 woman show, and management has done the estimates to show that all design, development, testing, and bug fixing can be done just by you, great; architect as you see fit.

However, if you’re on a team environment because your project is of the size that can in fact utilize multiple designers and developers to create value in tandem, an MVC framework can allow your team to work with each other, in different files, being productive using modern source control systems. Additionally, Backbone like many frameworks has enough industry traction that documentation & answers to common questions/problems are all online. This makes hiring & training both new & existing team resources much cheaper and faster. The code has SOME semblance of structure, even if the original developer(s) didn’t follow Backbone conventions to a T.

Application Size/Scope

If you’re application is just a few screens/pages/widgets, use jQuery, shove you’re services and data into a dozen files and call it a day. You could still even write it where your service and application logic layer was testable to get unit tests, all without the need of a framework. I’ve seen a lot of Flash Developers take to this route just fine over the past year for both desktop and mobile. Some even threw everything on the sever and just did HTML/CSS on the client.

If, however, you’re creating a large application with many screens, a lot of client side logic/data caching, and maybe even iterating on a design, then separating things out cleanly via Backbone, or some other framework, is the way to go. Again, this assumes you’re not using the server for much beyond services. This’ll ensure when you create new functionality, you know where it goes. When revisiting already created functionality, you know where to look for what.

Multi Device

One thing that isn’t mentioned much is MVC frameworks can help with mutli-device strategies. People attribute that to HTML5 and make the assumption you’re coding things in a DRY manner and they can be easily reused. Taking your application logic, data/validation, and services OUT of the presentation layer (what the user see’s) allows you to test & scale each in isolation.

What usually doesn’t change is you need all/most/some of the same exact code on a phone as you do the tablet and desktop. While the GUI can change, whether a different HTML and CSS template used for different screen sizes, your core application & business logic does not. Backbone especially with it’s use of the PassiveView pattern makes it (mostly) easy to change the underlying html or templates you’re using. Even if that code isn’t DRY because of a hard deadline or a challenging design, all your models and services stay the same helping to somewhat mitigate the problem. There are a variety of responsive design techniques you can use to not really change anything.

Server-Side vs. Client Side

This one is easy. If you’re development shop primarily does their websites and/or applications server-side, there are a lot of wonderful frameworks out there that are already “Backbone on the Server” as it were. Additionally, they have the library support just like JavaScript does to fill in the gaps. These include Ruby on Rails, Django for Python, Java’s Play Framework or GWT, and good ole’ .NET.

In these instances, 90% of the code and design is done on the server, and a tincy bit of client side code or design is done. In these cases, you don’t need Backbone because you’re already doing MVC on the server and treating the entire client as the View. The criticism by some is that, even with delivery or raw HTML/CSS/JS that’s minified and gzipped by the server, you still utilize a lot more bandwidth and http requests on the client. This is not what you want to be doing with mobile. There are a variety of frameworks and design strategies to mitigate this, though.

If you don’t do server-side development, then you need something. There is a reason Rails, Django, Play, .NET, GTW, etc. all utilize some form of MVC.

Website vs. Application

Finally, what exactly are you building? To me, even though I’m still learning JavaScript/HTML/CSS stack, the delineation is pretty clear to me. Why anyone can argue, and be correct, that the same Backbone application with large amount of JavaScript and a complicated build process could be made using simple HTML/CSS, and a tincy bit of jQuery… I just use the first 5 items to make the decision.

If you have a bunch of web designers on your team, they’re more apt to inherit something and be successful maintaing it if it’s in a context they’re used to. Conversely, if you have a lot of software client developers, they’ll be more apt to maintain something done primarily in code.

If they’re server-side devs, they’ll typically have larger expectations of a technology stack even compared to client side developers… hence rather developing on the server instead.

Bottom line, if you’re just building a website with some progressively enhanced interactivity, you don’t need a framework. If you’re doing a lot of service calls, have “state” on the client, and have a lot of user interaction & things they need to input, you’re probably building an application and probably should use a framework.

Events

Many frameworks have a messaging system that’s independent of the stack it’s on. This is also sometimes called the “event bus”. Cairngorm has CairngormEventDispatcher on top of Flash Player Events. PureMVC has Notifications. Robotlegs injects a special base class with a unique EventDispatcher instance. Backbone, much like ActionScript 2’s EventDispatcher or ASBroadcaster in ActionScript 1, uses the Decorator pattern to add event listening and broadcasting to any JavaScript object. It relies on the Underscore library to do this. Underscore does in fact use the _ as it’s class name. Yes, there are basic ECMA level event dispatching capabilities in JavaScript, but they don’t have good cross browser support, and are harder to modify. AS1:

var obj = {};
var listener = {};
ASBroadcaster.initialize(obj);
obj.addEventListener(listener);
listener.alert = function()
{
	trace("Alert!");	
};
obj.broadcastMessage("alert", "Sup.");

AS2:

import mx.events.EventDispatcher;
import mx.utils.Delegate;
var obj = {};
var listener = {};
EventDispatcher.initialize(obj);
obj.addEventListener("alert", Delegate.create(listener, onAlert));
listener.onAlert = function(event)
{
	trace("Alert!");	
};
obj.dispatchEvent({type:"alert", target: obj});

AS3:

import flash.events.EventDispatcher;
import flash.events.Event;

var dispatcher:EventDispatcher = new EventDispatcher();
var listener:Object = {};
listener.alert = function(event:Event):void
{
	trace("Alert!");	
};
listener.addEventListener("alert", listener.alert);
dispatcher.dispatchEvent(new Event("alert"));

Backbone via Underscore:

var object = {};

_.extend(object, Backbone.Events);

object.on("alert", function(msg) {
  alert("Triggered " + msg);
});

object.trigger("alert", "an event");

Notice this uses a callback as an anonymous function. If you’d prefer a proper function attached to a class or a closure or some other object, you can do that too.

In ActionScript 3, if your events grow, you start utilizing packages to organize Event classes to their domain of interest.

In Backbone, they want you to utilize namespaces (a colon to separate noun:verb) to delineate them.

myCollection.trigger("selection:changed", myIndex);
socketWatcher.trigger("user:join", userModel);

While JavaScript doesn’t support constants, many IDE’s can infer them through code hinting / intellisense like IntelliJ/Webstorm, Sublime, and Aptana. Although magic strings don’t go away in JavaScript, this is how you can mitigate the growth, make them easier to test, and prevent misspelling bugs.

You can also trigger many events in 1 call by adding a space.

book.on("change:title change:author", someCallbackFunction);

Since JavaScript has the same stupid scope challenges that ActionScript 1/pre-Delegate, you can optionally provide a scope (called a context) as the 3rd parameter.

model.on('change', this.render, this)

Unlike ActionScript, the Underscore event system allows you to hear about all events via “all” which is basically a reserved word/event name.

var logger = {};
logger.on("all", function(eventName)
{
	console.log("Event: " + eventName);
});

Notice here I’m using console which is basically JavaScript’s trace. This breaks IE. Don’t do it. Use log4javascript unless you’re a WebKit Only Kid.

To remove events, in Flash you just use removeEventListener:

myListener.removeEventListener("alert", onAlert);

Using Underscore, they have a lot more options here.

// Removes just the `onChange` callback.
object.off("change", onChange);

// Removes all "change" callbacks.
object.off("change");

// Removes the `onChange` callback for all events.
object.off(null, onChange);

// Removes all callbacks for `context` for all events.
object.off(null, null, context);

// Removes all callbacks on `object`.
object.off();

Finally, dispatchEvent is to trigger. ActionScript:

object.dispatchEvent(new Event("myEvent"));

Underscore:

object.trigger("myEvent", arg1, arg2, etc);

You can pass as many arguments as you want, and they’ll get passed in.

Take a hint from a guy who survived AS1 and AS2: pass an object as the first and only parameters; it’ll make your API more flexible and is an easier convention to follow vs. being forced to use event order from 2 disparate places in code.

Let’s review.

ActionScript: EventDispatcher
Backbone: Underscore.js

ActionScript: addEventListener
Backbone: on

ActionScript: removeEventListener
Backbone: off

ActionScript: dispatchEvent
Backbone: trigger

ActionScript: MyClass extends EventDispatcher
Backbone: _.extend(MyClass, Backbone.Events);

Backbone.Model

A Backbone Model is basically a PureMVC Proxy. That is, a Model that handles both access control to your data, change events via the Observer pattern, and it wraps a service layer to some web service that the Model’s data maps to on the back-end.

In Cairngorm it’d be basically the same thing. In Robotlegs it’d be a Model that has a Service injected into it. In Swiz, Parsley, and even in Robotlegs, the Model doesn’t usually contain validation, nor a service(s) with error handling. Sencha’s ExtJS and Touch do this as well with their Models, and it’s a common theme you’ll see with a lot of JavaScript frameworks. Doesn’t make it right, just something you’ll have to wrap your head around. Think a Rails ActiveRecord on the client with the ability to be mapped to various services; like localStorage vs. an actual Ajax call to some web service.

Additionally, it’s implied they are a single entity. Usually the whole point of Models or ValueObjects in ActionScript was to create a combination of data from both what the middle tier provided, but also things the client needed as well. There wasn’t always such a tight coupling between a database table and the Model you’re viewing. This is how Backbone Model’s are viewed.

Assuming you’re creating a framework-less Model in ActionScript, you’d go:

package
{
	import flash.events.EventDispatcher;

	class Person extends EventDispatcher
	{
		private var _firstName:String = "Jesse"

		public function get firstName():String
		{
			reutrn _firstName;
		}

		public function set firstName(value:String):void
		{
			if(value !== _firstName)
			{
				_firstName = value;
				dispatchEvent(new Event("firstNameChanged"));
			}
		}

		function Person()
		{
			super();
		}
	}
}

If you’re using Flex:

package
{
	import flash.events.EventDispatcher;

	class Person extends EventDispatcher
	{
		[Bindable]
		public var firstName:String = "Jesse";

		function Person()
		{
			super();
		}
	}
}

Or PureMVC:

package
{
	import flash.events.EventDispatcher;

	class PersonProxy extends Proxy
	{

		public static const NAME:String = "Person";

		private var _firstName:String = "Jesse";

		public function get firstName():String
		{
			return _firstName;
		}

		public function set firstName(value:String):void
		{
			if(value !== _firstName)
			{
				_firstName = value;
				sendNotification("firstNameChanged", _firstName);
			}
		}

		function Person()
		{
			super(NAME);
		}
	}
}

In Backbone it’d be:

Person = Backbone.Model.extend({

	firstName: "Jesse"
});

Notice how you’re “extending” a Backbone.Model. Classes & inheritance in JavaScript are a rabbit hole (all the things ActionScript 1 fixed in ECMA are still not fixed in JavaScript… not even in Chrome nightly builds), so for now let’s just pretend it’s what you think it is.

For working with Backbone Model’s, you use the get and set function convention. Sencha’s ExtJS and Touch do this as well. Meaning, you do not set things like this:

// Wrong
var person = new Person;
person.firstName = "Cow";

Instead, you set it:

// Correct
var person = new Person;
person.set("firstName", "Cow");
// or object syntax
person.set({"firstName": "Cow"});

The set method will trigger a “change” event automatically dispatched (triggered) from your Model. If you pass a

{silent: true}

as the 2nd parameter, it won’t trigger the event.

These events are automatically name spaced to the properties that changed. For example, in Flex, the convention was “propertyName” + “Changed”, like so:

[Bindable(event="firstNameChanged")]
public var firstName:String = "Jesse";

In Backbone, while the change will fire for anything, if you’re just interested in a specific property, you can do the same thing:

person.on("change:firstName", function(model, firstName)
{
	log("Person's change firstName, model: ", model, ", firstName: ", firstName);
});

You do NOT have to define these yourself like you do in Flash/Flex, it’s done & triggered for you automatically based on the property names on your model.

Like Sencha’s ExtJS, the Models have a validate method that can be applied on a per property basis. If the validate method is there, it’s run. If it doesn’t validate your change, the property isn’t set, and the change event isn’t triggered, and an error event is triggered instead. You can either listen for these, or pass an error callback into the set method itself.

A Model has a lot of other methods only server-side people care about. The only ones you’ll care about are fetch, parse, toJSON, and isValid.

Now for the scary things:

• Model’s have a fetch function that creates a jQuery XMLHttpRequest instance to populate your model from some url. Basically a lighter weight HTTPService (or nice wrapper for URLRequest).
• A built in parse method which defaults to smartly reading JSON responses. In Flash/Flex, we’re used to either using a Factory class, or a ValueObject that knows how to “build itself”.
• A save method that does the same, asking jQuery to serialize and save your updated Model.

One last thing to note that is mentioned in the 2nd bullet. ALL parsing is basically done in the Model. It’s assumed your middle tier is giving you JSON (bad assumption for larger companies who are infatuated with XML. Yes, I know it’s 2012, they don’t). You have the option to override the parse function and parse it however you want, like in the case of using XML.

This, as opposed to using Factories inside of your Service class, or using self-building ValueObjects. Then placing the results in your Model… vs. your Model class doing everything.

Individually these are strange, but ok. Together, they’re whack. A mash of functionality, at least in Flex projects, I’m used to separating out… even without unit tests. You don’t have to use these functions they provide for you, but it’s very clear they did a lot of work making it easy as pie to use Backbone with someone like Ruby on Rails without the client doing a lot of work.

Either way, the jQuery ajax calls wrap HTTP requests really well, so it’s not like you can’t introspect what’s going on. Callbacks work and Safari/Chrome/Firefox have better-than-Flash/Flex networking debugging tools as well.

Backbone Collections

Some brief notes about Backbone Collections. Like Sencha’s Ext JS, Model’s have an implied one to one relationship with some back-end service that populates your Model class. Collections are basically a bunch of Models. So if you get a “list of Contacts”, in Backbone it’d be a “Collection of Models”.

Backbone uses Underscore to add 50 billion useful array methods to it so working and filtering your Model lists is easier. The “nice” feature of Collections is you can set the Model that it contains, and all our add methods will automatically convert the JSON you pass to it. :: shrugs :: I’d rather have unit tests verify these access points, or even… you know… strong typing. Still, there’s tons of value if you’re using formalized JSON; I’ll show you in a second.

Collections have a lot of the same methods as a Model for interacting with the server, parsing, etc. This is where setting the Model of the Collection handles the parsing/populating for you.

Backbone.sync = function(method, model) {
  alert(method + ": " + model.url);
};

var Accounts = new Backbone.Collection;
Accounts.url = '/accounts';

Accounts.fetch();

The fetch method is a Model & Collection method for “go get data from the server at my url”. It’s like HTTPService’s send method or URLRequest’s load. It creates a jQuery XMLHTTPRequest internally. For those interested, I believe it’s using the multiple concurrency option (as opposed to first/last which you could configure for Flex HTTPService).

Notice if the Accounts model property is “Account”, then whatever comes back from the server will automatically be parsed to an Account Model. The url is the web service URL.

Also rad is the sync method. There’s a cool infrastructure here that you can read more about on Backbone’s site. Suffice to say they’ve abstracted serialization of your Models, whether you’re saving to a database or LocaleStorage (the string key value store you get in browsers that has more space the Flash’s SharedObject). This makes caching, mocking, and testing a lot easier.

One thing I found curious is your Model’s have a validate function but Collections do not. My guess is it’s trivial to use a forEach with a validate call, so they saw no need to add. Most Flash/Flex developers don’t really write these as much as they should. You usually either let the server guys code tell your data is bad, you use unit tests, or hope strong-typing finds problems when creating ValueObjects from UI controls. Sencha follows this validate mentality as well.

Router

Web applications are unique in that they have an address. Some even have an address that represents a state they can exist in. There is often a symbiotic relationship between the URL and the application. A different URL can put the application in a different state. Conversely, the application state is reflected in the URL.

The format, however, varies. The short of it is, everyone likes slashes, but # are used for backwards compatibility for those browsers that don’t support the History API (basically IE 9 and below). Backbone’s Router abstracts this for you.

If you’ve ever utilized Gaia to build a Flash website, you’ll know exactly what to use Backbone Router for. Sort of. Instead of mapping your web site’s pages, you’re mapping both page URL’s as well as URL query parameters to run functions. Yes, you could have those functions change a page, or just draw a new one. Gaia handled all of this internally including branching, hijacking, and URL modification. Backbone Router does a lot of the same but is a little lower level so you to do a little more work.

There are basically 2 features you can utilize. The first is when you go to a different section or state in your application, you can update the URL in the web browser.

The second is when the URL changes. Whether the user modifies the URL in the url bar, they press the back or forward button, or even if the user comes to the URL via a book mark or copy pasta. All can trigger a callback function for each type of URL so your application can get itself into the proper state, get the data it needs, or whatever else to correctly represent the URL.

Notice the routes hash below:

var Workspace = Backbone.Router.extend({

  routes: {
    "help":                 "help",    // #help
    "search/:query":        "search",  // #search/kiwis
    "search/:query/p:page": "search"   // #search/kiwis/p7
  },

  help: function() {
    ...
  },

  search: function(query, page) {
    ...
  }

});

You extend the Router class, and then define the routes in the URL, and what callback function to call. While straightforward, you can use all kinds of string matching for more dynamic URL’s. Internally, those routes will call addCallback to initialize it. When you want to update the URL, just call navigate.

Using the Backbone.history class, you can monitor change events, support the back button in your app, etc.

View

A Backbone.View isn’t a View that a Flash or Flex Developer would call a View. It’s actually a Controller class on top of a Passive View that allows your GUI to have a less coupled integration into Backbone. All your HTML and CSS, whether made by hand or using a templating library like Mustache or Handlebars, has no code in it.

All the code that updates via the Models is done in the View.

All the code that listens for user gestures is done in the View.

So it’s the Controller in the Passive View pattern. Make sense?

I’ve seen 2 people utilize Robotlegs Mediators like this. One was a colleague who’d create MXML with zero ActionScript in it. Just like you do in HTML, he’d assign click handlers to MXML component id’s (or Sprite/MovieClip names) all in the Mediator. When his Model Actors would send out change events, he’d use the injected Models to update the View’s data usually with intimate knowledge of the view’s structure since it didn’t have any getter/setters, nor binding, to help with the drawing.

PureMVC could be done in the same way. There was a sect of people in the early Cairngorm days who used a ViewModel in a similar fashion.

A Backbone View was specifically created to handle HTML and CSS, and as such, has a LOT more references than just the passive view reference. Those are:

• el
• id
• className
• tagName
• attributes

Here’s a tiny Robotlegs Mediator:

package
{
public class AvatarViewMediator extends Mediator
{
	[Inject]
	public var view:AvatarView;

	[Inject]
	public var model:PersonModel;

	public override function onRegister():void
	{
		addContextListener("onPersonModelChanged", updateImage);
		addViewListener("onImageClicked", onImageClicked);
		updateImage();
	}

	private function updateImage(event:Event=null):void
	{
		view.image = model.userImageURL;
	}

	private function onImageClicked(event:MouseEvent):void
	{
		dispatch(new Event("onAvatarImageClicked"));
	}
}
}

When the ActionScript GUI class is created, it’s Mediator is created. It immediately updates the Avatar GUI with the latest user image. If the Model ever changes thereafter, the image is immediately updated. Finally if the user clicks on the image, it’ll dispatch an event on the frameworks event bus to let someone else handle it; maybe a Command, maybe another Mediator… etc.

Here’s the equivalent in JavaScript:

// make a global event bus like Robotlegs, or PureMVC's Notifications
eventBus = _.extend({}, Backbone.Events);
Backbone.Model.prototype.eventBus = Backbone.Collection.prototype.eventBus = Backbone.View.prototype.eventBus = eventBus;

var personModel = new PersonModel;

var AvatarView = Backbone.View.extend({
	id: "avatar-div",

	initialize: function()
	{
		this.model.on("change", this.render, this);
	},

	events:
	{
		"click .avatarImage":	"onImageClick"
	},

	render: function()
	{
		var imageURL = this.model.get("imageURL");
		$(this.el).html(this.template('
<img src="<%= imageURL %>" alt="" />'));
		return this;
	},

	onImageClick: function()
	{
		this.eventBus.trigger("onAvatarImageClicked");
	}
});

var aView = new AvatarView({model: personModel});

Using Underscore, we listen for change events from our Model. Also notice View’s are assumed to have 1 Model. If you’ve seen any reasonably sized Robotlegs/PureMVC app, you know this isn’t often the case, heh. It’s assumed this is not null when the View is created.

The click handler listens for a click event from our HTML div. Our render function, run when the View is shown and when our Model updates, draws itself.

Notice the id is just a string; I actually use the el, or “HTML element” to set its html. The template method is an Underscore method to do cool stuff; suffice to say it refreshes the div with a newly updated Image tag with our correct URL from the model. The purists will decry this, saying that HTML should never be put into View’s and instead you should use a template library like I mentioned above.

Ignore the return this in the render function. That’s for chaining support, a method for getting functional programmers off, making code unreadable, and helping the browser swallow exceptions.

And now for the hack. You’ll notice if I want a global event system like Robotlegs, you just create your own eventBus, and shove the mofo on Backbone’s prototype. Here’s a longer explanation if you care about why. That allows you to then send the application level event in the onImageClick callback.

One thing for those of you who remember ActionScript 2: notice the 3rd parameter of of the model.on. This ensures the callback is executed in the correct scope. It’s basically ensuring you don’t have to use Delegate.create. These are pretty hard to debug, too, since you’ll sometimes get “method is undefined” methods which aren’t true; it’s actually a null pointer exception since this refers to the function vs. the class. Just be sure to always set it.

Dependency Injection

Notice that all the dependencies, in this case the PersonModel, is already created and passed into the View’s constructor. In larger applications, this isn’t always the case, or gets unwieldy. There are various Dependency Injection frameworks out there to help with this, such as Wire.

Robotlegs handled this via Dependency Injection as well as through Command startup conventions. Basically, as your application grew, you’d offload a lot of the startup to wiring up your dependencies, or instantiating them yourself if they required something more than a “new Thing”. Things such as “MainContext” would become “StartupCommand” which then broke off into “InitializeModels”, “InitializeMediators”, which even later broke off into “InitializeProductModels”, etc. You had a refactoring path.

You’ll eventually want to do the same with Backbone as your applications grow, especially if your Collections get kind of large. The browsers have a lot better libraries & functionality to serialize & read your data back compared to Flash Player in the browser, so it’s not always a huge deal to save your data to disk. They also destroy easier too.

Here’s how you configure a Singleton OmnitureModel in Robotlegs:

// ApplicationContext.as
injector.mapSingleton(OmnitureModel);

Here’s how you do it using Wire:

// ApplicationContext.js
omniModel: {
   create: {
      module: "models/OmnitureModel'
   }
}

Wire also supports a modicum of binding expressions so if you need some extra data initialized in your created class, whether constructor arguments or not, you can do so. This is invaluable for Backbone View’s who often need at least 1 Model reference when they boot up.

Although I’m still learning DI in JavaScript, I found Wire helpful in configuring Backbone Models to work with local data sources instead hardcoded service URL’s. You just create a locale application context js file (like a new Robotlegs Context file) to configure the application to use locale data sources instead. So far I’ve been only able to get this to work in a few browsers as you’ll see below.

Local File Access

Flash was nice in that it had a localTrusted security sandbox later with a unique per system file for mms.cfg configuration to allow secure sandboxes. Browsers aren’t like this.

Firefox requires some config changed to allow this.

Safari and Chrome still want you to launch it in a certain mode.

I still haven’t figured out IE.

I’ve been using Charles for mapping to local directories on my machine. This is used to fool the browser into working, even for production URL’s, so should work in IE when I have more coffee.

John Paul suggested I use Underscore’s wrap function as another alternative which I haven’t tried yet.

Modules / Packages / Dependencies

As your application grows, you’ll quickly outgrow initializing everything in your index.html; ie you’ll start to get a lot of classes. While Backbone comes with Underscore to give you basic inheritance beyond Object.prototype, you still have no package solution like ActionScript 2/3/Java/Ruby/Python/PHP/Corona/C#… (hell, everyone but JavaScript) give you.

Additionally, you don’t have a dependency management solution; you have to manually control who’s loaded, and when. That is simply not feasible in a reasonably sized JavaScript application, even with 1 developer vs. 4.

This is where RequireJS comes in.

Considering Require has to account for how you create “classes” in a language that provides basically (lol, basic… yeah… heh… sigh… :: takes a shot ::) 3 ways to do so (Object.new, Object.prototype, and closures), various libraries that have their own dependencies, as well as how all libraries handle putting themselves on the global objects (ie window, document, etc.) differently… Require has a lot of work to do on just cleaning up the language.

ActionScript 1 solved part of this via the #initclip / #endinitclip pragmas. You’d put those at the top of your class with a number, like #initclip 3, and you could then control the load order of classes.

ActionScript 2 solved the packages part by building packages that compiled down to object dot notation, and abstracted both that as well as the #initclip stuff away from developers.

ActionScript 3 gave you namespaces with traits to speed up prototype chain lookup speed.

JavaScript has none of that.

Require tries to do all of that. And then some, such as optimization. Just read the why and you’ll get it. Backbone apps work just fine with Require, and I encourage you to do so to ensure your application can reasonably scale on a multi-person team right out of the gate.

Here’s how you use Robotlegs in a class within a package (set of nested folders):

// MainContext.as
package com.jxl.minecraftrecipes.rl
{
	import com.jxl.minecraftrecipes.rl.mediators.FavoritesRecipeViewMediator;
	import com.jxl.minecraftrecipes.rl.mediators.RecipeViewMediator;

	import flash.display.DisplayObjectContainer;

	import org.robotlegs.mvcs.Context;

	import views.FavoritesRecipeView;
	import views.RecipeView;

	public class MainContext extends Context
	{
		public function MainContext(contextView:DisplayObjectContainer=null, autoStartup:Boolean=true)
		{
			super(contextView, autoStartup);
		}

		public override function startup():void
		{
			this.injector.mapSingleton(FavoritesModel);

			mediatorMap.mapView(RecipeView, RecipeViewMediator);
			mediatorMap.mapView(FavoritesRecipeView, FavoritesRecipeViewMediator);

			super.startup();
		}
	}
}

Here’s how you do the something similiar in Require:

// config.js
(function() {
   require.config({
      baseUrl: "./js",
      optimize: "none",
      paths: {
         "../../libs",
         handlebars: "../../libs/handlebars/hbs"
      },
      packages: [
         {
            name: "underscore",
            location: "../../libs/underscore_132",
            main: "underscore",
         },
         {
            name: "backbone",
            location: "../../libs/underscore_132",
            main: "underscore",
         }
   });
}).call(this);

Basically configure the root directory (“js”), set some paths so you can use them either as additional source paths, or short cut names (like I did with handlebars), and finally determine your packages: where they are and what their names are. Keep in mind Require has a strict coding convention for what packages are.

Optimization

When you compile a Flex or ActionScript application, here’s basically what happens:

1. all MXML is converted to ActionScript
2. all ActionScript is converted to ABC byte code (small, procedural)
3. ABC is converted to MIR (a language JUST above machine code; easier to target different chipsets & optimizations in MIR)
4. some MIR is converted to native code, some is compiled natively via JIT, and some just chills out
5. all of that is compressed via gzip with additional optimizations to shrink it to a small file size (remember, it was made this way when modems ruled t3h interwebz and bandwidth was tincy and faulty)
6. images are compressed, whether using PNG or JPEG
7. audio files are compressed (ADPCM, MP3, Speex, etc)
8. fonts are converted to 1 of the 3 font engines, sometimes decreasing file size as only certain glyphs are converted to specific vector graphics)
9. any other file is embedded and gzipped
10. all this is put into a single SWF file, usually on frame 2, with a class on frame 1 to show a preloader and “new” frame 2.

Why is this good? You get an ultra compressed, self-contained, single HTTP request file with all dependencies delivered to the client in a streaming fashion. And it works. This is why we Flash Devs never got JavaScript’s eval, because our code is actually compiled. JavaScript in the browser has none of that.

• All files are un-optimized text. Seems trivial, but for large applications, this can add up. For smart phones and tablets, while sometimes fast, this costs people money.
• Since there are multiple files, this is multiple HTTP requests. These take both time to create/destroy, and elongate how long it takes for your application to start and/or transition to a new section. This is really bad on some mobile devices, not just desktop. It’s REALLY fun to use these apps on slow VPN.
• If a class isn’t loaded let and you try to use it, things break.
• Browsers love to swallow null pointer exceptions making the above really challenging to debug.
• While you could theoretically remember to load certain files in certain orders, God help you if you ever have to, heck, WANT to refactor. On a multi-person team, even with Git, you’re eff’d.

Require has a variety of optimization tools that basically combine all your files into a single JS file, strip out all whitespace, convert all your variables to 1 letter variables, amongst other things. Basically makes your code unreadable, too; obfuscation isn’t the goal here, though. There are many others too like JSMIN and Yahoo’s YUI, many of which you can use in a browser.

Conclusions

As you can see, Backbone has a lot of the core features you need to build applications in JavaScript. It has Models that follow the typical Observer pattern of holding your data and broadcasting messages for those who care to know about changes. It has View’s (which act as Robotlegs Mediators or the Controller on top of PassiveView HTML) allowing you to handle the traditional race condition of “my data is ready, but my view is not” vs “my view is ready but my data is not” by both accessing Models directly and listening for messages via Underscore’s messaging system which you can make a global event bus if you wish. Finally, it’s Router allows you to marry your application as a state machine against the browsers’ URL bar to support both deep linking, back/forward navigation, and history.

Riding on top of Underscore, it ensures you have all the basic necessities you need for making JavaScript easier to use. Although, I still think if you’re going to utilize JavaScript swapping out dynamic HTML for Views, then you really need a good templating engine such as Handlebars or Mustache.

The current pain point I’m still working on and haven’t figured out yet is unit testing Backbone models. On reasonable sized Flex projects that have issues, my first order of business is to break out the parsing logic and the service logic into separate classes so I can create them as units to be easily tested. This copious refactoring continues until “a Model” consists of a variety fo classes. Backbone puts all of them together into 1 class and with browsers having really strict local file access rules + the fact services are actually inside of it via jQuery Ajax calls, it has made it challenging to fake their service calls to fixtures/mocks… and test only 1 thing. Anyway, I’m still learning.

Hope this helps!

It’s long overdue. Flash Builder 4 is a mess, and hopefully fixing/improving the following items will bring it up to par.  If you are a product engineer, skip the intro.

Problem

Flash Builder 4 is a great leap forward from Flex Builder 3.  It’s not any large features, but rather a bunch of little, consistent things that lead to a pleasant experience.

Years of neglecting other areas, as well as blatant missing features that open source alternatives & competing IDE’s have makes me question if there is any serious money behind Flash Builder.  I know the effort and will are there; even after distancing myself from the Adobe product teams the last 3 years, when I do return via email/Twitter, they still have great attitudes, and want to continually improve their tools/runtimes.

Bottom line, I and many others are more productive using open source alternatives to Flash Builder, and usually only keep Flash Builder around for 3 key features (Library project linking, Design View, and superior MXML handling, specially with states).  There are a lot of common workflows that seem to be ignored, and even after 4 years of the community bringing them up, they still aren’t remedied.

I outline the problems below with potential solutions.  Some solutions are actually easy; you just copy open source implementations.

Call To Action

I cannot promote Flash Builder 4 to my clients, nor will I spend another dime on Flash Builder 4/5 licenses until Adobe takes Flash Builder seriously by making 5 on par with open source alternatives.  While I respect that some of the blame lies on the Eclipse foundation, Adobe clearly thinks there is value there if they base a Designer specific tool’s future, Catalyst, on top of Eclipse’s architecture.

I, and millions of others sent a message to Adobe with CS4.  We were sick and tired of incomplete features, bugs, and crashes.  Adobe then laid of 10% of their staff due to poor CS3 sales… even though 1 month prior their CEO was on stage at the Adobe MAX conference saying sales were doing well.  They did this again the following year.  You can blame it on the recession.  You can blame it on a public company doing what most do in down times; laying off staff to boost their stock value when dividends are nowhere to be seen because there is no forthcoming company revenue.

…or you can take responsibility for your bad software, and fix it.  I was a devoted customer until CS3; we fought with our wallets, and our wallets won.   Which sucks.  My career and life are based on Adobe’s product line.  When you, Adobe, suck, life sucks.  Not just for me, for the world.  You’re doing important work.

The following are problems with potential solutions.

1. Code Hints

Flash Develop, FDT, IntelliJ, and Visual Studio all give code hints for your classes, methods, and variables WHILE YOU TYPE.  No period needs to be post-reached, not keyboard command; it just shows you a drop down WHILE YOU TYPE.

Worse, if you misspell something and back up, most of the time the drop down will go away, forcing you to spend more time to get the code hint to come back up… or just say eff it and code like your in AS1 (or Python).

This should be top priority; I understand if you’re waiting on Eclipse to add this.

2. Automatic Class Importing

Flash Develop and FDT both auto-import for you while you type and hit enter.  IntelliJ gives you the option to hit Alt+Enter to import a class of your choice, or perhaps define it which is even cooler.  Know what Flash Builder does?  Doesn’t compile, and blames it on you.  Gee, thanks $500 IDE.  I paid you $500 bucks to bitch at me and not auto-import my class you know full well where it is.

My code is littered with var a:SomeClass.  If you go on a blank line, and type var a, it’s the quickest way to get the class drop down.  From there, you can hit enter which’ll auto import the class.  You then delete the line.

Half of the problem is that the drop down is just flaky; miss it, and it won’t import your class.  Just start typing in a non-start line place, and Flash Builder won’t even give you a code hint.  Import yourself.

Please do a better job of auto-importing.  Level 1 is to get what Flash Develop/FDT do, Level 2 is to match IntelliJ’s intelligent options.

3. Slow Code Hinting Response & Mispellings

Part of the problem is the code hinting is just slow.  IntelliJ, which is slower than Eclipse, still seems to consistently work.  While Flash Builder 4 has significant improvements for misspellings over Flex Builder 3, ESPECIALLY in the class creation dialogue, for the code hints, 9 times outta 10, if you mispell “Graa” instead of “Grap” for Graphics, good bye dialogue, please start again.

If you can’t increase the responsiveness, then just be more forgiving with spelling, or just fix #1, and you should be good.

4. Stop Being ActionScript Racist: ActionScript vs. Flex

You all have been doing this crap since Flash 8.  Back then, you’d show AS3 code hints for AS2; even help would show AS3 when I specifically set AS2 in the publish settings.  Back then, QA was sincerely concerned, but it still shipped.  “We don’t want you to use AS2 anyway”.

When people like Keith Peters, Steven Sacks, Grant Skinner, and Darron Schall bitch about it, and you do nothing, that’s a serious communication problem… and makes me question if the assholes who used to run Flash Media Server 1 & Flex 1 teams are now running Flash Builder team.  Aka, “Screw you, your ideas make us and our shareholders no money, please DIAF.”

When I create an ActionScript 3 project, and go to import flash.display.Graphics, but you give me a code hint spark.primitives.Graphic, I want to throw a nuke at San Fran.  It’s a waste a time, confusing, and causes compilation problems.  It also leads to subtle, yet horrible problems where Flex dependencies get leaked into potentially awesome AS3 only libraries.  as3corelib is a perfect example.  Was pimp… then someone accidentally imported mx.formatters.DateFormatter… AND YOU’RE FUCKED!

If I create an AS3 project, get your damn Flex outta my code.  I’m Jesse Warden, you know I love Flex, especially 4 now that I’ve drunken the Kool-Aid.  But when I’m coding an AS3 only AIR project for Android to help promote your technology, and your own IDE starts getting all AS3 racist on me, it makes me RAAAGGGEEE!!!

5. Linking Projects: Unit & Visual/Functional Testing

Linking projects is just garbage and does not work.  One of the greatest features you all implemented in Flex 2 was Library Projects.  Using Library projects, you can also make Design View quite useful in Flex 3.  You just build all your GUI in the Lib, and implement with application logic in your main project.  Since it’s a Library project that’s pre-compiled, all your graphics show up nicely in Design View.

…if you want to unit test or do visual tests, however, it’s a nightmare.  In this case, I have 3 options (3rd is make your own command line build script for mxmlc).

I can either integrate all my unit testing code & framework libraries into the project itself, or setup a new Flex/ActionScript project specifically for just testing the code.  If you’ve ever worked with a large team, you know that the 1st doesn’t work.  All someone has to do is get out of sync and/or break the build, and poof, productivity grinds to a halt.  Broken builds, source control/SubClipse can get out of whack, or strange conflicts can result.  Things happen, no big deal.

The big deal is you can lessen the impact by creating new projects so developers can work on their projects and do integration testing with their new code on their own terms when they are ready to lessen the impact on the team.  It’s a very simple thing to do.

The problem is, this sucks.  Linking to Library projects is magic; it’s why people still keep Flash Builder around when they primarily use FDT.  You just click the “Add Project” button for Library paths, and BOOM, you’re linked.  It automatically recompiles your SWC, and copies the fresh mofo over.  No manual refreshing, no Project Clean n’ Pray… it just works.  THIS is where I’m glad some of my $5oo bucks went.

For projects?  No such love.  I have to manually point the source to the other project’s source.  While in the same Workspace, apparently Eclipse doesn’t think that’s useful and makes me manually navigate there via Finder/Explorer.  Worse, you have to do it AGAIN for your libs folder since it’s a source path link and not a real project reference.

…and it gets worse.  Because it’s a source path to an open project, Eclipse gets confused sometimes.   You’ll run into situations where you can have to “MyCustomButton.as” files open.  Which tab is which?  Why is one “out of sync”?  How come sometimes I compile and run and the code hasn’t changed?

This is even more important for components you’re testing in AIR projects.  Most AIR projects have complicated bootstrapping, so it’s not very straightforward to just test a new AIR application (which creates yet another AIR config xml file).  It’s easier just to create a quick ActionScript/Flex project, and test the components in isolation.  Quicker to solve bugs too.

Please fix linking projects (Library projects work just fine).

6. Design View

What the hell did you do!?  This worked fine in 3.  In 4, sometimes my drops are ignored.  My pixel perfect placements take 3 drags to get right.  Sometimes it just gets locked up, and I have to manually hit the refresh button.  Based on Twitter, there are only 3 other people in the world who use Design View; the rest are crayon pushers who use Catalyst, so maybe that’s why.  Still, if you don’t want us to use it, then make it like the Behaviors Panel in Flash, and REMOVE IT.

7. Proactive Error Checking

mxmlc’s incremental compilation is rad.  I know those coming from PowerBuilder, Java, and other large Enterprise systems which have tools that are pretty smart at only re-compiling what is needed are somewhat critical of mxmlc’s speed.  Whatever, if you worked on projects in Flex Builder 2, and then did projects in Flex Builder 3, it was light years better.  If you did work in Flash IDE, then went to MTASC, then went “back” to Flex Builder 2, then 3… it was UBER-light years better.

That said, the background compilation for errors doesn’t really do much.  IntelliJ really wins here in making use of the full IDE to HELP you, vs. just inform you’re screwed, no compilation for you.  Right now, most messages in Flash Builder’s mxmlc errors are good enough, and clicking on the error to go to the line is great.

However, IntelliJ makes the word/area red, puts red tick marks on the right side to indicate where in the class the error is, and even underlines the tab’s class name itself to imply “this class has an error”.  That’s 3 visual indicators each covering a different spacial area all to be proactive to help you FIND problems.  Even cooler, IntelliJ has some helpful options to import a class you forgot, show a possible mispelling, or allow you to create a class that doesn’t exist yet.

These common problems are old.  IntelliJ has found ways to help you solve these common problems.  I fail to see why at version 4 we’re still ways away from this.  All we get a list of red dots plus reasons away from the code itself and everyone I know ignores all of them except for the 1st.  Context is key, and in-code errors plus helpful solutions would be great.

8. Copy Paste

How come I can’t copy paste from Flash Builder to Flash?  Some programs just seem to ignore the clipboard from Flash Builder.  Others on Twitter have reported the clipboard in Eclipse is reclusive for them as well.

9. Pasting Multiple Files

I have flexunit4.swc, hamcrest.swc, mockolate.swc, greensock.swc.  I copy them from my Finder.  I paste them into my libs folder inside of Flash Builder’s project panel.  Only flexunit4.swc makes it. God dammit.

Please fix this.

Conclusions

If you fix the above, you’ll start to become on par with Flash Develop/Intellij/FDT.  Once you do that, I can justify spending $500 again for an IDE.  Right now, beyond MXML handling, states preview, and consistent Library Project linking, I’m not sure why I paid for in my upgrade from 3 to 4.  Whatever I can do to NOT use Flash Builder 4, I’ll do.  Either you all were rushed, you don’t have enough money behind the project, or y’all have never used another IDE beyond Flex Builder to code ActionScript.

If you didn’t listen to anything I said, then for Flash Builder 5, please:

1. copy Flash Develop’s code hinting
2. copy FDT’s code gen
3. copy IntelliJ’s proactive error handling & auto-importing
4. copy FDT’s class re-factoring
5. fix Design View

I attended Microsoft’s MIX 2010 conference in Las Vegas the week after 360Flex.  I had previously attended I think the 2007 or 2008 one.  I had actually recorded a lot of video from the first one and trashed all of it.  The 200x one was an EXTREMELY weird conference.  It occured in the Venetian, the same hotel that Adobe’s MAX was at.  So, I had the opportunity to see the vibe differences between the 2 communities, and whoa man… what a difference.

Adobe has more chicks, more of a party vibe, and “appears” more diverse in terms of backgrounds.  In talking to some of the individuals at after parties, the majority at MIX were involved in the Microsoft technology stack in some shape or fashion whereas at Adobe, you had no clue what those people did.  There were patterns, yes, but design, back-end, Flash, Flex, Python…. all over the map.

At the 200x one, when they showed Silverlight 3 new features, I nearly lost my shit.  The audience was really excited about features that I perceived as things the Flash community had done 5 years ago.  Yet, if you looked at the audience, they were eating it up, excited, and you could tell they couldn’t wait to start coding.  After taking some time to reflect, I realized that Microsoft developers use Microsoft technologies.  They don’t “branch out” like Adobe ones do.  That’s why it’s rare as heck to see a .NET dev who uses Flash/Flex for their front-end.  Most use AJAX… generated from Microsoft tools.

This year was different.  I was armed with the understanding that Silverlight really isn’t just about competing with Flash/Flex/AIR in the video arena, but rather providing a missing piece that .NET devs didn’t have in the past.  The features added into Silverlight 1 through 4 match a lot of what us Flash/Flex Developers have.  They also validate our work. It’s also about building on Microsoft’s platform, which is great. You need a great web runtime + a phat browser + device to kick some tail. Apple does it, Google’s doing it… Adobe? Well, no device or browser, but Flash Player rocks, so….

However, no matter how on parity those features get, or even surpass, the Microsoft community clearly is missing the design aspect in terms of designers working with .NET devs.  There are some, yes, but it’s a night and day difference compared to your average Flex consulting firm, or Flash agency, or small software shop that uses Flex.  I even talked to one small .NET shop manager who hired a Flash Designer specifically to get his UX/Design help with their Silverlight/WPF endeavors.

What many predicted finally came true: Microsoft forewent fighting Adobe on the design front, and embraced it.  It’s actually scary vs. cool.  I mean, it’s cool, but damn they did it well.  I haven’t used the tools in production, thus this entire paragraph is suspect, but wow.  They are now supporting PSD (Photoshop) and AI (Illustrator) native import as well as FXG.  Holy.  Shit.  I was on my 2nd cup of coffee, and I still did a triple take when Scott Guthrie mentioned “So, we’re going to import some FXG…”.  Say what?  Where’s Design!?

“Designers don’t use Design, they use Photoshop & Illustrator.”

said Mike Downey when I confronted him about it.  His tone was very matter of fact, confident… almost like, “Yeah man… exactly”.  What that means, though, is that they are on the RIGHT path.  Very cool stuff to embrace the design tools we all use.  Also lowers the barrier of entry for the design agencies to work with these Microsoft shops as partners.  Wow.

Yet again, it was great to see Sketchflow in action.  Rapid prototyping is HUGE in helping sales snag gigs, and now that the .NET world has a way to do this WITH valid design tools, man.

The common theme of the conference was “mobile, mobile, mobile”.  They were pushing their Windows Mobile 7, or whatever the heck it’s called, HARD.  I body checked ’em on the 3 buttons, and they had some valid use cases.  Everyone codes a back button in iPhone apps… why not remove that step and put it natively on the phone?  Also, making search a first class citizen.  Well… can’t argue with that.

Like I drunkenly yelled at Jens, this was the most amazing keynote I’ve seen in terms of flow and momentum.  Microsoft this year clearly had it down pat.  They had a consistent message, it was effectively communicated, and it inspired the audience into action.  Well… mostly.  While the developer story was picturesque with all the tools working together with a device & marketplace just waiting on you to start coding, the phone doesn’t exist yet.  iPhone does.  When it arrives, though, holy fish.  I believe Adobe can definately have just as a compelling story… but there was just something really professional, confident, and effective at this MIX keynote.  Maybe it was the speakers’ experience level.  Maybe it was good rehearsal.  Maybe it was good content.  Every speaker was certainly very positive and didn’t come across as better-than-thou like in times past.  Maybe it was all it.  Bottom line, it was great, and set a high bar.

….but like I said, the audience is just not a Adobe audience.  If it was, it would of been a lot louder, with random screams and yells, perhaps some heckling.  .NET devs need more Redbull… that’s all I can say.  Maybe some Picasso too.  I don’t know.  Maybe that’s why all the Flex & Flash devs were there. *ahem*

I hopped around sessions to “see what people were working on”.  They were doing the same things we’re doing. CMS systems that have rich front-ends to manage & deploy media.  Video players.  Mobile development for phones that don’t exist (see what I did thar?).  Dealing with scaleable client-side software via modules.  Bottom line, they are a lot like us, doing very similar work.  Sadly, most of the Silverlight specific stuff is still funded-by-Microsoft vs. a client hiring someone/some firm/company.  While the technology seems to be ready, the market isn’t.

And that leads me to my conclusion.  Once they get to 60%, we’re in trouble.  Not big trouble, but we WILL start losing work.  At that point, you have 2 choices.  You can take the Cynergy approach of a few years ago, and go, “Dude, we do both ’cause they both rock!”, or you can just deal with the reduced amount of gigs.  I don’t know to what degree this will affect the Flash/Flex world, but I know a lot of the big clients I’ve had in the past 2 years will no longer exist… unless I code Silverlight.  I, like others, still get a lot of work, so it’s not like we’ll just become unemployed, not in the least.  It’s just that the “MLB’s” and the “Olympics” style gigs will start to flow towards the Microsoft realm vs. the Flash realm.  And no, just because Flash has a higher install base won’t matter.  I can’t compete with free, regardless if my plugin of choice is at 99% and theirs is at 60%.  That said, Java/Python/Ruby etc. still exist in large quantities.  They target specific markets & verticals.  A lot of those is where Flash & Flex still shine, and will continue to do so.  Not everyone on the planet uses Microsoft technology stacks.

ESPECIALLY in the consumer sphere.

That’s what was interesting about the way Microsoft pitched their phone.  To consumers.  They hired all the right people, said all the right things, integrated all the right tools.  While I’m sure the manufacturers will make pimp devices, it’s challenging not to be cynical about Operators.  I guess if Apple can do it with glib, perhaps Microsoft can do it with dough?

Finally, Microsoft is definitely hiring the right people.  They are positioning key individuals in certain parts of the company, removing the old guard who just don’t get the web, nor younger consumers.

Will I be doing anything different after my 2nd MIX?  No.  Yes, I’ll be keeping in touch with my new found Microsoft friends… but until the Silverlight work flows to me vs. me having to form Microsoft consulting/partner relationships, nothing changes in my world.  It’s all about the money.  If people pay, I’ll do it.  Right now, Microsoft pays.  I don’t mind working as a partner for Microsoft, but right now the world knows me as a Flash & Flex Dev who likes to kick ass with Flash Player, not Silverlight.  It’s up to the greenbacks flow to change that. I know it comes off as reactive, but the Microsoft market is large enough that if I did dive in, I’d have zero problem finding clients even if am “late to the game”.

Oh yeah, and lastly, all the “free” software Microsoft is releasing to get you on board is a smart f’ing move.  And Visual Studio still looks awesome… so does C#.  Maybe I’ll go learn Unity this weekend to get taste without having to dust off my PC or install VMWare or whatever it’s called.  Anything I can do to avoid Objective C….

Anyway, thanks a ton to Microsoft for inviting me, I really appreciate it and all the events, they were fun, and I love meeting new people.  It was the best MIX yet, I learned a lot, and I look forward to speaking at the next one!

I attended and spoke at the 360 Flex conference in San Jose this year. Before the high fades away, I wanted to post what I learned last week for a few reasons. First, to share with others. Second, to share for those who didn’t attend, but might if they feel they’d gain something from it. Third, a growing number of Flex devs, albeit really small, feel they don’t gain much from conferences. I wanted to show a potential counterpoint to this in hopes it’ll convert them back.

360 Flex was in San Jose, California this year, so it’s a long hike. That said, people from all over the USA and world converged to meet & greet. 360 Flex is THE premiere Flex conference. As a speaker, it’s always been the place, next to Boston, where I KNOW people in the audience will get what I’m talking about. As I’ve progressed in my career, I’ve struggled to present topics that weren’t too advanced for the general Flex community, yet would interest those who are advanced as well. Her majesty constantly reminds me that the things I’ve spoke about 2 years are still very relevant to Flex & Flash devs today, and I should find some way to get passionate enough about those topics so I can speak on them. Regardless, I don’t have that problem in San Jose and Boston, so it was a nice reprieve.

This attitude is based on my perceptions of the body language of the audience as well as twitter & in person responses afterwards (or lack thereof). It’s not 100% accurate, but I can usually read an audience, knowing if they are getting it, and recognizing what things in my talks need to change material wise. I also find that I speak better when I’m jet lagged and/or hung over. This mellows my normal spazz-tastic nature, and helps me find a really good pace, especially if her majesty reminds me to have fun before hand. Timing these sorts of things is hard, hehe.

I’m usually just so excited to speak about something I love that I forget the basic tenets of giving speeches, and that is “effective pausing”, pace, and stopping to re-assess the audience’ engagement. That’s one of the reasons I continue to speak. I feel like I rock at Flex, but still have a long way to go at speaking. Regardless, what “job” allows you to spread knowledge, gives you the opportunity to have dialogues with geniuses, and act like a crackhead in front of an audience causing them to lolcano?

I may not come away from conferences & user groups with gallons of insight like I did in the past, but I’ve found other angles of knowledge, and EVERYTHING is right with making new friends, and re-connecting in person with existing ones. I love this shit.

Goal: Flex 4 and Catalyst Workflows, & Meeting Different, New People

My goals for Flex/Flash specific conferences nowadays are to hit the sessions that are gaping holes in my knowledge.  I’m probably the last Flex dev on the planet who doesn’t use Flex 4.  This is a combination of my consulting work on existing Flex 3 projects, tight deadlines, and the need for dependability.  Thus, anything Flex 4 specific I’m interested in, not really from the technical side (Adobe’s got great docs), but more from piercing the marketing bs.  Asking top tier to regular devs “how do you REALLY work with the tools?” and striking up a dialogue.

Another passion of mine is people.  I love people.  I love working at Starbucks, and even more so, Manhattan, because I’m surrounded by people. By energy.  By life.  It’s an exciting feeling, and helps motivate to create cool shiz.  I’m fascinated by what makes people tick.  I like to see how some people have certain causes that lead them to certain effects.  If you challenge some commonly held beliefs, you can really get a good dialogue going with developers.  If you make vaporous statements about commonly held agreements, you’ll nodding confirmations, but not much more.  From groups to individuals, you can cause a lot of interesting things to happen. IF you know what buttons to push.

I’m not just fascinated by crowds and groups, but by individuals.  If you’ve ever been to a Microsoft conference, one thing that differentiates the Flash/Flex world from them is our diversity.  We don’t have every application angle handled by Adobe, thus we must reach out to others for help in certain areas.  While we do technically have a client side and middle tier, we don’t have a database solution.  We must use MySQL, SQL Server, Oracle, etc.  This requires us to integrate with other communities.  In turn, they are exposed to us.  We’re different, from different backgrounds.  Some of the culture these clashes are bad, most are good.

Because our tech works with a common goal, we have a “managed diversity”.   Studies have proven that companies who have diversity that’s managed are more successful than those who don’t have diversity.  In turn, those who are so diverse, but aren’t managed are worse.  Flash hitting Rails, Flex hitting Django, AIR conjoining with C++.  Design agency punks mingling with executive, khaki wearing Enterprise Java J2EE devs.  It’s wonderful, crazy.

In short, the opportunity at these conferences, both large and small, to meet someone totally not like me is high.  Yes, we have a common thread; we love t3h SWF.  Yet we all have different backgrounds, different goals, desires… and once you dig into someone’s background, and get them talkin, I eat that shit up.  I love hearing about where people come from, how they arrived where they are, and why they decided to come this way, if at all.

It’s said that the best things about tech conferences are the discussions between/after sessions. For me, it IS the conference.  I’ve always tried to surround myself with people that are better than me.  They rise you up.  Debating with computer scientists, and genius artists… how can you NOT walk away a better person?

What Did I Learn?

A ton.

1. A lot of developers don’t mind the lack of career path.  You rise to architect/consultant level, and instead of hitting the glass ceiling and breaking into management, many just saturate Flex/Flash avenues as far as they can, or go learn another technology and do the whole thing over… only a lot quicker than it took them the first time.
2. A lot of developers read technical manuals & programming books vs. marketing & sales ones.  There are exceptions, but most drink from the tech knowledge fountain and can’t get enough.  I feel like I have a responsibility to help fill the gaps to help them so they either (A) don’t have to worry about this gap or (B) have a desire to get out of their comfort zone.
3. Adobe doesn’t like me much anymore.  There are some great people there whom I still interact with, but it’s been pretty clear over the past 3 years that as I’ve moved into a more architect/sales role with my professional consulting, I’ve had zero time to evangelize software I don’t even fully believe in.  You can get away with not filing bugs for Adobe as long as you evangelize and help the community, but even that value perception has fallen out of favor apparently.  Given the fact that I’m focused on higher level problems like software workflows, marketing, sales, and products, this is time NOT spent talking about how dope Flex 4 states are, or how wonderful Flash Builder 4 handles certain coding challenges.  I’m not alone in this career transition, it just sucks that I can’t really devote the time I need to get respected again.  Additionally, Adobe’s focus, at least in the Flash Player sphere, has been exposing boilerplate API’s and functionality to allow them + 3rd parties to build powerful extensions on top fo the Flash Player.  I totally agree with the approach, but I’m not technically saavy enough to really help them in this area.  I know what my clients need and want, but translating that to a use case “please expose sound data via sound sample data so I can build Hobnox” is just not a jump I can technically make. To be fair, only 10% of it is CS3/CS4 related.  I screamed and bitched at Macromedia and Adobe for years, and saw the fruits of my suggestions along with the communities become a reality.  While some of their software is old, and it’s challenging for them to add pimp, new revenue generating features without alienating old markets or breaking old workflows, they still have people with mad skillz working for them, with a long successful track record (except for Flash CS3 and CS4; even though Fireworks CS3/4 crashes, we ALL love that prog).  I’m still in good with the Flash Media team, though, and that’s been helpful since I’ve been 100% focused on video for the past 3 years.  They are a pretty thick skinned bunch, so maybe that’s why… Anyway, given the amount of responsibility I have with running my own consulting firm + having 2 kids, I just don’t see how I can return to the days of old where I’d take 4 hours one night, create some kick ass shit, blog it, and thank Macromedia/Adobe for the cool toys…. and then suggest new things.  Maybe someday.
4. The latest fad with our industry is Dependency Injection, and Yakov Fain won’t tell me what the next fad will be… if you figure that out, you’ll be the shiz.  Historically this has been what another programming community has had for years, and the Flash/Flex devs just suddenly get and freak out.  While cool, it was apparently obvious to others.
5. If a mentoring program existed for the Flex community whose sole goal was to make 1 product/project complete and “live” from 1 of the 30 “side projects” each Flash/Flex dev has on their computer, the world would be an AMAZINGLY better place.  All these 20% to 80% done apps/libraries/products that these developers have, some are really damn cool and NEED TO BE RELEASED.  Those like me who know this have a moral responsibility to help/empower these individuals to “do the last 10%”.  I don’t know how to do that, but it needs to be done somehow.
6. People who create kick ass open source projects don’t get enough feedback.  The only solution I can think of is people need more evangelists to not only promote their projects if they aren’t capable of being evangelists themselves, but also utilizing those envangelists to forcibly extract/publicly recognize via Twitter & Blog streams successful projects that have utilized their software.  Meaning, like Joel Hooks will re-tweet Robotlegs endeavors done by the community to help give it a wider recognition.  Additionally, he’ll interact with those who’ve done projects, and take “back to the Robotlegs community” the problems/concerns/commendations those who use the software.  Steven Sacks getting public, community member quotes on the Gaia site is another example.  Projects like PyAMF and Hamcrest need this role, and I’m not really sure how to help them recruit for it beyond citing simple tasks they can do to help themselves.
7. Dan Florio was right in ignoring my advice.  I told him not to do RunPee.com.  I didn’t think it’d be profitable.  I was wrong.
8. A lot of people in our industry are happy to make bling working on consistent Flex work with a consulting firm.  I am not like this.
9. There’s a growing desire for many developers to learn & teach UX concepts.  This is a direct result from the lack of qualified UX talent.  Since this discipline most affects our client’s bottom line as well as project costs & risk… we don’t have time to wait for UX people to just magically popup out of colleges.
10. I’ve gone 10 years without having a contract of my own, and signing any contract a client/company/consulting firm throws at me.  As long as the correct rate/price is on there, I didn’t care what the rest said.  After seeing Ellie Khabazian’s presentation, while I won’t create a contract of my own (since the clients work with would never sign it) I will most definitely ALWAYS be reading contracts I sign, and adjusting wording as necessary.  I’m one lucky mofo.
11. There seems to be more animosity towards Silverlight, and more fear towards HTML5.  Those in the know don’t care about HTML5, and don’t seem to fear Silverlight.
12. A lot of the old Flash devs don’t seem to see a lot of rapid innovation in produced content, whereas the new devs seem to have that feeling of daily finding wonder that the old ones had back in 2002.
13. Twitter makes blogging hard.  We all already knew this, I just got more corroboration.
14. Writing large scale examples for frameworks is a constant problem in “finding the time”.
15. I have a lot to learn about sales.
16. Getting developers on camera is freaking hard.  For a podcast?  Simple.
17. Getting Kevin Suttle to break character is freaking hard.

Hope to see y’all another conference soon!  Thanks John & Tom.