20130528 solution linux_frousseau_nopain_webdev

1,048 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,048
On SlideShare
0
From Embeds
0
Number of Embeds
601
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

20130528 solution linux_frousseau_nopain_webdev

  1. 1. no-pain web development
  2. 2. Part I make your web app 
  3. 3. 90seasy but staticcgi-scripts....netscape index.html
  4. 4. 90seasy but staticcgi-scripts....netscape index.htmlmozilla http://localhost/my-appPHPapache server requiredeasy deployment
  5. 5. + database
  6. 6. 2000sThe rise of web frameworks
  7. 7. … and databases
  8. 8. extra configurationthe deployment requires daemonizationand more configuration
  9. 9. 2010sSingle-page applications
  10. 10. real app in the browserframework required: Backone, Angular, Ember...…JS files require organization and assemblingHTML templates?…Coffeescript? Livescript?… …
  11. 11. css pre-processorsyour CSS files need a build
  12. 12. before coding any feature I need to...chose two frameworks
  13. 13. before coding any feature I need to...chose two frameworkschose a database
  14. 14. before coding any feature I need to...chose two frameworkschose a databaseconfigure my app
  15. 15. before coding any feature I need to...chose two frameworkschose a databaseconfigure my apphandle deployment
  16. 16. before coding any feature I need to...chose two frameworkschose a databaseconfigure my apphandle deploymentassemble my front-end files
  17. 17. before coding any feature I need to...chose two frameworkschose a databaseconfigure my apphandle deploymentassemble my front-end filesbuild my stylesheets
  18. 18. NEED HELP?…
  19. 19. Part II Templates
  20. 20. chose your frameworks and yourdatabasesorry there is no golden rule for this
  21. 21. how to organize my files and myconfiguration ? people already use your framework and knowthe good practicesthey provide application templates
  22. 22. your templates are like your dotfilesclone a template, modify it then keep it for your next apps( )
  23. 23. rails new blog -m http://example.com/template.rbor# Clone repositorygit pull https://github.com/gaarf/express-boilerplatemv express-boilerplate your-appcd your-app# Link to your repositorygit remote rm origingit remote add origin git@github.com:you/your-app.gitgit add .git push -u origin master
  24. 24. Part III Deployment
  25. 25. isolate with containersOne for each moduleEasier to manageMore secured
  26. 26. thats true for dev environment tooVagrant, a simple hypervisorfor developers, can help(cleaner that it looks like)http://vagrantup.com
  27. 27. useful forkeeping your local machine cleansimulating the production environment
  28. 28. init vagrantgem install vagrant# add a box to your base box listvagrant box add ubuntu http://files.vagrantup.com/precise64.boxcreate and start your vmvagrant init ubuntu # init configvagrant up # start the vmvagrant ssh # connect through ssh...... # and install your stuff!port forwarding to access to your module like if they wererunning on localhost# modify Vagrantfileconfig.vm.forward_port 9101, 9101
  29. 29. act as a devopautomate your deployment
  30. 30. straighforwardbut hard to maintain
  31. 31. remote shell scripting withpythonstill require some work
  32. 32. recipesIdempotentgreat buta little bitoverkill
  33. 33. ?
  34. 34. Fabtools
  35. 35. Fabtools=Fabric + helpers + idempotencehttp://fabtools.readthedocs.org/
  36. 36. Fabricfrom fabric.api import env, rundef prod():env.hosts = [www.yourapp.com]env.user = rootdef 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
  37. 37. Fabtoolsfrom fabtools import requiredef prod():env.hosts = [www.yourapp.com]env.user = rootdef require_db():require.postgres.server()require.postgres.user(you, s3cr3)require.postgres.database(yourdb, you)$ fab prod require_db
  38. 38. Part IV Front-end assembler
  39. 39. makefile for frontendquickstartcompileassembleminify
  40. 40. http://brunch.io
  41. 41. install brunch as a global packagenpm install brunch -gcreate projectcd yourprojectbrunch new client # create a client templatecd clientnpm install # dependencies required by brunchbrunch buildAutomatic build when changes occurbrunch watch
  42. 42. Directory structure|-app|---assets|-----images|---controllers|---lib|---models|---views|-----styles|-----templates|-vendor|---scripts|---styles
  43. 43. paths:public: publicfiles:javascripts:defaultExtension: coffeejoinTo:javascripts/app.js: /^app/javascripts/vendor.js: /^vendor/stylesheets:defaultExtension: styljoinTo:stylesheets/app.css: /^app/stylesheets/vendor.css: /^vendor/templates:defaultExtension: jadejoinTo: javascripts/app.jsframework: backbone
  44. 44. paths:public: publicfiles:javascripts:defaultExtension: coffeejoinTo:javascripts/app.js: /^app/javascripts/vendor.js: /^vendor/stylesheets:defaultExtension: styljoinTo:stylesheets/app.css: /^app/stylesheets/vendor.css: /^vendor/templates:defaultExtension: jadejoinTo: javascripts/app.jsframework: backbone
  45. 45. paths:public: publicfiles:javascripts:defaultExtension: coffeejoinTo:javascripts/app.js: /^app/javascripts/vendor.js: /^vendor/stylesheets:defaultExtension: styljoinTo:stylesheets/app.css: /^app/stylesheets/vendor.css: /^vendor/templates:defaultExtension: jadejoinTo: javascripts/app.jsframework: backbone
  46. 46. paths:public: publicfiles:javascripts:defaultExtension: coffeejoinTo:javascripts/app.js: /^app/javascripts/vendor.js: /^vendor/stylesheets:defaultExtension: styljoinTo:stylesheets/app.css: /^app/stylesheets/vendor.css: /^vendor/templates:defaultExtension: jadejoinTo: javascripts/app.jsframework: backbone
  47. 47. alternativeYeoman (Grunt)Live reloadCodekit
  48. 48. Part V Features
  49. 49. hello worldyeah I got my hello world with my new devopsstuff!
  50. 50. basic featuresWhat about authentication?…registration?…Taking advantage of user data?…
  51. 51. NEEDHELP?…
  52. 52. http://cozy.io
  53. 53. an open personal cloud withauth and registration includedapps that share their datareal-time notifications for all data changeshttps://demo.cozycloud.cc/
  54. 54. +a choice for two frameworksa choice for a databasea node.js templateeasy deploymentan already configured assemblera packaged vm for your dev environment
  55. 55. default stackfront-end:…backboneassembler:…brunchback-end:…compound (node.js)data:storage:…couchdbevents:redisindexes:…whoosh
  56. 56. am I stuck with cozy ? change database adapter=> then you have a classic web app.
  57. 57. cozy is a good way to...quickstartlearn node.js and spaprototypemake personal tools
  58. 58. Appendix Code
  59. 59. the bookmark tutoriallets write an app that allows you to storeyour favorite links
  60. 60. Get preparednpm install compound brunch cozy scaffolt -gSetup the dev environment (based on Vagrant)cozy dev:initcozy dev:startCreate your project$ cozy new yourproject --github your-accountGithub password:Your cozy url: https://yourcozy.cozycloud.cc/Project created!
  61. 61. we are codinga full client in the browserthat takes its data from a REST API
  62. 62. Generate front end codecd client/scaffolt module bookmarkinfo: create app/models/bookmark.coffeeinfo: create app/collections/bookmarks.coffeeinfo: create app/views/bookmarks.coffeeinfo: create app/views/bookmark.coffeeinfo: create app/views/templates/bookmark.jadeinfo: create app/views/styles/_bookmark.stylbrunch w # build on changes
  63. 63. Then code what is missing!Templates# views/templates/bookmark.jade.title #{model.title}.urla(href="#{model.url}") #{model.url}button.delete-button delete# views/templates/home.jadeh1 My bookmarks#create-bookmark-forminput#title-field(placeholder="title")input#url-field(placeholder="url")button.btn#create-button create#bookmarks
  64. 64. Home View# views/home.coffeeView = require ../lib/viewBookmarksView = require ./bookmarksBookmark = require ../models/bookmarkmodule.exports = class AppView extends Viewel: bodyevents:click #create-button: onCreateClickedtemplate: -> require ./templates/homeafterRender: ->@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 addederror: => alert Server error occured
  65. 65. Bookmark view# views/bookmark.jadeView = require ../lib/viewmodule.exports = class BookmarkView extends Viewtemplate: require ./templates/bookmarkclassName: bookmarkevents:click .delete-button: onDeleteClickedonDeleteClicked: ->@model.destroysuccess: => @destroy()error: => alert Server error occured
  66. 66. Styles# views/styles/application.stylbodypadding: 20px# views/styles/_bookmark.styl.bookmarkpadding: 10px 0
  67. 67. backendurls to retrieve, create and delete bookmarks
  68. 68. Generate backend filescompound g model bookmark title urlexists app/exists app/models/create app/models/bookmark.coffeepatch db/schema.coffee
  69. 69. Routes# config/routes.coffeeexports.routes = (map) ->map.get bookmarks, bookmarks#allmap.post bookmarks, bookmarks#createmap.del bookmarks/:id, bookmarks#destroy
  70. 70. Controllers# apps/controllers/bookmarks_controller.coffeeaction all, ->Bookmark.all (err, bookmarks) ->if err then send 500else send bookmarksaction create, ->Bookmark.create req.body, (err, bookmark) =>if err then send 500else send bookmarkaction destroy, ->Bookmark.find req.params.id, (err, bookmark) =>if err then send 500else if not bookmarksend error: not found, 404elsebookmark.destroy (err) ->if err then send 500else send success: true, 204
  71. 71. Define requests (couchdb)# config/initializers/requests.coffeemodule.exports = (compound) ->Bookmark = compound.models.Bookmarkall = (doc) -> emit doc.title, docBookmark.defineRequest all, all, (err) ->console.log request all created unless err
  72. 72. Testcoffee server.coffeefirefox http://localhost:9250Then deploy!$ cozy deployBookmarks successfully deployed onhttps://yourcozy.cozycloud.cc/ !And share your repo url with...
  73. 73. Biscuit manwho is nowhappy again !!…
  74. 74. contact@cozycloud.cchttps://blog.cozycloud.cchttps://twitter.com/mycozycloudCrédits photos Flickr: Ben Garney, CG94 photos, twicepix, flickrsven,Virginia Guard Public Affairs, henskechristine, NASA Goddard Photoand Video, World of OddyLicense Creative Commons by-3.0a talk by...

×