Slide 1

Slide 1 text

Development Done Right tw://adman65 - gh://twinturbo - [email protected] - présentés à Paris

Slide 2

Slide 2 text

DOING IT WRONG

Slide 3

Slide 3 text

Ya....banking

Slide 4

Slide 4 text

Thierry Henry

Slide 5

Slide 5 text

QUnit Example
God damn HTML code loaders

Slide 6

Slide 6 text

# I want these files /app/models/user.js /app/controllers/deals.js /app/views/dashboard

Slide 7

Slide 7 text

# I need to to this, but # this is Javascript. We # can’t have nice things var Deal = require('deals');

Slide 8

Slide 8 text

# But I'm stuck with this /app.js

Slide 9

Slide 9 text

# or stuck with a shit load HTTP requests <script src=”/app/controllers/deals.js”> <script src=”/app/views/dashboard.js”>

Slide 10

Slide 10 text

# I’ll just use coffee script $ coffee-script **/*.coffee src/ --watch

Slide 11

Slide 11 text

// Writing templates in Javascript Handlebars.compile("this retarded long and complex string");

Slide 12

Slide 12 text

Scarebleu! Il ya pitfalls

Slide 13

Slide 13 text

Easy to Mess Up • Testing? • No seriously, how do you test Javascript? • What about minification for production? • i18n....yes that’s still important

Slide 14

Slide 14 text

Doing It Right • TDD friendly dev process • Coffeescript + SASS • Code organized into multiple files • Dev process supports multiple envs (dev, prod, test) • Integrated build process

Slide 15

Slide 15 text

“If you want to make a JS app from scratch, you must first create the universe.” - Carl Sagan on modern JS development

Slide 16

Slide 16 text

Let’s Make a Universe

Slide 17

Slide 17 text

$ gem install iridium * prerelease upcoming

Slide 18

Slide 18 text

$ iridium app todos create app create app/config create app/config/development.coffee create app/config/initializers create app/config/production.coffee create app/config/test.coffee create app/assets/images/ create app/assets/images/sprites create app/javascripts/app.coffee create app/javascripts/boot.coffee create app/javascripts/controllers create app/javascripts/models create app/javascripts/views create app/templates create app/locales/en.yml create app/public create app/public/index.html.erb create app/stylesheets/app.scss create app/vendor/javascripts create app/vendor/javascripts/handlebars.js create app/vendor/javascripts/i18n.js create app/vendor/javascripts/jquery.js create app/vendor/javascripts/minispade.js create app/vendor/stylesheets create site create test create test/controllers create test/integration/navigation_test.coffee create test/models create test/support/helper.coffee create test/support/sinon.js create test/templates create test/unit/truth_test.coffee create test/views create application.rb

Slide 19

Slide 19 text

$ iridium app todos create app create app/config create app/config/development.coffee create app/config/initializers create app/config/production.coffee create app/config/test.coffee create app/assets/images/ create app/assets/images/sprites create app/javascripts/app.coffee create app/javascripts/boot.coffee create app/javascripts/controllers create app/javascripts/models create app/javascripts/views create app/templates create app/locales/en.yml create app/public create app/public/index.html.erb create app/stylesheets/app.scss create app/vendor/javascripts create app/vendor/javascripts/handlebars.js create app/vendor/javascripts/i18n.js create app/vendor/javascripts/jquery.js create app/vendor/javascripts/minispade.js create app/vendor/stylesheets create site create test create test/controllers create test/integration/navigation_test.coffee create test/models create test/support/helper.coffee create test/support/sinon.js create test/templates create test/unit/truth_test.coffee create test/views create application.rb A place for your code

Slide 20

Slide 20 text

$ iridium app todos create app create app/config create app/config/development.coffee create app/config/initializers create app/config/production.coffee create app/config/test.coffee create app/assets/images/ create app/assets/images/sprites create app/javascripts/app.coffee create app/javascripts/boot.coffee create app/javascripts/controllers create app/javascripts/models create app/javascripts/views create app/templates create app/locales/en.yml create app/public create app/public/index.html.erb create app/stylesheets/app.scss create app/vendor/javascripts create app/vendor/javascripts/handlebars.js create app/vendor/javascripts/i18n.js create app/vendor/javascripts/jquery.js create app/vendor/javascripts/minispade.js create app/vendor/stylesheets create site create test create test/controllers create test/integration/navigation_test.coffee create test/models create test/support/helper.coffee create test/support/sinon.js create test/templates create test/unit/truth_test.coffee create test/views create application.rb Configuration and initialization for your app

