Tooling for
Modern Web App
developer
About
me Praveen Vijayan
decodize.com
@praveen_vijaya
Agenda
Javascript CSS HTML
Boilerplate
Backbone
Angular
Backbone + amd
Normalize.css HTML5 Boilerplate
Mobile Boilerplates
Emaile...
TODO Project
Model
View
Events
jQuery never tell how
to structure your app
JS
Structure
Your
Model View View
Adapter
StructureJS
MV *
Model View Presenter
Model View Controller
Model View ViewController
Model View V...
ViewData
View
View
View
Model
Collection
View
MV*Frameworks
MV*Library Spine JS
VS
... ...
Scaling backbone apps
Backbone never tell
how to create
reusable modules
and load it on
demand
Asynchronous
Module
Definition (AMD)
Modular Javascript
ModularJavascript
Purpose
Module?Highly decoupled, distinct pieces of
functionality stored in modules
Dependency References
ModularJavascript
Two
Steps
1. Define module
2. Require it
ModularJavascript
ModularJavascript
Configuration
Require module
Define module & its dependencies1
2
ModularJavascript
Combine related scripts together
Minifies it via UglifyJS/ Closure Compiler
Optimize CSS
r.js optimizer
...
ModularJavascript
AMD
loaders
curljs
ES6
Module
Test
Driven
Development
TDD/BDD
TDD/BDD
Why TDD?
Design your code well
Build confidence to use your code
Don’t let same bug popup twice
Seamless change re...
Fail
PassRefactor
TDD/BDD
PROCESS
TDD/BDD
Qunit
Fixture
Source file
Tests
TDD/BDD
Qunit
Group test
Test cases
TDD/BDD
Qunit
Javascript
transcompiler
https://github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS
c
o
ff
e
e
s
c
ri
p
t
t
y
p
e
s
c
ri
p
t
Performance
tuning
&
Optimization
Javascript lint
Code Quality Tools for
detecting potential
problem in your
javascript
Chrome dev tool
Timeline
Chrome dev tool
Profiling
Chrome dev tool
Tracing
chrome://tracing/
JavaScript performance
http://jsperf.com/ http://dromaeo.com/
Documentation YUI
Natural
Docs
Docco
Documentation
Continuous
Integration
&
Code coverage
Codecoverage
http://jsoverson.github.io/plato/examples/jquery/
Plato
Code coverage
plato
istanbul
jscover
blanket.js
jscomplexity.org
Tools
Continuous
Integration
Continuous integration – the practice
of frequently integrating one's new or
changed code with the ...
Travis-ci.org
Tests
Gitpush
Session Summary
Structure your app
Optimise it
Document it
Continuous integration
CSS
CSS Libraries
Bootstrap
Pure
Foundation
Topcoat
inuit
CSS
Preprocessors
What is CSS
Preprocessors
Stylesheet meta language that
is interpreted into CSS
$basecolor: #f1f1f1;
body{
background: $ba...
CSS is
Awesome!
but
Maintaining
:)
:(
S
C
S
S
S
C
S
S
partials
@import
@extend
@include
@if
@for
%placeholder
Compiling
Deployment Server Client Local
Compile as
part of
deployment
process
(Capistrano,
Fabric).
Compile and
cache up ...
Tools
Prepros
Online
Tool
Preprocessors
don't output bad
code, bad
developers do
Structure
your
CSS
Repetition
Maintainability
Decoupling
Specificity
OOCSS
BEM
SMACSS
Methodologies
OOCSS
Purpose of OOCSS is to identify common
pattern & encourage code reuse
Main principles
Separate structure and skin
Se...
BEMBlock : A block is an independent entity.
Element : An element is a part of a block that
performs a certain function. B...
SMACSSBase : Base rules are the defaults.
Layout : Divide the page into sections. Layouts hold one
or more modules togethe...
Living
Style guide
Create style guide as
you code!!
Githubstyleguide
https://github.com/styleguide/css
KSSstyleguide
/*
A button suitable for giving stars to someone.
:hover - Subtle hover highlight.
.stars-given - A highligh...
KSS
Styledoco
Performance
Optimization
Performance
Performance
Performance
Session Summary
Bootstrap using libraries
Structure your CSS
Optimise it
Document it
HTML
JADE
HAML
Markdown
JADE
JADE
Syntax
Filters
Code
Iteration
Conditionals
Template inheritance
Block append / prepend
Includes
Mixins
Performance
optimization
Performanceoptimization
tools Minify CSS, HTML, JS
Concat CSS, JS
Optimise image using
optipng, jpegtran etc..
W3C Validator, HTML InspectorPerformanceoptimization
tools
Performanceoptimization
tools
Pagespeed
Yslow
Webpagetest
GTMetrix
GA
Session Summary
Use templating langs prudently
Measure & Optimize for
performance
Validate your code
ToolingTooling
Yo
Grunt
Bower
Lightning-fast scaffolding
Great build process
Automatically compile CoffeeScript & Compass
Automatically lint your script...
Yeoman
Yeoman = Yo + Grunt + Bower
Yeoman
Install
npm install -g yo grunt-cli bower
npm install -g generator-webapp
yo webapp
Usage
grunt server
grunt test
g...
Yeoman
Anatomy
Project folder
App folder
Grunt file
Package json
Unit tests
Bower json
Grunt
Gruntfile.js
Config
Tasks
Targets
This file used to
configure or
define tasks and
load grunt
plugins
package.json
Config
This file contain all
information about
npm packages
Grunt
Grunt
Bower
A Project
Production Environment
Production Environment
Production Environment
180+ scss files, 550+ jade files
Demo
Thanks
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan
Upcoming SlideShare
Loading in...5
×

Front end workflow Presentation at Coffee@DBG by Praveen Vijayan

1,433

Published on

The primary objective of this presentation is to get an idea about end-to-end front-end workflow and useful tools. We will discuss hot tools like Yeoman, Grunt and Bower. But the session is not limited to these tools - we will touch each phase of front-end development like boiler-plating, preprocessors, performance, documentation, code quality, reporting and architecture etc.

Published in: Technology

Transcript of "Front end workflow Presentation at Coffee@DBG by Praveen Vijayan"

  1. 1. Tooling for Modern Web App developer
  2. 2. About me Praveen Vijayan decodize.com @praveen_vijaya
  3. 3. Agenda
  4. 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. 5. TODO Project
  6. 6. Model View Events
  7. 7. jQuery never tell how to structure your app
  8. 8. JS Structure Your
  9. 9. Model View View Adapter StructureJS MV * Model View Presenter Model View Controller Model View ViewController Model View ViewModel
  10. 10. ViewData
  11. 11. View View View
  12. 12. Model Collection View
  13. 13. MV*Frameworks MV*Library Spine JS VS ... ...
  14. 14. Scaling backbone apps
  15. 15. Backbone never tell how to create reusable modules and load it on demand
  16. 16. Asynchronous Module Definition (AMD) Modular Javascript
  17. 17. ModularJavascript Purpose Module?Highly decoupled, distinct pieces of functionality stored in modules Dependency References
  18. 18. ModularJavascript Two Steps 1. Define module 2. Require it
  19. 19. ModularJavascript
  20. 20. ModularJavascript Configuration Require module Define module & its dependencies1 2
  21. 21. 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
  22. 22. ModularJavascript AMD loaders curljs ES6 Module
  23. 23. Test Driven Development TDD/BDD
  24. 24. 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
  25. 25. Fail PassRefactor TDD/BDD PROCESS
  26. 26. TDD/BDD Qunit Fixture Source file Tests
  27. 27. TDD/BDD Qunit Group test Test cases
  28. 28. TDD/BDD Qunit
  29. 29. Javascript transcompiler https://github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS
  30. 30. c o ff e e s c ri p t
  31. 31. t y p e s c ri p t
  32. 32. Performance tuning & Optimization
  33. 33. Javascript lint Code Quality Tools for detecting potential problem in your javascript
  34. 34. Chrome dev tool Timeline
  35. 35. Chrome dev tool Profiling
  36. 36. Chrome dev tool Tracing chrome://tracing/
  37. 37. JavaScript performance http://jsperf.com/ http://dromaeo.com/
  38. 38. Documentation YUI Natural Docs Docco
  39. 39. Documentation
  40. 40. Continuous Integration & Code coverage
  41. 41. Codecoverage http://jsoverson.github.io/plato/examples/jquery/ Plato
  42. 42. Code coverage plato istanbul jscover blanket.js jscomplexity.org Tools
  43. 43. 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
  44. 44. Travis-ci.org Tests Gitpush
  45. 45. Session Summary Structure your app Optimise it Document it Continuous integration
  46. 46. CSS
  47. 47. CSS Libraries Bootstrap Pure Foundation Topcoat inuit
  48. 48. CSS Preprocessors
  49. 49. What is CSS Preprocessors Stylesheet meta language that is interpreted into CSS $basecolor: #f1f1f1; body{ background: $basecolor } body { background: #f1f1f1; } SC SS C SS
  50. 50. CSS is Awesome! but Maintaining :) :(
  51. 51. S C S S
  52. 52. S C S S partials @import @extend @include @if @for %placeholder
  53. 53. 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.
  54. 54. Tools Prepros
  55. 55. Online Tool
  56. 56. Preprocessors don't output bad code, bad developers do
  57. 57. Structure your CSS
  58. 58. Repetition Maintainability Decoupling Specificity
  59. 59. OOCSS BEM SMACSS Methodologies
  60. 60. OOCSS Purpose of OOCSS is to identify common pattern & encourage code reuse Main principles Separate structure and skin Separate container and content
  61. 61. 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..
  62. 62. 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.
  63. 63. Living Style guide Create style guide as you code!!
  64. 64. Githubstyleguide https://github.com/styleguide/css
  65. 65. 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{ ... }
  66. 66. KSS Styledoco
  67. 67. Performance Optimization
  68. 68. Performance
  69. 69. Performance
  70. 70. Performance
  71. 71. Session Summary Bootstrap using libraries Structure your CSS Optimise it Document it
  72. 72. HTML
  73. 73. JADE HAML Markdown
  74. 74. JADE
  75. 75. JADE Syntax Filters Code Iteration Conditionals Template inheritance Block append / prepend Includes Mixins
  76. 76. Performance optimization
  77. 77. Performanceoptimization tools Minify CSS, HTML, JS Concat CSS, JS Optimise image using optipng, jpegtran etc..
  78. 78. W3C Validator, HTML InspectorPerformanceoptimization tools
  79. 79. Performanceoptimization tools Pagespeed Yslow Webpagetest GTMetrix GA
  80. 80. Session Summary Use templating langs prudently Measure & Optimize for performance Validate your code
  81. 81. ToolingTooling
  82. 82. Yo Grunt Bower
  83. 83. 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
  84. 84. Yeoman Yeoman = Yo + Grunt + Bower
  85. 85. Yeoman Install npm install -g yo grunt-cli bower npm install -g generator-webapp yo webapp Usage grunt server grunt test grunt
  86. 86. Yeoman
  87. 87. Anatomy Project folder App folder Grunt file Package json Unit tests Bower json
  88. 88. Grunt
  89. 89. Gruntfile.js Config Tasks Targets This file used to configure or define tasks and load grunt plugins
  90. 90. package.json Config This file contain all information about npm packages
  91. 91. Grunt
  92. 92. Grunt
  93. 93. Bower
  94. 94. A Project
  95. 95. Production Environment
  96. 96. Production Environment
  97. 97. Production Environment 180+ scss files, 550+ jade files
  98. 98. Demo
  99. 99. Thanks
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×