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.

Transcript

1. Tooling for
   Modern Web App
   developer
   

   View Slide

2. About
   me
   Praveen Vijayan
   decodize.com
   @praveen_vijaya
   

   View Slide

3. Agenda
   

   View Slide

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
   

   View Slide

5. TODO Project
   

   View Slide

6. View Slide

7. View Slide

8. Model
   View
   Events
   

   View Slide

9. jQuery never tell how
   to structure your app
   

   View Slide

10. JS
    Structure
    Your
    

    View Slide

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

    View Slide

12. View
    Data
    

    View Slide

13. View
    View
    View
    

    View Slide

14. Model
    Collection
    View
    

    View Slide

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

    View Slide

16. Scaling backbone apps
    

    View Slide

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

    View Slide

18. Asynchronous
    Module
    Definition (AMD)
    Modular Javascript
    

    View Slide

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

    View Slide

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

    View Slide

21. Modular Javascript
    

    View Slide

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

    View Slide

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
    

    View Slide

24. Modular Javascript
    AMD
    loaders
    curljs
    ES6
    Module
    

    View Slide

25. Test
    Driven
    Development
    TDD / BDD
    

    View Slide

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
    

    View Slide

27. Fail
    Pass
    Refactor
    TDD / BDD
    PROCESS
    

    View Slide

28. TDD / BDD
    Qunit
    Fixture
    Source file
    Tests
    

    View Slide

29. TDD / BDD
    Qunit
    Group test
    Test cases
    

    View Slide

30. TDD / BDD
    Qunit
    

    View Slide

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

    View Slide

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

    View Slide

33. t
    y
    p
    e
    s
    c
    ri
    p
    t
    

    View Slide

34. Performance
    tuning
    &
    Optimization
    

    View Slide

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

    View Slide

36. Chrome dev tool
    Timeline
    

    View Slide

37. Chrome dev tool
    Profiling
    

    View Slide

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

    View Slide

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

    View Slide

40. Documentation
    YUI
    Natural
    Docs
    Docco
    

    View Slide

41. Documentation
    

    View Slide

42. Continuous
    Integration
    &
    Code coverage
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

46. Travis-ci.org
    Tests
    Git push
    

    View Slide

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

    View Slide

48. CSS
    

    View Slide

49. CSS Libraries
    Bootstrap
    Pure
    Foundation
    Topcoat
    inuit
    

    View Slide

50. CSS
    Preprocessors
    

    View Slide

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
    

    View Slide

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

    View Slide

53. S
    C
    S
    S
    

    View Slide

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

    View Slide

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.
    

    View Slide

56. Tools
    Prepros
    

    View Slide

57. Online
    Tool
    

    View Slide

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

    View Slide

59. Structure
    your
    CSS
    

    View Slide

60. Repetition
    Maintainability
    Decoupling
    Specificity
    

    View Slide

61. OOCSS
    BEM
    SMACSS
    Methodologies
    

    View Slide

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

    View Slide

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..
    

    View Slide

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.
    

    View Slide

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

    View Slide

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

    View Slide

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{
    ...
    }
    

    View Slide

68. KSS
    Styledoco
    

    View Slide

69. Performance
    Optimization
    

    View Slide

70. Performance
    

    View Slide

71. Performance
    

    View Slide

72. Performance
    

    View Slide

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

    View Slide

74. HTML
    

    View Slide

75. JADE
    HAML
    Markdown
    

    View Slide

76. JADE
    

    View Slide

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

    View Slide

78. Performance
    optimization
    

    View Slide

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

    View Slide

80. W3C Validator, HTML Inspector
    Performance optimization
    tools
    

    View Slide

81. Performance optimization
    tools
    Pagespeed
    Yslow
    Webpagetest
    GTMetrix
    GA
    

    View Slide

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

    View Slide

83. Tooling
    Tooling
    

    View Slide

84. Yo
    Grunt
    Bower
    

    View Slide

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
    

    View Slide

86. Yeoman
    Yeoman = Yo + Grunt + Bower
    

    View Slide

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

    View Slide

88. Yeoman
    

    View Slide

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

    View Slide

90. Grunt
    

    View Slide

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

    View Slide

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

    View Slide

93. Grunt
    

    View Slide

94. Grunt
    

    View Slide

95. Bower
    

    View Slide

96. A Project
    

    View Slide

97. Production Environment
    

    View Slide

98. Production Environment
    

    View Slide

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

    View Slide

100. Demo
     

     View Slide

101. Thanks
     

     View Slide