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