Front-End                  Frameworks:                a quick overviewJavier Cuevas@javier_devDiacode.com
Front-End DevelopmentHTML     CSS    Javascript
Frameworks                                  Toolkits                                  Libraries              Front-End    ...
Why do we need Front-End Superpowers?• HTML is ugly and old.• Javascript is ugly and old.• CSS is not that ugly but is tot...
HTML
HAML        • Syntatic sugar for HTML and ERB (embedded Ruby).        • HAML is for Ruby, but there are equivalents for ot...
CSS
SASS• CSS on steroids: variables, mixins, nested rules and       math functions.• Two different syntaxes: .SCSS (new) and ...
LESS• Very similar to SASS.• Main difference is that it gives you a “client side”   version. This means LESS code is trans...
JAVASCRIPT
jQuery• Do I have to tell you what is jQuery  about? :)• Briefly:  jQuery is a Javascript library to easily  change and ani...
jQuery Mobile• Despite of its name, it is more about the  layout (user interface) and a bit less about  Javascript superpo...
CoffeeScript•   Is an alternative syntax for Javascript.•   Coffeescript files compile into Javascript.•   Basically offers...
Modernizr• Is a Javascript library allowing you to use CSS3  & HTML5 while maintaining control over  unsupported browsers....
Handlebars      • Is a Javascript template system.      • Lets you populate data from JS (for instance AJAX           resp...
Backbone• Is a JavaScript framework that allows you to   structure your Javascript code in an MVC (Model,   View, Controll...
Spine• Same idea than Backbone: MVC for Javascript• It’s pretty light weight.• Has a mobile extension (Spine Mobile), that...
HTML + CSS + JS
HTML5 Boilerplate•   Gives you a starting point for a new web app.•   Is a package that includes several useful things rea...
Twitter Bootstrap• Developed by Twitter’s programmers.• Includes: • Grid system with support for Responsive Design. • CSS ...
Zurb Foundation•   Very similar to Twitter Bootstrap. Made by Zurb.•   Zurb’s developers stand very hard for some relevant...
There are hundredof tools like these.
Some of them areeven more complex    and exotic.
Learning all of them   is impossible.
Don’t be afraid oftrying new things.
Use the ones you feelwill help you out and let the hype aside.
Thanks for coming!
Upcoming SlideShare
Loading in...5
×

Front-End Frameworks: a quick overview

20,577

Published on

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

Published in: Technology, Design
1 Comment
44 Likes
Statistics
Notes
  • Hi bro,
    Thank you for sharing this.
    I recently tried zerb foundation theme for one of my clients WP website and unfortunately they were testing it on IE8. Foundation is compatible with IE9+ as I have heard.
    Any body have used boilerplate for WP before (http://wordpress.org/themes/boilerplate)? Any Feedback will be much appreciated.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
20,577
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
204
Comments
1
Likes
44
Embeds 0
No embeds

No notes for slide

Front-End Frameworks: a quick overview

  1. 1. Front-End Frameworks: a quick overviewJavier Cuevas@javier_devDiacode.com
  2. 2. Front-End DevelopmentHTML CSS Javascript
  3. 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. 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. 5. HTML
  6. 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. 7. CSS
  8. 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. 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. 10. JAVASCRIPT
  11. 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. 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. 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. 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. 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. 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. 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. 18. HTML + CSS + JS
  19. 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. 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. 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. 22. There are hundredof tools like these.
  23. 23. Some of them areeven more complex and exotic.
  24. 24. Learning all of them is impossible.
  25. 25. Don’t be afraid oftrying new things.
  26. 26. Use the ones you feelwill help you out and let the hype aside.
  27. 27. Thanks for coming!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×