Embed Size (px)
DESCRIPTION
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.
Citation preview
Tooling for Modern Web App developer
About me
Praveen Vijayandecodize.com@praveen_vijaya
Agenda
Javascript CSS HTML
BoilerplateBackboneAngularBackbone + amd
Normalize.css HTML5 BoilerplateMobile BoilerplatesEmailer Boilerplate
Authoring abstractions
CoffeescriptTypescriptDart
SCSSLESSStylus
MarkdownJADEHAML
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 rateContinuous paintingSelector profileCSSLintRecess
Network panelValidationW3C validatorHTML inspectorDOM Monster
OptimizationUglifyjsClosure compilerr.js
CssminYUI compressor cssoo
HtmlminImage optimization
Shared understanding
YUI DocDocco
KSSStyledocco
Deploy SVN, Git, Travis CI, Jenkins
ModelView
Events
jQuery never tell how to structure your app
JS Structure
Your
Model View View Adapter
Str
uct
ure
JS
MV *
Model View Presenter
Model View Controller
Model View ViewController
Model View ViewModel
ViewData
View
View
View
Model
Collection
View
M
V*
Fra
me
wo
rks
MV
* Lib
rary 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
Mo
du
lar
Java
scrip
t
Purpose Module?Highly decoupled, distinct pieces of functionality stored in modules
Dependency References
Mo
du
lar
Java
scrip
t
Two Steps1. Define module2. Require it
Mo
du
lar
Java
scrip
t
Mo
du
lar
Java
scrip
t
Configuration
Require module
Define module & its dependencies1
2
Mo
du
lar
Java
scrip
t
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
Mo
du
lar
Java
scrip
t
AMD loaders
curljs
ES6 Module
Test Driven Development
TDD
/ B
DD
TDD
/ B
DDWhy 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
Fail
PassRefactor
TDD
/ B
DD
PROCESS
TDD
/ B
DDQunit
Fixture
Source file Tests
TDD
/ B
DDQunit Group test
Test cases
Javascripttranscompiler
https://github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS
coffeescript
typescript
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/
Do
cum
en
tatio
nYUI
Natural Docs
Docco
Do
cum
en
tatio
n
Continuous Integration
&Code coverage
Co
de
co
vera
ge
http://jsoverson.github.io/plato/examples/jquery/
Plato
Code coverageplatoistanbuljscoverblanket.jsjscomplexity.org
To
ols
ContinuousIntegration
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
Travis-ci.org
Tests
Git
pu
sh
Session SummaryStructure your appOptimise itDocument itContinuous integration
CSS
CSS Libraries Bootstrap PureFoundationTopcoatinuit
CSS Preprocessors
What is CSSPreprocessorsStylesheet meta language that
is interpreted into CSS
$basecolor: #f1f1f1;
body{background: $basecolor
}
body {
background: #f1f1f1;
}
SCSS
CSS
CSS is Awesome!but Maintaining
:)
:(
SCSS
SCSS
partials@import@extend@include@if@for%placeholder@functions etc..
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.
Tools
Prepros
Online
Tool
s
Preprocessors don't output bad
code, bad developers do
Structure your CSS
RepetitionMaintainabilityDecouplingSpecificity
WH
Y?
OOCSSBEMSMACSS
Methodologies
OOCSSPurpose of OOCSS is to identify common pattern & encourage code reuse
Main principles
Separate structure and skin
Separate container and content
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..
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.
Living Style guide
Create style guide as you code!!
KS
S s
tyle
gui
de
/*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{ ...}
KSSStyledoco
PerformanceOptimization
Performance
Performance
Performance
Session SummaryBootstrap using librariesStructure your CSSOptimise itDocument it
HTML
JADEHAML
Markdown
JADE
JADESyntax Filters Code IterationConditionalsTemplate inheritanceBlock append / prependIncludesMixins
Performance optimization
Pe
rfo
rma
nce
op
tim
iza
tio
n
too
lsMinify CSS, HTML, JSConcat CSS, JSOptimise image using optipng, jpegtran etc..
W3C Validator, HTML InspectorP
erf
orm
an
ce o
pti
miz
ati
on
to
ols
Pe
rfo
rma
nce
op
tim
iza
tio
n
too
lsPagespeedYslowWebpagetestGTMetrixGA
Session SummaryUse templating langs prudently
Measure & Optimize for performance
Validate your code
ToolingTooling
YoGruntBower
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
YeomanIt's a workflow
collection of tools and best practices
Yeoman
Yeoman = Yo + Grunt + Bower
YeomanInstallnpm install -g yo grunt-cli bowernpm install -g generator-webappyo webapp
Usagegrunt servergrunt testgrunt
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
