Front-End Frameworks: a quick overview

Javier Cuevas@javier_devDiacode.com

Front-End Frameworks:

a quick overview

HTML CSS Javascript

Front-End Development

Frameworks

Toolkits

Libraries

Grid systems (CSS)

Boilerplates (HTML)

Syntatic Sugar

...

Front-End

Multiple names and approaches. Same idea: make front-end development easier, faster, stronger.

Why do we need Front-End Superpowers?

• HTML is ugly and old.

• Javascript is ugly and old.

• CSS is not that ugly but is totally Anti-DRY.

• User Interfaces are each day more complex.

• Cross-browser compatibility.

• Device Heterogeneity: tablets, smartphones, desktops... A jungle of different screens.

HTML

HAML• Syntatic sugar for HTML and ERB (embedded Ruby).

• HAML is for Ruby, but there are equivalents for other languages (SHPAML, GHRML).

• White space aware syntax.

#profile .left.column #date= print_date %p.address= current_user.address .right.column #email= current_user.email #bio= current_user.bio

<div id="profile"> <div class="left column"> <div id="date"><%= print_date %></div> <p class="address"><%= current_user.address %></p> </div> <div class="right column"> <div id="email"><%= current_user.email %></div> <div id="bio"><%= current_user.bio %></div> </div></div>

http://bit.ly/VzHwc

HAML HTML

CSS

SASS• CSS on steroids: variables, mixins, nested rules and

math functions.

• Two different syntaxes: .SCSS (new) and .SASS (old)

• SCSS/SASS is compiled to CSS on the server side.

.content { color: #3bbfce;}

.content p { padding: 8px; margin: 8px; border-color: #3bbfce;}

$blue: #3bbfce;$margin: 16px;

.content{ color: $blue; p { padding: $margin / 2; margin: $margin / 2; border-color: $blue; }} http://bit.ly/3wRpzR

SCSS CSS

LESS• Very similar to SASS.

• Main difference is that it gives you a “client side” version. This means LESS code is transformed to CSS into the browser client using Javascript.

• It does have a server side version too.

• Fans of SASS often are haters of LESS and viceversa.

• Some discussion about SASS vs LESS: http://wrangl.com/sass-v-less

http://bit.ly/12gGr0

JAVASCRIPT

jQuery•Do I have to tell you what is jQuery

about? :)

•Briefly:jQuery is a Javascript library to easily change and animate the DOM (HTML nodes).

• I would say it’s a must in every project.

http://jquery.com/

jQuery Mobile•Despite of its name, it is more about the

layout (user interface) and a bit less about Javascript superpowers.

• Is a whole framework to develop web applications for mobile devices by using HTML5 features.

•By using Phonegap you can embed your web mobile app into a native mobile app.

http://jquerymobile.com/

CoffeeScript• Is an alternative syntax for Javascript.

• Coffeescript files compile into Javascript.

• Basically offers syntactic sugar for JS.

• Is white space aware, i.e. indentation instead of curly braces everywhere.

http://coffeescript.org/

$ -> $("body").html "Hello!"

$(function() { $("body").html("Hello!");})

CoffeScript Javascript

Modernizr• Is a Javascript library allowing you to use CSS3

& HTML5 while maintaining control over unsupported browsers.

• Detects what features are supported by the user’s browser.

• If some features are missing you can still use them by using “polyfills” (JS scripts that imitate HTML5/CSS3 features for older browsers).

http://www.modernizr.com/docs/

Handlebars• Is a Javascript template system.

• Lets you populate data from JS (for instance AJAX responses) into HTML without having to write the chunk of HTML into the JS code.

• Extends Mustache template system.

http://handlebarsjs.com/

<div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div></div>

<div class="entry"> <h1>My New Post</h1> <div class="body"> This is my first post! </div></div>

var context = { title: "My New Post", body: "This is my first post!"}var html = template(context);

TEMPLATE JAvASCRIPT OUTPUT

Backbone• Is a JavaScript framework that allows you to

structure your Javascript code in an MVC (Model, View, Controller) fashion.

• Instead of storing data in HTML data attributes, store them into JS Models.

• Views (HTML) change when models change.

• Using it together with Node.js (JS on the server side), you can share code between client and server, i.e. same models in both sides.

http://bit.ly/dk9Eki

Spine• Same idea than Backbone: MVC for Javascript

• It’s pretty light weight.

• Has a mobile extension (Spine Mobile), that can be combined with Phonegap to build “native” mobile apps.

• It’s written in CoffeeScript, so if you don’t know CoffeeScript it could be harder to use it.

• There is an O’Reilly book by the author of Spinehttp://oreil.ly/pbxy4I

http://bit.ly/tozpso

HTML + CSS + JS

HTML5 Boilerplate• Gives you a starting point for a new web app.

• Is a package that includes several useful things ready to use:

• CSS resets

• jQuery

• Modernizr

• Layout with HTML5 doctype

• Cross-browser compatibility (even IE6 with Chrome Frame)

• Mobile browser-optimization

• Google Analytics snippet

• .htaccess optimizations

• ....http://bit.ly/8Xe4wy

Twitter Bootstrap• Developed by Twitter’s programmers.

• Includes:

• Grid system with support for Responsive Design.

• CSS classes for buttons, forms, tables, icons, navigation bars, labels, badges, progress bars, etc.

• Javascript UI widgets: modals, menu dropdowns, images slider, accordions, alerts, notifications, etc.

• Highly customizable using LESS.

http://bit.ly/q2G9Mm

Zurb Foundation• Very similar to Twitter Bootstrap. Made by Zurb.

• Zurb’s developers stand very hard for some relevant ideas:

• 960 pixels designs are dead.

• Develop a specific mobile version of your site is painful, so you must go for Responsive Design.

• With a tool like Zurb Foundation you can do Rapid Prototyping in HTML5 (no more vector wireframes). http://foundation.zurb.com/prototyping.phphttp://www.youtube.com/watch?v=V2EjipWZ7co

http://bit.ly/p9rfyt

There are hundred of tools like these.

Some of them are even more complex

and exotic.

Learning all of them is impossible.

Don’t be afraid of trying new things.

Use the ones you feel will help you out and

let the hype aside.

Thanks for coming!