$30 off During Our Annual Pro Sale. View Details »

Ember Development Done Right

Ember Development Done Right

Using iridium and iridium-ember for integrated ember development

Adam Hawkins

October 09, 2012
Tweet

More Decks by Adam Hawkins

Other Decks in Programming

Transcript

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

    View Slide

  2. DOING
    IT
    WRONG

    View Slide

  3. Ya....banking

    View Slide

  4. Thierry Henry

    View Slide





  5. QUnit Example








    God damn HTML code loaders

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. Scarebleu!
    Il ya pitfalls

    View Slide

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

    View Slide

  14. 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

    View Slide

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

    View Slide

  16. Let’s Make a Universe

    View Slide

  17. $ gem install iridium
    * prerelease upcoming

    View Slide

  18. $ 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

    View Slide

  19. $ 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

    View Slide

  20. $ 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

    View Slide

  21. $ 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

    View Slide

  22. $ 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

    View Slide

  23. $ 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

    View Slide

  24. $ 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

    View Slide

  25. $ 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

    View Slide

  26. The Quick Version

    View Slide

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

    View Slide

  28. // 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

    View Slide

  29. $ 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

    View Slide

  30. # 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"

    View Slide

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

    View Slide

  32. Configuration

    View Slide

  33. # 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

    View Slide

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

    View Slide

  35. $ gem install iridium-ember
    *prelease upcoming

    View Slide

  36. Why?
    Ember specific optimizations and configurations

    View Slide

  37. 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

    View Slide

  38. $ iridium g ember:app

    View Slide

  39. • 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

    View Slide

  40. $ 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

    View Slide

  41. $ iridium g ember:sandbox

    View Slide

  42. • 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

    View Slide

  43. Iridium-ember will give
    you a rails style
    experience

    View Slide

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

    View Slide

  45. Tell Me What You Need

    View Slide

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

    View Slide

  47. ça va?

    View Slide