Front-End Ops

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

Transcript

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/
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
15. } zofe.com.br } braziljs.org } bit.ly/GDG-SP } bit.ly/FEMUSP } Web Compatibility
16. damniel.com/slides
18. Vagrant is open-source software for creating and configuring virtual development environments. vagrantup.com
19. vagrantup.com
20. vagrantbox.es
21. DEMO
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
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
42. A remote server automation and deployment tool written in Ruby capistranorb.com
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