Where UX Meets Code: Get Started On Web & Mobile Development

frances-fridays

The front-end web and mobile development is where UX meets code.

By Frances Advincula (Software Engineer, Accenture)

When I was young, I wanted to be a fashion designer. But then I grew up and realized I actually have to be able to eat food and pay rent, so I became a software engineer instead.

Fast forward a few years. I’m not really sure what happened, but it seems like all of a sudden, I became super interested in the intersection of user experience and programming.

I admit, I was always a bit scared to be a “designer” – Photoshop makes me nervous! But that little spot where UX meets code? Yeah, right now, that’s my heaven.

In case you’re interested in it too, here’s a roundup of things I’ve been playing with.

On Designing Pretty Things

This great post in Quora lists must-read sites and books, from the classic Don’t Make Me Think to a myriad of other books.

I’m currently reading Designing the Obvious, and it’s a great introduction to the fundamentals of UX. Here’s Joel Spolsky’s book which he posted on his blog, which of course, has a great list of articles for software designers.

Besides Smashing Magazine, here’s what I’ve been sponging on:

On Building the Pretty Things

Sencha ExtJs is a JavaScript framework that lets you build rich browser applications. (Sencha also has Sencha touch for making mobile apps, and popular ones include Kiva’s.) I’m dabbling with ExtJs 4, for desktop apps, and it’s been wonderful so far. Some don’t like ExtJs (and in turn rave about jQuery, but I haven’t really done jQuery so I can’t compare) due to claims that their API documentation is lacking and it’s hard to debug (it can be), but I have no major complaints at present. I really like how ExtJs 4 is applying MVC, which I’ve found is a bit like Paris Hilton — you either hate it or you don’t.

The API can be daunting, so here is what you must know in the order that I found most helpful. Start with “Getting Started”. In “Guides”, this is what made the most sense to me: Read up on the things under “Concepts.” After you tackle “The MVC Application Architecture”, hop on to “The Data Package” which explains models and stores in depth, and then go read the 3-part series “Architecting your App” under “Tutorials”.

The articles under “Components” is good too; it should be enough to allow you to be confident in searching through the API. The video library aslo has great ones on debugging and theming your app. Finally, here is a demo for the different types of layouts that you might find useful.

Unit Testing Your JavaScript

I’m a big aficionado of unit testing, and ExtJs officially uses the Jasmine BDD framework. I had to do some UI unit testing research way back when I was an intern which obviously I cannot share, but I did run across this site that does a pretty good job of comparing the different testing paradigms and frameworks available.

A rundown and comparison of different JavaScript unit testing frameworks (xUnit style vs. BDD) is here: “Choosing a JavaScript Testing Framework”.

Twitter Bootstrap

I took an intro class in Twitter Bootstrap back in undergrad, and that’s all it took to fall in love with this front-end framework of JavaScript and LESS CSS. I loved how it’s easy to learn and that anyone could actually making beautiful looking sites without having a degree in Graphic Design.

Appcelerator

Appcelerator allows you to code (using JavaScript) once and deploy in all mobile platforms, with just minor tweaks for the UI — a huge advantage over separately coding for iOS, Android, Symbian, etc. I can’t stop raving at how cool this is! I mean, even the company’s motto is “code strong.” How can you not fall in love?

If you’re curious about Appcelerator, here are a few more links:

This post was originally posted at Femgineer.

Women 2.0 readers: What are your favorite front-end development tools, tips and tricks? Let us know in the comments.

About the guest blogger: Frances Advincula is a software engineer at Accenture. Frances just graduated with a degree in Computer Science with specialization in Software Engineering. She contributes to The Levo League, Women 2.0 and STEMinist. A proud geek girl, she’s sure she is the only one who can’t play video games. Follow her on Twitter at @FranAdvincula.