Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Tooling for Modern Web App Developer

Tooling for Modern Web App Developer

Front-end development workflow is becoming increasingly demanding as the complexity of the environment grows. Thankfully, there are many tools that can make your life as a front-end developer easier and perhaps, more rewarding.

The primary objective of this session 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.

praveen vijayan

August 07, 2013

More Decks by praveen vijayan

Other Decks in Programming


  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

  6. None
  7. None
  8. Model View Events

  9. jQuery never tell how to structure your app

  10. JS Structure Your

  11. Model View View Adapter Structure JS MV * Model View

    Presenter Model View Controller Model View ViewController Model View ViewModel
  12. View Data

  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. Modular Javascript Purpose Module? Highly decoupled, distinct pieces of functionality

    stored in modules Dependency References
  20. Modular Javascript Two Steps 1. Define module 2. Require it

  21. Modular Javascript

  22. Modular Javascript Configuration Require module Define module & its dependencies

    1 2
  23. 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
  24. Modular Javascript 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 Pass Refactor 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. Code coverage 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 Git push

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

  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

  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. 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..
  64. 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.
  65. Living Style guide Create style guide as you code!!

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

  67. 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{ ... }
  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. Performance optimization tools Minify CSS, HTML, JS Concat CSS, JS

    Optimise image using optipng, jpegtran etc..
  80. W3C Validator, HTML Inspector Performance optimization tools

  81. Performance optimization tools Pagespeed Yslow Webpagetest GTMetrix GA

  82. Session Summary Use templating langs prudently Measure & Optimize for

    performance Validate your code
  83. Tooling Tooling

  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