Front-End Frameworks: a quick overview
-
Upload
diacode -
Category
Technology
-
view
19.835 -
download
0
description
Transcript of 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!