Front-end Web Development — Ruby to the Rescue!

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

student hacker writer <3 Amr Tamimi @amrnt

Slide 3

Slide 3 text

THE WEB TODAY 2013

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Ordinary HTML page, but! Hello world!

Some stuff here!

Slide 6

Slide 6 text

Ordinary HTML page, beautiﬁed! Hello world!

Some stuff here!

Slide 7

Slide 7 text

Hello world!

Some stuff here!

Do we have to? — always? Let’s get rid of them all!

Slide 8

Slide 8 text

Hello world!

Some stuff here!

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

{ STYLE:SHEETS; }

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

.header { margin: 0 auto; color: #c1c1c1; } .header .logo { 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

Slide 17

Slide 17 text

.header { margin: 0 auto; color: #c1c1c1; } .header .logo { 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

Slide 18

Slide 18 text

.header { margin: 0 auto; color: #c1c1c1; } .header .logo { 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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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!

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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!

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

WORKFLOW AUTOMATION

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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