20130528 solution linux_frousseau_nopain_webdev
3 likes1,343 views
1. Developing web applications has become increasingly complex over the years, requiring developers to choose frameworks, configure apps, and handle deployment. 2. Templates can help streamline development by providing pre-configured starting points for common stacks and handling boilerplate configuration. 3. Tools like Vagrant and Docker can help isolate development environments and more easily simulate production. 4. Frameworks like Brunch and Yeoman can automate frontend tasks like compilation, minification, and live reloading.
![Fabric
from fabric.api import env, run
def prod():
env.hosts = ['www.yourapp.com']
env.user = 'root'
def install_db():
run('apt-get install postgres')
run('psql -c "CREATE USER you')
run('sudo -u postgres createdb ydb --owner you')
$ fab prod install_db](https://image.slidesharecdn.com/20130528solutionlinuxfrousseaunopainwebdev-130529152647-phpapp02/85/20130528-solution-linux_frousseau_nopain_webdev-38-320.jpg)
![Fabtools
from fabtools import require
def prod():
env.hosts = ['www.yourapp.com']
env.user = 'root'
def require_db():
require.postgres.server()
require.postgres.user('you', 's3cr3')
require.postgres.database('yourdb', 'you')
$ fab prod require_db](https://image.slidesharecdn.com/20130528solutionlinuxfrousseaunopainwebdev-130529152647-phpapp02/85/20130528-solution-linux_frousseau_nopain_webdev-39-320.jpg)
More Related Content
What's hot (20)
Viewers also liked (20)
![[plan politika] Politik dan Pemuda Indonesia : Politik Pencitraan Di Mata Pem...](https://cdn.slidesharecdn.com/ss_thumbnails/pencitraansby-101025111001-phpapp02-thumbnail.jpg?width=560&fit=bounds)
![[plan politika] Indonesian Youth and Politics : Between Youth, Politics, and ...](https://cdn.slidesharecdn.com/ss_thumbnails/slide4-101013204628-phpapp02-thumbnail.jpg?width=560&fit=bounds)
![[plan politika] Pemudan dan Politik Indonesia : Ibas, the Next Top Kick Polit...](https://cdn.slidesharecdn.com/ss_thumbnails/draftibas-110309095141-phpapp01-thumbnail.jpg?width=560&fit=bounds)
![[plan politika] Indonesian Youth and Politics : What Imad, a President of Stu...](https://cdn.slidesharecdn.com/ss_thumbnails/fiveminuteswithimad-101108044740-phpapp01-thumbnail.jpg?width=560&fit=bounds)
Similar to 20130528 solution linux_frousseau_nopain_webdev (20)
![[Coscup 2012] JavascriptMVC](https://cdn.slidesharecdn.com/ss_thumbnails/coscupjavascriptmvc-120818115356-phpapp01-thumbnail.jpg?width=560&fit=bounds)
More from Frank Rousseau (17)
Recently uploaded (20)
20130528 solution linux_frousseau_nopain_webdev
- 2. Part I make your web app
- 3. 90's easy but static cgi-scripts.... netscape index.html
- 4. 90's easy but static cgi-scripts.... netscape index.html mozilla http://localhost/my-app PHP apache server required easy deployment
- 5. + database
- 6. 2000's The rise of web frameworks
- 10. extra configuration the deployment requires daemonization and more configuration
- 12. real app in the browser framework required: Backone, Angular, Ember...… JS files require organization and assembling HTML templates?… Coffeescript? Livescript?… …
- 13. css pre-processors your CSS files need a build
- 14. before coding any feature I need to... chose two frameworks
- 15. before coding any feature I need to... chose two frameworks chose a database
- 16. before coding any feature I need to... chose two frameworks chose a database configure my app
- 17. before coding any feature I need to... chose two frameworks chose a database configure my app handle deployment
- 18. before coding any feature I need to... chose two frameworks chose a database configure my app handle deployment assemble my front-end files
- 19. before coding any feature I need to... chose two frameworks chose a database configure my app handle deployment assemble my front-end files build my stylesheets
- 20. NEED HELP?…
- 22. chose your frameworks and your database sorry there is no golden rule for this
- 23. how to organize my files and my configuration ? people already use your framework and know the good practices they provide application templates
- 24. your templates are like your dotfiles clone a template, modify it then keep it for your next apps( )
- 25. rails new blog -m http://example.com/template.rb or # Clone repository git pull https://github.com/gaarf/express-boilerplate mv express-boilerplate your-app cd your-app # Link to your repository git remote rm origin git remote add origin [email protected]:you/your-app.git git add . git push -u origin master
- 27. isolate with containers One for each module Easier to manage More secured
- 28. that's true for dev environment too Vagrant, a simple hypervisor for developers, can help (cleaner that it looks like) http://vagrantup.com
- 29. useful for keeping your local machine clean simulating the production environment
- 30. init vagrant gem install vagrant # add a box to your base box list vagrant box add ubuntu http://files.vagrantup.com/precise64.box create and start your vm vagrant init ubuntu # init config vagrant up # start the vm vagrant ssh # connect through ssh... ... # and install your stuff! port forwarding to access to your module like if they were running on localhost # modify Vagrantfile config.vm.forward_port 9101, 9101
- 31. act as a devop automate your deployment
- 32. straighforward but hard to maintain
- 33. remote shell scripting with python still require some work
- 34. recipes Idempotent great but a little bit overkill
- 35. ?
- 36. Fabtools
- 37. Fabtools = Fabric + helpers + idempotence http://fabtools.readthedocs.org/
- 38. Fabric from fabric.api import env, run def prod(): env.hosts = ['www.yourapp.com'] env.user = 'root' def install_db(): run('apt-get install postgres') run('psql -c "CREATE USER you') run('sudo -u postgres createdb ydb --owner you') $ fab prod install_db
- 39. Fabtools from fabtools import require def prod(): env.hosts = ['www.yourapp.com'] env.user = 'root' def require_db(): require.postgres.server() require.postgres.user('you', 's3cr3') require.postgres.database('yourdb', 'you') $ fab prod require_db
- 40. Part IV Front-end assembler
- 43. install brunch as a global package npm install brunch -g create project cd yourproject brunch new client # create a client template cd client npm install # dependencies required by brunch brunch build Automatic build when changes occur brunch watch
- 45. paths: public: 'public' files: javascripts: defaultExtension: 'coffee' joinTo: 'javascripts/app.js': /^app/ 'javascripts/vendor.js': /^vendor/ stylesheets: defaultExtension: 'styl' joinTo: 'stylesheets/app.css': /^app/ 'stylesheets/vendor.css': /^vendor/ templates: defaultExtension: 'jade' joinTo: 'javascripts/app.js' framework: 'backbone'
- 46. paths: public: 'public' files: javascripts: defaultExtension: 'coffee' joinTo: 'javascripts/app.js': /^app/ 'javascripts/vendor.js': /^vendor/ stylesheets: defaultExtension: 'styl' joinTo: 'stylesheets/app.css': /^app/ 'stylesheets/vendor.css': /^vendor/ templates: defaultExtension: 'jade' joinTo: 'javascripts/app.js' framework: 'backbone'
- 47. paths: public: 'public' files: javascripts: defaultExtension: 'coffee' joinTo: 'javascripts/app.js': /^app/ 'javascripts/vendor.js': /^vendor/ stylesheets: defaultExtension: 'styl' joinTo: 'stylesheets/app.css': /^app/ 'stylesheets/vendor.css': /^vendor/ templates: defaultExtension: 'jade' joinTo: 'javascripts/app.js' framework: 'backbone'
- 48. paths: public: 'public' files: javascripts: defaultExtension: 'coffee' joinTo: 'javascripts/app.js': /^app/ 'javascripts/vendor.js': /^vendor/ stylesheets: defaultExtension: 'styl' joinTo: 'stylesheets/app.css': /^app/ 'stylesheets/vendor.css': /^vendor/ templates: defaultExtension: 'jade' joinTo: 'javascripts/app.js' framework: 'backbone'
- 50. Part V Features
- 51. hello world yeah I got my hello world with my new devops stuff!
- 52. basic features What about authentication?… registration?… Taking advantage of user data?…
- 53. NEED HELP?…
- 55. an open personal cloud with auth and registration included apps that share their data real-time notifications for all data changes https://demo.cozycloud.cc/
- 57. + a choice for two frameworks a choice for a database a node.js template easy deployment an already configured assembler a packaged vm for your dev environment
- 59. am I stuck with cozy ? change database adapter => then you have a classic web app.
- 60. cozy is a good way to... quickstart learn node.js and spa prototype make personal tools
- 62. Appendix Code
- 63. the bookmark tutorial let's write an app that allows you to store your favorite links
- 64. Get prepared npm install compound brunch cozy scaffolt -g Setup the dev environment (based on Vagrant) cozy dev:init cozy dev:start Create your project $ cozy new yourproject --github your-account Github password: Your cozy url: https://yourcozy.cozycloud.cc/ Project created!
- 65. we are coding a full client in the browser that takes its data from a REST API
- 66. Generate front end code cd client/ scaffolt module bookmark info: create app/models/bookmark.coffee info: create app/collections/bookmarks.coffee info: create app/views/bookmarks.coffee info: create app/views/bookmark.coffee info: create app/views/templates/bookmark.jade info: create app/views/styles/_bookmark.styl brunch w # build on changes
- 67. Then code what is missing! Templates # views/templates/bookmark.jade .title #{model.title} .url a(href="#{model.url}") #{model.url} button.delete-button delete # views/templates/home.jade h1 My bookmarks #create-bookmark-form input#title-field(placeholder="title") input#url-field(placeholder="url") button.btn#create-button create #bookmarks
- 68. Home View # views/home.coffee View = require '../lib/view' BookmarksView = require './bookmarks' Bookmark = require '../models/bookmark' module.exports = class AppView extends View el: 'body' events: 'click #create-button': 'onCreateClicked' template: -> require './templates/home' afterRender: -> @bookmarksView = new BookmarksView() @bookmarksView.collection.fetch() onCreateClicked: => title = @$('#title-field').val() url = @$('#url-field').val() bookmark = new Bookmark title: title, url: url @bookmarksView.collection.create bookmark, success: => alert 'bookmark added' error: => alert 'Server error occured'
- 69. Bookmark view # views/bookmark.jade View = require '../lib/view' module.exports = class BookmarkView extends View template: require './templates/bookmark' className: 'bookmark' events: 'click .delete-button': 'onDeleteClicked' onDeleteClicked: -> @model.destroy success: => @destroy() error: => alert 'Server error occured'
- 70. Styles # views/styles/application.styl body padding: 20px # views/styles/_bookmark.styl .bookmark padding: 10px 0
- 71. backend urls to retrieve, create and delete bookmarks
- 72. Generate backend files compound g model bookmark title url exists app/ exists app/models/ create app/models/bookmark.coffee patch db/schema.coffee
- 73. Routes # config/routes.coffee exports.routes = (map) -> map.get 'bookmarks', 'bookmarks#all' map.post 'bookmarks', 'bookmarks#create' map.del 'bookmarks/:id', 'bookmarks#destroy'
- 74. Controllers # apps/controllers/bookmarks_controller.coffee action 'all', -> Bookmark.all (err, bookmarks) -> if err then send 500 else send bookmarks action 'create', -> Bookmark.create req.body, (err, bookmark) => if err then send 500 else send bookmark action 'destroy', -> Bookmark.find req.params.id, (err, bookmark) => if err then send 500 else if not bookmark send error: 'not found', 404 else bookmark.destroy (err) -> if err then send 500 else send success: true, 204
- 75. Define requests (couchdb) # config/initializers/requests.coffee module.exports = (compound) -> Bookmark = compound.models.Bookmark all = (doc) -> emit doc.title, doc Bookmark.defineRequest 'all', all, (err) -> console.log 'request all created' unless err
- 76. Test coffee server.coffee firefox http://localhost:9250 Then deploy! $ cozy deploy Bookmarks successfully deployed on https://yourcozy.cozycloud.cc/ ! And share your repo url with...
- 77. Biscuit man who is now happy again !!…
- 78. [email protected] https://blog.cozycloud.cc https://twitter.com/mycozycloud Crédits photos Flickr: Ben Garney, CG94 photos, twicepix, flickrsven, Virginia Guard Public Affairs, henskechristine, NASA Goddard Photo and Video, World of Oddy License Creative Commons by-3.0 a talk by...