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

Transcript

1. FRONTEND WORKFLOW FRONTEND WORKFLOW REDEFINED REDEFINED
2. Topic Summary Discuss frontend issues Solutions & tooling Project Architecture Guidelines Debug Environment Setups
3. LIFE FRONTEND DEVELOPER OF
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
11. AUTOMATION + STANDARDIZATION PHOTOGRAPH BY KIRK MCMENAMIN
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
40. WEB COMPONENTS | SMACSS | BEM | ATOMIC DESIGN ...
41. SMACSS
42. Base Rules Layout Rules Module Rules State Rules Theme Rules
43. SMACCS Example
44. SMACCS Example
45. BEM BLOCK, ELEMENT, MODIFIER
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.
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
66. Virtualization via Vagrant
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 Github
74. Demo
75. Praveen Vijayan Flip Media | A member of the Leo Burnett MENA Group of Companies Thanks