Your SlideShare is downloading. ×
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Front end workflow Presentation at Coffee@DBG by Praveen Vijayan


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 …

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
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


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