Tools and Workflow - London Ajax

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

@jonthanﬁelding #FrontendTooling With responsive design, our jobs as developers is
getting harder

@jonthanﬁelding #FrontendTooling

@jonthanﬁelding #FrontendTooling It’s important we get the most out of
our workﬂow

@jonthanfielding #FrontendTooling What tools can I use to enhance my
web development? Where do these tools fit in a development workflow?

@jonthanﬁelding #FrontendTooling The problem was…

@jonthanﬁelding #FrontendTooling I found a sea of tools

@jonthanﬁelding #FrontendTooling But how do I sift between them all?

@jonthanﬁelding #FrontendTooling How do I know which tools suit the
way I work?

@jonthanﬁelding #FrontendTooling First we can split them into the parts
of our workﬂow

@jonthanﬁelding #FrontendTooling Scaffolding

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

@jonthanﬁelding #FrontendTooling What tools can I use for scaffolding Grunt-init
Yeoman

@jonthanﬁelding #FrontendTooling Yeoman

@jonthanﬁelding #FrontendTooling Install Yeoman

@jonthanﬁelding #FrontendTooling Install a Yeoman Generator

@jonthanﬁelding #FrontendTooling Scaffold with a Yeoman Generator

@jonthanﬁelding #FrontendTooling Project structure

@jonthanﬁelding #FrontendTooling Demo

@jonthanﬁelding #FrontendTooling Grunt-init

@jonthanﬁelding #FrontendTooling Install Grunt-init

@jonthanﬁelding #FrontendTooling Install Grunt-init template

@jonthanﬁelding #FrontendTooling Run Grunt-init

@jonthanﬁelding #FrontendTooling Project structure

@jonthanﬁelding #FrontendTooling Abstractions

@jonthanﬁelding #FrontendTooling What are abstractions? • Abstract away from the
languages of the web • Aim to make development quicker, simpler • Compile to the browsers native language

@jonthanﬁelding #FrontendTooling Examples of abstractions • CSS Preprocessors   e.g
Sass, Stylus and Less • HTML Abstractions   e.g HAML, Markdown • Javascript Abstractions   e.g Typescript, CoffeeScript, Dart

@jonthanﬁelding #FrontendTooling CSS Preprocessors

@jonthanﬁelding #FrontendTooling Features of CSS Preprocessors • Variables • Nesting
• Import stylesheets • Mixins • Functions

@jonthanﬁelding #FrontendTooling What CSS Preprocessors are available Less Sass

@jonthanﬁelding #FrontendTooling What is Sass? An abstraction of CSS called
a   CSS pre-processor which is written in Ruby

@jonthanﬁelding #FrontendTooling Install Sass

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

@jonthanﬁelding #FrontendTooling Compile Sass

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

@jonthanﬁelding #FrontendTooling What is Less? An abstraction of CSS called
a   CSS pre-processor which is written in JavaScript

@jonthanﬁelding #FrontendTooling Install Less

@jonthanﬁelding #FrontendTooling 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

@jonthanﬁelding #FrontendTooling Compile Less

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

@jonthanﬁelding #FrontendTooling HTML Abstractions

@jonthanﬁelding #FrontendTooling What is Markdown? A text formatting engine that
can be compiled into other languages, commonly used to generate HTML

@jonthanﬁelding #FrontendTooling Install Markdown

@jonthanﬁelding #FrontendTooling 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

@jonthanﬁelding #FrontendTooling Compile Markdown

@jonthanﬁelding #FrontendTooling Compiled HTML <h1>Main Heading</h1> ! <h2>Secondary Heading</h2> <p>Integer
posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> ! <h3>Todo List</h3> <ul> <li>Compile markdown</li> </ul>

@jonthanﬁelding #FrontendTooling Iteration

@jonthanﬁelding #FrontendTooling 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

@jonthanﬁelding #FrontendTooling What are iteration tools? • Tools that enable
us to quickly iterate by automating steps we need to take after each save

@jonthanﬁelding #FrontendTooling What tools can I use for iterating Grunt
Bower

@jonthanﬁelding #FrontendTooling Grunt

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

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

@jonthanﬁelding #FrontendTooling Installing Grunt Grunt comes in two parts: Install
Command Line Tool Globally ! Install grunt locally

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

@jonthanﬁelding #FrontendTooling Setting up a task In the console

@jonthanfielding #FrontendTooling 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

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

@jonthanﬁelding #FrontendTooling Bower

@jonthanﬁelding #FrontendTooling What is Bower? Bower is a package manager
that enables us to install dependencies

@jonthanﬁelding #FrontendTooling Install Bower

@jonthanﬁelding #FrontendTooling Install a package using Bower

@jonthanﬁelding #FrontendTooling Splitting out the tools into steps of our
workﬂow is great

@jonthanﬁelding #FrontendTooling But tools don’t always ﬁt into one part
of our process

@jonthanﬁelding #FrontendTooling Any questions?

@jonthanﬁelding #FrontendTooling 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

@jonthanﬁelding #FrontendTooling TalkTalk is hiring • Looking for 2-3 Senior
Developers • Looking for 1-2 Mid-weight Developers • Grab me if your interested

@jonthanfielding #FrontendTooling Find out more about frontend workflow at frontendworkflow.com

Tools and Workflow - London Ajax

Tools and Workflow - London Ajax

More Decks by Jonathan Fielding

Other Decks in Technology

Featured

Transcript