Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front-End Ops

Front-End Ops

A talk about tools that bring front-end developers a little bit closer to web operations


Daniel Filho

August 30, 2013


  1. Front-End Ops Daniel Filho @danielfilho

  2. Web Developer

  3. A web developer is a programmer who specializes in, or

    is specifically engaged in, the development of World Wide Web applications, or distributed network applications that are run over HTTP from a web server to a web browser. en.wikipedia.org/wiki/Web_developer
  4. Web Operations

  5. Web operations is a domain of expertise within IT systems

    management that involves the deployment, operation, maintenance, tuning, and repair of web-based applications and systems. en.wikipedia.org/wiki/Web_operations
  6. DevOps

  7. DevOps (...) is a software development method that stresses communication,

    collaboration and integration between software developers and IT professionals. (...) It aims to help an organization rapidly produce software products and services. en.wikipedia.org/wiki/DevOps
  8. Front-End Developer

  9. The goal of a front-end developer is to create clear,

    easy, fast pages and interfaces that will make people understand and care about the information, by putting it in context, expose its legitimacy or lack thereof, and reveal their implicit or explicit interconnection. theguardian.com/help/insideguardian/2009/sep/28/blogpost
  10. Front-End Ops

  11. Such a person would need to be an expert at

    serving and hosting front-end resources. They’d need to be pros at Grunt (or something similar) and have strong opinions about modules. They would find the best ways to piece together the parts of a Web application, and they’d be pros at versioning, caching and deployment. smashingmagazine.com/2013/06/11/front-end-ops/
  12. None
  13. Front-end is not just a pretty face, it's the friendly,

    forward-looking interface of web development. theguardian.com/help/insideguardian/2009/sep/28/blogpost
  14. None
  15. } zofe.com.br } braziljs.org } bit.ly/GDG-SP } bit.ly/FEMUSP } Web

  16. damniel.com/slides

  17. None
  18. Vagrant is open-source software for creating and configuring virtual development

    environments. vagrantup.com
  19. vagrantup.com

  20. vagrantbox.es

  21. DEMO

  22. None
  23. Bower is a package manager for the web. bower.io

  24. bower.io

  25. NodeJS & NPM nodejs.org

  26. npm install -g bower

  27. bower install jquery

  28. !"" components !"" jquery #"" README.md #"" bower.json #"" component.json

    #"" composer.json #"" jquery-migrate.js #"" jquery-migrate.min.js #"" jquery.js #"" jquery.min.js #"" jquery.min.map !"" package.json
  29. None
  30. Grunt is a task-based command line build tool for JavaScript

    projects. weblog.bocoup.com/introducing-grunt/
  31. gruntjs.com

  32. NodeJS & NPM nodejs.org

  33. CLI
 command line interface

  34. Plugins
 clean, compress, concat, connect, copy, csslint, cssmin, htmlmin, imagemin,

    imagemin, livereload, symlink etc.
  35. Plugins
 compass, sass, less, stylus, handlebars, JSHint, jade, require.js, jasmine,

    qunit, uglify etc. ! ah, e coffeescript.
  36. npm install -g grunt-cli

  37. DEMO

  38. Deploy

  39. Drag & Drop WebDAV Pen Drive FTP

  40. None
  41. None
  42. A remote server automation and deployment tool written in Ruby

  43. capistranorb.com

  44. Ruby & gem ruby-lang.org

  45. CLI
 command line interface

  46. gem install capistrano --pre --trust- policy HighSecurity

  47. capify .

  48. DEMO

  49. Obrigado :-) ! @danielfilho damniel.com/slides