73
Jay Phelps https://twitter.com/_jayphelps July 29, 2014 Building Large, Real-world Ember Apps What the guides don’t tell you

Building Large, Real-world Ember Apps -- What the guides don't tell you

Embed Size (px)

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

Page 1: Building Large, Real-world Ember Apps -- What 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

Page 2: Building Large, Real-world Ember Apps -- What 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

Page 3: Building Large, Real-world Ember Apps -- What the guides don't tell you

WHO I AM

Jay Phelps

Page 4: Building Large, Real-world Ember Apps -- What the guides don't tell you

WHO I AM

•Ember.js contributor

Jay Phelps

Page 5: Building Large, Real-world Ember Apps -- What the guides don't tell you

WHO I AM

•Ember.js contributor

•CTO at Pivotshare

Jay Phelps

Page 6: Building Large, Real-world Ember Apps -- What the guides don't tell you

WHO I AM

•Ember.js contributor

•CTO at Pivotshare

•Loves code, hates condiments.

Jay Phelps

Page 7: Building Large, Real-world Ember Apps -- What the guides don't tell you

WHO I AM

•Ember.js contributor

•CTO at Pivotshare

•Loves code, hates condiments.

Jay Phelps

twitter: @_jayphelps github: @jayphelps

Page 8: Building Large, Real-world Ember Apps -- What the guides don't tell you

DOES EMBER SCALE?

Page 9: Building Large, Real-world Ember Apps -- What the guides don't tell you

“SCALE” IS A BUZZ WORD

Page 10: Building Large, Real-world Ember Apps -- What the guides don't tell you

BUT THAT’S O.K.

Page 11: Building Large, Real-world Ember Apps -- What the guides don't tell you
Page 12: Building Large, Real-world Ember Apps -- What the guides don't tell you
Page 13: Building Large, Real-world Ember Apps -- What the guides don't tell you

SCALE = OPERATING LEVERAGERelative operating costs go down as overall revenue goes up.

Page 14: Building Large, Real-world Ember Apps -- What the guides don't tell you

WHAT HAS THAT MEANT FOR US?

Page 15: Building Large, Real-world Ember Apps -- What the guides don't tell you

WHAT HAS THAT MEANT FOR US?

•Higher initial investment, i.e. learning curve.

Page 16: Building Large, Real-world Ember Apps -- What the guides don't tell you

WHAT HAS THAT MEANT FOR US?

•Higher initial investment, i.e. learning curve.

•Rapid iteration after.

Page 17: Building Large, Real-world Ember Apps -- What the guides don't tell you

THE FREE STUFF YOU KNOW

Page 18: Building Large, Real-world Ember Apps -- What the guides don't tell you

EMBRACE THE CONVENTIONS

Page 19: Building Large, Real-world Ember Apps -- What the guides don't tell you

EMBRACE THE CONVENTIONS

•Create your own “core” library.

Page 20: Building Large, Real-world Ember Apps -- What the guides don't tell you

EMBRACE THE CONVENTIONS

•Create your own “core” library.

•Base classes with common functionality

Page 21: Building Large, Real-world Ember Apps -- What the guides don't tell you

EMBRACE THE CONVENTIONS

•Create your own “core” library.

•Base classes with common functionality

•Use a custom Ember.Resolver or extend an existing one

Page 22: Building Large, Real-world Ember Apps -- What the guides don't tell you

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

Page 23: Building Large, Real-world Ember Apps -- What the guides don't tell you

YOUR OWN CORE LIB

Page 24: Building Large, Real-world Ember Apps -- What the guides don't tell you

YOUR OWN CORE LIB

•Abstract common functionality

Page 25: Building Large, Real-world Ember Apps -- What the guides don't tell you

YOUR OWN CORE LIB

•Abstract common functionality

•Routes, Views, Controllers, even Ember.Object itself (if you’re careful)

Page 26: Building Large, Real-world Ember Apps -- What the guides don't tell you

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!

Page 27: Building Large, Real-world Ember Apps -- What the guides don't tell you

SIMPLE EXAMPLETransitioning between sibling routes

Page 28: Building Large, Real-world Ember Apps -- What the guides don't tell you

channel.marketing.seo.reports.conversion->

channel.marketing.seo.reports.sessions

Page 29: Building Large, Real-world Ember Apps -- What the guides don't tell you
Page 30: Building Large, Real-world Ember Apps -- What the guides don't tell you
Page 31: Building Large, Real-world Ember Apps -- What the guides don't tell you
Page 32: Building Large, Real-world Ember Apps -- What the guides don't tell you
Page 33: Building Large, Real-world Ember Apps -- What the guides don't tell you

OR

Page 34: Building Large, Real-world Ember Apps -- What the guides don't tell you
Page 35: Building Large, Real-world Ember Apps -- What the guides don't tell you

WHY NOT JUST .REOPEN()?

Page 36: Building Large, Real-world Ember Apps -- What the guides don't tell you

WHY NOT JUST .REOPEN()?