Slide 21

Slide 21 text

$ iridium app todos create app create app/config create app/config/development.coffee create app/config/initializers create app/config/production.coffee create app/config/test.coffee create app/assets/images/ create app/assets/images/sprites create app/javascripts/app.coffee create app/javascripts/boot.coffee create app/javascripts/controllers create app/javascripts/models create app/javascripts/views create app/templates create app/locales/en.yml create app/public create app/public/index.html.erb create app/stylesheets/app.scss create app/vendor/javascripts create app/vendor/javascripts/handlebars.js create app/vendor/javascripts/i18n.js create app/vendor/javascripts/jquery.js create app/vendor/javascripts/minispade.js create app/vendor/stylesheets create site create test create test/controllers create test/integration/navigation_test.coffee create test/models create test/support/helper.coffee create test/support/sinon.js create test/templates create test/unit/truth_test.coffee create test/views create application.rb Handlebars compilation is automatic

Slide 22

Slide 22 text

$ iridium app todos create app create app/config create app/config/development.coffee create app/config/initializers create app/config/production.coffee create app/config/test.coffee create app/assets/images/ create app/assets/images/sprites create app/javascripts/app.coffee create app/javascripts/boot.coffee create app/javascripts/controllers create app/javascripts/models create app/javascripts/views create app/templates create app/locales/en.yml create app/public create app/public/index.html.erb create app/stylesheets/app.scss create app/vendor/javascripts create app/vendor/javascripts/handlebars.js create app/vendor/javascripts/i18n.js create app/vendor/javascripts/jquery.js create app/vendor/javascripts/minispade.js create app/vendor/stylesheets create site create test create test/controllers create test/integration/navigation_test.coffee create test/models create test/support/helper.coffee create test/support/sinon.js create test/templates create test/unit/truth_test.coffee create test/views create application.rb • SASS Ready from day one • @import works • Sprites work

Slide 23

Slide 23 text

$ iridium app todos create app create app/config create app/config/development.coffee create app/config/initializers create app/config/production.coffee create app/config/test.coffee create app/assets/images/ create app/assets/images/sprites create app/javascripts/app.coffee create app/javascripts/boot.coffee create app/javascripts/controllers create app/javascripts/models create app/javascripts/views create app/templates create app/locales/en.yml create app/public create app/public/index.html.erb create app/stylesheets/app.scss create app/vendor/javascripts create app/vendor/javascripts/handlebars.js create app/vendor/javascripts/i18n.js create app/vendor/javascripts/jquery.js create app/vendor/javascripts/minispade.js create app/vendor/stylesheets create site create test create test/controllers create test/integration/navigation_test.coffee create test/models create test/support/helper.coffee create test/support/sinon.js create test/templates create test/unit/truth_test.coffee create test/views create application.rb A place for dependencies

Slide 24

Slide 24 text

$ iridium app todos create app create app/config create app/config/development.coffee create app/config/initializers create app/config/production.coffee create app/config/test.coffee create app/assets/images/ create app/assets/images/sprites create app/javascripts/app.coffee create app/javascripts/boot.coffee create app/javascripts/controllers create app/javascripts/models create app/javascripts/views create app/templates create app/locales/en.yml create app/public create app/public/index.html.erb create app/stylesheets/app.scss create app/vendor/javascripts create app/vendor/javascripts/handlebars.js create app/vendor/javascripts/i18n.js create app/vendor/javascripts/jquery.js create app/vendor/javascripts/minispade.js create app/vendor/stylesheets create site create test create test/controllers create test/integration/navigation_test.coffee create test/models create test/support/helper.coffee create test/support/sinon.js create test/templates create test/unit/truth_test.coffee create test/views create application.rb Unit + Integration tests out of the box

Slide 25

Slide 25 text

