Download - 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
