Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Front-End Tools and Workflows

976 views

Published on

Talk from QCon London 15:
qconlondon.com/presentation/front-end-tools-and-workflows

Published in: Technology
  • Be the first to comment

Front-End Tools and Workflows

  1. 1. twitter.com/NikkitaFTW iamsaravieira.com hey@iamsaravieira.com
  2. 2. Editors
  3. 3. Sublime Text 3 •Cross Platform •Multiple Selections •Completely Customisable •Package Control
  4. 4. Package Control Amazing community behind it
  5. 5. Atom •Built By Github •Completely built with web technologies •Node Integration •Hackable from top to bottom •Themes and Extensions by the team and community
  6. 6. Brackets •Built by adobe •Inline Editors •Live Preview •Preprocessor support •Extract Extension that gets information from PSD files.
  7. 7. Scaffolding & asset management tools
  8. 8. 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.
  9. 9. 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
  10. 10. 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
  11. 11. Coding
  12. 12. Languages
  13. 13. SASS • CSS Preprocessor • Use variables in CSS • Mixins • Nesting • Import files without any addition HTTP requests
  14. 14. CSS Preprocessors • LESS • Stylus • Myth • etc..
  15. 15. CoffeeScript • Easy on the eyes • String Interpolation • Readable Javascript Output npm install -g coffe-script
  16. 16. Website Frameworks Frameworks
  17. 17. 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
  18. 18. Foundation • Core written in SASS • CLI Tool • Rails Friendly • Mobile First • Semantic
  19. 19. Other Frameworks • Material UI • Semantic UI • Gumby Framework • Pure.css
  20. 20. App Frameworks Frameworks
  21. 21. Foundation • Angular Powered • Also powered by SASS • New CLI Tool • Component Driven • Motion UI npm install -g foundation-cli
  22. 22. Ionic • Native Feel • Powered by Angular • Hybrid App Framework • CLI Tool npm install -g ionic
  23. 23. Javascript Frameworks Frameworks
  24. 24. Angular • Built at Google • HTML on Steroids • Two-way data-binding • Unit Test Ready • Declarative Code
  25. 25. Ember • Handelbars Integrated • Components • Data Binding • Routing npm install -g ember-cli
  26. 26. 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
  27. 27. React • Built by Facebook • Framework that lets you focus on the view and create the UI • Virtual DOM
  28. 28. Asset Preparing Preparing
  29. 29. 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
  30. 30. Gulp • It allows for automation on your workflow • Open source packages to use on your project • Easy to learn npm install -g gulp
  31. 31. Software • Codekit • Prepos • Sassquatch • Smaller • ImageOptim
  32. 32. Browser Features
  33. 33. Chrome Dev Tools • Element Inspector • Console • Timelines • Network • You can extend and create Chrome Extensions to improve it
  34. 34. 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
  35. 35. That’s it Folks Folks

×