Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/1QMdYCm. Sara Vieira presents some of the apps, command line tools and frameworks available to the front-end developer. Filmed at qconlondon.com. Sara Vieira is a freelance Front-End Developer from Portugal. She’s one of those few people in the world who love what they do and believe that the Internet is something we are building and making better on a daily basis may that be through education websites or simply by creating useful one page applications.

2. InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• News 15-20 / week
• Articles 3-4 / week
• Presentations (videos) 12-15 / week
• Interviews 2-3 / week
• Books 1 / month
Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/front-end-tools-workflows

3. Presented at QCon London
www.qconlondon.com
Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide

4. twitter.com/NikkitaFTW
iamsaravieira.com
hey@iamsaravieira.com

5. Editors

6. Sublime Text 3
•Cross Platform
•Multiple Selections
•Completely Customisable
•Package Control

7. Package Control
Amazing community behind it

8. Atom
•Built By Github
•Completely built with web
technologies
•Node Integration
•Hackable from top to bottom
•Themes and Extensions by the team
and community

9. Brackets
•Built by adobe
•Inline Editors
•Live Preview
•Preprocessor support
•Extract Extension that gets
information from PSD files.

10. Scaffolding & asset
management tools

11. 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.

12. 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

13. 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

14. Coding

15. Languages

16. SASS
• CSS Preprocessor
• Use variables in CSS
• Mixins
• Nesting
• Import files without any addition
HTTP requests

17. CSS Preprocessors
• LESS
• Stylus
• Myth
• etc..

18. CoffeeScript
• Easy on the eyes
• String Interpolation
• Readable Javascript Output
npm install -g coffe-script

19. Website
Frameworks

20. 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

21. Foundation
• Core written in SASS
• CLI Tool
• Rails Friendly
• Mobile First
• Semantic

22. Other Frameworks
• Material UI
• Semantic UI
• Gumby Framework
• Pure.css

23. App
Frameworks

24. Foundation
• Angular Powered
• Also powered by SASS
• New CLI Tool
• Component Driven
• Motion UI
npm install -g foundation-cli

25. Ionic
• Native Feel
• Powered by Angular
• Hybrid App Framework
• CLI Tool
npm install -g ionic

26. Javascript
Frameworks

27. Angular
• Built at Google
• HTML on Steroids
• Two-way data-binding
• Unit Test Ready
• Declarative Code

28. Ember
• Handelbars Integrated
• Components
• Data Binding
• Routing
npm install -g ember-cli

29. 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

30. React
• Built by Facebook
• Framework that lets you focus on
the view and create the UI
• Virtual DOM

31. Asset
Preparing

32. 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

33. Gulp
• It allows for automation on your
workflow
• Open source packages to use on
your project
• Easy to learn
npm install -g gulp

34. Software
• Codekit
• Prepos
• Sassquatch
• Smaller
• ImageOptim

35. Browser
Features

36. Chrome Dev Tools
• Element Inspector
• Console
• Timelines
• Network
• You can extend and create Chrome
Extensions to improve it

37. 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

38. That’s it
Folks

39. Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/front-
end-tools-workflows