Intro to Ember CLI
70
Intro to Jay Phelps Twitter: @_jayphelps January 28, 2015
-
Upload
jay-phelps -
Category
Software
-
view
302 -
download
3
Transcript of Intro to Ember CLI
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: @jayphelps
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 program in
the form of successive lines of text.”
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 architecture and ecosystem
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 for scaffolding application/project files
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
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
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
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
