Front-end Web Development — Ruby to the Rescue!

FRONT-END WEB DEVELOPMENT Ruby to the Rescue! TechCon June -
Ramallah June 22nd 2013

student hacker writer <3 Amr Tamimi @amrnt

THE WEB TODAY 2013

Ordinary HTML page, but! <!DOCTYPE html> <html> <head> <title> Hello
world! </title> </head> <body> <div class=”container” id=”main”> Some stuff here! </div> </body> </html>

Ordinary HTML page, beautiﬁed! <!DOCTYPE html> <html> <head> <title> Hello
world! </title> </head> <body> <div class=”container” id=”main”> Some stuff here! </div> </body> </html>

<!DOCTYPE html> <html> <head> <title> Hello world! </title> </head> <body>
<div class=”container” id=”main”> Some stuff here! </div> </body> </html> Do we have to? — always? Let’s get rid of them all!

<!DOCTYPE html> <html> <head> <title> Hello world! </title> </head> <body>
<div class=”container” id=”main”> Some stuff here! </div> </body> </html>

<!DOCTYPE html> <html> <head> <title> Hello world! <body> <div class=”container”
id=”main”> Some stuff here!

<!DOCTYPE html> html head title Hello world! body div class=”container”
id=”main” Some stuff here! Still familiar, ha?

!!! %html %head %title Hello world! %body %div.container#main Some stuff
here! haml.info

doctype html html head title Hello world! body div.container#main Some
stuff here! slim-lang.com

{ STYLE:SHEETS; }

CSS .header { margin: 0 auto; color: #c1c1c1; } .header
.logo { width: 200px; background: red; } .header .logo h1 { font-size: 28px; } p { color: #c1c1c1; }

.header { margin: 0 auto; color: #c1c1c1; } .header .logo
{ width: 200px; background: red; } .header .logo h1 { font-size: 28px; } p { color: #c1c1c1; } CSS

{ width: 200px; background: red; } .header .logo h1 { font-size: 28px; } p { color: #c1c1c1; } CSS $text-color: #c1c1c1 .header margin: 0 auto color: $text-color .logo width: 200px background: red h1 font-size: 28px p color: $text-color SASS

{ width: 200px; background: red; } .header .logo h1 { font-size: 28px; } p { color: #c1c1c1; } CSS $text-color: #c1c1c1; .header { margin: 0 auto; color: $text-color; .logo { width: 200px; background: red; h1 { font-size: 28px; } } p { color: $text-color; } SCSS

{ width: 200px; background: red; } .header .logo h1 { font-size: 28px; } p { color: #c1c1c1; } CSS @text-color: #c1c1c1; .header { margin: 0 auto; color: @text-color; .logo { width: 200px; background: red; h1 { font-size: 28px; } } p { color: @text-color; } LESS

Mixins Variables Nesting .header { width: 960px; } .header .logo
{ width: 200px; background: red; } .header { width: 960px; .logo { width: 200px; background: red; } } More!

Mixins Variables Nesting .content-navigation { border-color: #3bbfce; color: #2ca2af; margin:
8px; } $blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); margin: $margin / 2; } More!

Mixins Variables Nesting div.banner { float: left; margin-left: 10px; }
@mixin left($dist) { float: left; margin-left: $dist; } div.banner { @include left(10px); } More!

sass-lang.com lesscss.org SCSS/Sass/Less helping frameworks?

COMPASS A framework that sits atop Sass and tackles common
stylesheet problems such as grid layouts, handling CSS3 vendor differences, and production environment stylesheet optimization. compass-style.org Image Sprites Collection of mixins and functions

A simple and lightweight mixin library for Sass. bourbon.io neat.bourbon.io
A lightweight semantic grid framework for Sass and Bourbon. BOURBON NEAT

Sleek, intuitive, and powerful front- end framework for faster and
easier web development. getbootstrap.com foundation.zurb.com The most advanced responsive front-end framework in the world. BOOTSTRAP FOUNDATION

FUNCTION(){ ALERT(“JS”); }

var square = function(x) { return x * x; };
var cube = function(x) { return square(x) * x; }; JavaScript

var square = function(x) { return x * x ;
}; var cube = function(x) { return square(x) * x; }; JavaScript

var square = function(x) { return x * x ;
}; var cube = function(x) { return square(x) * x; }; JavaScript square = (x) -> x * x cube = (x) -> square(x) * x CoffeeScript

coffeescript.org CoffeeScript is a little elegant language that compiles into
JavaScript. Early implementation was on Ruby

PUT IT ALL TOGETHER! There are tons of frameworks and
libraries for front-end web development.

Transform your plain text into static websites and blogs. It
got lots of community plugins that handle everything minifying, compiling sass/ coffee/haml... jekyllrb.com JEKYLL

Build fantastic websites with your favorite template languages. All you
need in one small gem. get-serve.com SERVE

Middleman is a static site generator using all the shortcuts
and tools in modern web development. middlemanapp.com MIDDLE MAN

Considering Rails as a front-end framework — It has handy
tools to start developing for front-end. rubyonrails.org RAILS Me and Twitter use Rails for front-end development!

RAILS FOR FRONT-END THINGS YOU CAN DO WITH RAILS -Using
layouts and templates -Using view partials -Assets pipeline -Sass and CoffeeScript already in the box -HAML and Slim can be added easily! -Minify and compress

WORKFLOW AUTOMATION

GUARD Guard is a command line tool to easily handle
events on ﬁle system modiﬁcations — Filesystem watcher guardgem.org

GUARD group :development do gem 'guard' end $ bundle install
$ guard init $ bundle exec guard

guard :scss do watch /^.+(\.scss)/ end guard :haml do watch
/^.+\.haml$/ end GUARD

-Compile CoffeeScript -Compile HAML -Run CSS/JS hinters/linters -Run tests THINGS
YOU CAN DO WITH GUARD GUARD

The issue isn’t with writing code, it’s what follows —
reading it!

D.R.Y. Don’t repeat yourself — and anything

K.I.S.S. Keep it simple stupid

Inspired by: “Front-end Web Development with Ruby” by Matt Buck
THANK YOU

Front-end Web Development — Ruby to the Rescue!

Front-end Web Development — Ruby to the Rescue!

More Decks by Amr Tamimi

Other Decks in Programming

Featured

Transcript