Tooling for Modern Web App Developer

Slide 1

Slide 1 text

Tooling for Modern Web App developer

Slide 2

Slide 2 text

About me Praveen Vijayan decodize.com @praveen_vijaya

Slide 3

Slide 3 text

Agenda

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

TODO Project

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Model View Events

Slide 9

Slide 9 text

jQuery never tell how to structure your app

Slide 10

Slide 10 text

JS Structure Your

Slide 11

Slide 11 text

Model View View Adapter Structure JS MV * Model View Presenter Model View Controller Model View ViewController Model View ViewModel

Slide 12

Slide 12 text

View Data

Slide 13

Slide 13 text

View View View

Slide 14

Slide 14 text

Model Collection View

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Scaling backbone apps

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Asynchronous Module Definition (AMD) Modular Javascript

Slide 19

Slide 19 text

Modular Javascript Purpose Module? Highly decoupled, distinct pieces of functionality stored in modules Dependency References

Slide 20

Slide 20 text

Modular Javascript Two Steps 1. Define module 2. Require it

Slide 21

Slide 21 text

Modular Javascript

Slide 22

Slide 22 text

Modular Javascript Configuration Require module Define module & its dependencies 1 2

Slide 23

Slide 23 text

Modular Javascript 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

Slide 24

Slide 24 text

Modular Javascript AMD loaders curljs ES6 Module

Slide 25

Slide 25 text

Test Driven Development TDD / BDD

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Fail Pass Refactor TDD / BDD PROCESS

Slide 28

Slide 28 text

TDD / BDD Qunit Fixture Source file Tests

Slide 29

Slide 29 text

TDD / BDD Qunit Group test Test cases

Slide 30

Slide 30 text

TDD / BDD Qunit

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

c o ff e e s c ri p t

Slide 33

Slide 33 text

t y p e s c ri p t

Slide 34

Slide 34 text

Performance tuning & Optimization

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Chrome dev tool Timeline

Slide 37

Slide 37 text

Chrome dev tool Profiling

Slide 38

Slide 38 text

Chrome dev tool Tracing chrome://tracing/

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Documentation YUI Natural Docs Docco

Slide 41

Slide 41 text

Documentation

Slide 42

Slide 42 text

Continuous Integration & Code coverage

Slide 43

Slide 43 text

Code coverage http://jsoverson.github.io/plato/examples/jquery/ Plato

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Travis-ci.org Tests Git push

Slide 47

Slide 47 text

Session Summary Structure your app Optimise it Document it Continuous integration

Slide 48

Slide 48 text

CSS

Slide 49

Slide 49 text

CSS Libraries Bootstrap Pure Foundation Topcoat inuit

Slide 50

Slide 50 text

CSS Preprocessors

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

CSS is Awesome! but Maintaining :) :(

Slide 53

Slide 53 text

S C S S

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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.

Slide 56

Slide 56 text

Tools Prepros

Slide 57

Slide 57 text

Online Tool

Slide 58

Slide 58 text

Preprocessors don't output bad code, bad developers do

Slide 59

Slide 59 text

Structure your CSS

Slide 60

Slide 60 text

Repetition Maintainability Decoupling Specificity

Slide 61

Slide 61 text

OOCSS BEM SMACSS Methodologies

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

BEM Block : 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..

Slide 64

Slide 64 text

SMACSS Base : 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.

Slide 65

Slide 65 text

Living Style guide Create style guide as you code!!

Slide 66

Slide 66 text

Github style guide https://github.com/styleguide/css

Slide 67

Slide 67 text

KSS style guide /* 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{ ... }

Slide 68

Slide 68 text

KSS Styledoco

Slide 69

Slide 69 text

Performance Optimization

Slide 70

Slide 70 text

Performance

Slide 71

Slide 71 text

Performance

Slide 72

Slide 72 text

Performance

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

HTML

Slide 75

Slide 75 text

JADE HAML Markdown

Slide 76

Slide 76 text

JADE

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

Performance optimization

Slide 79

Slide 79 text

Performance optimization tools Minify CSS, HTML, JS Concat CSS, JS Optimise image using optipng, jpegtran etc..

Slide 80

Slide 80 text

W3C Validator, HTML Inspector Performance optimization tools

Slide 81

Slide 81 text

Performance optimization tools Pagespeed Yslow Webpagetest GTMetrix GA

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

Tooling Tooling

Slide 84

Slide 84 text

Yo Grunt Bower

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

Yeoman Yeoman = Yo + Grunt + Bower

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

Yeoman

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

Grunt

Slide 91

Slide 91 text

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