1. no-pain web development

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

8. … and databases

10. extra configuration
the deployment requires daemonization
and more configuration

11. 2010's
Single-page applications

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?…

21. Part II Templates

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 git@github.com:you/your-app.git
git add .
git push -u origin master

26. Part III Deployment

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

41. makefile for frontend
quickstart
compile
assemble
minify

42. http://brunch.io

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

44. Directory structure
|-app
|---assets
|-----images
|---controllers
|---lib
|---models
|---views
|-----styles
|-----templates
|-vendor
|---scripts
|---styles

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'

49. alternative
Yeoman (Grunt)
Live reload
Codekit

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?…

54. http://cozy.io

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

58. default stack
front-end:…
backbone
assembler:…
brunch
back-end:…
compound (node.js)
data:
storage:…
couchdb
events:
redis
indexes:…
whoosh

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. contact@cozycloud.cc
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...