The front-end toolkit

For the modern web developer

A brief history

• This is gonna be short…• ...cos front-end development has been around for

about 5 minutes in the big scheme of things…• Back in the dark ages, software developers and the

like used to “design” apps and websites. [shudder]• Designers of the time were horrified, but were too

busy printing shit out on paper and had no clue as to how this new-fangled internetness worked.

• SO….

Front-end development was born!

• It basically covers: wire-framing, client-side presentation & programming, user interface, “UX” design, and other confusing buzzwords.

• The role has only really come of age quite recently, and it’s still a bit of a grey area as to what front-end development entails. Meaning…

• There’s a crap load of jobs out there for front-end developers… and even more for code monkeys who can get their hands dirty on the client-side!

So get excited about front-end development :D

…cos it looks like it’s here to stay… at least for the foreseeable-ish future…• More and more employers are looking for devs with

mad front-end skillz• A lot of it is still uncharted territory, a veritable wild

west where best practices and standards are still not firmly established.

• Some smart cookies have realised the need for a reliable, DRY approach to front-end development that make it easier to get started.

The tools we’ll be looking at today

In alphabetical order…

• Bootstrap & Foundation • CoffeeScript• Compass & Sass• Grunt • Haml & Handlebars• jQuery

Compass & Sass

• Compass is a rails-based tool built for speedy web app presentation.

• It follows the rails philosophy of not repeating oneself by generating CSS (something which has been rather clunky and tedious to work with in the past) in a programmatic way.

• Compass itself is a nice big handy library to use with Sass. Sass itself has a fair amount of useful functions built-in, Compass is basically like strapping a jetpack to Sass.

• It makes web presentation a whole lot faster, easier and more fun.

OK that’s nice… but what kinda stuff does Compass do?

• Cross-browser bug fixes and browser-specific prefixes

• Sneaky hacks for legacy browsers• Data-URI generation for images• Automatic sprite-sheet generation!• Basic programming shenanigans like variables,

methods, conditionals and loops.

Bootstrappin’

• Some clever folks have put together front-end ‘frameworks’ for whipping up sites and apps in a matter of hours.

• The two most popular right now are Twitter’s Bootstrap and Zurb’s Foundation.

• Presentational elements are easily customisable and they include some fancy pants JavaScript for cool interactivity straight out of the box.

• They are a back-end developer’s dream; a really quick solution to the rigors of design and front-end development.

The down-sides of using front-end frameworks

• It’s easy to end up with a very generic looking app or site, which generally looks a lot like the other brazillion websites using a bootstrap.

• All that simplicity comes at a price… like any framework, there is a lack of flexibility.

• They don’t exactly follow web development best practices… The one-size-fits-all approach to front-end dev means a certain degree of hackiness which can become troublesome.

CoffeeScript

• JavaScript has irked developers since it found it’s place as the predominant client-side scripting language.

• It’s actually a pretty cool language, it’s quite forgiving and very versatile. Unfortunately it can become quite repetitive and security vulnerabilities can arise when undiscerning developers get there hands on it.

CoffeeScript

• CoffeeScript provides some syntactic sugar that makes JavaScript a whole lot sweeter to write.

• It deals with a lot of the irksome repetition required to keep things secure.

• It’s indent-based syntax is similar to Ruby or Python and is way easier to read

• You can do tricksy stuff in less lines of code.

Grunt

• The ultimate pre-processing tool: you can tell Grunt to watch everything that needs watching... Sass, Less, CoffeeScript, Haml, etc…

• Grunt can also do cool stuff like compress images on-the-fly… might not sound that cool, but it’s a super annoying repetitive task.

• Lint and Hint – to help keep your code clean, point out errors, security issues and other handy stuff the browser console won’t tell you.

Aside: Yeoman

• Yeoman is a hip new web app development tool which combines the power of Grunt, Yo and Bower.

• Yo is a scaffolding tool which fleshes out an application and sets up Grunt configuration.

• Bower goes off and fetches all the additional scripts and resources, then keeps them up to date.

• Unfortunately at the moment Yeoman works on Mac but it looks pretty handy…

Haml & other templating languages

• Just like CSS and JavaScript, HTML has also become one of the bottlenecks in front-end development. This is where the ‘templating languages’ come in handy.

• Haml is another rails tool which is used to make templating a breeze. Once again, it uses an indent-based syntax to make mark-up cleaner, simpler and easier to read.

The magic of jQuery

• Most of you have probably already heard of jQuery; the JavaScript library that lets designers do the coding.

• jQuery UI is a massive library that includes a standardised collection of interactive elements which are incredibly fast and easy to implement into a project.

• jQuery Mobile has been built from the ground up to help devs get a mobile version of a website or app up and running quickly.

• It includes listeners for mobile device inputs like multitouch, swipe and pinch gestures.

• It means you can build a web app with behaviour similar to a native app!

Other great front-end tools available

• The development landscape is always changing, and new tools are popping up all the time.

• Check out PhoneGap – a platform for making web apps which function and behave like native apps.

• JavaScript application frameworks like AngularJS, Backbone and Ember.

To wrap things up…

• These are all handy tools to have at your disposal, go out and give them a go on your next project. Keep an eye for more, and don’t get too attached to any one tool!

• Front-end work doesn’t have to be a hassle, if anything ever seems dull, tedious or repetitive, there’s a 99% chance that somebody’s built a fancy tool to make it easier and more fun… Hell, that’s what development is all about.