Ember Development Done Right

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

DOING IT WRONG

Ya....banking

Thierry Henry

<!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

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

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

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

# 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”>

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

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

Scarebleu! Il ya pitfalls

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

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

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

Let’s Make a Universe

$ gem install iridium * prerelease upcoming

$ 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

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

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 Conﬁguration and initialization for your app

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

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

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

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

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

The Quick Version

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

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

$ 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

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

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

Conﬁguration

# 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

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

$ gem install iridium-ember *prelease upcoming

Why? Ember speciﬁc optimizations and conﬁgurations

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

$ iridium g ember:app

• 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 ﬁxtures

$ 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

$ iridium g ember:sandbox

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

Iridium-ember will give you a rails style experience

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

Tell Me What You Need

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

ça va?

Ember Development Done Right

Ember Development Done Right

More Decks by Adam Hawkins

Other Decks in Programming

Featured

Transcript