The front end toolkit


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

The front end toolkit

  1. 1. The front-end toolkit For the modern web developer
  2. 2. 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….
  3. 3. 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!
  4. 4. 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.
  5. 5. The tools we’ll be looking at today In alphabetical order… • Bootstrap & Foundation • CoffeeScript • Compass & Sass • Grunt • Haml & Handlebars • jQuery
  6. 6. 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.
  7. 7. 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.
  8. 8. 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.
  9. 9. 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.
  10. 10. 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.
  11. 11. 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.
  12. 12. 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.
  13. 13. 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…
  14. 14. 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.
  15. 15. 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!
  16. 16. 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.
  17. 17. 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.