production ready javascript with grunt

PRODUCTION READY JSWITH GRUNT

Shai Reznik / HiRez.io

WHO AM I?

Angular.js Consultant, HiRez.io

Entrepreneur, Talking Lean

Improvisation Performer

Javascript IL, GDG, NG-CONF IL, Lecturer

Shai Reznik

BEFORE WE STARTThanks

Meetup Game

Stop Me If Something Isn’t Clear

TODAY’S MENUWhy Building JS?

Build Theory Overview

Grunt API

Questions… SEXY TIME!

WHY BUILDING JS?

WE DEVELOP STUFF

WE WANNA SHARE ITWITH OUR CLIENTS

SO WE COPY IT TO THE SERVER AS IS...

‘CAUSE IT’S JS... WE DON’T NEED TO TOUCH ANYTHING.. RIGHT?

WRONG!

ISSUES WITH

CLIENT SIDE JAVASCRIPT APPS

NOWADAYS WE DO COMPILE

ECMASCRIPT 6

COFFEESCRIPTTYPESCRIPT

SASS

#1

★ Minimum of 20-100ms Per Request

★ No Matter The File Size

★ Try Loading Lots Of Scripts...

#2 HTTP REQUEST OVERHEAD

#3THE BIGGER THE FILE...

THE LONGER THE DOWNLOAD!

CAPTAIN OBVIOUS!

#4

DON’T DOWNLOAD THE SAME FILE TWICE...

USE THE BROWSER’S CACHE!

WHY SHOULD WE CARE?

PERFORMANCE MATTERS

WE DON’T WANT TO LOSE OUR CLIENTS

SO WE NEED TO MASSAGE OUR FILES

1. COMPILE - NEW to OLD Syntax

2. CONCAT - Create Fewer Files

3. MINIFY - Create Smaller Files

4. REVISION - Optimize For Caching

MASSAGING OUR FILES

JS APP - 5 PARTS

INDEX.HTML

JS

ASSETS

CSS

TEMPLATES

COMPILE CONCAT MINIFY REVISION

ASSETS ✓ ✓

TEMPLATES ? ? ✓ ?

CSS ? ✓ ✓ ✓

JS ? ✓ ✓ ✓

INDEX.HTML ? ✓

LETS ZOOM OUT

BUILD PROCESS

1. TEST - Stop If Something Breaks

2. PREPARE - Clean, Generate, Config

3. MASSAGE - You Know...

4. REWIRE - Replace Index.html Pointers

dist/

assets/images/bg.8d0c.jpgassets/**

scripts/scripts.3fe3.jsscripts/vendor.d90d.js

styles/styles.d7j4.cssstyles/vendor.c8a9.css

templates/main.tpl.html

index.html

FINAL PACKAGE:

FURTHER ZOOM OUT

DEPLOYMENT PROCESS

VERSION CONTROL (GIT PUSH)

→ CI BUILD SERVER (JENKINS) ←

DEPLOY SCRIPT

ZOOM BACK IN

dist/

assets/images/bg.8d0c.jpgassets/**

scripts/scripts.3fe3.jsscripts/vendor.d90d.js

styles/styles.d7j4.cssstyles/vendor.c8a9.css

templates/main.tpl.html

index.html

FINAL PACKAGE

WE USED TO DO IT MANUALLY

NOW WE DON’T NEED TO

WE HAVE AUTOMATIC TOOLS

GRUNT

★ Built On Top Of Node.js

★ Goal: Mostly To Transform Files

★ Configuration Based

GRUNT

GOOD NEWS!

IF YOU KNOW

JAVASCRIPTYOU ALREADY KNOW HOW TO WRITE

GRUNT

GRUNT SETUP

Gruntfile.js - Configuration File

Package.json - Core + Plugins

npm install -g grunt-cli

Load Tasks

Configure Tasks

Run Tasks

GRUNT API - SIMPLIFIED

LOAD TASKS

grunt.loadNpmTasks(‘copy’)

require(‘load-grunt-tasks’)(grunt)

OR

CONFIGURE TASKSgrunt.initConfig({

copy: { options: {},target1: {}

}})

← Task

← Target

RUN TASKS

grunt copy:target1

YOU CAN ALSO...

ALIAS TASKSgrunt.registerTask(‘copyTarget1’,

[‘copy:target1’, ...]

);

grunt copyTarget1

GRUNT API EXAMPLE

STREAMS

A WORD ABOUT GULP

CODE OVER CONFIGURATION

GROWINGCOMMUNITY

SRP IN USE

SO… WHERE DO I START?

YEOMAN

YEOMAN’S GRUNT FILE

npm install -g yo

npm install -g generator-angular

yo angular

THAT’S A GOOD START BUT...

➔ Yeoman’s Gruntfile.js Needs Modifications

➔ Can Be Scary To Look At

➔ Best Practices Takes Time To Figure Out

➔ Make Changes On Your Own

➔ Bigger Than This Lecture’s Scope

HiRez.io

FOR A MORE DETAILED ONLINE WORKSHOP...

✓ Why Building JS

✓ Build Theory Overview

✓ Grunt API

✓ A Little Bit Of Yeoman

✓ Oh… And One More Thing...

WE’VE LEARNED...

IF YOU’RE GONNA BE LAZY...

DO IT WITH STYLE

HiRez.io@HiRez_ioshai@hirez.ioslides: http://goo.gl/j1pYOt

THANK YOU!