Front-End Frameworks: a quick overview. Diacode Talks! 3rd Edition http://diacode.com

1. Front-End
Frameworks:
a quick overview
Javier Cuevas
@javier_dev
Diacode.com

2. Front-End Development
HTML CSS Javascript

3. Frameworks
Toolkits
Libraries
Front-End Grid systems (CSS)
Boilerplates (HTML)
Syntatic Sugar
...
Multiple names and approaches.
Same idea: make front-end development easier, faster, stronger.

4. 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.

5. HTML

6. 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.
HAML HTML
#profile <div id="profile">
.left.column <div class="left column">
#date= print_date <div id="date"><%= print_date %></div>
%p.address= current_user.address <p class="address"><%= current_user.address %></p>
.right.column </div>
#email= current_user.email <div class="right column">
#bio= current_user.bio <div id="email"><%= current_user.email %></div>
<div id="bio"><%= current_user.bio %></div>
</div>
</div>
http://bit.ly/VzHwc

7. CSS

8. 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.
SCSS CSS
$blue: #3bbfce; .content {
$margin: 16px; color: #3bbfce;
}
.content{
color: $blue; .content p {
p { padding: 8px;
padding: $margin / 2; margin: 8px;
margin: $margin / 2; border-color: #3bbfce;
border-color: $blue; }
}
} http://bit.ly/3wRpzR

9. 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

10. JAVASCRIPT

11. 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/

12. 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/

13. 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.
CoffeScript Javascript
$ -> $(function() {
$("body").html "Hello!" $("body").html("Hello!");
})
http://coffeescript.org/

14. 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/

15. 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.
TEMPLATE JAvASCRIPT OUTPUT
<div class="entry"> var context = { <div class="entry">
<h1>{{title}}</h1> title: "My New Post", <h1>My New Post</h1>
<div class="body"> body: "This is my first post!"} <div class="body">
{{body}} var html = template(context); This is my first post!
</div> </div>
</div> </div>
http://handlebarsjs.com/

16. 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

17. 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 Spine
http://oreil.ly/pbxy4I
http://bit.ly/tozpso

18. HTML + CSS + JS

19. 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

20. 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

21. 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.php
http://www.youtube.com/watch?v=V2EjipWZ7co
http://bit.ly/p9rfyt

22. There are hundred
of tools like these.

23. Some of them are
even more complex
and exotic.

24. Learning all of them
is impossible.

25. Don’t be afraid of
trying new things.

26. Use the ones you feel
will help you out and
let the hype aside.

27. Thanks for coming!