Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QUnit Example</title> <link rel="stylesheet"

    href="/resources/qunit.css"> </head> <body> <div id="qunit"></div> <script src="/resources/qunit.js"></script> <script src="/resources/tests.js"></script> </body> </html> God damn HTML code loaders
  2. # I need to to this, but # this is

    Javascript. We # can’t have nice things var Deal = require('deals');
  3. # or stuck with a shit load HTTP requests <script

    src=”/app/models/user.js”> <script src=”/app/controllers/deals.js”> <script src=”/app/views/dashboard.js”>
  4. Easy to Mess Up • Testing? • No seriously, how

    do you test Javascript? • What about minification for production? • i18n....yes that’s still important
  5. 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
  6. “If you want to make a JS app from scratch,

    you must first create the universe.” - Carl Sagan on modern JS development
  7. $ 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
  8. $ 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
  9. $ 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
  10. $ 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
  11. $ 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
  12. $ 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
  13. $ 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
  14. $ 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
  15. # application.rb class Todos < Iridium::Application # Dependency Management config.load

    :minispade config.load :jquery config.load :handlebars end
  16. // 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
  17. $ 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
  18. # 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"
  19. $ iridium test Run options: --seed 14903 # Running Tests:

    ..... 5 Tests, 0 Failures, 10 Assertions
  20. # 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
  21. Architecture • Hydrogen (think Rails Engines) • Rake-Pipeline • QUnit,

    CasperJS, + PhantomJS for Testing • Preload Handlebars, JQuery, and Minispade • Minispade for “require”
  22. 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
  23. • 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
  24. $ 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
  25. • 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