Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Intro to
Jay Phelps
Twitter: @_jayphelps
January 28, 2015
WHO RU???
Jay Phelps
WHO RU???
•Senior Front End Engineer @ Netflix
Jay Phelps
WHO RU???
•Senior Front End Engineer @ Netflix
•Loves code, hates condiments.
Jay Phelps
WHO RU???
•Senior Front End Engineer @ Netflix
•Loves code, hates condiments.
Jay Phelps
twitter: @_jayphelps
github: @jay...
EMBER CL-WHAT?
EMBER IS A CLIENT-SIDE
APPLICATION FRAMEWORK
EMBER IS A CLIENT-SIDE
APPLICATION FRAMEWORK
It’s totally cool if you don’t know Ember yet!
EMBER IS VERY OPINIONATED.
EMBER IS VERY OPINIONATED.
Opinionated == Convention over configuration == voodoo magic
EMBER IS AWESOME…BUT…
HOW DO I MAINTAIN THE
PROJECT?
HOW DO I MAINTAIN THE
PROJECT?
Concat files, minify, language pre-processors (LESS, ES6, etc)
BUILDING PIPELINES ARE HARD! (???)
BUILDING PIPELINES ARE HARD! (???)
NO REALLY…THEY ARE.
Spoiler: it can.
COMMAND-LINE INTERFACE (CLI)
COMMAND-LINE INTERFACE (CLI)
“…a means of interacting with a computer program
where the user issues commands to the progra...
COMMAND-LINE INTERFACE (CLI)
COMMAND-LINE INTERFACE (CLI)
EMBER-CLI
Tooling and code sharing by convention
EMBER-CLI
• Project directory layout
EMBER-CLI
• Project directory layout
• Concatenation of files, minifying, etc
EMBER-CLI
• Project directory layout
• Concatenation of files, minifying, etc
• Rails-like “generators”
EMBER-CLI
• Project directory layout
• Concatenation of files, minifying, etc
• Rails-like “generators”
• Add-on architect...
INSTALL IT
INSTALL IT
You’ll need these too, if you don’t already have them:
OPTIONS
ONE LINE APP-CREATION
(in case it wasn’t obvious)
BUILDING YOUR APP IN DEV
OLD WAY
NEW WAY (ES6 MODULES)
NEW WAY (ES6 MODULES)
…or you can skip the local variable assignment
EMBER COMPONENTS
View’s that have an isolated context.
Based off the Web Components spec
HOW DO WE SHARE CODE?
OR COPY PASTA…
EMBER ADDONS
EMBER ADDONS
• Adding preprocessors
EMBER ADDONS
• Adding preprocessors
• Adding content to consuming applications
EMBER ADDONS
• Adding preprocessors
• Adding content to consuming applications
• Adding custom/extra blueprints, typically...
EMBER ADDONS
• Adding preprocessors
• Adding content to consuming applications
• Adding custom/extra blueprints, typically...
EMBER ADDONS
• Adding preprocessors
• Adding content to consuming applications
• Adding custom/extra blueprints, typically...
EMBER ADDONS
• Adding preprocessors
• Adding content to consuming applications
• Adding custom/extra blueprints, typically...
HOW TO INSTALL AN ADDON
LET’S USE A YOUTUBE ADDON
ONE LINE INSTALL AND IT’S
AVAILABLE TO USE
NOW…
LET’S USE IT INSIDE OUR APP
LET’S LEARN TO “GENERATE”
Shorthand commands are available!
GENERATE OUR INDEX TEMPLATE
USING THE YOUTUBE COMPONENT
LET’S SEE HOW WE DID…
BUILDING FOR PRODUCTION
BUILDING FOR PRODUCTION
QUESTIONS?
http://www.ember-cli.com/
Jay Phelps
Twitter: @_jayphelps
January 28, 2015
Intro to Ember CLI
Intro to Ember CLI
Intro to Ember CLI
Intro to Ember CLI
Intro to Ember CLI
Intro to Ember CLI
Intro to Ember CLI
Intro to Ember CLI
Intro to Ember CLI
Intro to Ember CLI
Intro to Ember CLI
Intro to Ember CLI
Intro to Ember CLI
Upcoming SlideShare
Loading in …5
×

