An overview of the steps required to build Javascript apps before and get them ready for deployment. It explains how Grunt helps us to validate, minimize and package our code.

1. PRODUCTION READY JS
WITH GRUNT
Shai Reznik / HiRez.io

2. WHO AM I?

3. Shai Reznik
Angular.js Consultant, HiRez.io
Javascript IL, GDG, NG-CONF IL, Lecturer
Entrepreneur, Talking Lean
Improvisation Performer

4. BEFORE WE START
Thanks
Meetup Game
Stop Me If Something Isn’t Clear

5. TODAY’S MENU
Why Building JS?
Build Theory Overview
Grunt API
Questions… SEXY TIME!

6. WHY BUILDING JS?

7. WE DEVELOP STUFF

8. WE WANNA SHARE IT
WITH OUR CLIENTS

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

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

11. WRONG!

12. ISSUES WITH
CLIENT SIDE
JAVASCRIPT APPS

13. NOWADAYS WE DO COMPILE
ECMASCRIPT 6
COFFEESCRIPT
TYPESCRIPT
SASS
#1

14. #2
HTTP REQUEST OVERHEAD
★ Minimum of 20-100ms Per Request
★ No Matter The File Size
★ Try Loading Lots Of Scripts...

15. #3
THE BIGGER THE FILE...
THE LONGER THE
DOWNLOAD!

16. CAPTAIN OBVIOUS!

17. #4
DON’T DOWNLOAD
THE SAME FILE TWICE...
USE THE
BROWSER’S CACHE!

18. WHY SHOULD WE CARE?
PERFORMANCE MATTERS

19. WE DON’T WANT TO
LOSE OUR CLIENTS

20. SO WE NEED TO
MASSAGE OUR FILES

21. MASSAGING OUR FILES
1. COMPILE - NEW to OLD Syntax
2. CONCAT - Create Fewer Files
3. MINIFY - Create Smaller Files
4. REVISION - Optimize For Caching

22. JS APP - 5 PARTS
INDEX.HTML
JS
ASSETS
CSS
TEMPLATES

23. COMPILE CONCAT MINIFY REVISION
ASSETS ✓ ✓
TEMPLATES ? ? ✓ ?
CSS ? ✓ ✓ ✓
JS ? ✓ ✓ ✓
INDEX.HTML ? ✓

24. LETS ZOOM OUT

25. BUILD PROCESS
1. TEST - Stop If Something Breaks
2. PREPARE - Clean, Generate, Config
3. MASSAGE - You Know...
4. REWIRE - Replace Index.html Pointers

26. dist/
assets/images/bg.8d0c.jpg
assets/**
scripts/scripts.3fe3.js
scripts/vendor.d90d.js
styles/styles.d7j4.css
styles/vendor.c8a9.css
templates/main.tpl.html
index.html
FINAL
PACKAGE:

27. FURTHER ZOOM OUT

28. DEPLOYMENT
PROCESS
VERSION CONTROL (GIT PUSH)
→ CI BUILD SERVER (JENKINS) ←
DEPLOY SCRIPT

29. ZOOM BACK IN

30. FINAL PACKAGE
dist/
assets/images/bg.8d0c.jpg
assets/**
scripts/scripts.3fe3.js
scripts/vendor.d90d.js
styles/styles.d7j4.css
styles/vendor.c8a9.css
templates/main.tpl.html
index.html

31. WE USED TO DO IT MANUALLY

32. NOW WE DON’T NEED TO

33. WE HAVE AUTOMATIC TOOLS
GRUNT

34. GRUNT
★ Built On Top Of Node.js
★ Goal: Mostly To Transform Files
★ Configuration Based

35. GOOD NEWS!

36. IF YOU KNOW
JAVASCRIPT
YOU ALREADY KNOW HOW TO WRITE
GRUNT

37. GRUNT SETUP
npm install -g grunt-cli
Gruntfile.js - Configuration File
Package.json - Core + Plugins

38. GRUNT API - SIMPLIFIED
Load Tasks
Configure Tasks
Run Tasks

39. LOAD TASKS
grunt.loadNpmTasks(‘copy’)
OR
require(‘load-grunt-tasks’)(grunt)

40. CONFIGURE TASKS
grunt.initConfig({
← Task
copy: {
options: {},
target1: {}
}
})
← Target

41. RUN TASKS
grunt copy:target1

42. YOU CAN ALSO...

43. ALIAS TASKS
grunt.registerTask(‘copyTarget1’,
[‘copy:target1’, ...]
);
grunt copyTarget1

44. GRUNT API EXAMPLE

45. A WORD ABOUT GULP
STREAMS
CODE OVER
CONFIGURATION
SRP IN USE
GROWING
COMMUNITY

46. SO… WHERE DO I START?
YEOMAN

47. YEOMAN’S GRUNT FILE

48. npm install -g yo
npm install -g generator-angular
yo angular

49. 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

50. FOR A MORE DETAILED
ONLINE WORKSHOP...
HiRez.io

51. WE’VE LEARNED...
✓ Why Building JS
✓ Build Theory Overview
✓ Grunt API
✓ A Little Bit Of Yeoman
✓ Oh… And One More Thing...

52. IF YOU’RE GONNA BE LAZY...

53. DO IT WITH STYLE

54. THANK YOU!
HiRez.io
@HiRez_io
shai@hirez.io
slides: http://goo.gl/j1pYOt