$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by praveen vijayan

Other Decks in Programming

Transcript

  1. FRONTEND
    WORKFLOW
    FRONTEND
    WORKFLOW
    REDEFINED
    REDEFINED

    View Slide

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

    View Slide

  3. LIFE FRONTEND DEVELOPER
    OF

    View Slide

  4. Frontend Land is Complex

    View Slide

  5. It is more than CSS, HTML & JS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. SEO
    Usability
    Performance
    Accessibility
    Internationalization
    Keeping standards

    View Slide

  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

    View Slide

  11. AUTOMATION + STANDARDIZATION
    PHOTOGRAPH BY KIRK MCMENAMIN

    View Slide

  12. Workflow tools

    View Slide

  13. Yeoman | Brunch | Middlemen ...

    View Slide

  14. Project Dependency Management

    View Slide

  15. NPM | Bower

    View Slide

  16. Setting up base Environment

    View Slide

  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/

    View Slide

  18. Project initialization

    View Slide

  19. Most time consuming part

    View Slide

  20. Simplify Process Using
    Yo Generators
    Npm install
    Git checkout

    View Slide

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

    View Slide

  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

    View Slide

  23. Demo

    View Slide

  24. Project Architecture

    View Slide

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

    View Slide

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

    View Slide

  27. Browserify
    require('modules')

    View Slide

  28. Demo

    View Slide

  29. Component based development

    View Slide

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

    View Slide

  31. Masterpage
    Page layout
    Components
    Template
    Dissection

    View Slide

  32. Masterpage
    Page
    Page Layout

    View Slide

  33. Create components using
    JADE + SCSS + JS

    View Slide

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

    View Slide

  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.

    View Slide

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

    View Slide

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

    View Slide

  38. Demo

    View Slide

  39. Guidelines

    View Slide

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

    View Slide

  41. SMACSS

    View Slide

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

    View Slide

  43. SMACCS
    Example

    View Slide

  44. SMACCS
    Example

    View Slide

  45. BEM
    BLOCK, ELEMENT, MODIFIER

    View Slide

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

    View Slide

  47. Adapt generic guideline | create one

    View Slide

  48. with style
    Debug

    View Slide

  49. Source maps

    View Slide

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

    View Slide

  51. View Slide

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

    View Slide

  53. Enable source map
    Chrome
    Firefox

    View Slide

  54. source map

    View Slide

  55. Chrome dev tool Workspace

    View Slide

  56. Enable Workspace

    View Slide

  57. Workspace

    View Slide

  58. HTTP Proxy

    View Slide

  59. Proxy Server
    Client

    View Slide

  60. Charles Web Debugging Proxy | Fiddler

    View Slide

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

    View Slide

  62. Demo

    View Slide

  63. Setting up Frontend
    Environment
    Setting up Frontend
    Environment

    View Slide

  64. Setting locally

    View Slide

  65. View Slide

  66. Virtualization via Vagrant

    View Slide

  67. View Slide

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

    View Slide

  69. Boxname
    IP address
    vagrant up vagrant ssh

    View Slide

  70. Setting in server using jenkins & CI

    View Slide

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

    View Slide

  72. Always keep frontend source code

    View Slide

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

    View Slide

  74. Demo

    View Slide

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

    View Slide