Tools and Workflow - London Ajax

@jonthanfielding #FrontendTooling
Tools and Workflow
Jonathan Fielding - @jonthanfielding
!
Please use hashtag #FrontendTooling for this talk

View Slide

With responsive design,
our jobs as developers is
getting harder

View Slide


View Slide

It’s important we get the
most out of our workﬂow

View Slide

What tools can I use to enhance
my web development?
Where do these tools ﬁt in a
development workﬂow?

View Slide

The problem was…

View Slide

I found a sea of tools

View Slide

But how do I sift
between them all?

View Slide

How do I know which
tools suit the way I work?

View Slide

First we can split them
into the parts of our
workﬂow

View Slide


View Slide

Scaffolding

View Slide

What do scaffolding tools do?
• Setup a boilerplate
• Install dependencies
and sometimes -
• conﬁgure build tools
• setup source control

View Slide

What tools can I use for scaffolding
Grunt-init
Yeoman

View Slide

Yeoman

View Slide

Install Yeoman

View Slide

Install a Yeoman Generator

View Slide

Scaffold with a Yeoman
Generator

View Slide

Project structure

View Slide

Demo

View Slide

Grunt-init

View Slide

Install Grunt-init

View Slide

Install Grunt-init template

View Slide

Run Grunt-init

View Slide

Project structure

View Slide

Demo

View Slide

Abstractions

View Slide

What are abstractions?
• Abstract away from the languages
of the web
• Aim to make development quicker,
simpler
• Compile to the browsers native
language

View Slide

Examples of abstractions
• CSS Preprocessors  
e.g Sass, Stylus and Less
• HTML Abstractions  
e.g HAML, Markdown
• Javascript Abstractions  
e.g Typescript, CoffeeScript, Dart

View Slide

CSS Preprocessors

View Slide

Features of CSS Preprocessors
• Variables
• Nesting
• Import stylesheets
• Mixins
• Functions

View Slide

What CSS Preprocessors are
available
Less
Sass

View Slide


View Slide

What is Sass?
An abstraction of CSS called a  
CSS pre-processor which is
written in Ruby

View Slide

Install Sass

View Slide

Sass Syntax
@import “variables";!
@import “mixins";!
!
.class-name {!
background: #000;!
p {!
@include font-size(14px);!
color: $text-color;!
!
span {!
color: #eee;!
}!
}!
}
Import other
Sass ﬁles
Use mixin
to generate
CSS
Nesting
Use variable
to deﬁne color

View Slide

Compile Sass

View Slide

Compiled CSS
/* line 1, ../sass/screen.scss */!
.class-name {!
background: #000;!
}!
.class-name p {!
font-size: 14px;!
color: #fff;!
}!
.class-name p span {!
color: #eee;!
}!

View Slide


View Slide

What is Less?
An abstraction of CSS called a  
CSS pre-processor which is
written in JavaScript

View Slide

Install Less

View Slide

Less Syntax
@import “variables.less”;!
@import “mixin.less”!
!
.class-name {!
background: #000;!
p {!
! ! .font14();!
color: #fff;!
!
span {!
color: #eee;!
}!
}!
}
Import other
Sass ﬁles
Use mixin
to generate
CSS
Nesting

View Slide

Compile Less

View Slide

Compiled CSS
.class-name {!
background: #000;!
}!
!
.class-name p {!
font-size: 14px;!
color: #fff;!
}!
!
.class-name p span {!
color: #eee;!
}!

View Slide

HTML Abstractions

View Slide


View Slide

What is Markdown?
A text formatting engine that can
be compiled into other
languages, commonly used to
generate HTML

View Slide

Install Markdown

View Slide

Markdown Syntax
#Main Heading!
!
##Secondary Heading!
!
Integer posuere erat a ante venenatis dapibus
posuere velit aliquet.!
!
Integer posuere erat a ante venenatis dapibus
posuere velit aliquet.!
!
###Todo List!
!
* Compile markdown
Heading 1
Paragraphs
Heading 2
Heading 3
List

View Slide

Compile Markdown

View Slide

Compiled HTML
Main Heading
!
Secondary Heading
Integer posuere erat a ante venenatis dapibus posuere velit
aliquet.
Integer posuere erat a ante venenatis dapibus posuere velit
aliquet.
!
Todo List

Compile markdown

View Slide

Iteration

View Slide

What is Iteration?
• Every time we save our code
and view it in our browser we
are creating an iteration of the
site
• We save, refresh our browser,
go back to our editor

View Slide

What are iteration tools?
• Tools that enable us to quickly
iterate by automating steps we
need to take after each save

View Slide

What tools can I use for iterating
Grunt
Bower

View Slide

Grunt

View Slide

What is Grunt?
Grunt is a task runner which
enables us to automate tasks by
deﬁning tasks it should run

View Slide

What tasks can Grunt run?
• Compilation of Abstractions
• Unit Testing
• Linting
• Concatenation
• Miniﬁcation
• and many more

View Slide

Installing Grunt
Grunt comes in two parts:
Install Command Line Tool Globally
!
Install grunt locally

View Slide

Create a Gruntfile.js
module.exports = function(grunt) {
//Grunt configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
!
});
};

View Slide

Setting up a task
In the console

View Slide

Setting up a task
In the Gruntfile.js
grunt.initConfig({!
pkg: grunt.file.readJSON('package.json'),!
compass: {!
dev: {!
options: {!
sassDir: 'sass',!
cssDir: 'css',!
imagesDir: 'images',!
environment: 'development',!
httpGeneratedImagesPath: ' images'!
}!
}!
}!
});!
Task
Target

View Slide

Setting up a task
In the Gruntﬁle.js
grunt.loadNpmTasks(‘grunt-contrib-compass’);!
!
grunt.registerTask('default', ['compass:dev']);

View Slide

Demo

View Slide

Bower

View Slide

What is Bower?
Bower is a package manager
that enables us to install
dependencies

View Slide

Install Bower

View Slide

Install a package using
Bower

View Slide

Demo

View Slide

Splitting out the tools into
steps of our workﬂow is
great

View Slide

But tools don’t always ﬁt
into one part of our
process

View Slide


View Slide

Any questions?

View Slide

Check out my new book
• Learn how to make your
sites responsive
• Chapter on
development tools
and workﬂow
• http://bitly.com/NXusZn
• Discount code: 30HT14

View Slide

TalkTalk is hiring
• Looking for 2-3 Senior Developers
• Looking for 1-2 Mid-weight Developers
• Grab me if your interested

View Slide

Find out more about
frontend workﬂow at
frontendworkﬂow.com

View Slide

Tools and Workflow - London Ajax

Tools and Workflow - London Ajax

Jonathan Fielding

More Decks by Jonathan Fielding

Other Decks in Technology

Featured

Transcript