Intro to Ember CLI
3 likes1,687 views
Jay Phelps is a senior front-end engineer at Netflix who is passionate about coding and Ember, a client-side application framework. The document explains Ember's project management through ember-cli, which includes tools for file management, code sharing, and an add-on architecture. Additionally, it covers the installation and generation of add-ons for enhancing applications.
Intro to Ember CLI
- 1. Intro to Jay Phelps Twitter: @_jayphelps January 28, 2015
- 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
- 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
- 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! (???)
- 18. Spoiler: it can.
- 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.”
- 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
- 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…