The document discusses various tools for modern web application development including JavaScript frameworks like Angular and Backbone, CSS preprocessors like SCSS and LESS, templating languages like Jade and Haml, module loaders, performance optimization tools, documentation tools, and continuous integration tools. It also covers techniques for structuring code and CSS including OOCSS, BEM, and SMACSS methodologies. Finally, it discusses scaffolding and build tools like Yeoman, Grunt, and Bower for automating workflows.

1. Tooling for
Modern Web App
developer

2. About
me Praveen Vijayan
decodize.com
@praveen_vijaya

3. Agenda

4. Javascript CSS HTML
Boilerplate
Backbone
Angular
Backbone + amd
Normalize.css HTML5 Boilerplate
Mobile Boilerplates
Emailer Boilerplate
Authoring
abstractions
Coffeescript
Typescript
Dart
SCSS
LESS
Stylus
Markdown
JADE
HAML
Frameworks
jQuery, Backbone,
Angular, Ember
Bootstrap, Topcoat, Pure,
Foundation
Bootstrap, html5 Boilerplate
Iteration
workflow
Grunt, Brunch, Yeoman, Codekit, Prepros, Livereload
Performance
tuning and code
quality
Chrome dev tools, Heap
profile, Timeline, Tracing,
linting
Frame rate
Continuous painting
Selector profile
CSSLint
Recess
Network panel
Validation
W3C validator
HTML inspector
DOM Monster
Optimization
Uglifyjs
Closure compiler
r.js
Cssmin
YUI compressor
cssoo
Htmlmin
Image optimization
Shared
understanding
YUI Doc
Docco
KSS
Styledocco

5. TODO Project

8. Model
View
Events

9. jQuery never tell how
to structure your app

10. JS
Structure
Your

11. Model View View
Adapter
StructureJS
MV *
Model View Presenter
Model View Controller
Model View ViewController
Model View ViewModel

12. ViewData

13. View
View
View

14. Model
Collection
View

15. MV*Frameworks
MV*Library Spine JS
VS
... ...

16. Scaling backbone apps

17. Backbone never tell
how to create
reusable modules
and load it on
demand

18. Asynchronous
Module
Definition (AMD)
Modular Javascript

19. ModularJavascript
Purpose
Module?Highly decoupled, distinct pieces of
functionality stored in modules
Dependency References

20. ModularJavascript
Two
Steps
1. Define module
2. Require it

21. ModularJavascript

22. ModularJavascript
Configuration
Require module
Define module & its dependencies1
2

23. ModularJavascript
Combine related scripts together
Minifies it via UglifyJS/ Closure Compiler
Optimize CSS
r.js optimizer
$ node r.js -o baseUrl=. paths.
jquery=some/other/jquery name=main out=main-
built.js

24. ModularJavascript
AMD
loaders
curljs
ES6
Module

25. Test
Driven
Development
TDD/BDD

26. TDD/BDD
Why TDD?
Design your code well
Build confidence to use your code
Don’t let same bug popup twice
Seamless change requests adaption
Automatic Documentation
Continuous Integration

27. Fail
PassRefactor
TDD/BDD
PROCESS

28. TDD/BDD
Qunit
Fixture
Source file
Tests

29. TDD/BDD
Qunit
Group test
Test cases

30. TDD/BDD
Qunit

31. Javascript
transcompiler
https://github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS

32. c
o
ff
e
e
s
c
ri
p
t

33. t
y
p
e
s
c
ri
p
t

34. Performance
tuning
&
Optimization

35. Javascript lint
Code Quality Tools for
detecting potential
problem in your
javascript

36. Chrome dev tool
Timeline

37. Chrome dev tool
Profiling

38. Chrome dev tool
Tracing
chrome://tracing/

39. JavaScript performance
http://jsperf.com/ http://dromaeo.com/

40. Documentation YUI
Natural
Docs
Docco

41. Documentation

42. Continuous
Integration
&
Code coverage

43. Codecoverage
http://jsoverson.github.io/plato/examples/jquery/
Plato

44. Code coverage
plato
istanbul
jscover
blanket.js
jscomplexity.org
Tools

45. Continuous
Integration
Continuous integration – the practice
of frequently integrating one's new or
changed code with the existing code
repository – should occur frequently
enough that no intervening window
remains between commit and build,
and such that no errors can arise
without developers noticing them and
correcting them immediately
CI
-wikipedia

