Front End Workflow Redefined

Speaker Deck

4 min read Original article ↗

  • FRONTEND WORKFLOW FRONTEND WORKFLOW REDEFINED REDEFINED

  • Topic Summary Discuss frontend issues Solutions & tooling Project Architecture

    Guidelines Debug Environment Setups

  • LIFE FRONTEND DEVELOPER OF

  • Frontend Land is Complex

  • It is more than CSS, HTML & JS

  • Each project is different RWD SPAs Dynamic sites Client side

    MVC Mobile applications Desktop Web apps Static sites HTML5 Games IoT

  • Technology stack is different Phonegap Reactjs Angularjs Bootstrap iconic Atom

    shell Pure octopress Sentcha

  • .net Ruby PHP Drupal iOS Java Wordpress Sharepoint Android Supporting

    different Backend technologies

  • SEO Usability Performance Accessibility Internationalization Keeping standards

  • 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

  • AUTOMATION + STANDARDIZATION PHOTOGRAPH BY KIRK MCMENAMIN

  • Workflow tools

  • Yeoman | Brunch | Middlemen ...

  • Project Dependency Management

  • NPM | Bower

  • Setting up base Environment

  • 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/

  • Project initialization

  • Most time consuming part

  • Simplify Process Using Yo Generators Npm install Git checkout

  • Web starter kit Gulp JADE SCSS Browserify Components Images Page

    Layouts Pages Scripts Styles

  • 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

  • Demo

  • Project Architecture

  • JADE Templating Engine includes conditionals mixins iteration comments tags extends

    filters comments attributes

  • SASS | SCSS Syntactically Awesome StyleSheets variables nesting mixins iteration

    functions imports extends controls comments attributes

  • Browserify require('modules')

  • Demo

  • Component based development

  • Header Footer Grid Masterpage Page Layout Components Divide and assemble

  • Masterpage Page layout Components Template Dissection

  • Masterpage Page Page Layout

  • Create components using JADE + SCSS + JS

  • Component Anatomy include ../components/browsePhysician/browsePhysician

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

  • common main script Scripts applicable to whole site. Header and

    footer scripts, navigations, search etc.. Require and initializes functions here. Browserify generated script.

  • Benefits Debug Maintain Consistency reuse Safe deployments Avoid duplication Testing

    Focused Time saving Isolation

  • Demo

  • Guidelines

  • WEB COMPONENTS | SMACSS | BEM | ATOMIC DESIGN ...

  • SMACSS

  • Base Rules Layout Rules Module Rules State Rules Theme Rules

  • SMACCS Example

  • SMACCS Example

  • BEM BLOCK, ELEMENT, MODIFIER

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

    ------------------------- .block--modifier .block__element--modifier .search__button--info {}

  • Adapt generic guideline | create one

  • with style Debug

  • Source maps

  • A source map provides a way of mapping code within

    a compressed file back to it's original position in a source file.

  • None

  • JS //# sourceMappingURL=script.js.map CSS /*# sourceMappingURL=main.css.map */ Adding sourcemap

  • Enable source map Chrome Firefox

  • source map

  • Chrome dev tool Workspace

  • Enable Workspace

  • Workspace

  • HTTP Proxy

  • Proxy Server Client

  • Charles Web Debugging Proxy | Fiddler

  • Map remote | Map Local server html, css & script

    proxy html css script Local environment

  • Demo

  • Setting up Frontend Environment Setting up Frontend Environment

  • Setting locally

  • None

  • Virtualization via Vagrant

  • None

  • How to setup Install vagrant Install vb/vmware Install Boxes

  • Boxname IP address vagrant up vagrant ssh

  • Setting in server using jenkins & CI

  • Developer Developer Developer Code Repo jenkins server build trigger commits

    Scripts Server Public deployment Workflow

  • Always keep frontend source code

  • Version control Git Mercurial Vault CSV SVN Bitbucket Bazaar TFS

    Github

  • Demo

  • Praveen Vijayan Flip Media | A member of the Leo

    Burnett MENA Group of Companies Thanks