$ iridium app todos create app create app/config create app/config/development.coffee create app/config/initializers create app/config/production.coffee create app/config/test.coffee create app/assets/images/ create app/assets/images/sprites create app/javascripts/app.coffee create app/javascripts/boot.coffee create app/javascripts/controllers create app/javascripts/models create app/javascripts/views create app/templates create app/locales/en.yml create app/public create app/public/index.html.erb create app/stylesheets/app.scss create app/vendor/javascripts create app/vendor/javascripts/handlebars.js create app/vendor/javascripts/i18n.js create app/vendor/javascripts/jquery.js create app/vendor/javascripts/minispade.js create app/vendor/stylesheets create site create test create test/controllers create test/integration/navigation_test.coffee create test/models create test/support/helper.coffee create test/support/sinon.js create test/templates create test/unit/truth_test.coffee create test/views create application.rb Parlez-vous anglais? Localized right out the box

Slide 26

Slide 26 text

The Quick Version

Slide 27

Slide 27 text

# application.rb class Todos < Iridium::Application # Dependency Management config.load :minispade config.load :jquery config.load :handlebars end

Slide 28

Slide 28 text

// app.coffee - loads all the code Todos = Ember.Application.create({ VERSION: '1.0', storeNamespace: 'todos-emberjs', }) require 'todos/router' // app/javascripts/router.js|coffee require 'todos/models' // app/javascripts/models.js|coffee require 'todos/controllers' // you get require 'todos/views' // the point require 'todos/templates' // by now

Slide 29

Slide 29 text

$ cd todos $ iridium server >> Thin web server (v1.4.1 codename Chromeo) >> Maximum connections set to 1024 >> Listening on 0.0.0.0:9292, CTRL+C to stop ... now hit Refresh

Slide 30

Slide 30 text

# test/models/todo_test.coffee test "should default to not done", -> equal Models.todo.get('isDone'), false, "todo is not done" test "should set todo title", -> Models.todo.set 'title', "A todo" equal Models.todo.get('title'), "A todo", "todo title is set" test "should be able to signify isdone", -> Models.todo.set 'isDone', true ok Models.todo.get('isDone'), "Todo is done"

Slide 31

Slide 31 text

$ iridium test Run options: --seed 14903 # Running Tests: ..... 5 Tests, 0 Failures, 10 Assertions

Slide 32

Slide 32 text

Configuration

Slide 33

Slide 33 text

# production.rb Todos.configure do # Minify JS and CSS config.pipeline.minify = true # Generate GZip version of files along with regular version config.pipeline.gzip = true # Generate an HTML5 Cache Manifest for offline support config.pipeline.manifest = true # Precompile handlebars templates config.handlebars.precompile = false # Module format for minispade: :string or :function config.minispade.module_format = :string # Proxy /api to something to avoid CORS proxy ‘/api’, ‘api.example.com’ end

Slide 34

Slide 34 text

Architecture • Hydrogen (think Rails Engines) • Rake-Pipeline • QUnit, CasperJS, + PhantomJS for Testing • Preload Handlebars, JQuery, and Minispade • Minispade for “require”

Slide 35

Slide 35 text

$ gem install iridium-ember *prelease upcoming

Slide 36

Slide 36 text

Why? Ember specific optimizations and configurations

Slide 37

Slide 37 text

Like What? • Ember specific localizations • Strip Ember.assert when configured • Ember specific handlebars precompiler • Ember specific test setup and teardown • Automatically generated classes with test cases • Fixtures for development or testing • Load handlebars templates for ember views

Slide 38

Slide 38 text

$ iridium g ember:app

Slide 39

Slide 39 text

• Generates basic iridium structure • Adds a router • Adds an application controller • Adds an application view • Adds code to boot your app • Adds complete integration test • Adds fixtures

Slide 40

Slide 40 text

$ iridium g ember:model user $ iridium g ember:controller users $ iridium g ember:view dashboard $ iridium g ember:state dashboard $ iridium g ember:route dashboard $ iridium g ember:data

Slide 41

Slide 41 text

$ iridium g ember:sandbox

Slide 42

Slide 42 text

• The noob version • Generates a fully functioning todos app • Todos are examples of how to do things in ember or configure iridium • This where you learn how to do things

Slide 43

Slide 43 text

Iridium-ember will give you a rails style experience

Slide 44

Slide 44 text

Iridium currently works with ember* *As long as you change the handlebars compile options.

Slide 45

Slide 45 text

Tell Me What You Need

Slide 46

Slide 46 text

git clone git://github.com/ radiumsoftware/iridium.git

Slide 47

Slide 47 text

ça va?