Now You're Thinking with Pods [Ember.js]

A look at the current state of the pod application structure in Ember.js.

Talk originally given at the Boston Ember.js Meetup on July 9th, 2015.

YouTube recording: https://www.youtube.com/watch?v=M8Q-PmQshqg&t=106

Transcript

1. ELADSHAHAR Boston Ember.js July 9th, 2015 A look at the current state of the pod application structure in Ember.js Now You’re Thinking with Pods
2. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 2 EladShahar
3. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 3 Sometimes I post stuff .com EladShahar
4. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 4 Sometimes I get e-mails EladShahar Elad@ .com
5. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 5 Sometimes I tweet Elad @
6. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 6 Sometimes I’m a fork SaladFork @ (on GitHub, IRC, and Slack)
7. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 7 Most of the time I work for
8. ELADSHAHAR Boston Ember.js July 9th, 2015 A look at the current state of the pod application structure in Ember.js Now You’re Thinking with Pods I’m here to present
9. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods What are pods? 9
10. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 10 (not these)
11. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods Ember CLI Resolver 11 http://ember-cli.com/user-guide/#using-modules
12. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 12 "controller:foo" "route:foo" "adapter:bar" "component:baz" Container
13. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 13 App.FooController App.FooRoute App.BarAdapter App.BazComponent Globals
14. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 14 app/controllers/foo.js app/routes/foo.js app/adapters/bar.js app/components/baz.js Ember CLI
15. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 15 app/controllers/foo.js app/routes/foo.js app/adapters/bar.js app/components/baz.js Ember CLI (classic)
16. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 16 app/   app/   app/ controller route template s/ s/ s/ foo foo foo .js .js .hbs
17. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 17 app/   app/   app/ controller route template s/ s/ s/ foo foo foo .js .js .hbs
18. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 18 app/   app/   app/ controller route template s/ s/ s/ foo foo foo .js .js .hbs
19. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 19 app/   app/   app/ controller route template s/ s/ s/ foo foo foo .js .js .hbs
20. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 20 app/   app/   app/ controller route template / / / foo foo foo .js .js .hbs
21. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 21 app/   app/   app/ controller route template / / / foo foo foo .js .js .hbs
22. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods What can I pod? 22
23. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods Route Pods 23 app/foo/controller.js   app/foo/route.js   app/foo/view.js   app/foo/template.hbs
24. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods Component Pods 24 app/bar/component.js   app/bar/template.hbs app/components/bar/component.js   app/components/bar/template.hbs
25. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods Routable Component Pods 25 app/foobar/component.js   app/foobar/route.js   app/foobar/template.hbs (soon? maybe?)
26. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods Model Pods 26 app/baz/adapter.js   app/baz/model.js   app/baz/serializer.js
27. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods Nested Route Pods 27 app/posts/post/controller.js   app/posts/post/route.js   app/posts/post/template.hbs   app/posts/post/view.js
28. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods Nested Component Pods 28 app/comments/comment-­‐edit-­‐form/component.js   app/comments/comment-­‐edit-­‐form/template.hbs (maybe you shouldn’t do this) {{comments/comment-­‐edit-­‐form  …}}
29. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 29 Lots more helpers, services, transforms, add-ons
30. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods Why should I use pods? 30
31. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 31 Pods group code by feature
32. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods Visibility and discoverability 32
33. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods Matches mental model of names 33
34. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 34 Happy path to route bundling and engines
35. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 35 bigger app === bigger benefit bigger team === bigger benefit
36. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 36 It’s not a choice!
37. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods How do I use pods? 37
38. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 38 New files
39. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 39 $  ember  generate  route  foo  -­‐-­‐pod   version:  1.13.1   installing  route      create  app/foo/route.js      create  app/foo/template.hbs
40. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 40 //  .ember-­‐cli   {      "usePods":  true   } * this inverts the -­‐-­‐pod option behavior
41. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 41 //  config/environment.js   module.exports  =  function  (environment)  {      modulePrefix:        'my-­‐cool-­‐app',      podModulePrefix:  'my-­‐cool-­‐app/pods',      //  ...   } app/pods/foo/controller.js
42. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 42 Existing files
43. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods $  mkdir  app/foo   $  mv  app/routes/foo.js  app/foo/route.js 43
44. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 44 ember-­‐cli-­‐podify !!WARNING!! This addon is still under development, so please do not attempt to use it yet!
45. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods Do pods have drawbacks? 45
46. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 46
47. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 47 import  foo  from  '../utils/foo'; Uncaught  Error:  Could  not  find  module  `foo`  …
48. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods What if post is both a model and a route? 48
49. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 49 app/post/adapter.js   app/post/controller.js   app/post/model.js   app/post/route.js   app/post/serializer.js   app/post/template.hbs   app/post/view.js
50. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 50 Remember this? app/components/bar/component.js   app/components/bar/template.hbs
51. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 51 app/models/post/adapter.js   app/models/post/model.js   app/models/post/serializer.js app/routes/post/controller.js   app/routes/post/route.js   app/routes/post/view.js   app/routes/post/template.hbs * this does not work today
52. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods What is the future of pods? 52
53. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 53 Structures
54. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods 54 Engines
55. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods Quick thanks to 55 @trabus Jake Bixby
56. Boston Ember.js July 9th, 2015 ELADSHAHAR Now You’re Thinking with Pods Thank you! 56 Elad @ twitter IRC, Slack SaladFork