A crash course on how Ember CLI can supercharge your productivity building Ember applications and how you can start leveraging the thriving Ember add-on ecosystem. This was presented January 28th, 2015 at the Silicon Valley Ember Meetup.

1. Intro to
Jay Phelps
Twitter: @_jayphelps
January 28, 2015

2. WHO RU???
Jay Phelps

3. WHO RU???
•Senior Front End Engineer @ Netflix
Jay Phelps

4. WHO RU???
•Senior Front End Engineer @ Netflix
•Loves code, hates condiments.
Jay Phelps

5. WHO RU???
•Senior Front End Engineer @ Netflix
•Loves code, hates condiments.
Jay Phelps
twitter: @_jayphelps
github: @jayphelps

6. EMBER CL-WHAT?

7. EMBER IS A CLIENT-SIDE
APPLICATION FRAMEWORK

8. EMBER IS A CLIENT-SIDE
APPLICATION FRAMEWORK
It’s totally cool if you don’t know Ember yet!

9. EMBER IS VERY OPINIONATED.

10. EMBER IS VERY OPINIONATED.
Opinionated == Convention over configuration == voodoo magic

11. EMBER IS AWESOME…BUT…

12. HOW DO I MAINTAIN THE
PROJECT?

13. HOW DO I MAINTAIN THE
PROJECT?
Concat files, minify, language pre-processors (LESS, ES6, etc)

14. BUILDING PIPELINES ARE HARD! (???)

15. BUILDING PIPELINES ARE HARD! (???)

16. NO REALLY…THEY ARE.

18. Spoiler: it can.

19. COMMAND-LINE INTERFACE (CLI)

20. COMMAND-LINE INTERFACE (CLI)
“…a means of interacting with a computer program
where the user issues commands to the program in
the form of successive lines of text.”

21. COMMAND-LINE INTERFACE (CLI)

22. COMMAND-LINE INTERFACE (CLI)

23. EMBER-CLI
Tooling and code sharing by convention

24. EMBER-CLI
• Project directory layout

25. EMBER-CLI
• Project directory layout
• Concatenation of files, minifying, etc

26. EMBER-CLI
• Project directory layout
• Concatenation of files, minifying, etc
• Rails-like “generators”

27. EMBER-CLI
• Project directory layout
• Concatenation of files, minifying, etc
• Rails-like “generators”
• Add-on architecture and ecosystem

28. INSTALL IT

29. INSTALL IT
You’ll need these too, if you don’t already have them:

30. OPTIONS

31. ONE LINE APP-CREATION

33. (in case it wasn’t obvious)

34. BUILDING YOUR APP IN DEV

40. OLD WAY

41. NEW WAY (ES6 MODULES)

42. NEW WAY (ES6 MODULES)
…or you can skip the local variable assignment

43. EMBER COMPONENTS
View’s that have an isolated context.
Based off the Web Components spec

44. HOW DO WE SHARE CODE?

46. OR COPY PASTA…

47. EMBER ADDONS

48. EMBER ADDONS
• Adding preprocessors

49. EMBER ADDONS
• Adding preprocessors
• Adding content to consuming applications

50. EMBER ADDONS
• Adding preprocessors
• Adding content to consuming applications
• Adding custom/extra blueprints, typically for scaffolding application/project files

51. EMBER ADDONS
• Adding preprocessors
• Adding content to consuming applications
• Adding custom/extra blueprints, typically for scaffolding application/project files
• Providing a custom application tree to be merged with the consuming
application

52. EMBER ADDONS
• Adding preprocessors
• Adding content to consuming applications
• Adding custom/extra blueprints, typically for scaffolding application/project files
• Providing a custom application tree to be merged with the consuming
application
• Providing custom express (server) middlewares

53. EMBER ADDONS
• Adding preprocessors
• Adding content to consuming applications
• Adding custom/extra blueprints, typically for scaffolding application/project files
• Providing a custom application tree to be merged with the consuming
application
• Providing custom express (server) middlewares
• …etc

54. HOW TO INSTALL AN ADDON

57. LET’S USE A YOUTUBE ADDON

58. ONE LINE INSTALL AND IT’S
AVAILABLE TO USE

59. NOW…
LET’S USE IT INSIDE OUR APP

60. LET’S LEARN TO “GENERATE”

62. Shorthand commands are available!

63. GENERATE OUR INDEX TEMPLATE

64. USING THE YOUTUBE COMPONENT

65. LET’S SEE HOW WE DID…

68. BUILDING FOR PRODUCTION

69. BUILDING FOR PRODUCTION

70. QUESTIONS?
http://www.ember-cli.com/
Jay Phelps
Twitter: @_jayphelps
January 28, 2015