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

Front End Workflow Redefined

Front End Workflow Redefined

Front-end development is complex as we have to deal with diversified project environments. Tooling will help to ease our workflow.

This presentation is about creating component based web development. Modular web development with JADE, SCSS and JS.

Watch: https://www.youtube.com/watch?v=fZW7aRHDuiA&feature=youtu.be


praveen vijayan

January 08, 2015



  2. Topic Summary Discuss frontend issues Solutions & tooling Project Architecture

    Guidelines Debug Environment Setups

  4. Frontend Land is Complex

  5. It is more than CSS, HTML & JS

  6. Each project is different RWD SPAs Dynamic sites Client side

    MVC Mobile applications Desktop Web apps Static sites HTML5 Games IoT
  7. Technology stack is different Phonegap Reactjs Angularjs Bootstrap iconic Atom

    shell Pure octopress Sentcha
  8. .net Ruby PHP Drupal iOS Java Wordpress Sharepoint Android Supporting

    different Backend technologies
  9. SEO Usability Performance Accessibility Internationalization Keeping standards

  10. Parallel integration Design/ Tech Brief amends Developer switching Multiple developers

    Requires RnD on modules & not carrying to another project Different integration methods Interoperability Outdated code inconsistency Browser compatibility Design compatibility Lack of DRY principle No future reference Faster development schedules Different knowledge level Other set of issues

  12. Workflow tools

  13. Yeoman | Brunch | Middlemen ...

  14. Project Dependency Management

  15. NPM | Bower

  16. Setting up base Environment

  17. INSTALL TOOLS Nodejs - http://nodejs.org/ Ruby - https://www.ruby-lang.org/ - http://rubyinstaller.org/downloads/

    (win) SCSS - http://sass-lang.com/ Yeoman - http://yeoman.io/ Bower - http://bower.io/ Gulp/Grunt - http://gulpjs.com/ / http://gruntjs.com/ Git - http://git-scm.com/
  18. Project initialization

  19. Most time consuming part

  20. Simplify Process Using Yo Generators Npm install Git checkout

  21. Web starter kit Gulp JADE SCSS Browserify Components Images Page

    Layouts Pages Scripts Styles
  22. Task Automation Compile SCSS Vendor prefixing Minification Browserify Image optimization

    Lint CSS Lint JS Uglify Watch files Sprite generation Performance metrics Livereload HTTP server Concat Validation code coverage Unit tests
  23. Demo

  24. Project Architecture

  25. JADE Templating Engine includes conditionals mixins iteration comments tags extends

    filters comments attributes
  26. SASS | SCSS Syntactically Awesome StyleSheets variables nesting mixins iteration

    functions imports extends controls comments attributes
  27. Browserify require('modules')

  28. Demo

  29. Component based development

  30. Header Footer Grid Masterpage Page Layout Components Divide and assemble

  31. Masterpage Page layout Components Template Dissection

  32. Masterpage Page Page Layout

  33. Create components using JADE + SCSS + JS

  34. Component Anatomy include ../components/browsePhysician/browsePhysician

  35. config legos main.scss responsive Generic color definition, font definition, variables,

    mixins etc.. Generic styles, sitewide elements etc.. Main style sheet. imports all component styles, config, legos etc.. Media queries and rwd overrides.
  36. common main script Scripts applicable to whole site. Header and

    footer scripts, navigations, search etc.. Require and initializes functions here. Browserify generated script.
  37. Benefits Debug Maintain Consistency reuse Safe deployments Avoid duplication Testing

    Focused Time saving Isolation
  38. Demo

  39. Guidelines


  41. SMACSS

  42. Base Rules Layout Rules Module Rules State Rules Theme Rules

  43. SMACCS Example

  44. SMACCS Example


  46. Block Element Modifier .search__form {} .search__input {} .search__button {} .block__element

    ------------------------- .block--modifier .block__element--modifier .search__button--info {}
  47. Adapt generic guideline | create one

  48. with style Debug

  49. Source maps

  50. A source map provides a way of mapping code within

    a compressed file back to it's original position in a source file.
  51. None
  52. JS //# sourceMappingURL=script.js.map CSS /*# sourceMappingURL=main.css.map */ Adding sourcemap

  53. Enable source map Chrome Firefox

  54. source map

  55. Chrome dev tool Workspace

  56. Enable Workspace

  57. Workspace

  58. HTTP Proxy

  59. Proxy Server Client

  60. Charles Web Debugging Proxy | Fiddler

  61. Map remote | Map Local server html, css & script

    proxy html css script Local environment
  62. Demo

  63. Setting up Frontend Environment Setting up Frontend Environment

  64. Setting locally

  65. None
  66. Virtualization via Vagrant

  67. None
  68. How to setup Install vagrant Install vb/vmware Install Boxes

  69. Boxname IP address vagrant up vagrant ssh

  70. Setting in server using jenkins & CI

  71. Developer Developer Developer Code Repo jenkins server build trigger commits

    Scripts Server Public deployment Workflow
  72. Always keep frontend source code

  73. Version control Git Mercurial Vault CSV SVN Bitbucket Bazaar TFS

  74. Demo

  75. Praveen Vijayan Flip Media | A member of the Leo

    Burnett MENA Group of Companies Thanks