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

More Decks by praveen vijayan

Other Decks in Programming


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

    MVC Mobile applications Desktop Web apps Static sites HTML5 Games IoT
  2. 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
  3. 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/
  4. 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
  5. SASS | SCSS Syntactically Awesome StyleSheets variables nesting mixins iteration

    functions imports extends controls comments attributes
  6. 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.
  7. common main script Scripts applicable to whole site. Header and

    footer scripts, navigations, search etc.. Require and initializes functions here. Browserify generated script.
  8. Block Element Modifier .search__form {} .search__input {} .search__button {} .block__element

    ------------------------- .block--modifier .block__element--modifier .search__button--info {}
  9. A source map provides a way of mapping code within

    a compressed file back to it's original position in a source file.
  10. Map remote | Map Local server html, css & script

    proxy html css script Local environment
  11. Praveen Vijayan Flip Media | A member of the Leo

    Burnett MENA Group of Companies Thanks