![Page 1: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/1.jpg)
![Page 3: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/3.jpg)
Editors
![Page 4: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/4.jpg)
Sublime Text 3
•Cross Platform •Multiple Selections •Completely Customisable •Package Control
![Page 5: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/5.jpg)
Package ControlAmazing community behind it
![Page 6: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/6.jpg)
Atom•Built By Github •Completely built with web
technologies •Node Integration •Hackable from top to bottom •Themes and Extensions by the team
and community
![Page 7: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/7.jpg)
Brackets•Built by adobe •Inline Editors •Live Preview •Preprocessor support •Extract Extension that gets
information from PSD files.
![Page 8: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/8.jpg)
Scaffolding & asset management tools
![Page 9: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/9.jpg)
NPM
• Comes bundled with NodeJS • Package manager for Javascript • Manage Code dependencies • Download dependencies straight to
your project or install them on your machine.
• More than 100,000 packages on the registry.
![Page 10: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/10.jpg)
Bower
• Package manager for the web. • Optimised for front end by getting
only one version of the required library of choice.
• You can define the version of the package you want.
npm install -g bower
![Page 11: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/11.jpg)
Yeoman
•Combination of Yo , a build tool and a package manager
• Yo scaffolds a new application adding all the tasks you need the build tool to do.
•The build tool builds, previews and tests your project.
•The package manager takes care of the dependencies in your project,
npm install -g yo
![Page 12: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/12.jpg)
Coding
![Page 13: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/13.jpg)
Languages
![Page 14: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/14.jpg)
SASS
• CSS Preprocessor • Use variables in CSS • Mixins • Nesting • Import files without any addition
HTTP requests
![Page 15: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/15.jpg)
CSS Preprocessors
• LESS • Stylus • Myth • etc..
![Page 16: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/16.jpg)
CoffeeScript
• Easy on the eyes • String Interpolation • Readable Javascript Output
npm install -g coffe-script
![Page 17: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/17.jpg)
Website Frameworks
![Page 18: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/18.jpg)
Bootstrap
• Supports preprocessors • Default styles for HTML elements • Common Javascript plugins like
sliders and tooltips already bundled in
• Mobile first approach • Available at a CDN
![Page 19: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/19.jpg)
Foundation
• Core written in SASS • CLI Tool • Rails Friendly • Mobile First • Semantic
![Page 20: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/20.jpg)
Other Frameworks
• Material UI • Semantic UI • Gumby Framework • Pure.css
![Page 21: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/21.jpg)
App Frameworks
![Page 22: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/22.jpg)
Foundation
• Angular Powered • Also powered by SASS • New CLI Tool • Component Driven • Motion UI
npm install -g foundation-cli
![Page 23: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/23.jpg)
Ionic
• Native Feel • Powered by Angular • Hybrid App Framework • CLI Tool
npm install -g ionic
![Page 24: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/24.jpg)
Javascript Frameworks
![Page 25: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/25.jpg)
Angular
• Built at Google • HTML on Steroids • Two-way data-binding • Unit Test Ready • Declarative Code
![Page 26: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/26.jpg)
Ember
• Handelbars Integrated • Components • Data Binding • Routing
npm install -g ember-cli
![Page 27: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/27.jpg)
Meteor
• Works on both Front End and Backend
• Integrates easily with MongoDB • Browser and Mobile • Package System • Live Updates • CLI Tool
curl https://install.meteor.com/ | sh
![Page 28: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/28.jpg)
React
• Built by Facebook • Framework that lets you focus on
the view and create the UI • Virtual DOM
![Page 29: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/29.jpg)
Asset Preparing
![Page 30: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/30.jpg)
Grunt
• It allows for automation on your workflow
• All the tasks you may need are probably already packaged as plugins that you can freely use
• Really big community
npm install -g grunt-cli
![Page 31: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/31.jpg)
Gulp
• It allows for automation on your workflow
• Open source packages to use on your project
• Easy to learn
npm install -g gulp
![Page 32: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/32.jpg)
Software
• Codekit • Prepos • Sassquatch • Smaller • ImageOptim
![Page 33: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/33.jpg)
Browser Features
![Page 34: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/34.jpg)
Chrome Dev Tools
• Element Inspector • Console • Timelines • Network • You can extend and create Chrome
Extensions to improve it
![Page 35: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/35.jpg)
Chrome Mobile Tools
• Test in various devices and their resolutions
• Set you custom resolution • Test the touch response on your
website • Test different network states
![Page 36: Front-End Tools and Workflows€¦ · Bower • Package manager for the web. • Optimised for front end by getting only one version of the required library ... Yeoman •Combination](https://reader034.vdocument.in/reader034/viewer/2022050216/5f61ee7f52aaa5479f20e382/html5/thumbnails/36.jpg)
That’s it Folks