Intro to Ember CLI

1,496 views

Published on

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.

Published in: Software
  • Be the first to comment

Intro to Ember CLI

  1. 1. Intro to Jay Phelps Twitter: @_jayphelps January 28, 2015
  2. 2. WHO RU??? Jay Phelps
  3. 3. WHO RU??? •Senior Front End Engineer @ Netflix Jay Phelps
  4. 4. WHO RU??? •Senior Front End Engineer @ Netflix •Loves code, hates condiments. Jay Phelps
  5. 5. WHO RU??? •Senior Front End Engineer @ Netflix •Loves code, hates condiments. Jay Phelps twitter: @_jayphelps github: @jayphelps
  6. 6. EMBER CL-WHAT?
  7. 7. EMBER IS A CLIENT-SIDE APPLICATION FRAMEWORK
  8. 8. EMBER IS A CLIENT-SIDE APPLICATION FRAMEWORK It’s totally cool if you don’t know Ember yet!
  9. 9. EMBER IS VERY OPINIONATED.
  10. 10. EMBER IS VERY OPINIONATED. Opinionated == Convention over configuration == voodoo magic
  11. 11. EMBER IS AWESOME…BUT…
  12. 12. HOW DO I MAINTAIN THE PROJECT?
  13. 13. HOW DO I MAINTAIN THE PROJECT? Concat files, minify, language pre-processors (LESS, ES6, etc)
  14. 14. BUILDING PIPELINES ARE HARD! (???)
  15. 15. BUILDING PIPELINES ARE HARD! (???)
  16. 16. NO REALLY…THEY ARE.
  17. 17. Spoiler: it can.
  18. 18. COMMAND-LINE INTERFACE (CLI)
  19. 19. 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.”
  20. 20. COMMAND-LINE INTERFACE (CLI)
  21. 21. COMMAND-LINE INTERFACE (CLI)
  22. 22. EMBER-CLI Tooling and code sharing by convention
  23. 23. EMBER-CLI • Project directory layout
  24. 24. EMBER-CLI • Project directory layout • Concatenation of files, minifying, etc
  25. 25. EMBER-CLI • Project directory layout • Concatenation of files, minifying, etc • Rails-like “generators”
  26. 26. EMBER-CLI • Project directory layout • Concatenation of files, minifying, etc • Rails-like “generators” • Add-on architecture and ecosystem
  27. 27. INSTALL IT
  28. 28. INSTALL IT You’ll need these too, if you don’t already have them:
  29. 29. OPTIONS
  30. 30. ONE LINE APP-CREATION
  31. 31. (in case it wasn’t obvious)
  32. 32. BUILDING YOUR APP IN DEV
  33. 33. OLD WAY
  34. 34. NEW WAY (ES6 MODULES)
  35. 35. NEW WAY (ES6 MODULES) …or you can skip the local variable assignment
  36. 36. EMBER COMPONENTS View’s that have an isolated context. Based off the Web Components spec
  37. 37. HOW DO WE SHARE CODE?
  38. 38. OR COPY PASTA…
  39. 39. EMBER ADDONS
  40. 40. EMBER ADDONS • Adding preprocessors
  41. 41. EMBER ADDONS • Adding preprocessors • Adding content to consuming applications
  42. 42. EMBER ADDONS • Adding preprocessors • Adding content to consuming applications • Adding custom/extra blueprints, typically for scaffolding application/project files
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. HOW TO INSTALL AN ADDON
  47. 47. LET’S USE A YOUTUBE ADDON
  48. 48. ONE LINE INSTALL AND IT’S AVAILABLE TO USE
  49. 49. NOW… LET’S USE IT INSIDE OUR APP
  50. 50. LET’S LEARN TO “GENERATE”
  51. 51. Shorthand commands are available!
  52. 52. GENERATE OUR INDEX TEMPLATE
  53. 53. USING THE YOUTUBE COMPONENT
  54. 54. LET’S SEE HOW WE DID…
  55. 55. BUILDING FOR PRODUCTION
  56. 56. BUILDING FOR PRODUCTION
  57. 57. QUESTIONS? http://www.ember-cli.com/ Jay Phelps Twitter: @_jayphelps January 28, 2015

×