View
393
Download
1
Category
Tags:
Preview:
DESCRIPTION
In this talk, we’ll go over some tips and best practices for creating and maintaining large-scale Ember apps. Creating your own core library, custom resolver types and other D.R.Y. techniques. This was the slideshow for my Ember.js South California Meetup talk on July 29th, 2014 @ Pivotshare
Citation preview
Jay Phelpshttps://twitter.com/_jayphelps
July 29, 2014
Building Large, Real-world Ember AppsWhat the guides don’t tell you
Jay Phelpshttps://twitter.com/_jayphelps
July 29, 2014
Building Large, Real-world Ember AppsWhat the guides don’t tell you
WHO I AM
Jay Phelps
WHO I AM
•Ember.js contributor
Jay Phelps
WHO I AM
•Ember.js contributor
•CTO at Pivotshare
Jay Phelps
WHO I AM
•Ember.js contributor
•CTO at Pivotshare
•Loves code, hates condiments.
Jay Phelps
WHO I AM
•Ember.js contributor
•CTO at Pivotshare
•Loves code, hates condiments.
Jay Phelps
twitter: @_jayphelps github: @jayphelps
DOES EMBER SCALE?
“SCALE” IS A BUZZ WORD
BUT THAT’S O.K.
SCALE = OPERATING LEVERAGERelative operating costs go down as overall revenue goes up.
WHAT HAS THAT MEANT FOR US?
WHAT HAS THAT MEANT FOR US?
•Higher initial investment, i.e. learning curve.
WHAT HAS THAT MEANT FOR US?
•Higher initial investment, i.e. learning curve.
•Rapid iteration after.
THE FREE STUFF YOU KNOW
EMBRACE THE CONVENTIONS
EMBRACE THE CONVENTIONS
•Create your own “core” library.
EMBRACE THE CONVENTIONS
•Create your own “core” library.
•Base classes with common functionality
EMBRACE THE CONVENTIONS
•Create your own “core” library.
•Base classes with common functionality
•Use a custom Ember.Resolver or extend an existing one
EMBRACE THE CONVENTIONS
•Create your own “core” library.
•Base classes with common functionality
•Use a custom Ember.Resolver or extend an existing one
•Ember-CLI or Ember App Kit
YOUR OWN CORE LIB
YOUR OWN CORE LIB
•Abstract common functionality
YOUR OWN CORE LIB
•Abstract common functionality
•Routes, Views, Controllers, even Ember.Object itself (if you’re careful)
YOUR OWN CORE LIB
•Abstract common functionality
•Routes, Views, Controllers, even Ember.Object itself (if you’re careful)
•Don’t .reopen() Ember built-ins, extend!
SIMPLE EXAMPLETransitioning between sibling routes
channel.marketing.seo.reports.conversion->
channel.marketing.seo.reports.sessions
OR
WHY NOT JUST .REOPEN()?
WHY NOT JUST .REOPEN()?
WHY NOT JUST .REOPEN()?
•Limit your scope
WHY NOT JUST .REOPEN()?
•Limit your scope
• .reopen() affects ALL existing object instances as well
WHY NOT JUST .REOPEN()?
WHY NOT JUST .REOPEN()?
•Limits scope
• .reopen() affects ALL existing object instances as well
•Allows you to use original, if ever needed
WHY NOT JUST .REOPEN()?
•Limits scope
• .reopen() affects ALL existing object instances as well
•Allows you to use original, if ever needed
•Future-proof (sorta)
WHY NOT JUST .REOPEN()?
•Limits scope
• .reopen() affects ALL existing object instances as well
•Allows you to use original, if ever needed
•Future-proof (sorta)
•e.g. What if Ember introduces the same method of name?
EMBRACE THE CONVENTIONS
EMBRACE THE CONVENTIONS
•Create your own “core” library.
•Base classes with common functionality
•Use a custom Ember.Resolver or extend an existing one
EMBRACE THE CONVENTIONS
•Create your own “core” library.
•Base classes with common functionality
•Use a custom Ember.Resolver or extend an existing one
•Ember-CLI or Ember App Kit
CUSTOM RESOLVERS
CUSTOM RESOLVERS
•https://www.youtube.com/watch?v=OY0PzrltMYc
CUSTOM RESOLVERS
•https://www.youtube.com/watch?v=OY0PzrltMYc
What is a Resolver?? Robert Jackson answers.
CUSTOM RESOLVERS
CUSTOM RESOLVERSrequire() is some form of synchronous module lookup
WHAT DOES THIS LET US DO?
CUSTOM FIRST-CLASS TYPES
CUSTOM FIRST-CLASS TYPESTom Dale’s proposal on “Services”
WHAT HE PROPOSED
WHAT HE PROPOSEDDefining a Service
WHAT HE PROPOSED
WHAT HE PROPOSEDUsing a Service
MY SOLUTION
MY SOLUTIONDefining a Service
MY SOLUTION
MY SOLUTIONUsing a Service
COMPUTED INJECTIONS
COMPUTED INJECTIONS
•Resolves via type:class-name
COMPUTED INJECTIONS
•Resolves via type:class-name
•Creates an instance of the given class when you .get() it
COMPUTED INJECTIONS
•Resolves via type:class-name
•Creates an instance of the given class when you .get() it
•Tied to parent class. i.e. not a singleton.
COMPUTED INJECTIONS
COMPUTED INJECTIONSGives you unlimited custom resolver “types”, not just services
COMPUTED INJECTIONSGives you unlimited custom resolver “types”, not just services
Available via bower if that’s your thing
COMPUTED INJECTIONSGives you unlimited custom resolver “types”, not just services
Available via bower if that’s your thing
https://github.com/jayphelps/ember-computed-injection
QUESTIONS?
https://twitter.com/_jayphelps
THANK YOU
https://twitter.com/_jayphelps
Recommended