Page 37: Building Large, Real-world Ember Apps -- What the guides don't tell you

WHY NOT JUST .REOPEN()?

•Limit your scope

Page 38: Building Large, Real-world Ember Apps -- What the guides don't tell you

WHY NOT JUST .REOPEN()?

•Limit your scope

• .reopen() affects ALL existing object instances as well

Page 39: Building Large, Real-world Ember Apps -- What the guides don't tell you

WHY NOT JUST .REOPEN()?

Page 40: Building Large, Real-world Ember Apps -- What the guides don't tell you

WHY NOT JUST .REOPEN()?

•Limits scope

• .reopen() affects ALL existing object instances as well

•Allows you to use original, if ever needed

Page 41: Building Large, Real-world Ember Apps -- What the guides don't tell you

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)

Page 42: Building Large, Real-world Ember Apps -- What the guides don't tell you

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?

Page 43: Building Large, Real-world Ember Apps -- What the guides don't tell you

EMBRACE THE CONVENTIONS

Page 44: Building Large, Real-world Ember Apps -- What the guides don't tell you

EMBRACE THE CONVENTIONS

•Create your own “core” library.

•Base classes with common functionality

•Use a custom Ember.Resolver or extend an existing one

Page 45: Building Large, Real-world Ember Apps -- What the guides don't tell you

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

Page 46: Building Large, Real-world Ember Apps -- What the guides don't tell you

CUSTOM RESOLVERS

Page 47: Building Large, Real-world Ember Apps -- What the guides don't tell you

CUSTOM RESOLVERS

•https://www.youtube.com/watch?v=OY0PzrltMYc

Page 48: Building Large, Real-world Ember Apps -- What the guides don't tell you

CUSTOM RESOLVERS

•https://www.youtube.com/watch?v=OY0PzrltMYc

What is a Resolver?? Robert Jackson answers.

Page 49: Building Large, Real-world Ember Apps -- What the guides don't tell you
Page 50: Building Large, Real-world Ember Apps -- What the guides don't tell you
Page 51: Building Large, Real-world Ember Apps -- What the guides don't tell you

CUSTOM RESOLVERS

Page 52: Building Large, Real-world Ember Apps -- What the guides don't tell you

CUSTOM RESOLVERSrequire() is some form of synchronous module lookup

Page 53: Building Large, Real-world Ember Apps -- What the guides don't tell you

WHAT DOES THIS LET US DO?

Page 54: Building Large, Real-world Ember Apps -- What the guides don't tell you

CUSTOM FIRST-CLASS TYPES

Page 55: Building Large, Real-world Ember Apps -- What the guides don't tell you

CUSTOM FIRST-CLASS TYPESTom Dale’s proposal on “Services”

Page 56: Building Large, Real-world Ember Apps -- What the guides don't tell you

WHAT HE PROPOSED

Page 57: Building Large, Real-world Ember Apps -- What the guides don't tell you

WHAT HE PROPOSEDDefining a Service

Page 58: Building Large, Real-world Ember Apps -- What the guides don't tell you

WHAT HE PROPOSED

Page 59: Building Large, Real-world Ember Apps -- What the guides don't tell you

WHAT HE PROPOSEDUsing a Service

Page 60: Building Large, Real-world Ember Apps -- What the guides don't tell you

MY SOLUTION

Page 61: Building Large, Real-world Ember Apps -- What the guides don't tell you

MY SOLUTIONDefining a Service

Page 62: Building Large, Real-world Ember Apps -- What the guides don't tell you

MY SOLUTION

Page 63: Building Large, Real-world Ember Apps -- What the guides don't tell you

MY SOLUTIONUsing a Service

Page 64: Building Large, Real-world Ember Apps -- What the guides don't tell you

COMPUTED INJECTIONS

Page 65: Building Large, Real-world Ember Apps -- What the guides don't tell you

COMPUTED INJECTIONS

•Resolves via type:class-name

Page 66: Building Large, Real-world Ember Apps -- What the guides don't tell you

COMPUTED INJECTIONS

•Resolves via type:class-name

•Creates an instance of the given class when you .get() it

Page 67: Building Large, Real-world Ember Apps -- What the guides don't tell you

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.

Page 68: Building Large, Real-world Ember Apps -- What the guides don't tell you

COMPUTED INJECTIONS

Page 69: Building Large, Real-world Ember Apps -- What the guides don't tell you

COMPUTED INJECTIONSGives you unlimited custom resolver “types”, not just services

Page 70: Building Large, Real-world Ember Apps -- What the guides don't tell you

COMPUTED INJECTIONSGives you unlimited custom resolver “types”, not just services

Available via bower if that’s your thing

Page 71: Building Large, Real-world Ember Apps -- What the guides don't tell you

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

Page 72: Building Large, Real-world Ember Apps -- What the guides don't tell you

QUESTIONS?

https://twitter.com/_jayphelps

Page 73: Building Large, Real-world Ember Apps -- What the guides don't tell you

THANK YOU

https://twitter.com/_jayphelps