Ember Development Done Right

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 miniﬁcation 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 ﬁles • 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 ﬁrst 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

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

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

Conﬁguration

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 speciﬁc optimizations and conﬁgurations

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

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 conﬁgure 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.