Front End Workflow Redefined

Slide 1

Slide 1 text

FRONTEND WORKFLOW FRONTEND WORKFLOW REDEFINED REDEFINED

Slide 2

Slide 2 text

Topic Summary Discuss frontend issues Solutions & tooling Project Architecture Guidelines Debug Environment Setups

Slide 3

Slide 3 text

LIFE FRONTEND DEVELOPER OF

Slide 4

Slide 4 text

Frontend Land is Complex

Slide 5

Slide 5 text

It is more than CSS, HTML & JS

Slide 6

Slide 6 text

Each project is different RWD SPAs Dynamic sites Client side MVC Mobile applications Desktop Web apps Static sites HTML5 Games IoT

Slide 7

Slide 7 text

Technology stack is different Phonegap Reactjs Angularjs Bootstrap iconic Atom shell Pure octopress Sentcha

Slide 8

Slide 8 text

.net Ruby PHP Drupal iOS Java Wordpress Sharepoint Android Supporting different Backend technologies

Slide 9

Slide 9 text

SEO Usability Performance Accessibility Internationalization Keeping standards

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

AUTOMATION + STANDARDIZATION PHOTOGRAPH BY KIRK MCMENAMIN

Slide 12

Slide 12 text

Workflow tools

Slide 13

Slide 13 text

Yeoman | Brunch | Middlemen ...

Slide 14

Slide 14 text

Project Dependency Management

Slide 15

Slide 15 text

NPM | Bower

Slide 16

Slide 16 text

Setting up base Environment

Slide 17

Slide 17 text

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/

Slide 18

Slide 18 text

Project initialization

Slide 19

Slide 19 text

Most time consuming part

Slide 20

Slide 20 text

Simplify Process Using Yo Generators Npm install Git checkout

Slide 21

Slide 21 text

Web starter kit Gulp JADE SCSS Browserify Components Images Page Layouts Pages Scripts Styles

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Demo

Slide 24

Slide 24 text

Project Architecture

Slide 25

Slide 25 text

JADE Templating Engine includes conditionals mixins iteration comments tags extends filters comments attributes

Slide 26

Slide 26 text

SASS | SCSS Syntactically Awesome StyleSheets variables nesting mixins iteration functions imports extends controls comments attributes

Slide 27

Slide 27 text

Browserify require('modules')

Slide 28

Slide 28 text

Demo

Slide 29

Slide 29 text

Component based development

Slide 30

Slide 30 text

Header Footer Grid Masterpage Page Layout Components Divide and assemble

Slide 31

Slide 31 text

Masterpage Page layout Components Template Dissection

Slide 32

Slide 32 text

Masterpage Page Page Layout

Slide 33

Slide 33 text

Create components using JADE + SCSS + JS

Slide 34

Slide 34 text

Component Anatomy include ../components/browsePhysician/browsePhysician

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

common main script Scripts applicable to whole site. Header and footer scripts, navigations, search etc.. Require and initializes functions here. Browserify generated script.

Slide 37

Slide 37 text

Benefits Debug Maintain Consistency reuse Safe deployments Avoid duplication Testing Focused Time saving Isolation

Slide 38

Slide 38 text

Demo

Slide 39

Slide 39 text

Guidelines

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

SMACSS

Slide 42

Slide 42 text

Base Rules Layout Rules Module Rules State Rules Theme Rules

Slide 43

Slide 43 text

SMACCS Example

Slide 44

Slide 44 text

SMACCS Example

Slide 45

Slide 45 text

BEM BLOCK, ELEMENT, MODIFIER

Slide 46

Slide 46 text

Block Element Modifier .search__form {} .search__input {} .search__button {} .block__element ------------------------- .block--modifier .block__element--modifier .search__button--info {}

Slide 47

Slide 47 text

Adapt generic guideline | create one

Slide 48

Slide 48 text

with style Debug

Slide 49

Slide 49 text

Source maps

Slide 50

Slide 50 text

A source map provides a way of mapping code within a compressed file back to it's original position in a source file.

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Enable source map Chrome Firefox

Slide 54

Slide 54 text

source map

Slide 55

Slide 55 text

Chrome dev tool Workspace

Slide 56

Slide 56 text

Enable Workspace

Slide 57

Slide 57 text

Workspace

Slide 58

Slide 58 text

HTTP Proxy

Slide 59

Slide 59 text

Proxy Server Client

Slide 60

Slide 60 text

Charles Web Debugging Proxy | Fiddler

Slide 61

Slide 61 text

Map remote | Map Local server html, css & script proxy html css script Local environment

Slide 62

Slide 62 text

Demo

Slide 63

Slide 63 text

Setting up Frontend Environment Setting up Frontend Environment

Slide 64

Slide 64 text

Setting locally

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

Virtualization via Vagrant

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

How to setup Install vagrant Install vb/vmware Install Boxes

Slide 69

Slide 69 text

Boxname IP address vagrant up vagrant ssh

Slide 70

Slide 70 text

Setting in server using jenkins & CI

Slide 71

Slide 71 text

Developer Developer Developer Code Repo jenkins server build trigger commits Scripts Server Public deployment Workflow

Slide 72

Slide 72 text

Always keep frontend source code

Slide 73

Slide 73 text

Version control Git Mercurial Vault CSV SVN Bitbucket Bazaar TFS Github

Slide 74

Slide 74 text

Demo

Slide 75

Slide 75 text

Praveen Vijayan Flip Media | A member of the Leo Burnett MENA Group of Companies Thanks