46. Travis-ci.org
Tests
Gitpush

47. Session Summary
Structure your app
Optimise it
Document it
Continuous integration

48. CSS

49. CSS Libraries
Bootstrap
Pure
Foundation
Topcoat
inuit

50. CSS
Preprocessors

51. What is CSS
Preprocessors
Stylesheet meta language that
is interpreted into CSS
$basecolor: #f1f1f1;
body{
background: $basecolor
}
body {
background: #f1f1f1;
}
SC
SS
C
SS

52. CSS is
Awesome!
but
Maintaining
:)
:(

53. S
C
S
S

54. S
C
S
S
partials
@import
@extend
@include
@if
@for
%placeholder

55. Compiling
Deployment Server Client Local
Compile as
part of
deployment
process
(Capistrano,
Fabric).
Compile and
cache up on
request.
Compile
using
javascript at
browser end
(not
recommended)
Compile
using tools.

56. Tools
Prepros

57. Online
Tool

58. Preprocessors
don't output bad
code, bad
developers do

59. Structure
your
CSS

60. Repetition
Maintainability
Decoupling
Specificity

61. OOCSS
BEM
SMACSS
Methodologies

62. OOCSS
Purpose of OOCSS is to identify common
pattern & encourage code reuse
Main principles
Separate structure and skin
Separate container and content

63. BEMBlock : A block is an independent entity.
Element : An element is a part of a block that
performs a certain function. Blocks and
elements constitute page content.
Modifier : Similar block with slightly altered its
appearance or behavior..

64. SMACSSBase : Base rules are the defaults.
Layout : Divide the page into sections. Layouts hold one
or more modules together.
Module : are the reusable, modular parts of our design.
State : are ways to describe how our modules or layouts
will look when in a particular state. Is it hidden or
expanded?
Theme : are similar to state rules in that they describe
how modules or layouts might look.

65. Living
Style guide
Create style guide as
you code!!

66. Githubstyleguide
https://github.com/styleguide/css

67. KSSstyleguide
/*
A button suitable for giving stars to someone.
:hover - Subtle hover highlight.
.stars-given - A highlight indicating you've already given a star.
.stars-given:hover - Subtle hover highlight on top of stars-given
styling.
.disabled - Dims the button to indicate it cannot be used.
Styleguide 2.1.3.
*/
a.button.star{
...
}
a.button.star.stars-given{
...
}
a.button.star.disabled{
...
}

68. KSS
Styledoco

69. Performance
Optimization

70. Performance

71. Performance

72. Performance

73. Session Summary
Bootstrap using libraries
Structure your CSS
Optimise it
Document it

74. HTML

75. JADE
HAML
Markdown

76. JADE

77. JADE
Syntax
Filters
Code
Iteration
Conditionals
Template inheritance
Block append / prepend
Includes
Mixins

78. Performance
optimization

79. Performanceoptimization
tools Minify CSS, HTML, JS
Concat CSS, JS
Optimise image using
optipng, jpegtran etc..

80. W3C Validator, HTML InspectorPerformanceoptimization
tools

81. Performanceoptimization
tools
Pagespeed
Yslow
Webpagetest
GTMetrix
GA

82. Session Summary
Use templating langs prudently
Measure & Optimize for
performance
Validate your code

83. ToolingTooling

84. Yo
Grunt
Bower

85. Lightning-fast scaffolding
Great build process
Automatically compile CoffeeScript & Compass
Automatically lint your scripts
Built-in preview server
Awesome Image Optimization
Killer package management
PhantomJS Unit Testing
Yeoman
It's a workflow
collection of tools and best practices

86. Yeoman
Yeoman = Yo + Grunt + Bower

87. Yeoman
Install
npm install -g yo grunt-cli bower
npm install -g generator-webapp
yo webapp
Usage
grunt server
grunt test
grunt

88. Yeoman

89. Anatomy
Project folder
App folder
Grunt file
Package json
Unit tests
Bower json

90. Grunt

91. Gruntfile.js
Config
Tasks
Targets
This file used to
configure or
define tasks and
load grunt
plugins

92. package.json
Config
This file contain all
information about
npm packages

93. Grunt

94. Grunt

95. Bower

96. A Project

97. Production Environment

98. Production Environment

99. Production Environment
180+ scss files, 550+ jade files

100. Demo

101. Thanks